/* =========================================================================
   Les pages annexes de l'interface : l'accueil, le tableau de bord et
   l'avancement (AGENT/pages_annexes.py).

   Une seule feuille pour les trois. Les couleurs et les polices reprennent
   AGENT/public/theme.json : fond bleu nuit, or, Cormorant Garamond pour les
   titres, Inter pour le texte. Les maquettes de départ sont dans
   DOCUMENTATION/maquettes/.
   ========================================================================= */

:root {
  --fond: hsl(222 64.5% 12.2%);
  --fond-nuit: hsl(222 71.4% 8.2%);
  --carte: hsl(222.9 60.9% 18%);
  --carte-2: hsl(223.6 58.8% 25.7%);
  --texte: hsl(225.9 100% 96.7%);
  --attenue: hsl(221.3 45.2% 73.5%);
  --or: hsl(44.5 71.3% 65.9%);
  --bord: hsl(44.5 71.3% 65.9% / 0.22);
  --vert: hsl(150 45% 55%);
  --ambre: hsl(36 85% 60%);
  --rouge: hsl(4 70% 62%);
  --gris: hsl(221 20% 55%);
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte);
  font: 14px/1.5 Inter, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column;
}

/* Graisse et chiffres alignés posés explicitement : une Cormorant installée sur
   le poste peut sinon l'emporter, en maigre et en chiffres elzéviriens. */
h1, h2, h3 { font-family: "Cormorant Garamond", serif; font-weight: 700; color: var(--or); margin: 0;
             font-variant-numeric: lining-nums; }
.valeur, .chiffre b, .etape b, .repere, .marque .nom { font-variant-numeric: lining-nums; }
h1 { font-size: 28px; }
h2 { font-size: 22px; margin-bottom: 12px; }
h3 { font-size: 19px; }
code { font: 500 12.5px ui-monospace, "SF Mono", Menlo, monospace; }

/* --- L'en-tête ----------------------------------------------------------- */

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; border-bottom: 1px solid var(--bord); background: var(--fond-nuit);
}
.marque { display: flex; align-items: center; gap: 16px; }
.marque a { display: flex; }
.logo { width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--bord); }
.marque .nom { font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 700; color: var(--or); letter-spacing: .04em; }
.sous-titre { color: var(--attenue); font-size: 13px; }
.entete-liens { display: flex; gap: 10px; }
.bouton {
  border: 1px solid var(--or); color: var(--or); background: transparent;
  padding: 6px 14px; border-radius: 6px; font-weight: 500; text-decoration: none;
}
.bouton:hover { background: hsl(44.5 71.3% 65.9% / .12); }
nav { display: flex; gap: 26px; font-size: 14px; }
nav a { color: var(--attenue); text-decoration: none; }
nav a:hover { color: var(--texte); }
nav a.actif { color: var(--or); border-bottom: 1px solid var(--or); padding-bottom: 2px; }

main { padding: 24px 32px 48px; display: grid; gap: 24px; }
section.bloc {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 8px; padding: 18px 20px;
}
.legende { color: var(--attenue); font-size: 12px; margin-top: 10px; }
.indisponible { color: var(--attenue); font-style: italic; }

footer {
  border-top: 1px solid var(--bord); padding: 16px 32px; color: var(--attenue); font-size: 12.5px;
  display: flex; justify-content: space-between; gap: 24px; background: var(--fond-nuit);
}

/* --- Les chiffres clés --------------------------------------------------- */

.cles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cle { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 16px 18px; }
.cle .valeur { font-family: "Cormorant Garamond", serif; font-size: 38px; font-weight: 700; color: var(--or); line-height: 1.1; }
.cle .libelle { font-weight: 600; }
.cle .detail { color: var(--attenue); font-size: 12px; }

.deux { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }

/* --- Les tableaux -------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--attenue); font-weight: 500; font-size: 12px;
     text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px;
     border-bottom: 1px solid var(--bord); }
td { padding: 8px; border-bottom: 1px solid hsl(44.5 71.3% 65.9% / 0.08); vertical-align: top; }
th.nombre, td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.vert { background: var(--vert); } .ambre { background: var(--ambre); }
.rouge { background: var(--rouge); } .gris { background: var(--gris); }
.taux { color: var(--or); font-weight: 600; }

/* --- Les avis par année -------------------------------------------------- */

