/* 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;
  align-items: center;
  text-decoration: none;
  color: var(--enc);
  margin-right: auto;
  min-height: var(--cible);
}
.marque__logo { display: block; height: 40px; width: auto; }

.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__bloc--marque { flex: 0 1 286px; }
.site-pied__logo { display: block; width: 100%; max-width: 286px; height: auto; }

/* Thème sombre : le logo remis est bicolore sombre sur fond détouré ; posé sur
   `--fond: #1C1917`, son texte disparaîtrait. Il n'existe pas encore de
   variante claire dans le jeu fourni — en attendant, la marque est rendue en
   silhouette blanche, usage monochrome standard d'un logo, plutôt qu'illisible.
   Une variante claire fournie par le propriétaire remplacera ce filtre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marque__logo,
  :root:not([data-theme="light"]) .site-pied__logo { filter: brightness(0) invert(1); }
}
[data-theme="dark"] .marque__logo,
[data-theme="dark"] .site-pied__logo { filter: brightness(0) invert(1); }
.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; }
/* LES CHAMPS D'UNE MÊME LIGNE ALIGNENT LEURS SAISIES. En flex simple, chaque
   champ empilait librement son libellé, son texte d'aide et sa saisie : une
   aide de trois lignes descendait la saisie de deux crans, et le formulaire
   partait en escalier (constaté par Pascal le 2026-08-26 sur « Montant
   demandé / Surface habitable / Nombre de pièces »).
   La grille impose des lignes de hauteur égale, et `margin-top: auto` sur le
   dernier enfant — la saisie — la colle au bas de sa cellule. Les saisies
   d'une ligne sont donc sur la même horizontale, quelle que soit la longueur
   des explications au-dessus. */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e16);
}
.grille > .champ {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.grille > .champ > :last-child { margin-top: auto; }

/* ---------------------------------------------------------------------------
   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
   --------------------------------------------------------------------------- */
/* L'option « enfants scolarisés », séparée des trois intentions.

   Un trait de séparation et un retrait : elle ne se lit plus comme un
   quatrième choix possible, mais comme un complément aux trois premiers. */
.intentions__option {
  margin-top: var(--e12);
  padding-top: var(--e12);
  border-top: 1px solid var(--bord);
}
.intentions__option .mention { display: block; margin-top: var(--e4); }

/* LES TROIS ONGLETS de « Trouver un quartier ».

   Des liens stylés en onglets, jamais des boutons : chaque onglet est une
   adresse à part entière, qui se partage et revient par le bouton
   « précédent ». L'onglet actif se distingue par sa couleur ET par un trait
   épais — la couleur seule ne porte jamais une information (RGAA 4.1.2). */
.onglets { margin-bottom: var(--e24); }
.onglets__liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e8);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) {
  .onglets__liste { grid-template-columns: repeat(3, 1fr); }
}
.onglets__lien {
  display: block;
  height: 100%;
  padding: var(--e12) var(--e16);
  border: 1px solid var(--bord);
  border-bottom: 3px solid var(--bord);
  border-radius: var(--rayon-carte);
  background: var(--surf);
  text-decoration: none;
  color: var(--enc);
}
.onglets__lien:hover { border-color: var(--acc); }
.onglets__lien--actif {
  border-color: var(--acc);
  border-bottom-color: var(--acc);
  background: var(--fond-neutre);
}
.onglets__titre { display: block; font-weight: 600; }
.onglets__aide { display: block; margin-top: var(--e4); color: var(--enc2); font-size: var(--t-meta); }
.onglets__lien--actif .onglets__titre::after { content: " 4 en cours"; font-weight: 400; color: var(--enc2); }

/* Les deux liens d'action sous un résultat de classement. */
.commune__actions { display: flex; flex-wrap: wrap; gap: var(--e12); align-items: center; margin-top: var(--e12); }
.actions-ligne a { display: block; white-space: nowrap; }

/* R18 §2.2 — LES DEUX PORTES, à poids visuel égal.

   `1fr 1fr` et non `auto` : deux colonnes de largeur identique quel que soit
   le texte qu'elles portent. Une colonne dimensionnée par son contenu
   donnerait plus de place à celle dont le sous-texte est le plus long, et le
   lecteur y lirait une hiérarchie qui n'existe pas. Sous 640 px elles
   s'empilent, dans l'ordre du document : logement d'abord, local ensuite. */
.portes__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e16);
}
@media (min-width: 640px) {
  .portes__grille { grid-template-columns: 1fr 1fr; }
}
.porte { display: flex; flex-direction: column; }
/* Les boutons s'alignent sur la même ligne même si un sous-texte tient sur
   deux lignes et l'autre sur une : sinon la carte la plus courte paraît
   secondaire. */
