/* rapport.css — l'écran de rapport de la plateforme.
 *
 * UN SEUL gabarit (CDC §9, réécrit le 2026-08-19 : « on doit construire une
 * plateforme, le PDF n'est que le moyen d'imprimer les données »). Cette
 * feuille habille la page consultée dans l'espace client ET la page imprimée
 * en PDF ; seules les surcharges propres au papier vivent dans
 * `impression.css`. L'identité visuelle du PDF est donc celle du site, point
 * explicite de docs/CHARTE-UI.md.
 *
 * Les valeurs ci-dessous sont celles de la maquette validée par le
 * propriétaire (écran 4, « rapport en ligne ») et de la charte :
 * - palette exacte, un seul accent teal, aucune photo ni illustration ;
 * - typographie système, base 16 px / interligne 1,5 ;
 * - échelle d'espace 4 / 8 / 12 / 16 / 24 / 32 / 48, rayons 4 et 8 ;
 * - un score se lit en quadruplet jauge + chiffre + libellé + couleur ;
 * - une alerte porte fond, bordure gauche, icône, titre, corps et gravité
 *   écrite en toutes lettres ;
 * - une valeur absente est grisée ET motivée, jamais une case vide ;
 * - divulgation progressive : les cinq chapitres sont des accordéons, le
 *   premier — le bien, sa valeur, la décision — ouvert.
 */

/* ---------------------------------------------------------------------------
   1. Jetons
   --------------------------------------------------------------------------- */
:root {
  /* Palette de la maquette — valeurs exactes. */
  --fond: #FAFAF9;
  --surf: #FFFFFF;
  --enc: #1C1917;
  --enc2: #57534E;
  --acc: #0F766E;
  --ok: #15803D;
  --attn: #B45309;
  --maj: #B91C1C;
  --bord: #E7E5E4;
  --disabled: #F5F5F4;

  /* Fonds d'état de la maquette : alertes et badges. */
  --fond-ok: #ECFDF5;
  --fond-attn: #FFFBEB;
  --fond-maj: #FEF2F2;
  --fond-neutre: #F5F5F4;
  --badge-ok: #DCFCE7;
  --badge-attn: #FEF3C7;
  --badge-maj: #FEE2E2;
  --badge-neutre: #F5F5F4;

  --ombre: 0 1px 3px rgba(0, 0, 0, 0.06);

  /* Échelle d'espace — aucune valeur hors échelle. */
  --e4: 4px;
  --e8: 8px;
  --e12: 12px;
  --e16: 16px;
  --e24: 24px;
  --e32: 32px;
  --e48: 48px;

  --rayon-ctrl: 4px;
  --rayon-carte: 8px;
  --cible: 48px; /* cible tactile minimale des contrôles */

  /* Échelle typographique de la maquette. */
  --t-score: 4rem;        /* 64 px — score global */
  --t-indice: 2.25rem;    /* 36 px — indices /100 */
  --t-pilier: 1.5rem;     /* 24 px — score de pilier, titre de chapitre */
  --t-section: 1.25rem;   /* 20 px — titre de section */
  --t-corps-large: 1.125rem; /* 18 px */
  --t-corps: 1rem;        /* 16 px */
  --t-label: 0.875rem;    /* 14 px */
  --t-meta: 0.8125rem;    /* 13 px — méta, sources, légendes */
}