.histogramme { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 8px; }
.barre { flex: 1; background: var(--carte-2); border-top: 2px solid var(--or); position: relative; min-height: 2px; }
.barre:hover { background: hsl(44.5 71.3% 65.9% / 0.35); }
.barre span { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
              font-size: 10px; color: var(--attenue); }
.barre.zone-d { background: hsl(44.5 60% 45% / 0.75); }
.histogramme + .legende { margin-top: 28px; }

/* --- Les outils de l'agent ----------------------------------------------- */

.familles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.famille { border: 1px solid var(--bord); border-radius: 6px; padding: 10px 14px; background: var(--fond); }
.famille h3 { font-size: 18px; margin: 0 0 6px; }
.famille .compte { float: right; color: var(--attenue); font: 12px Inter, sans-serif; margin-top: 4px; }
.outil { padding: 5px 0; border-top: 1px solid hsl(44.5 71.3% 65.9% / 0.08); }
.outil code { color: var(--or); }
.outil div { color: var(--attenue); font-size: 12.5px; }

/* --- L'avancement -------------------------------------------------------- */

.compteurs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.compteur { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 14px 18px; }
.compteur .valeur { font-family: "Cormorant Garamond", serif; font-size: 36px; font-weight: 700; line-height: 1.1; }
.compteur .libelle { color: var(--attenue); font-size: 13px; }
.v-vert { color: var(--vert); } .v-ambre { color: var(--ambre); } .v-attenue { color: var(--attenue); }

.fil { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 6px; }
.etape { text-align: center; font-size: 12px; color: var(--attenue); }
.etape .trait { height: 8px; border-radius: 4px; background: var(--carte-2); margin-bottom: 8px; }
.etape.fait .trait { background: var(--vert); }
.etape.a_completer .trait { background: var(--ambre); }
.etape b { display: block; font-family: "Cormorant Garamond", serif; font-size: 20px; color: var(--texte); }
.etape.fait b { color: var(--vert); } .etape.a_completer b { color: var(--ambre); }

.grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grille.trois { grid-template-columns: repeat(3, 1fr); }
.grille.quatre { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chantier { border: 1px solid var(--bord); border-radius: 6px; padding: 12px 14px; background: var(--fond); }
.chantier .repere { font-family: "Cormorant Garamond", serif; font-size: 24px; color: var(--or); margin-right: 8px; }
.chantier .titre { font-weight: 600; }
.chantier .date { color: var(--attenue); font-size: 12px; float: right; margin-top: 6px; }
.chantier p { color: var(--attenue); font-size: 13px; margin: 6px 0 0; }
.etat { font-size: 11px; padding: 1px 8px; border-radius: 10px; margin-left: 6px; vertical-align: 2px; }
.e-fait { background: hsl(150 45% 55% / .2); color: var(--vert); }
.e-a_completer { background: hsl(36 85% 60% / .2); color: var(--ambre); }
.e-a_faire, .e-second_plan { background: hsl(221 20% 55% / .25); color: var(--attenue); }
.e-en_cours { background: hsl(44.5 71.3% 65.9% / .18); color: var(--or); }
ul.reste { list-style: none; padding: 0; margin: 8px 0 0; }
ul.reste li { padding: 3px 0 3px 22px; position: relative; font-size: 13px; }
ul.reste li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 11px; height: 11px;
                      border: 1.5px solid var(--attenue); border-radius: 3px; }
ul.reste li.fait::before { background: var(--vert); border-color: var(--vert); }
ul.reste li.fait { color: var(--attenue); text-decoration: line-through; }
ul.reste li .qui { color: var(--or); font-size: 11px; margin-left: 4px; }

/* --- L'accueil ----------------------------------------------------------- */

body.accueil { font-size: 15px; line-height: 1.6; }
body.accueil header { padding: 18px 40px; }
body.accueil .logo { width: 48px; height: 48px; }
.accueil-corps {
  flex: 1; display: grid; grid-template-columns: 1.45fr 1fr; gap: 56px;
  padding: 56px 40px 40px; max-width: 1280px; width: 100%; margin: 0 auto;
}
.presentation .grand-logo { width: 132px; height: 132px; border-radius: 22px; border: 1px solid var(--bord);
                            box-shadow: 0 0 40px hsl(215 90% 55% / .25); margin-bottom: 26px; }
