/* Mise en page générale — repose uniquement sur les variables de theme.css. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  line-height: 1.5;
}

a { color: var(--couleur-accent); }

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--couleur-fond-carte);
  border-bottom: 1px solid var(--couleur-bordure);
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete .logo { font-weight: 700; font-size: 1.1rem; }
.marque-application { color: var(--couleur-texte); text-decoration: none; }

.navigation { display: flex; gap: 1rem; flex-wrap: wrap; }
.navigation a { text-decoration: none; color: var(--couleur-texte); font-weight: 500; }
.navigation a:hover { color: var(--couleur-accent); }

.entete-droite { display: flex; align-items: center; gap: 1rem; }

.conteneur { max-width: 960px; margin: 0 auto; padding: 1.5rem; }

/* Conteneur élargi, réservé aux pages dont le contenu a besoin de plus que les 960px
   standard (ajouté le 2026-09-05, demande explicite pour la page Candidature — voir
   `classe_conteneur` dans base.html/candidatures.html). Un premier plafond à 1400px
   s'est révélé insuffisant en pratique (retour explicite de l'utilisateur avec
   capture d'écran : le tableau restait comprimé) — `max-width: none` retire toute
   limite : la page utilise alors toute la largeur de la fenêtre du navigateur
   disponible (moins le padding hérité de .conteneur ci-dessus), quelle que soit la
   taille d'écran. `margin: 0 auto` (hérité) n'a alors plus d'effet visible (plus rien
   à centrer une fois la largeur maximale supprimée), ce qui est le but recherché ici. */
.conteneur-large { max-width: none; }

.carte {
  background: var(--couleur-fond-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

h1, h2, h3 { margin-top: 0; }

.grille-formulaire { display: grid; gap: 0.75rem; max-width: 480px; }

label { font-weight: 600; font-size: 0.9rem; }

input, select, textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-size: 1rem;
}

/* Les cases à cocher/boutons radio ne doivent pas hériter du style pleine-largeur
   pensé pour les champs texte ci-dessus, sans quoi elles s'étirent sur toute la
   largeur du formulaire et se retrouvent visuellement décrochées de leur étiquette. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  padding: 0;
  accent-color: var(--couleur-accent);
}

textarea { min-height: 6rem; font-family: inherit; }

.ligne-case-a-cocher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.bouton {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--rayon);
  border: 1px solid var(--couleur-accent);
  background: var(--couleur-accent);
  color: var(--couleur-accent-texte);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.bouton-discret {
  background: transparent;
  color: var(--couleur-texte);
  border-color: var(--couleur-bordure);
}

.bouton-danger { background: var(--couleur-danger); border-color: var(--couleur-danger); color: #fff; }

/* Bouton désactivé (ex. "Analyser avec l'IA" quand aucune description n'est disponible,
   ajouté le 2026-09-03) : grisé et non cliquable, quelle que soit la variante de bouton. */
.bouton:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: var(--couleur-bordure);
  border-color: var(--couleur-bordure);
  color: var(--couleur-texte);
}

/* Bouton "Modifier" en <summary> d'un <details> (formulaire d'édition repliable, sans
   JS) : retire le triangle de divulgation par défaut du navigateur pour qu'il ait
   exactement l'apparence d'un .bouton-discret normal. */
summary.bouton {
  list-style: none;
}
summary.bouton::-webkit-details-marker {
  display: none;
}
details[open] > summary.bouton {
  margin-bottom: 0.75rem;
}

.message-erreur,
.message-succes,
.message-alerte,
.message-conseil {
  padding: 0.6rem 0.8rem;
  border-radius: var(--rayon);
  margin-bottom: 1rem;
  border: 1px solid;
}

.message-erreur {
  background: color-mix(in srgb, var(--couleur-danger) 15%, transparent);
  border-color: var(--couleur-danger);
  color: var(--couleur-danger);
}

.message-succes {
  background: color-mix(in srgb, var(--couleur-succes) 15%, transparent);
  border-color: var(--couleur-succes);
  color: var(--couleur-succes);
}

.message-alerte {
  background: color-mix(in srgb, var(--couleur-alerte) 15%, transparent);
  border-color: var(--couleur-alerte);
  color: var(--couleur-alerte);
}

/* Conseil/astuce : information neutre, pas une erreur ni une alerte — couleur d'accent
   plutôt que texte teinté, pour rester lisible sans avoir l'air d'un avertissement. */
