/* site.css — la coquille du site.
 *
 * Cette feuille NE REDÉFINIT AUCUN JETON. Elle est chargée après
 * `rapport.css`, qui porte la palette, l'échelle d'espace, les rayons et
 * l'échelle typographique de docs/CHARTE-UI.md : le site et le rapport sont
 * le même produit, et c'est ici que ça se joue. Toute couleur écrite en dur
 * ci-dessous serait une non-conformité (CHARTE-UI §9.1) — il n'y en a pas :
 * tout passe par var(--…).
 *
 * Contenu : en-tête et navigation, pied de page, formulaires, tableaux de
 * bord, écrans de paiement et de progression. Les composants de données
 * (score, jauge, alerte, badge, stat, tableau, absence) viennent de
 * `rapport.css` et sont réutilisés tels quels, jamais recopiés.
 */

/* ---------------------------------------------------------------------------
   1. Coquille
   --------------------------------------------------------------------------- */
body.site {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-contenu {
  flex: 1 0 auto;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--e24) var(--e16) var(--e48);
}

/* Le rapport garde sa propre largeur de lecture ; la coquille l'élargit
   seulement sur les écrans où le tableau de comparaison le demande. */
.site-contenu .entete,
.site-contenu .sommaire,
.site-contenu .rapport { max-width: none; }

.evitement {
  position: absolute;
  left: -9999px;
  top: var(--e8);
  z-index: 10;
  background: var(--surf);
  color: var(--enc);
  padding: var(--e12) var(--e16);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-ctrl);
}
.evitement:focus { left: var(--e16); }

/* Contenu réservé aux lecteurs d'écran : présent dans l'ordre de lecture,
   invisible à l'œil. Jamais `display:none`, qui le retirerait aussi de la
   restitution vocale. */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   2. En-tête
   --------------------------------------------------------------------------- */
.site-entete {
  background: var(--surf);
  border-bottom: 1px solid var(--bord);
}

.site-entete__barre {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--e12) var(--e16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e12);
}

.marque {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--enc);
  margin-right: auto;
}
.marque__nom { font-size: var(--t-corps-large); font-weight: 600; }
.marque__precision {
  font-size: var(--t-meta);
  color: var(--enc2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-entete__bascule { display: none; }

.site-nav__liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4) var(--e16);
  padding: 0;
  margin: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding: 0 var(--e4);
  color: var(--enc);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--acc); color: var(--acc); }
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--acc);
  color: var(--acc);
  font-weight: 600;
}

.site-compte { display: flex; align-items: center; gap: var(--e8); }
.site-compte__lien {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--enc);
  font-size: var(--t-label);
  min-height: var(--cible);
  justify-content: center;
}
.site-compte__email { font-weight: 600; overflow-wrap: anywhere; }
.site-compte__quota { font-size: var(--t-meta); color: var(--enc2); }
.site-compte__sortie { margin: 0; }

@media (max-width: 700px) {
  .site-entete__bascule { display: inline-flex; }
  .site-nav { flex: 1 1 100%; display: none; }
  .site-nav[data-ouvert="1"] { display: block; }
  .site-nav__liste { flex-direction: column; gap: 0; }
  .site-nav a { width: 100%; border-bottom: 1px solid var(--bord); }
  .site-compte { flex: 1 1 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
   3. Pied de page
   --------------------------------------------------------------------------- */
.site-pied {
  flex: 0 0 auto;
  background: var(--surf);
  border-top: 1px solid var(--bord);
  padding: var(--e32) var(--e16) var(--e24);
}
.site-pied__corps {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e32);
}
.site-pied__bloc { flex: 1 1 240px; }
.site-pied__titre {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--enc2);
  margin-bottom: var(--e8);
}
.site-pied ul { list-style: none; padding: 0; }
.site-pied li { margin-bottom: var(--e4); }
.site-pied a { display: inline-block; padding: var(--e4) 0; }
.site-pied__bas {
  max-width: 960px;
  margin: var(--e24) auto 0;
  padding-top: var(--e16);
  border-top: 1px solid var(--bord);
}
.mention--test { color: var(--attn); }