.presentation h1 { font-size: 46px; line-height: 1.1; margin-bottom: 14px; }
.presentation .chapeau { font-size: 17px; color: var(--attenue); max-width: 620px; margin: 0 0 30px; }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 34px; }
.chiffre { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 12px 14px; }
.chiffre b { display: block; font-family: "Cormorant Garamond", serif; font-size: 30px; color: var(--or); line-height: 1.1; }
.chiffre span { color: var(--attenue); font-size: 12.5px; }
.presentation h2 { font-size: 23px; }
.entrees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.entree { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 16px 16px 34px; position: relative; }
.entree h3 { font-size: 20px; margin-bottom: 6px; }
.entree p { color: var(--attenue); font-size: 13px; margin: 0; }
.entree .cadenas, .entree .libre { position: absolute; bottom: 10px; right: 14px; font-size: 12px; }
.entree .cadenas { color: var(--attenue); }
.entree .libre { color: var(--or); font-weight: 500; }
a.entree { color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.entree:hover { border-color: var(--or); transform: translateY(-2px); }
.entree.protegee { border-color: hsl(44.5 71.3% 65.9% / 0.45); }
.note { color: var(--attenue); font-size: 12.5px; margin-top: 12px; }

.connexion {
  align-self: start; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px;
  padding: 34px 32px; margin-top: 158px; box-shadow: 0 10px 40px hsl(222 71% 5% / .5);
}
.connexion h2 { font-size: 28px; margin-bottom: 4px; }
.connexion .sous { color: var(--attenue); font-size: 13.5px; margin-bottom: 24px; }
.connexion label { display: block; font-size: 13px; font-weight: 500; margin: 0 0 6px; }
.connexion input {
  width: 100%; padding: 11px 13px; margin-bottom: 18px; border-radius: 7px;
  border: 1px solid hsl(44.5 71.3% 65.9% / 0.28); background: var(--fond-nuit); color: var(--texte);
  font: inherit;
}
.connexion input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px hsl(44.5 71.3% 65.9% / .18); }
.connexion input:disabled { opacity: .45; }
.connexion button[type="submit"], .connexion .bouton-plein {
  display: block; width: 100%; padding: 12px; border: 0; border-radius: 7px; cursor: pointer; text-align: center;
  background: var(--or); color: var(--fond-nuit); font: 600 15px Inter, sans-serif; text-decoration: none;
}
.connexion button[type="submit"]:hover, .connexion .bouton-plein:hover { filter: brightness(1.07); }
.connexion button[type="submit"]:disabled { opacity: .45; cursor: default; filter: none; }
.message { border-radius: 6px; padding: 8px 12px; font-size: 13px; margin-bottom: 16px; }
.message.erreur { background: hsl(4 70% 62% / .15); color: hsl(4 80% 75%); }
.message.info { background: hsl(44.5 71.3% 65.9% / .12); color: var(--or); }
.pied-connexion { color: var(--attenue); font-size: 12.5px; margin-top: 18px; text-align: center; }
[hidden] { display: none !important; }

/* --- Les pages des comptes (pages_comptes.py) ---------------------------- */