/* Mode sombre (CHARTE-UI §8) : même structure, mêmes états. Les fonds d'état
   clairs de la maquette y deviennent la couleur d'état en transparence — la
   seule façon de garder les mêmes teintes lisibles sur fond sombre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #1C1917;
    --surf: #292524;
    --enc: #FAFAF9;
    --enc2: #E7E5E4;
    --acc: #14B8A6;
    --bord: #57534E;
    --disabled: #57534E;
    --fond-ok: rgba(21, 128, 61, 0.18);
    --fond-attn: rgba(180, 83, 9, 0.18);
    --fond-maj: rgba(185, 28, 28, 0.18);
    --fond-neutre: rgba(231, 229, 228, 0.08);
    --badge-ok: rgba(21, 128, 61, 0.24);
    --badge-attn: rgba(180, 83, 9, 0.24);
    --badge-maj: rgba(185, 28, 28, 0.24);
    --badge-neutre: rgba(231, 229, 228, 0.12);
  }
}

:root[data-theme="dark"] {
  --fond: #1C1917;
  --surf: #292524;
  --enc: #FAFAF9;
  --enc2: #E7E5E4;
  --acc: #14B8A6;
  --bord: #57534E;
  --disabled: #57534E;
  --fond-ok: rgba(21, 128, 61, 0.18);
  --fond-attn: rgba(180, 83, 9, 0.18);
  --fond-maj: rgba(185, 28, 28, 0.18);
  --fond-neutre: rgba(231, 229, 228, 0.08);
  --badge-ok: rgba(21, 128, 61, 0.24);
  --badge-attn: rgba(180, 83, 9, 0.24);
  --badge-maj: rgba(185, 28, 28, 0.24);
  --badge-neutre: rgba(231, 229, 228, 0.12);
}

/* ---------------------------------------------------------------------------
   2. Réglages généraux
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--e24) var(--e16) var(--e48);
  background: var(--fond);
  color: var(--enc);
  /* Polices système : aucune police téléchargée. */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--t-corps);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.3; margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid #0F766E; outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :focus-visible { outline-color: #14B8A6; }
}
:root[data-theme="dark"] :focus-visible { outline-color: #14B8A6; }

/* Conteneur : 720 px mobile, 960 px desktop. */
.entete, .sommaire, .rapport { max-width: 720px; margin: 0 auto; }
@media (min-width: 1000px) {
  .entete, .sommaire, .rapport { max-width: 960px; }
}

/* Valeur absente : grisée ET motivée. Une case vide ne dit pas si la donnée
   n'existe pas, n'est pas publiée, ou a été oubliée. */
.absent {
  color: var(--enc2);
  font-style: italic;
  font-size: var(--t-meta);
}

/* ---------------------------------------------------------------------------
   3. En-tête du rapport
   --------------------------------------------------------------------------- */
.entete { padding-bottom: var(--e24); }

.entete__surtitre {
  font-size: var(--t-label);
  color: var(--enc2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.entete__adresse { font-size: var(--t-pilier); margin-top: var(--e8); max-width: 40ch; }

.entete__saisie {
  font-size: var(--t-label);
  color: var(--enc2);
  margin-top: var(--e4);
  padding-bottom: var(--e12);
  border-bottom: 2px solid var(--acc);
}

/* Bouton primaire : accent plein, cible tactile de 48 px. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible);
  margin-top: var(--e16);
  padding: var(--e12) var(--e24);
  background: var(--acc);
  color: var(--surf);
  border: 1px solid var(--acc);
  border-radius: var(--rayon-ctrl);
  font-size: var(--t-corps);
  font-weight: 600;
  text-decoration: none;
}

.bouton:hover { text-decoration: underline; }

@media (max-width: 599px) { .bouton { width: 100%; } }

/* Mises en page en flexbox et non en grid : le moteur d'impression compose la
   même page que le navigateur, et son support de `grid-template-columns:
   minmax()` n'est pas celui d'un navigateur. Une seule technique pour les deux
   sorties, c'est la garantie qu'elles se ressemblent. */
.fiches { display: flex; flex-wrap: wrap; gap: var(--e8); margin-top: var(--e16); }

.fiche {
  display: flex;
  flex: 1 1 160px;
  flex-direction: column;
  gap: var(--e4);
  padding: var(--e8) var(--e12);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-ctrl);
}

.fiche__libelle { font-size: var(--t-meta); color: var(--enc2); }
.fiche__valeur { font-size: var(--t-label); font-weight: 600; overflow-wrap: anywhere; }

.couverture { margin-top: var(--e16); }
.couverture__titre { font-size: var(--t-section); }
.couverture__cases { display: flex; flex-wrap: wrap; gap: var(--e12); margin-top: var(--e12); }

.couverture__case { display: flex; flex: 1 1 120px; flex-direction: column; gap: var(--e4); }
.couverture__nombre { font-size: var(--t-indice); font-weight: 600; line-height: 1.1; }
.couverture__libelle { font-size: var(--t-meta); color: var(--enc2); }
.couverture__case--positif .couverture__nombre { color: var(--ok); }
.couverture__case--attention .couverture__nombre { color: var(--attn); }
.couverture__case--alerte .couverture__nombre { color: var(--maj); }
.couverture__case--neutre .couverture__nombre { color: var(--enc2); }

/* ---------------------------------------------------------------------------
   4. Sommaire et ancres « aller directement à »
   --------------------------------------------------------------------------- */
.sommaire {
  margin-bottom: var(--e32);
  padding: var(--e16);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre);
}

.sommaire__titre { font-size: var(--t-section); margin-bottom: var(--e12); }

.ancres { display: flex; flex-wrap: wrap; gap: var(--e8); margin-bottom: var(--e16); }

.ancres__libelle {
  flex: 1 1 100%;
  font-size: var(--t-meta);
  color: var(--enc2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ancres__lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding: var(--e8) var(--e12);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-ctrl);
  background: var(--disabled);
  color: var(--enc);
  font-size: var(--t-label);
  text-decoration: none;
}

.ancres__lien:hover { border-color: var(--acc); color: var(--acc); }

.sommaire__liste { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e16) var(--e32); }
.sommaire__chapitre { flex: 1 1 280px; }