/* ---------------------------------------------------------------------------
   4. Bandeaux de message
   --------------------------------------------------------------------------- */
.bandeau {
  max-width: 960px;
  margin: var(--e16) auto 0;
  padding: var(--e12) var(--e16);
  border-radius: var(--rayon-carte);
  border-left: 4px solid var(--enc2);
  background: var(--fond-neutre);
}
.bandeau--positif { border-left-color: var(--ok); background: var(--fond-ok); }
.bandeau--attention { border-left-color: var(--attn); background: var(--fond-attn); }
.bandeau--alerte { border-left-color: var(--maj); background: var(--fond-maj); }

/* ---------------------------------------------------------------------------
   5. Titres et sections de page
   --------------------------------------------------------------------------- */
.page-titre { font-size: var(--t-pilier); margin-bottom: var(--e8); }
.page-chapeau { color: var(--enc2); max-width: 75ch; margin-bottom: var(--e24); }
.bloc { margin-bottom: var(--e32); }
.bloc__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e8);
  margin-bottom: var(--e12);
}
.bloc__titre-page { font-size: var(--t-section); font-weight: 600; }
.grille { display: flex; flex-wrap: wrap; gap: var(--e16); }
.grille > * { flex: 1 1 260px; }

/* ---------------------------------------------------------------------------
   6. Formulaires — états définis (PLAN-UX §4), cibles ≥ 48 px
   --------------------------------------------------------------------------- */
.champ { display: block; margin-bottom: var(--e16); }
.champ__libelle { display: block; font-weight: 600; margin-bottom: var(--e4); }
.champ__aide { display: block; font-size: var(--t-meta); color: var(--enc2); margin-bottom: var(--e4); }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="url"], input[type="file"], select, textarea {
  width: 100%;
  min-height: var(--cible);
  padding: var(--e12);
  font: inherit;
  color: var(--enc);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-ctrl);
}
input:hover, select:hover, textarea:hover { border-color: var(--enc2); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--disabled);
  color: var(--enc2);
  cursor: not-allowed;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--maj);
  border-width: 2px;
}
.champ__erreur {
  display: flex;
  gap: var(--e4);
  align-items: baseline;
  color: var(--maj);
  font-size: var(--t-label);
  margin-top: var(--e4);
}

.champ--adresse input { font-size: var(--t-corps-large); min-height: var(--cible); }

fieldset {
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
  padding: var(--e16);
  margin: 0 0 var(--e16);
}
legend { font-weight: 600; padding: 0 var(--e8); }

.cases { display: flex; flex-wrap: wrap; gap: var(--e12); }
.case {
  display: flex;
  align-items: center;
  gap: var(--e8);
  min-height: var(--cible);
}
.case input { width: auto; min-height: auto; }