.page-compte { max-width: 1180px; width: 100%; margin: 0 auto; }
button.bouton { font: 500 14px Inter, sans-serif; cursor: pointer; }
button.bouton:disabled { opacity: .5; cursor: default; }
.bouton-petit { padding: 3px 10px; font-size: 12.5px !important; }
.bouton-plein {
  display: inline-block; padding: 10px 18px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--or); color: var(--fond-nuit); font: 600 14px Inter, sans-serif; text-decoration: none;
  text-align: center;
}
.bouton-plein:hover { filter: brightness(1.07); }
.page-compte input, .page-compte select {
  padding: 9px 12px; border-radius: 7px; border: 1px solid hsl(44.5 71.3% 65.9% / 0.28);
  background: var(--fond-nuit); color: var(--texte); font: inherit; margin-top: 4px;
}
.page-compte input:focus, .page-compte select:focus {
  outline: none; border-color: var(--or); box-shadow: 0 0 0 3px hsl(44.5 71.3% 65.9% / .18);
}
.page-compte label { display: flex; flex-direction: column; font-size: 13px; font-weight: 500; }
.formulaire-ligne { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.formulaire-ligne label:first-of-type { flex: 1; min-width: 280px; }
.formulaire-pile { display: grid; gap: 14px; margin-top: 8px; }
.formulaire-etroit { max-width: 520px; margin: 0 auto; width: 100%; }
td.actions { white-space: nowrap; text-align: right; }
td.actions form { display: inline; margin-left: 6px; }
.connecte { font-size: 14px; color: var(--attenue); margin-bottom: 18px; }
.connecte b { color: var(--texte); }
.pile-boutons { display: grid; gap: 10px; }
.pile-boutons .bouton { text-align: center; padding: 9px 14px; }
.connexion button.bouton {
  background: transparent; color: var(--or); border: 1px solid var(--or);
  font: 500 14px Inter, sans-serif; padding: 9px 14px;
}
.connexion button.bouton:hover { background: hsl(44.5 71.3% 65.9% / .12); filter: none; }

/* --- L'œil des champs de mot de passe (compte.js) ------------------------ */

.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 44px !important; margin-top: 0 !important; margin-bottom: 0 !important; width: 100%; }
.connexion .champ-mdp { margin-bottom: 18px; }
.page-compte .champ-mdp { margin-top: 4px; }
.oeil {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--attenue);
}
.oeil:hover, .oeil[aria-pressed="true"] { color: var(--or); background: hsl(44.5 71.3% 65.9% / .1); }
.oeil:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }

/* --- Les modèles (page d'administration) --------------------------------- */

.sous-section { font-size: 18px; margin: 18px 0 10px; }
.choix-modeles { display: grid; gap: 6px; margin-bottom: 14px; }
.choix-modele {
  display: grid; grid-template-columns: 22px 1.2fr 1.6fr 1fr auto; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid hsl(44.5 71.3% 65.9% / 0.14); border-radius: 6px;
  background: var(--fond); cursor: pointer; font-size: 13.5px;
}
.choix-modele:hover { border-color: var(--bord); }
.choix-modele.actuel { border-color: hsl(150 45% 55% / .5); }
.choix-modele input { margin: 0; accent-color: var(--or); }
.choix-modele code { color: var(--attenue); }
.nom-modele { font-weight: 600; }
.prix-modele { color: var(--attenue); font-variant-numeric: tabular-nums; }
.attente { color: var(--or); font-weight: 500; }

/* Le mode de fonctionnement : même carte que le choix d'un modèle, sur
   quatre colonnes — le bouton, le nom, ce que fait le mode, l'état. */
.choix-modele.choix-mode { grid-template-columns: 22px 8em 1fr auto; }
.effet-mode { color: var(--attenue); line-height: 1.45; }

/* --- Les onglets de l'administration ------------------------------------- */

.onglets {
  display: flex; gap: 4px; border-bottom: 1px solid var(--bord); margin-bottom: 4px;
}
.onglet {
  padding: 10px 18px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
  color: var(--attenue); text-decoration: none; font-weight: 500; margin-bottom: -1px;
}
.onglet:hover { color: var(--texte); background: hsl(44.5 71.3% 65.9% / .06); }
.onglet.actif {
  color: var(--or); background: var(--carte); border-color: var(--bord);
  border-bottom: 1px solid var(--carte);
}

/* --- L'onglet des données ------------------------------------------------ */

table.sources-a-jour td { vertical-align: top; }
table.sources-a-jour td:first-child { width: 28px; padding-top: 11px; }
table.sources-a-jour td:last-child { width: 30%; }
.source-ligne { color: var(--attenue); font-size: 12.5px; margin-top: 3px; }
.option-a-blanc { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px;
                  margin: 14px 0; font-weight: 400 !important; color: var(--attenue); }
.option-a-blanc input { margin: 0 !important; accent-color: var(--or); }
pre.journal {
  background: var(--fond-nuit); border: 1px solid var(--bord); border-radius: 6px; padding: 10px 12px;
  max-height: 340px; overflow: auto; font: 12px/1.45 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--attenue); white-space: pre-wrap; margin: 10px 0;
}

/* La règle générale des étiquettes de formulaire (colonne) ne vaut ni pour le
   choix d'un modèle, ni pour l'option à blanc : on la défait ici. */
.page-compte label.choix-modele { display: grid; flex-direction: initial; font-weight: 400; }
.page-compte table a, .page-compte .legende a { color: var(--or); }