.sommaire__lien-chapitre {
  display: flex;
  gap: var(--e8);
  align-items: baseline;
  font-weight: 600;
  color: var(--enc);
  text-decoration: none;
}

.sommaire__lien-chapitre:hover { text-decoration: underline; }

.sommaire__numero {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 0 var(--e4);
  text-align: center;
  color: var(--surf);
  background: var(--acc);
  border-radius: var(--rayon-ctrl);
  font-size: var(--t-meta);
}

.sommaire__sections {
  list-style: none;
  margin-top: var(--e4);
  padding-left: var(--e32);
  font-size: var(--t-label);
}

.sommaire__sections li { margin-top: var(--e4); }
.sommaire .mention { margin-top: var(--e16); }

/* ---------------------------------------------------------------------------
   5. Chapitres — divulgation progressive
   --------------------------------------------------------------------------- */
.chapitre {
  margin-bottom: var(--e24);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre);
}

.chapitre__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e4) var(--e12);
  min-height: var(--cible);
  padding: var(--e16);
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--bord);
}

.chapitre__entete::-webkit-details-marker { display: none; }

.chapitre__numero {
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acc);
  font-weight: 600;
  flex: 1 1 100%;
}

.chapitre__titre { font-size: var(--t-pilier); flex: 1 1 auto; }

.chapitre__etat {
  font-size: var(--t-meta);
  color: var(--enc2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-ctrl);
  padding: 0 var(--e8);
}

.chapitre__corps { padding: var(--e16); }

/* ---------------------------------------------------------------------------
   6. Sections et surfaces
   --------------------------------------------------------------------------- */
.section { margin-bottom: var(--e32); }
.section:last-child { margin-bottom: 0; }

.section__titre {
  font-size: var(--t-section);
  padding-bottom: var(--e4);
  margin-bottom: var(--e12);
  border-bottom: 1px solid var(--bord);
}

.bloc__titre { font-size: var(--t-corps-large); margin: var(--e24) 0 var(--e8); }

.carte-surface {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
  padding: var(--e12) var(--e16);
  margin-bottom: var(--e12);
}

.groupe {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
  padding: var(--e16);
  margin: var(--e16) 0;
}

/* ---------------------------------------------------------------------------
   7. Texte rédactionnel
   --------------------------------------------------------------------------- */
.texte {
  max-width: 75ch;
  margin: var(--e12) 0;
  padding-left: var(--e12);
  border-left: 3px solid var(--enc2);
}

.texte--positif { border-left-color: var(--ok); }
.texte--attention { border-left-color: var(--attn); }
.texte--alerte { border-left-color: var(--maj); }

.mention, .source { font-size: var(--t-meta); color: var(--enc2); max-width: 75ch; margin: var(--e8) 0; }
.source { padding-top: var(--e8); border-top: 1px solid var(--bord); }

.encadre {
  margin: var(--e16) 0;
  padding: var(--e12) var(--e16);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--enc2);
  border-radius: var(--rayon-carte);
  background: var(--fond-neutre);
}

.encadre--positif { border-left-color: var(--ok); background: var(--fond-ok); }
.encadre--attention { border-left-color: var(--attn); background: var(--fond-attn); }
.encadre--alerte { border-left-color: var(--maj); background: var(--fond-maj); }

.encadre__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e8);
  margin-bottom: var(--e8);
}