.actions { display: flex; flex-wrap: wrap; gap: var(--e12); align-items: center; }
.bouton--contour {
  background: var(--surf);
  color: var(--acc);
  border: 1px solid var(--acc);
}
.bouton--discret {
  background: transparent;
  color: var(--enc2);
  border: 1px solid var(--bord);
}
.bouton--large { width: 100%; justify-content: center; }
.bouton--danger { background: var(--maj); color: var(--surf); border: 1px solid var(--maj); }
.bouton[disabled], .bouton[aria-disabled="true"] {
  background: var(--disabled);
  color: var(--enc2);
  border-color: var(--bord);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   7. Autocomplétion d'adresse (combobox accessible)
   --------------------------------------------------------------------------- */
.autocomplete { position: relative; }
.autocomplete__liste {
  list-style: none;
  margin: var(--e4) 0 0;
  padding: 0;
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-ctrl);
  box-shadow: var(--ombre);
  max-height: 48vh;
  overflow-y: auto;
}
.autocomplete__liste:empty { display: none; border: 0; box-shadow: none; }
.autocomplete__option { border-top: 1px solid var(--bord); }
.autocomplete__option:first-child { border-top: 0; }
.autocomplete__option button {
  display: block;
  width: 100%;
  text-align: left;
  min-height: var(--cible);
  padding: var(--e12);
  font: inherit;
  color: var(--enc);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.autocomplete__option button:hover,
.autocomplete__option[aria-selected="true"] button { background: var(--fond-neutre); }
.autocomplete__commune { display: block; font-size: var(--t-meta); color: var(--enc2); }

/* ---------------------------------------------------------------------------
   7bis. Accordéons — l'en-tête EST le contrôle
   ---------------------------------------------------------------------------
   Défaut corrigé le 2026-08-20, signalé par le propriétaire : « le bloc
   s'ouvre mais ne se referme plus ».

   Ni le balisage ni le style ne forçaient l'ouverture — le HTML est valide
   (un seul <summary>, premier enfant) et aucune règle ne touchait `display`
   ni `content-visibility`. Le défaut était une zone de clic : `.groupe` pose
   16 px de remplissage, et le <summary> par défaut est une simple ligne de
   texte à l'intérieur. L'en-tête PARAÎT occuper toute la largeur de la carte,
   mais seuls les quelques mots du libellé réagissent. On ouvre en visant le
   texte ; on referme en visant le bord ou le triangle, et il ne se passe
   rien.

   La preuve est dans le rapport : ses chapitres, eux, se referment — leur
   <summary> (`.chapitre__entete`) porte déjà `min-height: var(--cible)` et
   `padding: var(--e16)`. C'est exactement ce qui manquait ici.

   Au passage, c'était aussi une non-conformité CHARTE-UI §5 : un <summary>
   est une cible tactile, elle doit faire 48 px de haut. Les marges négatives
   étendent la zone jusqu'aux bords du remplissage de la carte, sans changer
   une seule ligne de balisage — donc sans toucher `report/`, dont les
   groupes bénéficient de la même correction. */
summary { cursor: pointer; }

details > summary:not(.chapitre__entete) {
  display: list-item;
  min-height: var(--cible);
  padding: var(--e12) var(--e16);
  margin: calc(-1 * var(--e12)) calc(-1 * var(--e16));
  border-radius: var(--rayon-ctrl);
  font-weight: 600;
}
details[open] > summary:not(.chapitre__entete) { margin-bottom: var(--e4); }
details > summary:not(.chapitre__entete):hover { background: var(--fond-neutre); }

/* L'état est écrit, pas seulement dessiné : le triangle est une forme, le mot
   est une information (CHARTE-UI §2). */
details > summary:not(.chapitre__entete)::after {
  content: " — afficher";
  font-weight: 400;
  font-size: var(--t-label);
  color: var(--enc2);
}
details[open] > summary:not(.chapitre__entete)::after { content: " — masquer"; }

/* ---------------------------------------------------------------------------
   8. Accueil
   --------------------------------------------------------------------------- */
.accroche { margin-bottom: var(--e32); }
.accroche__titre { font-size: var(--t-indice); max-width: 20ch; }
.accroche__texte {
  font-size: var(--t-corps-large);
  color: var(--enc2);
  max-width: 60ch;
  margin-top: var(--e12);
}
.confiance { display: flex; flex-wrap: wrap; gap: var(--e16); margin-top: var(--e24); }
.confiance__point { flex: 1 1 200px; }
.confiance__chiffre {
  display: block;
  font-size: var(--t-indice);
  font-weight: 600;
  line-height: 1.1;
}
.confiance__libelle { display: block; font-size: var(--t-label); color: var(--enc2); }
.prix-affiche {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e8);
  margin: var(--e16) 0;
}
.prix-affiche__montant { font-size: var(--t-indice); font-weight: 600; }
.prix-affiche__detail { color: var(--enc2); font-size: var(--t-label); }

/* ---------------------------------------------------------------------------
   9. Progression (le moment de vérité — PLAN-UX §5)
   --------------------------------------------------------------------------- */