.porte__texte { flex: 1 1 auto; margin-bottom: var(--e16); }
.porte .actions { margin-top: auto; }

/* Les intentions du parcours local s'empilent : ce sont des phrases, pas des
   étiquettes, et les mettre côte à côte les rendrait illisibles. */
.cases--empilees { flex-direction: column; align-items: stretch; }
.case--detaillee { display: block; }
.case--detaillee .mention { display: block; margin-top: var(--e4); }

.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);
}
/* La réassurance a remplacé le bloc de chiffres 23 / 100 % / 0 : une phrase,
   après la valeur et non avant (ANALYSE-UX-AOUT §5). */
.reassurance {
  max-width: 75ch;
  font-size: var(--t-corps-large);
  padding: var(--e16);
  background: var(--surf);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--acc);
  border-radius: var(--rayon-carte);
}

/* Les intentions : un vrai filtre, pas une case à cocher de sondage. */
.intentions legend { font-weight: 600; }

/* L'extrait de résultat, sur l'accueil comme sur l'aperçu réel. */
.extrait { align-items: stretch; }
/* Dans l'extrait, la « référence » d'un fait est une phrase — « Niveau,
   historique et vérifications à faire dans le rapport complet » — et non une
   valeur de comparaison. Alignée à droite comme dans le rapport, elle se lit
   mal dès qu'elle passe à la ligne. Portée limitée à l'extrait : la feuille du
   rapport n'est pas touchée. */
.extrait .stat__reference { text-align: left; flex: 1 1 220px; }
.extrait-accueil__legende {
  font-size: var(--t-label);
  color: var(--enc2);
  margin-bottom: var(--e12);
}
.extrait-accueil__effet { margin-top: var(--e12); }

/* La porte d'entrée professionnels, sur l'accueil. */
.pro-accroche { padding: var(--e24); }
.pro-accroche .liste { margin: var(--e12) 0; }

/* Une icône ne remplace jamais un mot : elle se pose à côté du libellé, qui
   reste seul porteur du sens (CHARTE-UI §2). */
.titre-icone { display: flex; align-items: center; gap: var(--e8); }
.icone { flex: none; color: var(--acc); }
.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); }
.famille__detail { flex: 1 1 100%; font-size: var(--t-label); color: var(--enc2); }

/* Ce que l'étape a réellement trouvé. L'attente devient une preuve de valeur
   au lieu d'une liste de fournisseurs (retour du propriétaire, 2026-08-20). */
.trouvailles { flex: 1 1 100%; list-style: none; padding: 0; margin-top: var(--e4); }
.trouvaille {
  display: flex;
  gap: var(--e8);
  align-items: baseline;
  padding: var(--e4) 0;
  font-size: var(--t-corps);
}
.trouvaille::before {
  content: "✓";
  color: var(--ok);
  font-weight: 600;
  flex: 0 0 auto;
}

/* 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); }

/* ---------------------------------------------------------------------------
   10bis. Pages exportées — elles n'ont pas de serveur derrière elles
   --------------------------------------------------------------------------- */
.export-avertissement {
  max-width: 960px;
  margin: var(--e16) auto 0;
  padding: var(--e16);
  border: 2px dashed var(--attn);
  border-radius: var(--rayon-carte);
  background: var(--fond-attn);
}
.export-avertissement p { margin-bottom: var(--e8); }
.export-avertissement .doc-code { margin: var(--e8) 0; }
.lien-desarme {
  color: var(--enc2);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   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; }
}

/* --- « Le quartier qui me ressemble » -------------------------------------
 *
 * Repris le 2026-08-25 sur le constat de Pascal : « le design général est
 * affreux », en parlant de cette page. Trois défauts corrigés :
 *
 * 1. UN MUR DE CONTRÔLES. Quatre groupes de champs et vingt-quatre cases se
 *    suivaient sans respiration. Chaque groupe devient une carte, avec un
 *    titre numéroté et une phrase qui dit à quoi il sert.
 * 2. DES CASES À COCHER MINUSCULES. Elles deviennent des pastilles cliquables
 *    de la hauteur d'un bouton, qui changent de couleur une fois cochées : on
 *    voit d'un coup d'œil ce qu'on a demandé.
 * 3. DES CHAMPS QUI SAUTENT. Les colonnes venaient d'une boîte flexible dont
 *    chaque élément se calait sur son propre contenu : un texte d'aide plus
 *    long décalait tout. Grille à colonnes égales.
 */
.questionnaire { padding: 0; border: 0; background: none; box-shadow: none; }