.encadre__intitule { font-weight: 600; }
.encadre__corps { max-width: 75ch; }

/* ---------------------------------------------------------------------------
   8. Badges d'état — la couleur ne porte jamais le sens seule
   --------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0 var(--e8);
  border: 1px solid currentColor;
  border-radius: var(--rayon-ctrl);
  font-size: var(--t-meta);
  font-weight: 600;
  white-space: nowrap;
}

.badge__pastille {
  display: inline-block;
  width: var(--e8);
  height: var(--e8);
  margin-right: var(--e4);
  border-radius: var(--rayon-ctrl);
  background: currentColor;
}

.badge--positif { color: var(--ok); background: var(--badge-ok); }
.badge--attention { color: var(--attn); background: var(--badge-attn); }
.badge--alerte { color: var(--maj); background: var(--badge-maj); }
.badge--neutre { color: var(--enc2); background: var(--badge-neutre); }

/* ---------------------------------------------------------------------------
   9. Statistiques : valeur locale + référentiel
   --------------------------------------------------------------------------- */
.stats { padding: 0; }

.stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e4) var(--e16);
  padding: var(--e12) var(--e16);
  border-top: 1px solid var(--bord);
}

.stat:first-child { border-top: 0; }
.stat__libelle { flex: 1 1 220px; font-size: var(--t-label); color: var(--enc2); }
.stat__valeur { flex: 0 1 auto; font-weight: 600; overflow-wrap: anywhere; }
.stat__reference { flex: 1 1 180px; font-size: var(--t-meta); color: var(--enc2); text-align: right; }

/* ---------------------------------------------------------------------------
   10. Tableaux
   --------------------------------------------------------------------------- */
.tableau-defilant {
  overflow-x: auto;
  margin-bottom: var(--e12);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
  background: var(--surf);
}

table { width: 100%; border-collapse: collapse; font-size: var(--t-label); }

th, td {
  padding: var(--e8) var(--e12);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bord);
  /* Une colonne étroite coupe les mots longs — mais à la syllabe et avec un
     tiret (la page est en `lang="fr"`), jamais au milieu d'une lettre. */
  hyphens: auto;
  overflow-wrap: break-word;
}

thead th { background: var(--disabled); font-weight: 600; font-size: var(--t-meta); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   11. Listes
   --------------------------------------------------------------------------- */
.liste { padding-left: var(--e24); }
.liste .item { max-width: 75ch; margin-bottom: var(--e12); }
.liste .item:last-child { margin-bottom: 0; }
.item--positif::marker { color: var(--ok); }
.item--attention::marker { color: var(--attn); }
.item--alerte::marker { color: var(--maj); }
.item--neutre::marker { color: var(--enc2); }

/* ---------------------------------------------------------------------------
   12. Cartes géographiques
   --------------------------------------------------------------------------- */
.carte-figure {
  margin: var(--e16) 0;
  padding: var(--e12);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
}

.carte-figure__titre { font-size: var(--t-corps-large); font-weight: 600; margin-bottom: var(--e8); }

.carte-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-ctrl);
}

.carte-figure__legende { font-size: var(--t-meta); color: var(--enc2); margin-top: var(--e8); max-width: 75ch; }

/* ---------------------------------------------------------------------------
   13. Score global — jauge + chiffre + libellé + couleur
   --------------------------------------------------------------------------- */
.score {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e24);
  align-items: flex-start;
  padding: var(--e16);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
  margin-bottom: var(--e16);
}

.score__corps { flex: 1 1 320px; }

.score__chiffre {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: var(--e4);
  padding: var(--e12) var(--e24);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
  background: var(--disabled);
  white-space: nowrap;
}

.score__valeur { font-size: var(--t-score); font-weight: 600; line-height: 1.1; }
.score__sur { font-size: var(--t-section); color: var(--enc2); }
.score--positif .score__valeur { color: var(--ok); }
.score--attention .score__valeur { color: var(--attn); }
.score--alerte .score__valeur { color: var(--maj); }

.score__libelle { font-size: var(--t-section); font-weight: 600; margin-bottom: var(--e8); }
.score__details { margin-top: var(--e12); }

.score__detail {
  display: flex;
  justify-content: space-between;
  gap: var(--e16);
  font-size: var(--t-label);
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--bord);
}