.progression__etat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e12);
  margin-bottom: var(--e16);
}
.progression__compte { font-size: var(--t-indice); font-weight: 600; }
.progression__restant { color: var(--enc2); }
.familles { list-style: none; padding: 0; }
.famille {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e8);
  padding: var(--e12) 0;
  border-top: 1px solid var(--bord);
}
.famille:first-child { border-top: 0; }
.famille__signe { flex: 0 0 auto; font-weight: 600; width: 1.5em; }
.famille--faite .famille__signe { color: var(--ok); }
.famille--en-cours .famille__signe { color: var(--acc); }
.famille--attente .famille__signe { color: var(--enc2); }
.famille__nom { flex: 1 1 200px; font-weight: 600; }
.famille__source { flex: 1 1 220px; font-size: var(--t-meta); color: var(--enc2); }
.famille__etat { font-size: var(--t-label); color: var(--enc2); }

/* Squelette de chargement — jamais un spinner seul (CHARTE-UI §7). */
.squelette { list-style: none; padding: 0; }
.squelette__ligne {
  height: var(--e16);
  margin-bottom: var(--e12);
  border-radius: var(--rayon-ctrl);
  background: var(--disabled);
}
.squelette__ligne:nth-child(2n) { width: 70%; }
.squelette__ligne:nth-child(3n) { width: 85%; }

/* ---------------------------------------------------------------------------
   10. Listes d'audits, comparaison, organisation, administration
   --------------------------------------------------------------------------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e12);
  align-items: flex-end;
  margin-bottom: var(--e16);
}
.filtres .champ { flex: 1 1 200px; margin-bottom: 0; }

.liste-audits { width: 100%; }
.liste-audits td, .liste-audits th { vertical-align: top; }
.liste-audits__adresse { font-weight: 600; }
.liste-audits__meta { display: block; font-size: var(--t-meta); color: var(--enc2); }

.carte-audits { margin-bottom: var(--e16); }
.carte-audits img {
  width: 100%;
  height: auto;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
}

.comparaison { overflow-x: auto; }
.comparaison table { min-width: 640px; }
.comparaison td.absente { background: var(--disabled); color: var(--enc2); font-size: var(--t-label); }
.comparaison__colonne-tete { font-weight: 600; }
.comparaison__confiance { display: block; font-size: var(--t-meta); color: var(--enc2); }

.jauge-quota { margin-bottom: var(--e16); }
.jauge-quota meter { width: 100%; height: var(--e16); }
.jauge-quota__chiffres {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e8);
  font-size: var(--t-label);
}

.onglets { display: flex; flex-wrap: wrap; gap: var(--e8); margin-bottom: var(--e24); border-bottom: 1px solid var(--bord); }
.onglets a {
  min-height: var(--cible);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--e12);
  text-decoration: none;
  color: var(--enc);
  border-bottom: 2px solid transparent;
}
.onglets a[aria-current="page"] { border-bottom-color: var(--acc); color: var(--acc); font-weight: 600; }

.paiement-test {
  border: 2px dashed var(--attn);
  border-radius: var(--rayon-carte);
  padding: var(--e24);
  background: var(--fond-attn);
}

.tarifs { display: flex; flex-wrap: wrap; gap: var(--e16); }
.tarif { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--e8); }
.tarif__prix { font-size: var(--t-indice); font-weight: 600; }
.tarif__quota { color: var(--enc2); }
.tarif form { margin-top: auto; }

.doc-code {
  display: block;
  overflow-x: auto;
  padding: var(--e12);
  background: var(--fond-neutre);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-ctrl);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-label);
  white-space: pre;
}

.texte-legal { max-width: 75ch; }
.texte-legal h2 { font-size: var(--t-section); margin-top: var(--e32); margin-bottom: var(--e8); }
.texte-legal h3 { font-size: var(--t-corps-large); margin-top: var(--e24); margin-bottom: var(--e4); }
.texte-legal p, .texte-legal li { margin-bottom: var(--e12); }
.texte-legal ul, .texte-legal ol { padding-left: var(--e24); }

/* ---------------------------------------------------------------------------
   11. Impression — le site ne s'imprime pas, seul le rapport s'imprime.
   --------------------------------------------------------------------------- */
@media print {
  .site-entete, .site-pied, .evitement, .bandeau, .onglets { display: none; }
  .site-contenu { max-width: none; padding: 0; }
}