.questionnaire__groupe {
  border: 1px solid var(--bord);
  border-radius: var(--rayon-carte);
  background: var(--surf);
  padding: var(--e24);
  margin: 0 0 var(--e16);
  box-shadow: var(--ombre);
}
.questionnaire__titre {
  display: block;
  width: 100%;
  font-size: var(--t-corps-large);
  font-weight: 600;
  padding: 0;
  margin: 0 0 var(--e4);
}
.questionnaire__aide {
  display: block;
  color: var(--enc2);
  font-size: var(--t-meta);
  margin-bottom: var(--e16);
  max-width: 75ch;
}
.questionnaire__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e16);
  /* `align-items: start` laissait chaque champ à sa hauteur naturelle : même
     effet d'escalier que sur la grille générale. `stretch` étire les cellules
     d'une ligne à la même hauteur, et la saisie se cale en bas. */
  align-items: stretch;
}
.questionnaire__grille .champ {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.questionnaire__grille .champ > :last-child { margin-top: auto; }
.questionnaire__grille .champ__aide { margin: var(--e4) 0 0; }
.questionnaire .cases { gap: var(--e8); margin-bottom: var(--e12); }

/* Les pastilles : la case et son intitulé forment UN seul objet cliquable, de
   la taille d'une cible tactile, et l'état coché se voit sans avoir à
   chercher la petite croix. */
.questionnaire .case {
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: var(--e8) var(--e16) var(--e8) var(--e12);
  background: var(--surf);
  gap: var(--e8);
  cursor: pointer;
}
.questionnaire .case:hover { border-color: var(--acc); }
.questionnaire .case label { cursor: pointer; }
.questionnaire .case:has(input:checked) {
  border-color: var(--acc);
  background: var(--fond-ok);
  font-weight: 600;
}
.questionnaire .case:has(input:focus-visible) {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* Les critères et leur importance : un intitulé, ce qu'il mesure vraiment, et
   un niveau. Trois colonnes qui restent alignées, et qui s'empilent sur
   téléphone. Le libellé seul mentirait par omission — « transports » ne peut
   pas promettre le métro, que personne ne publie commune par commune. */
.criteres { list-style: none; padding: 0; margin: 0; }
.critere {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--e16);
  align-items: center;
  padding: var(--e12) 0;
  border-top: 1px solid var(--bord);
}
.critere:first-child { border-top: 0; padding-top: 0; }
.critere__nom { display: block; font-weight: 600; }
.critere__precision {
  display: block;
  font-size: var(--t-meta);
  color: var(--enc2);
  max-width: 75ch;
}
.critere__niveau { width: 100%; }
.cases--critere { margin-top: var(--e8); }
.critere__defaut {
  display: block;
  font-size: var(--t-meta);
  color: var(--enc2);
  margin-top: var(--e4);
}
.critere { align-items: start; }
.critere__niveau { margin-top: var(--e4); }

@media (max-width: 640px) {
  .critere { grid-template-columns: 1fr; gap: var(--e8); }
}

.questionnaire__envoi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e12);
  align-items: center;
  padding: var(--e16) 0 0;
}

/* Le classement. Un rang en pastille, le nom, les points de correspondance,
   le score à droite. Trois colonnes qui ne bougent pas, et qui s'empilent
   proprement sur téléphone. */
.classement__entete {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e12);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--e16);
}
.classement__liste { list-style: none; padding: 0; margin: 0; }
.commune {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--e16);
  align-items: start;
  padding: var(--e16) 0;
  border-top: 1px solid var(--bord);
}
.commune:first-child { border-top: 0; padding-top: 0; }
.commune__rang {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--badge-neutre);
  color: var(--enc2);
  font-weight: 600;
}
.commune:first-child .commune__rang { background: var(--badge-ok); color: var(--ok); }
.commune__nom { font-size: var(--t-corps-large); font-weight: 600; margin: 0; }
.commune__points { list-style: none; padding: 0; margin: var(--e8) 0 0; }
.commune__points li { margin-bottom: var(--e4); max-width: 75ch; }
.commune__critere { color: var(--enc2); }
.commune__critere::after { content: " : "; }
.commune__manque { font-size: var(--t-meta); color: var(--enc2); margin: var(--e8) 0 0; }
.commune__lien { display: inline-block; margin-top: var(--e8); }
.commune__score { text-align: right; white-space: nowrap; }
.commune__score-valeur { font-size: var(--t-section); font-weight: 600; }
.commune__score-sur { font-size: var(--t-meta); color: var(--enc2); }

@media (max-width: 640px) {
  .commune { grid-template-columns: auto 1fr; }
  .commune__score { grid-column: 2; text-align: left; }
}

/* Ce qui ne s'imprime pas : les commandes. Le classement, lui, s'imprime tel
   quel — et le bouton « Télécharger en PDF » donne le même document mis en
   page pour le papier. */
@media print {
  .sans-impression, .questionnaire, .site-nav, .onglets { display: none !important; }
  .classement { border: 0; padding: 0; box-shadow: none; }
  .commune { page-break-inside: avoid; }
}