.score__detail-libelle { color: var(--enc2); }
.score__detail-valeur { font-weight: 600; }

/* ---------------------------------------------------------------------------
   14. Jauges — <meter> natif + chiffre + libellé
   --------------------------------------------------------------------------- */
.jauge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4) var(--e12);
  align-items: center;
  padding: var(--e12) 0;
  border-top: 1px solid var(--bord);
}

.jauge:first-child { border-top: 0; padding-top: 0; }
.jauge__libelle { flex: 1 1 160px; font-weight: 600; }
.jauge__barre { flex: 1 1 140px; }

.jauge__valeur {
  flex: 0 0 auto;
  font-size: var(--t-pilier);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.jauge__note { flex: 1 1 100%; font-size: var(--t-meta); color: var(--enc2); }
.jauge__absente { font-size: var(--t-meta); color: var(--enc2); font-style: italic; }

.jauge--positif .jauge__valeur { color: var(--ok); }
.jauge--attention .jauge__valeur { color: var(--attn); }
.jauge--alerte .jauge__valeur { color: var(--maj); }

.jauge__meter {
  display: block;
  width: 100%;
  height: var(--e12);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-ctrl);
  background: var(--disabled);
}

.jauge__meter::-webkit-meter-bar { background: var(--disabled); border: 0; border-radius: var(--rayon-ctrl); }
.jauge__meter::-webkit-meter-optimum-value,
.jauge__meter::-webkit-meter-suboptimum-value,
.jauge__meter::-webkit-meter-even-less-good-value { border-radius: var(--rayon-ctrl); }
.jauge--positif .jauge__meter::-webkit-meter-optimum-value { background: var(--ok); }
.jauge--attention .jauge__meter::-webkit-meter-optimum-value { background: var(--attn); }
.jauge--alerte .jauge__meter::-webkit-meter-optimum-value { background: var(--maj); }
.jauge--neutre .jauge__meter::-webkit-meter-optimum-value { background: var(--enc2); }
.jauge--positif .jauge__meter::-moz-meter-bar { background: var(--ok); }
.jauge--attention .jauge__meter::-moz-meter-bar { background: var(--attn); }
.jauge--alerte .jauge__meter::-moz-meter-bar { background: var(--maj); }
.jauge--neutre .jauge__meter::-moz-meter-bar { background: var(--enc2); }

/* Trace peinte : réservée à l'impression, où le rendu natif de <meter>
   n'existe pas. À l'écran, c'est le contrôle natif qui s'affiche. */
.jauge__trace { display: none; }

/* ---------------------------------------------------------------------------
   15. Alertes — fond + bordure gauche + icône + titre + corps + gravité écrite
   --------------------------------------------------------------------------- */
.alertes { list-style: none; margin-bottom: var(--e16); }

.alerte {
  display: flex;
  gap: var(--e12);
  margin-bottom: var(--e8);
  padding: var(--e12) var(--e16);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--attn);
  border-radius: var(--rayon-carte);
  background: var(--fond-attn);
}

.alerte--alerte { border-left-color: var(--maj); background: var(--fond-maj); }
.alerte--alerte .alerte__signe { color: var(--maj); }
.alerte--attention .alerte__signe { color: var(--attn); }

.alerte__signe { flex: 0 0 auto; font-weight: 600; }
.alerte__corps { flex: 1 1 auto; }
.alerte__libelle { font-weight: 600; max-width: 75ch; }

.alerte__gravite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e8);
  margin-top: var(--e4);
  font-size: var(--t-meta);
  color: var(--enc2);
}

.alerte__detail { max-width: 75ch; }

/* ---------------------------------------------------------------------------
   16. Absences de données
   --------------------------------------------------------------------------- */
.absences { list-style: none; padding: 0; }
.absence { padding: var(--e12) var(--e16); border-top: 1px solid var(--bord); }
.absence:first-child { border-top: 0; }
.absence__module { font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--e8); }

.absence__statut {
  font-weight: 400;
  font-size: var(--t-meta);
  color: var(--enc2);
  padding: 0 var(--e8);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-ctrl);
}

.absence__raison { font-size: var(--t-label); margin-top: var(--e4); max-width: 75ch; }
.absence__source { font-size: var(--t-meta); color: var(--enc2); margin-top: var(--e4); }