.message-conseil {
  background: color-mix(in srgb, var(--couleur-accent) 10%, transparent);
  border-color: var(--couleur-accent);
  color: var(--couleur-texte);
}

.etiquette {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.etiquette-candidater { background: color-mix(in srgb, var(--couleur-succes) 20%, transparent); color: var(--couleur-succes); }
.etiquette-refuser { background: color-mix(in srgb, var(--couleur-danger) 20%, transparent); color: var(--couleur-danger); }
.etiquette-a_examiner { background: color-mix(in srgb, var(--couleur-alerte) 20%, transparent); color: var(--couleur-alerte); }

/* Verdict de compatibilité profil/annonce (§22.3, ajouté le 2026-09-05) : mêmes
   couleurs que candidater/refuser (même sémantique favorable/défavorable), classes
   séparées puisque le vocabulaire du verdict (compatible/incompatible) est distinct de
   celui de la suggestion IA candidater/refuser (voir VerdictCompatibilite, §22.3). */
.etiquette-compatible { background: color-mix(in srgb, var(--couleur-succes) 20%, transparent); color: var(--couleur-succes); }
.etiquette-incompatible { background: color-mix(in srgb, var(--couleur-danger) 20%, transparent); color: var(--couleur-danger); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--couleur-bordure); }

/* Tableau de la page Candidature (§24, ajouté le 2026-09-05) — premier <table> du
   projet. .tableau-scroll permet un défilement horizontal indépendant du reste de la
   page si la fenêtre est trop étroite pour les 6 colonnes, plutôt que de casser la
   mise en page (voir la règle générale « aucun scroll horizontal sur le corps de la
   page » appliquée aux autres contenus larges du site, ex. zones de texte IA). */
.tableau-scroll { overflow-x: auto; margin-bottom: 1rem; }
/* `min-width` (ajouté le 2026-09-05, retour explicite de l'utilisateur avec capture
   d'écran à l'appui) corrige la vraie cause du tableau visuellement comprimé : la
   règle générale `table { width: 100% }` ci-dessus forçait CE tableau à toujours
   « rentrer » exactement dans la largeur de `.tableau-scroll`, quel que soit le nombre
   de colonnes — au lieu de déborder proprement et de laisser `.tableau-scroll`
   (overflow-x: auto) faire apparaître un défilement horizontal, ses colonnes et les
   champs de filtre qu'elles contiennent (§24.7) se comprimaient jusqu'à couper du
   texte (ex. placeholder « Rechercher... » tronqué). `min-width` empêche ce
   rétrécissement en dessous d'une largeur confortable pour 8 colonnes (§24.9) tout en
   gardant `width: 100%` pour profiter pleinement du conteneur élargi (`.conteneur-large`
   ci-dessus) quand il est plus large que ce minimum. */
.tableau-candidatures { background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); min-width: 1300px; }
.tableau-candidatures th { color: var(--couleur-texte-attenue); font-size: 0.85rem; text-transform: uppercase; }
.tableau-candidatures tbody tr:hover { background: color-mix(in srgb, var(--couleur-accent) 6%, transparent); }

/* Bouton de tri par en-tête de colonne (§32, ajouté le 2026-09-06, demande explicite :
   « Il faut pouvoir faire des tries grâce à l'entête des colonnes dans la table
   "Candidature" dans toutes les colonnes ») : hérite du style de texte de l'en-tête
   (couleur atténuée, majuscules, taille) plutôt que d'avoir l'apparence d'un .bouton
   classique — seul le curseur et le soulignement au survol signalent qu'il est
   cliquable, pour ne pas surcharger visuellement une ligne d'en-tête déjà dense. */
.bouton-tri {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.bouton-tri:hover { text-decoration: underline; }

/* Ligne de filtres par colonne du tableau Candidature (§24.7, ajouté le 2026-09-05) —
   un contrôle par colonne filtrable (aucun sur la colonne Actions, comme demandé).
   text-transform/font-size réinitialisés (contrairement aux th d'en-tête ci-dessus) :
   cette ligne porte des contrôles de formulaire, pas des libellés. */
.ligne-filtres th { text-transform: none; font-weight: normal; padding: 0.35rem 0.5rem; }
.ligne-filtres input, .ligne-filtres select { width: 100%; box-sizing: border-box; font-size: 0.85rem; padding: 0.25rem; }
.ligne-filtres .bouton { font-size: 0.8rem; padding: 0.3rem 0.5rem; white-space: nowrap; }

/* Plage de deux dates (debut/fin) dans une seule cellule de filtre (colonnes
   Date/Date candidate, ajoute le 2026-09-05, paragraphe 24.8, demande explicite :
   faut une date debut a une date fin soit donc des filtres entre deux dates).
   Empiles verticalement plutot que cote a cote : la colonne est deja etroite (voir
   .ligne-filtres input ci-dessus, largeur 100% de la cellule), les mettre cote a
   cote rendrait chaque champ trop petit pour afficher une date. */
.plage-dates { display: flex; flex-direction: column; gap: 0.25rem; }

.texte-attenue { color: var(--couleur-texte-attenue); font-size: 0.9rem; }

/* Statut d'extraction automatique du texte d'un PDF (profils.html + extraction_pdf.js) */
.statut-extraction { margin: 0.25rem 0 0; min-height: 1em; }
.statut-extraction-erreur { color: var(--couleur-danger); }

.barre-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }

form.en-ligne { display: inline; }

/* Popup de détail d'une annonce (annonces.html) : repose sur l'API HTML native
   « popover » (attribut popover + popovertarget), pas de JavaScript — le navigateur
   gère seul l'ouverture/fermeture, la fermeture au clic extérieur et à la touche
   Échap, et l'affichage dans le top layer (au-dessus du reste de la page).
   Agrandissable par l'utilisateur (ajouté le 2026-09-05, demande explicite) via la
   propriété CSS native `resize` — même mécanisme, déjà en place, que la zone de texte
   IA du popup (.zone-texte-ia, resize: vertical) : une poignée apparaît en bas à droite,
   sans JavaScript. `overflow: auto` (les deux axes, pas seulement vertical comme avant)
   est nécessaire pour que le navigateur affiche cette poignée de redimensionnement.

   Largeur par défaut considérablement augmentée le 2026-09-06 (§26.1, demande
   explicite de l'utilisateur : « Il faudrait aussi augmenter considérablement la
   largeur de la fenetre modale ») : 640px → 1100px (quasiment le double), profite
   surtout aux deux grandes zones de texte de l'onglet « Contenu, résumé &
   compatibilité (IA) » (.zone-texte-ia, 14 lignes, largeur 100% de leur conteneur),
   trop étroites jusqu'ici pour lire confortablement le contenu complet d'une annonce
   ou un résumé sans défilement horizontal ni redimensionnement manuel systématique.
   `resize: both` (ci-dessus) reste disponible pour l'agrandir davantage au besoin. */
.popup-detail-annonce {
  position: fixed;
  inset: 0;
  width: min(1100px, 92vw);
  height: fit-content;
  min-width: 320px;
  min-height: 200px;
  max-width: 96vw;
  max-height: 92vh;
  overflow: auto;
  resize: both;
  margin: auto;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-fond-carte);
  color: var(--couleur-texte);
}

.popup-detail-annonce::backdrop {
  background: rgb(0 0 0 / 45%);
}

.popup-detail-annonce-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.popup-detail-annonce-entete h3 { margin-bottom: 0; }

.popup-detail-annonce-texte {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 1rem 0 1.25rem;
}

/* Confirmation de clôture d'une annonce, à 3 boutons (Oui/Non/Annuler, ajouté le
   2026-09-05, page Candidature) : même mécanisme natif « popover » que le popup de
   détail ci-dessus, mais en plus petit et centré (pas de resize, pas de scroll — c'est
   une simple question). */
.popup-confirmation {
  position: fixed;
  inset: 0;
  width: min(420px, 90vw);
  height: fit-content;
  margin: auto;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-fond-carte);
  color: var(--couleur-texte);
}

.popup-confirmation::backdrop {
  background: rgb(0 0 0 / 45%);
}

.actions-confirmation {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* Suivi par annonce dans le popup de détail (contacts liés, conversation, journal des
   échanges, actions à faire — ajouté le 2026-09-04, §20) : chaque section est un
   <details> replié par défaut pour ne pas alourdir le popup. */
.section-suivi {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--couleur-bordure);
}

.section-suivi .grille-formulaire {
  margin-top: 0.75rem;
  max-width: none;
}

.liste-suivi {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.liste-suivi li {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.liste-suivi li > p { margin: 0.4rem 0 0; }

/* Onglets « Contenu de la page » / « Résumé IA » (§21, revu le 2026-09-05 suite au
   retour de l'utilisateur : « il faudrait un onglet et dans le deuxième onglet une
   zone de type textarea suffisamment grande » plutôt que deux boutons suivis d'un
   texte affiché en <p>). Implémenté en CSS pur avec des cases à cocher radio masquées
   visuellement (mais gardées accessibles au clavier, contrairement à display:none) et
   un sélecteur de frères généraux (~) pour afficher le panneau correspondant à
   l'onglet coché — cohérent avec le reste du site qui n'utilise aucun JavaScript pour
   ce type d'interaction (popover, <details>...). Les classes sont génériques (pas
   d'ID unique référencé en CSS) : plusieurs instances peuvent coexister sur la même
   page (une par annonce), chacune scindée par son propre attribut `name` de radio. */
.onglets-contenu-ia {
  margin-top: 0.75rem;
}

.onglet-radio {
  /* Masqué visuellement sans `display:none`, pour rester atteignable au clavier
     (Tab) et par lecteur d'écran — motif « visually hidden » standard. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.onglet-label {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  margin-right: 0.25rem;
  border: 1px solid var(--couleur-bordure);
  border-bottom: none;
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: transparent;
  color: var(--couleur-texte-attenue);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.onglet-radio:checked + .onglet-label {
  background: var(--couleur-fond-carte);
  color: var(--couleur-texte);
  border-color: var(--couleur-accent);
}

.onglet-radio:focus-visible + .onglet-label {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 1px;
}

.onglet-panneau {
  display: none;
  padding: 0.75rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 0 var(--rayon) var(--rayon) var(--rayon);
}

.onglet-radio-page:checked ~ .onglet-panneau-page,
.onglet-radio-resume:checked ~ .onglet-panneau-resume,
.onglet-radio-compat:checked ~ .onglet-panneau-compat {
  display: block;
}

/* Liste des comparaisons de compatibilité déjà calculées pour une annonce (§22.3,
   ajoutée le 2026-09-05) : un bloc par profil comparé, même composant visuel que
   `.liste-suivi` (§20) avec un espacement au-dessus du sélecteur/bouton qui la précède
   dans le même panneau d'onglet. */
.liste-compatibilite {
  margin-top: 0.75rem;
}

/* Zone de texte partagée par les deux onglets (contenu complet / résumé IA) : en
   lecture seule (résultat généré, pas un champ à modifier — aucune route n'existe
   pour en enregistrer une édition), mais bien un <textarea> pour offrir une zone
   large, redimensionnable et au texte facilement sélectionnable/copiable, comme
   demandé par l'utilisateur. */
.zone-texte-ia {
  width: 100%;
  min-height: 16rem;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9em;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 0.6rem 0.75rem;
}

/* Tableau de bord (§25, ajouté le 2026-09-06, demande explicite : « Construit moi une
   page de dashboard pour son contenu je m'en remets à toi »). Quatre tuiles de
   comptage (.grille-kpi/.carte-kpi), puis une grille de cartes plus larges pour les
   répartitions et listes (.grille-tableau-de-bord), chaque carte réutilisant `.carte`
   déjà en place ailleurs sur le site. */
.grille-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.carte-kpi { text-align: center; margin-bottom: 0; }

.carte-kpi .nombre-kpi { font-size: 2.25rem; font-weight: 700; line-height: 1.2; }

.carte-kpi .libelle-kpi { color: var(--couleur-texte-attenue); font-size: 0.9rem; }

/* Tuile « Actions en retard » mise en évidence uniquement quand son nombre est non nul
   (voir `{% if nombre_actions_en_retard %}` dans le gabarit) — même couleur que
   `.message-alerte`, une échéance dépassée n'est pas une erreur bloquante mais mérite
   d'attirer l'œil. */
.carte-kpi-alerte .nombre-kpi { color: var(--couleur-alerte); }

.grille-tableau-de-bord {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
}

.grille-tableau-de-bord .carte { margin-bottom: 0; }

.grille-tableau-de-bord .bouton { margin-top: 0.75rem; }

/* Barres de répartition en CSS pur (§25) : la largeur de `.barre-repartition-remplissage`
   est fixée en ligne (`style="width: N%"`, calculée par `tableau_de_bord_service.py`)
   plutôt que par une bibliothèque de graphique — cohérent avec la règle « aucun
   JavaScript » déjà suivie partout ailleurs sur le site. */
.liste-repartition {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.repartition-entete {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.barre-repartition-fond {
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: 999px;
  height: 0.6rem;
  overflow: hidden;
}

.barre-repartition-remplissage {
  height: 100%;
  background: var(--couleur-accent);
  border-radius: 999px;
}