/* =========================================================
   Avant l'Alerte — feuille de style unique
   Palette volontairement "maison / prévoyance", pas militaire :
   papier chaud, vert profond, ambre. Aucun webfont externe.
   ========================================================= */

:root {
  /* Encres */
  --ink:        #14202a;
  --ink-2:      #3d4f5c;
  /* Contraste vérifié sur les trois fonds : 5,04 / 5,34 / 4,66 (seuil AA : 4,5).
     Ne pas éclaircir : cette couleur porte les phrases « pourquoi » des articles. */
  --muted:      #5e6d78;

  /* Fonds */
  --paper:      #fbf8f3;
  --paper-2:    #f4efe6;
  --surface:    #ffffff;
  --line:       #e5ded2;
  --line-2:     #d6ccbb;

  /* Marque */
  --brand:      #145e52;
  --brand-700:  #0f4a41;
  --brand-300:  #7fb3a8;
  --brand-50:   #e7f1ee;
  /* Verts clairs, posés sur le bleu-ardoise du bandeau d'accueil (refonte-b.css). */
  --brand-100:  #d7ece6;
  --brand-200:  #b9dbd3;
  --brand-250:  #9cc7bd;
  --menthe:       #77e3bc;   /* bouton du bandeau : 10,6:1 sous l'encre */
  --menthe-clair: #a5f5d6;

  /* Accents */
  /* Utilisé en texte sur --amber-50 (4,56) et sur --surface (5,11). */
  --amber:      #976316;
  --amber-50:   #fbf1de;
  --clay:       #a8452f;
  --clay-50:    #f9ece8;
  --clay-200:   #e8cfc8;
  --clay-700:   #7d3221;   /* le seul rouge des messages d'erreur */
  --amber-100:  #f8e8c8;
  --amber-200:  #ecdcb6;   /* filets sur fond ambre */
  --amber-900:  #6a4406;   /* texte sur fond ambre */
  --amber-vif:  #d99b32;   /* l'ambre de l'horloge : filets, page courante */
  --amber-clair:        #f0b860;   /* « En cas d'alerte », sur le bandeau sombre */
  --amber-clair-survol: #ffd08a;
  --paper-voile: #f3f0ea;  /* crème du texte sur la photo voilée de l'accueil */

  /* Les mêmes encres, en composantes, pour les transparences :
     `rgba(var(--paper-rgb), .8)`. Une couleur, toutes ses opacités. */
  --paper-rgb:   251, 248, 243;
  --paper-2-rgb: 244, 239, 230;
  --ink-rgb:     20, 32, 42;
  --brand-rgb:   20, 94, 82;

  /* Les pictogrammes des risques (pastilles du résultat) : un trait, un aplat clair. */
  --risque-eau:        #1d5a9e;  --risque-eau-fond:       #cfe0f3;
  --risque-feu:        #b0440f;  --risque-feu-fond:       #f8d9c4;
  --risque-seisme:     #8a3b2a;
  --risque-terrain:    #7a5320;  --risque-terrain-fond:   #ecdcc0;
  --risque-tmd:        #93580a;  --risque-tmd-fond:       #f6e2b8;
  --risque-industrie:  #5f3d95;  --risque-industrie-fond: #e2d8f1;
  --risque-meteo:      #33617a;
  --risque-autre:      #4a5560;

  /* Formes — quatre rayons, pas un de plus. Avant : 3, 4, 5, 6, 9, 10, 12, 20
     et 100 px cohabitaient, ce qui donnait quatre langages d'arrondi sur une
     meme page. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 100px;
  --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), .06), 0 2px 8px rgba(var(--ink-rgb), .04);
  --shadow-md: 0 2px 4px rgba(var(--ink-rgb), .05), 0 12px 32px rgba(var(--ink-rgb), .08);

  /* Typo
     ------------------------------------------------------------------------
     Georgia en premier, volontairement. L'ancienne pile commencait par
     « Iowan Old Style », qui n'existe que chez Apple : la police d'affichage
     — donc la voix de la marque — changeait selon le systeme du visiteur
     (447 px de large sur Windows en Palatino contre 403 en Iowan, pour la
     meme chaine a 64 px). Georgia est presente partout, dessinee pour l'ecran,
     et ne coute aucun telechargement. Le site reste sans webfont : c'est ce
     qui le fait peindre instantanement, et sur un site qui parle de coupures
     de courant, ca vaut mieux qu'un caractere plus distingue. */
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Echelle typographique — sept paliers de texte, cinq d'affichage.
     Avant : 32 valeurs distinctes, dont huit comprises entre 13 et 16 px.
     N'ajoutez pas de valeur en dur : si un palier manque, c'est le palier
     qu'il faut discuter, pas la declaration. */
  /* 12 px et non 11 : en majuscules espacees, 11 px se lisait mal sur telephone
     (audit du 19 septembre 2026 : une trentaine de libelles, sur 12 pages). */
  --t-xs:   .8125rem;   /* 13 px — micro-libelles en majuscules, badges     */
  --t-sm:   .875rem;    /* 14 px — legendes, mentions, meta                 */
  --t-ui:   .9375rem;   /* 15 px — boutons, aides des questionnaires        */
  --t-md:   1rem;       /* 16 px — texte secondaire, justifications         */
  --t-base: 1.0625rem;  /* 17 px — texte courant                            */
  --t-lg:   1.1875rem;  /* 19 px — chapo, intertitre fort                   */
  --t-xl:   1.5rem;     /* 24 px — gros libelles, chiffres de tableau       */

  --d-sm:      clamp(1.5rem, 3vw, 2rem);      /* question de quiz, separateur */
  --d-md:      clamp(1.75rem, 3.4vw, 2.4rem); /* h2                           */
  --d-lg:      clamp(2.1rem, 5vw, 3.2rem);    /* h1                           */
  --d-xl:      clamp(2.3rem, 5.6vw, 3.6rem);  /* h1 d'ouverture               */
  --d-chiffre: clamp(1.9rem, 3.6vw, 2.6rem);  /* grands nombres              */

  /* Rythme */
  --gap: clamp(3.5rem, 7vw, 6.5rem);
  --container: 1140px;
  --colonne: 700px;   /* colonne de lecture : texte, encadrés, tableaux */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* `animation-iteration-count` est indispensable a cote de la duree : une
     animation `infinite` ramenee a .01ms ne s'arrete pas, elle boucle cent
     mille fois par seconde. Le garde-fou produisait alors exactement ce qu'il
     doit empecher — un scintillement — et faisait tourner le processeur pour
     rien. Une seule iteration, et l'element se fige dans son etat au repos :
     toute animation du site doit donc etre ecrite pour que l'etat SANS
     animation soit un etat correct et lisible. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  /* « recommandations » a 34 px mesure 309 px : sur un ecran de 320 le titre
     debordait de son conteneur. On autorise la coupure des mots trop longs
     plutot que de laisser la page s'elargir. */
  overflow-wrap: break-word;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--d-lg); }
h2 { font-size: var(--d-md); }
h3 { font-size: var(--t-xl); font-family: var(--sans); font-weight: 650; letter-spacing: -.01em; }
h4 { font-size: var(--t-base); font-weight: 650; margin: 0 0 .4em; }

/* Les titres d'encadres etaient des h4 sous des h2 : un niveau saute sur dix
   pages sur onze. Ils sont passes en h3, ce qui corrige le plan du document
   mais les grossissait — h3 est en `--t-xl`. On leur rend leur echelle.
   `.cas__besoin h4` : dans `risques.html`, « Ce que ca demande » est le
   sous-titre d'un cas dont le titre est deja un h3. Un h3 de plus en faisait
   son egal dans le plan du document alors qu'il en depend. */
.callout h2, .callout h3, .cas__besoin h2, .cas__besoin h3, .cas__besoin h4 {
  font-size: var(--t-base); font-family: var(--sans);
  font-weight: 650; letter-spacing: 0; margin: 0 0 .4em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand); }

strong { font-weight: 650; }
small { font-size: var(--t-sm); }

img, svg { max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--brand-50); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------- Structure ---------- */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
/* La colonne de lecture (5 octobre 2026, soir) : une seule largeur, centrée.
   Collée au bord du logo, elle laissait vide la moitié droite de l'écran ; et à
   l'intérieur, le texte (623 px), les encadrés (760 px) et les titres (jusqu'à
   1 220 px) avaient chacun leur bord droit. Désormais tout ce qu'elle contient
   s'arrête aux deux mêmes bords : 700 px, soit 76 caractères à 17 px. */
.container--narrow { width: min(100% - 2.5rem, var(--colonne)); }

section { padding-block: var(--gap); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.section--sand { background: var(--paper-2); border-block: 1px solid var(--line); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Le rythme de l'accueil n'est plus ici : depuis la refonte B, chacune de ses
   sections porte ses propres respirations dans `refonte-b.css`, qui remet
   `section` a zero. Les trois regles `body.accueil …` qui vivaient ici etaient
   ecrasees ou ne visaient plus rien ; elles ont ete retirees le 18 septembre
   2026, rendu de l'accueil compare avant et apres. */

/* La mention sous le champ code postal de l'accueil : quatre lignes de gris
   juste sous le seul champ de la page, c'est le premier obstacle du parcours.
   Le detail reste accessible d'un clic. */
.cp__mention details { display: inline; }
.cp__mention summary {
  display: inline; cursor: pointer; color: var(--brand-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.cp__mention summary::-webkit-details-marker { display: none; }
.cp__mention summary::marker { content: ''; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }

/* ---------- Éléments de texte ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--brand-300);
}
/* La largeur de la colonne de lecture (5 octobre 2026) : à 40ch (367 px), les titres de
   section se cassaient en trois lignes. Le chapo garde une mesure de lecture. */
.section-head { max-width: 760px; margin-bottom: 2.75rem; }
.section-head .lead { max-width: 60ch; }

.lead { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.6; }
.tiny { font-size: var(--t-sm); line-height: 1.55; color: var(--muted); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: inherit; font-weight: 600; font-size: var(--t-base);
  padding: .8rem 1.5rem;
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-700); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink-2); color: var(--ink); }
.btn--outline { background: var(--surface); color: var(--brand-700); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-700); }
.btn--light { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--light:hover { background: var(--paper-2); color: var(--ink); }
.btn--lg { padding: 1rem 1.9rem; font-size: var(--t-base); }
.btn--sm { padding: .5rem 1rem; font-size: var(--t-md); }
/* A .38 d'opacite, le libelle blanc du bouton principal tombait a 1,88:1 sur
   son fond : on voyait une forme pale sans lire « Continuer ». Les composants
   inactifs sont hors du perimetre de WCAG, donc ce n'etait pas une infraction
   — c'etait seulement illisible.
   L'opacite est le mauvais outil ici : elle delave le fond ET le texte, donc
   elle detruit le rapport entre les deux. La remonter a .55 ne donnait encore
   que 2,70. Un bouton eteint a droit a sa propre palette — gris de texte sur
   gris de fond, opacite pleine : 4,66:1. Il se lit, et il ne ressemble a aucun
   bouton actif. Le « pourquoi » est dit a cote, par `.qcard__requis`. */
.btn[disabled] {
  opacity: 1; pointer-events: none;
  background: var(--paper-2); color: var(--muted);
  border-color: var(--line-2); box-shadow: none;
}
.btn svg { flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- En-tête ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--paper-rgb), .88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
}
/* Visible des lecteurs d'ecran, absente de l'ecran. Le motif `clip` double le
   `clip-path` : Safari ancien ignore le second. Ne mettez jamais `display:
   none` a la place — ca retire aussi l'element de l'arbre d'accessibilite. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; border: 0; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--serif); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1rem, .53rem + .93vw, 1.1875rem);
  color: var(--ink); text-decoration: none; margin-right: auto;
  /* `nowrap` est sans danger ici : ce sont des libelles courts d'interface, pas
     de la prose, et le menu deroulant mobile les empile de toute facon. Ne le
     mettez jamais sur une phrase — voir `.bande__note a`, qui debordait de
     38 px a 320 px pour cette raison. */
  white-space: nowrap;
}
/* Le nom reste du texte natif pour le rendu des lettres aux petites tailles. */
.site-header .brand { gap: .7rem; flex-shrink: 0; }
.brand__clock { display: block; flex: none; }
.brand__name { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
@media (max-width: 800px) {
  .site-header__inner { gap: .75rem; }
  .site-header .nav-toggle { flex-shrink: 0; }
}

/* -------------------------------------------------------------------------
   BARRE DE NAVIGATION FLUIDE
   -------------------------------------------------------------------------
   Plutot que de basculer d'un coup en menu hamburger, la barre se comprime :
   la police, les paddings et les ecarts suivent la largeur de la fenetre
   jusqu'a 1100 px. Le hamburger n'arrive qu'a 940 px (voir plus bas pourquoi
   ce chiffre) — les fenetres a moitie reduites gardent le menu complet. Ce
   commentaire disait 780 px, le seuil d'avant l'arrivee des deux boutons
   d'outil dans la barre.
   Les valeurs hautes des `clamp()` sont les valeurs d'origine : au-dela de
   1100 px, rien ne change. Sous le seuil du hamburger, le menu deroulant
   reprend ses propres paddings, plus confortables au doigt.
   ------------------------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: clamp(.05rem, -.35rem + .55vw, .35rem); }
/* `:not(.btn)` est indispensable : sans lui, `.nav a` (spécificité 0,1,1) écrase
   la couleur de `.btn--primary` (0,1,0) et le bouton principal du header se
   retrouve en gris foncé sur vert foncé — 1,11:1, illisible. Le même bouton
   affiche 7,63:1 partout ailleurs sur le site. */
.nav a:not(.btn) {
  color: var(--ink-2); text-decoration: none; font-weight: 500;
  font-size: clamp(.8125rem, .53rem + .59vw, .9375rem);
  padding: .5rem clamp(.3rem, -.79rem + 2.29vw, .8rem);
  border-radius: var(--r-sm); white-space: nowrap;
  /* La barre horizontale descend jusqu'a 941 px : elle concerne aussi des
     tablettes, donc des doigts. 44 px de haut, comme partout ailleurs. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav .btn { min-height: 44px; }
.nav .btn {
  white-space: nowrap;
  font-size: clamp(.8125rem, .53rem + .59vw, .9375rem);
  padding-inline: clamp(.6rem, -.29rem + 1.87vw, 1rem);
}
.nav a:not(.btn):hover { color: var(--ink); background: var(--paper-2); }
.nav a:not(.btn)[aria-current="page"] { color: var(--brand-700); font-weight: 650; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: .45rem; cursor: pointer; color: var(--ink);
  /* Le contrôle le plus sollicité sur mobile : il respecte le minimum de 44 px
     comme les autres, ce qui n'était pas le cas (38 px). */
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}

/* Le seuil suit la largeur reelle de la barre une fois comprimee. Il etait a
   900 px quand le menu comptait un bouton et pas de lien « Methode » ; la barre
   avait alors grossi sans que le seuil bouge, et entre 900 et 1000 px tout
   s'empilait — libelles et bouton principal sur deux lignes.
   Si vous ajoutez une entree, remesurez a la largeur du seuil :
   `document.querySelector('.nav').getBoundingClientRect().width`
   + la marque + 2,5rem de marges doit tenir dans la fenetre.

   31 aout 2026 : l'en-tete est desormais le meme sur les 11 pages — les deux
   boutons d'action etaient presents sur les 8 pages de contenu et absents des
   3 pages ou vit le produit. La barre a donc grossi. Remesure a la methode
   ci-dessus : menu 717 + marque 140 + 40 = 897 px. Seuil a 940, soit 43 px de marge.
   (Il est passe par 1100 quand le menu comptait encore six entrees ; le
   miroir a quatre entrees du 31 aout l'a ramene a 940.)
   « Accueil » est sorti du menu dans le meme mouvement : la marque est deja un
   lien vers l'accueil, et l'entree coutait 77 px pour un doublon.

   20 septembre 2026 : le menu est « outils d'abord » — quatre liens (Mes
   risques, Composer mon sac, Mon logement, Plan familial) puis « Guides ». Il
   n'y a plus de boutons : la barre mesure 613 px a 1440, 540 a 941, et plus
   etroit encore quand les clamp() se compriment. Marque 167 px + menu + 40 :
   820 px au plus large. Le seuil passe de 940 a 800 px ; il faut deplacer
   les TROIS ensemble (ici, `.nav__guides` plus bas, et refonte-b-coquille.css).

   4 octobre 2026 : sixième entrée, « En cas d'alerte » (que-faire.html). Remesuré :
   marque 229 + menu 726 + écart 24 = la barre tient à partir de 1 080 px, pas avant
   (114 px de trop à 801). Seuil à 1 100, celui de l'époque des six entrées ; il y a
   désormais QUATRE règles à déplacer ensemble : les deux d'ici et les deux de
   refonte-b-coquille.css (fond du menu déroulant, place du lien d'alerte). */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: .75rem 1.25rem 1.25rem;
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: .7rem .5rem; }
  .nav .btn { margin-top: .5rem; }
}

/* ---------- Hero ---------- */

.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero h1 { margin-bottom: .55em; }
.hero .lead { max-width: 46ch; }
.hero__proof {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem;
  margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
}
.hero__proof div { max-width: 15ch; }
.hero__proof b { display: block; font-family: var(--serif); font-size: var(--t-xl); line-height: 1.1; color: var(--brand-700); }
.hero__proof span { font-size: var(--t-sm); color: var(--muted); line-height: 1.4; display: block; margin-top: .2rem; }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* Carte illustrative du hero : aperçu de sac */
.bagcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: 1.5rem;
}
.bagcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.bagcard__head h3 { margin: 0; font-size: var(--t-base); }
.bagcard__head p { margin: .15rem 0 0; font-size: var(--t-sm); color: var(--muted); }
.bagcard__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .1rem; }
.bagcard__list li {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: .7rem;
  padding: .55rem 0; font-size: var(--t-md); border-bottom: 1px dashed var(--line);
}
.bagcard__list li:last-child { border-bottom: 0; }
.bagcard__list .qty { color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.bagcard__list .tick { color: var(--brand); display: flex; }

/* ---------- Ouverture de l'accueil : le code postal en vedette ---------- */


.chercheur { max-width: 560px; margin: 2.5rem auto 0; text-align: left; }
/* Sur la page « Mes risques » le champ est à gauche, à hauteur du texte, et non
   centré comme sur l'ancien accueil. */
.chercheur--page { max-width: 34rem; margin: .4rem 0 0; }
/* Avant que parcours.js ne monte le champ du code postal, sa place est réservée : sans
   elle, l'accueil et « Mes risques » sautaient de 50 à 110 px au chargement
   (10 octobre 2026, audit E-02). Hauteurs mesurées du champ vide. */
.chercheur:not(:has(form)) { min-height: 3rem; }
.chercheur--page:not(:has(form)) { min-height: 5.2rem; }
@media (max-width: 620px) {
  .chercheur:not(:has(form)) { min-height: 6.5rem; }
  .chercheur--page:not(:has(form)) { min-height: 9rem; }
}
.risques__label { display: block; margin-top: 1.5rem; font-size: var(--t-md); font-weight: 650; color: var(--ink); }



/* ---------- Puces / badges ---------- */

.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand-700);
}
.pill--plain { background: var(--paper-2); color: var(--ink-2); }

/* ---------- Grilles de cartes ---------- */

.grid { display: grid; gap: 1.25rem; }
/* Sans cela, un enfant de grille refuse de rétrécir sous la largeur de son
   contenu : un tableau large pousse alors toute la page en scroll horizontal. */
.grid > *, .hero__grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.6rem; box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .45em; }
.card p { font-size: var(--t-md); color: var(--ink-2); }
.card__icon {
  width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700); margin-bottom: 1.1rem;
}
.card__icon--amber { background: var(--amber-50); color: var(--amber); }
.card__icon--clay { background: var(--clay-50); color: var(--clay); }

/* Carte statistique */
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem;
}
.stat b {
  display: block; font-family: var(--serif); font-size: var(--d-chiffre);
  line-height: 1; color: var(--brand-700); letter-spacing: -.02em;
}
.stat p { margin: .6rem 0 0; font-size: var(--t-md); color: var(--ink-2); }
.stat cite { display: block; margin-top: .7rem; font-size: var(--t-sm); font-style: normal; color: var(--muted); }

/* ---------- Étapes ---------- */

.steps { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 3.25rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--serif); font-size: var(--t-xl); color: var(--brand);
  width: 44px; height: 44px; border: 1px solid var(--brand-300); border-radius: 50%;
  display: grid; place-items: center; background: var(--surface);
}
.step h3 { margin-bottom: .35em; }
.step p { font-size: var(--t-md); color: var(--ink-2); margin: 0; }

/* ---------- Listes à puces cochées ---------- */

.ticklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ticklist li { display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; }
.ticklist li svg { margin-top: .35rem; color: var(--brand); flex: none; }

/* ---------- Prose (pages éditoriales) ---------- */

/* La mesure de lecture est celle de la colonne (`--colonne`, 76 caractères) : le
   texte, les titres, les encadrés et les tableaux s'arrêtent au même bord droit.
   Une mesure propre aux paragraphes (68ch) leur donnait un bord droit à part. */
.prose h2 { margin-top: 2.5em; }
/* Un surtitre annonce le titre qui le suit : sans cette règle, 40 px de vide les séparaient. */
.prose h2:first-child, .prose .eyebrow + h2 { margin-top: 0; }

/* Sections repliables des pages de référence (méthode, sources, confidentialité) :
   le titre reste visible, le texte s'ouvre à la demande (5 octobre 2026). */
details.repli { border-top: 1px solid var(--line-2); }
details.repli:last-of-type { border-bottom: 1px solid var(--line-2); margin-bottom: 1rem; }
details.repli > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
}
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary::after {
  content: "+"; content: "+" / ""; flex: none;
  font-size: var(--t-xl); line-height: 1; color: var(--brand-700);
}
details.repli[open] > summary::after { content: "−"; content: "−" / ""; }
.prose details.repli > summary :is(h2, h3) { margin: 0; font-size: var(--t-lg); }
.prose details.repli > summary h3 { font-size: var(--t-base); }
details.repli > summary:hover :is(h2, h3) { color: var(--brand-700); }
details.repli[open] { padding-bottom: 1.5rem; }
.prose h3 { margin-top: 2em; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
  margin: 1.75em 0; padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--brand-300); background: var(--brand-50);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-base); color: var(--ink-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.25rem 1.4rem; margin: 1.75em 0; font-size: var(--t-base);
}
/* Le titre d'un encadré ouvre l'encadré : la marge haute des titres de la prose
   y laissait 34 px de vide au-dessus de lui. */
.callout > :first-child { margin-top: 0; }
.callout h3 { color: var(--amber); }
.callout--brand { border-left-color: var(--brand); }
.callout--brand h3 { color: var(--brand-700); }

/* ---------- Tableau ---------- */

.table-wrap { overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-md); min-width: 520px; }
th, td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 650; background: var(--paper-2); font-size: var(--t-sm); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- Bandeau CTA ---------- */

/* À la largeur de la colonne de lecture et centré avec elle, même quand il est posé
   dans un conteneur large (5 octobre 2026, soir). */
.cta-band {
  max-width: var(--colonne); margin-inline: auto;
  background: var(--brand); color: #fff; border-radius: var(--r-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(var(--paper-rgb), .82); max-width: 52ch; }
.cta-band__actions { margin-top: 1.5rem; }
.cta-band .btn--light { border-color: transparent; }

/* ---------- Cas récents : événement → équipement ---------- */

.cas-liste { display: grid; gap: 1.25rem; }
.cas {
  display: grid; grid-template-columns: 96px 1fr; gap: 1.6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.7rem 1.85rem; box-shadow: var(--shadow-sm);
}
.cas__date { text-align: right; border-right: 2px solid var(--brand-300); padding-right: 1.3rem; }
.cas__date b {
  display: block; font-family: var(--serif); font-size: var(--t-lg);
  color: var(--brand-700); line-height: 1.1; letter-spacing: -.01em;
}
.cas__date span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: .2rem; }
.cas__faits { font-size: var(--t-base); color: var(--ink-2); margin: 0; line-height: 1.65; }
.cas__besoin {
  margin-top: 1.25rem; padding: 1.1rem 1.25rem;
  background: var(--brand-50); border-radius: var(--r-sm);
}
.cas__besoin h3, .cas__besoin h4 {
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-700); margin-bottom: .75rem;
}
.cas__besoin ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cas__besoin li {
  display: grid; grid-template-columns: 15px 1fr; gap: .65rem; align-items: start;
  font-size: var(--t-md); color: var(--ink-2); line-height: 1.55;
}
.cas__besoin li svg { margin-top: .3rem; color: var(--brand); }
.cas__source { margin: .95rem 0 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }

@media (max-width: 700px) {
  .cas { grid-template-columns: 1fr; gap: 1rem; padding: 1.4rem 1.3rem; }
  .cas__date {
    display: flex; gap: .45rem; align-items: baseline; text-align: left;
    border-right: 0; border-left: 3px solid var(--brand-300); padding: .1rem 0 .1rem .8rem;
  }
  .cas__date span { margin-top: 0; }
  .cas__besoin { padding: .95rem 1.05rem; }
}

/* ---------- Sources ---------- */

.sources { display: grid; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.sources li { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-md); }
.sources li:last-child { border-bottom: 0; }
.sources a { font-weight: 600; }
.sources span { display: block; color: var(--muted); font-size: var(--t-md); margin-top: .15rem; }

/* ---------- Pied de page ---------- */

.site-footer { background: var(--ink); color: rgba(var(--paper-rgb), .7); padding-block: 3.5rem 2rem; font-size: var(--t-md); }
.site-footer a { color: rgba(var(--paper-rgb), .82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h2 { color: #fff; font-size: var(--t-sm); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2rem; }
/* Sous 1000 px la marque prend sa propre ligne : cinq colonnes serrees se
   lisent mal. */
@media (max-width: 1000px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); } .site-footer__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer .brand { color: #fff; margin-bottom: .75rem; }
/* Boutons des réseaux sociaux : pastilles rondes de 44 px (cible tactile), pictogramme
   monochrome. Pour un nouveau réseau, ajouter un <li> dans le pied de chaque page. */
.site-footer__rs-titre { margin: 1.5rem 0 .6rem; color: #fff; font-size: var(--t-sm); font-weight: 600; }
.site-footer ul.site-footer__rs { display: flex; flex-wrap: wrap; gap: .6rem; }
.site-footer__rs a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(var(--paper-rgb), .28); color: #fff;
  transition: background-color .15s, border-color .15s;
}
.site-footer__rs a:hover { background: rgba(var(--paper-rgb), .12); border-color: rgba(var(--paper-rgb), .55); }
.site-footer__rs svg { display: block; }
.site-footer__legal {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(var(--paper-rgb), .14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: var(--t-sm); color: rgba(var(--paper-rgb), .55);
}

/* Bandeau d'information affiliation */
.aff-notice {
  background: var(--amber-50); border: 1px solid var(--amber-200); color: var(--amber-900);
  border-radius: var(--r-md); padding: .9rem 1.15rem; font-size: var(--t-md); line-height: 1.55;
  display: flex; gap: .75rem; align-items: flex-start;
}
.aff-notice svg { flex: none; margin-top: .15rem; color: var(--amber); }
/* Zone de clic de 24 px au moins (WCAG 2.5.8) pour les liens de la mention (« pas testé »,
   vers la méthode) : le remplissage vertical d'un élément en ligne agrandit la cible sans
   écarter les lignes. Même procédé que .rf-mesure__lien. */
.aff-notice a { padding-block: .3rem; }
/* ---------- Utilitaires ----------
   Ils remplacent les attributs style="…" des pages et des gabarits : la politique de
   sécurité n'autorise plus les styles en ligne (10 octobre 2026, audit D-04). Un style
   ajouté dans une page doit donc passer par une classe, ici ou dans sa feuille.
   `!important` : ces classes gardent la priorité qu'avait l'attribut style. */
.u-mesure-36 { max-width: 36ch !important; }
.u-mesure-60 { max-width: 60ch !important; }
.u-mesure-78 { max-width: 78ch !important; }
.u-mesure-900 { max-width: 900px !important; }
.u-mt-09 { margin-top: .9rem !important; }
.u-mt-1 { margin-top: 1rem !important; }
.u-mt-125 { margin-top: 1.25rem !important; }
.u-mt-175 { margin-top: 1.75rem !important; }
.u-mt-2 { margin-top: 2rem !important; }
.u-mt-25 { margin-top: 2.5rem !important; }
.u-my-06 { margin-top: .6rem !important; margin-bottom: .6rem !important; }
.u-my-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.u-filet-haut { margin-top: 1.1rem !important; padding-top: 1rem !important; border-top: 1px solid var(--line) !important; }
.u-bord-marque { border-color: var(--brand-300) !important; }
.u-lead-md { font-size: var(--t-md) !important; }
.u-intro-groupe { margin: .9rem 0 .2rem !important; }
.item__why--note { margin-top: .45rem !important; padding-left: .7rem !important; border-left: 2px solid var(--line-2) !important; }

/* Le rappel d'urgence en tête des résultats (audit B-04) : visible, sobre, imprimé. */
.rappel-urgence {
  margin: 1rem 0; padding: .55rem .85rem; border-left: 3px solid var(--brand-700);
  background: var(--paper-2); color: var(--ink); font-size: var(--t-sm); line-height: 1.5;
}
/* La mention courte, au-dessus des premiers liens d'achat (10 octobre 2026, audit G-01) :
   le lecteur doit savoir qu'un lien est affilié AU MOMENT du clic, pas trois écrans
   plus bas. La mention complète (.aff-notice) reste sous la liste. */
.aff-court {
  margin: 1rem 0; padding: .55rem .85rem; border-left: 3px solid var(--amber);
  background: var(--amber-50); color: var(--amber-900); font-size: var(--t-sm); line-height: 1.5;
}

/* =========================================================
   CONFIGURATEUR
   ========================================================= */

/* Outils d'abord, guides ensuite.
   Le menu compte quatre outils (Mes risques, Composer mon sac, Mon logement,
   Plan familial) puis un seul lien « Guides », separe par un filet : les
   guides soutiennent les outils, ils n'ont pas le meme rang. Ce filet
   remplace celui des deux anciens boutons « Composer mon sac » et
   « Diagnostiquer mon logement », qui donnaient aux deux guides et aux deux
   outils exactement le meme poids. */
.nav__guides {
  display: inline-flex; align-items: center;
  margin-left: 1rem; padding-left: 1rem;
  border-left: 1px solid var(--line);
}
/* Un seuil, le meme que le hamburger (800 px) : le filet bascule a l'horizontale
   au-dessus du lien dans le menu deroulant. */
@media (max-width: 1100px) {
  .nav__guides {
    display: flex; width: 100%;
    margin-left: 0; padding-left: 0; border-left: 0;
    margin-top: .35rem; padding-top: .5rem; border-top: 1px solid var(--line);
  }
}

/* Lien de troisieme rang : souligne, sans cadre. Meme dessin que `.rf-lien`
   de l'accueil, mais disponible sur toutes les pages. */
.lien-tertiaire {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-md); color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--muted);
}
.lien-tertiaire:hover { color: var(--brand-700); text-decoration-color: currentColor; }

/* =========================================================================
   Le parcours : « étape suivante », bilan, ligne de confiance
   -------------------------------------------------------------------------
   Composants partagés par l'accueil, « Mes risques » et les trois outils.
   Rendus par parcours.js ; aucune couleur nouvelle.
   ========================================================================= */

/* Ce qui suit un résultat : ce qu'on vient de faire, ce qui vient ensuite.
   Un bouton principal, un lien — jamais deux boutons de même rang. */
.suite-parcours {
  margin-top: 1.5rem; padding: 1.25rem 1.5rem;
  background: var(--brand-50); border: 1px solid var(--brand-300);
  border-left: 4px solid var(--brand); border-radius: var(--r-md);
}
.suite-parcours .suite-parcours__titre {
  margin: 0 0 .3rem; font-family: var(--serif); font-size: var(--t-lg);
  font-weight: 600; line-height: 1.3; color: var(--ink);
}
.suite-parcours .suite-parcours__sous {
  margin: 0 0 1rem; font-size: var(--t-md); font-weight: 400; color: var(--ink-2);
}
.suite-parcours .btn-row { justify-content: flex-start; gap: .25rem 1.25rem; }

/* Votre préparation : les quatre étapes, où l'on en est. */
.bilan {
  margin-top: 1.5rem; padding: 1.25rem 1.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.bilan h3 { margin: 0 0 1rem; font-size: var(--t-lg); }
.bilan__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.bilan__ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.bilan__ligne a { flex: 1 1 auto; font-weight: 600; color: var(--ink); }
.bilan__etat { font-size: var(--t-md); font-variant-numeric: tabular-nums; color: var(--muted); }
.bilan__ligne.is-termine .bilan__etat { color: var(--brand-700); font-weight: 650; }
.bilan__barre { flex: 0 0 100%; height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.bilan__barre i { display: block; height: 100%; background: var(--brand); }
.bilan__pied { margin: 1rem 0 0; }
.bilan__pied .lien-outil { display: inline; min-height: 0; padding: .35rem 0; }

/* La ligne de confiance, près d'un questionnaire : discrète, pas un argument. */
.confiance {
  margin: .9rem 0 0; display: flex; flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--muted);
}

/* Le fil des etapes sur le papier (pages « Mes risques » et « Plan familial »). */
.pmini-zone { margin-top: 1.25rem; }
.pmini__titre { margin: 0 0 .5rem; font-size: var(--t-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pmini ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.pmini a {
  display: grid; grid-template-columns: 1.4rem 1fr; column-gap: .4rem; height: 100%;
  padding: .7rem .8rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xs); color: var(--ink); text-decoration: none;
}
.pmini a:hover { border-color: var(--brand); }
.pmini a[aria-current="step"] { border-color: var(--brand); border-top: 3px solid var(--brand); background: var(--brand-50); }
.pmini__num { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.2; color: var(--brand-700); }
.pmini__nom { font-weight: 650; font-size: var(--t-md); line-height: 1.3; }
.pmini__etat { grid-column: 2; margin-top: .15rem; font-size: var(--t-sm); color: var(--ink-2); }
.pmini__astuce { margin: .6rem 0 0; font-size: var(--t-sm); color: var(--muted); }
.pmini__astuce a { display: inline; padding: 0; border: 0; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .pmini ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* « Étape suivante » : l'étiquette, puis une seule suite. */
.suite-parcours .suite-parcours__etiquette {
  margin: 0 0 .35rem; font-size: var(--t-xs); font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-700);
}
.bilan__action { margin: 1.1rem 0 0; }
.bilan__fini { margin: 1rem 0 0; font-size: var(--t-md); color: var(--ink-2); }

/* Le plan du logement en un coup d'œil : trois priorités, en tête du résultat.
   Chaque carte mène à sa liste ; le « reste » suit les cases cochées. */
.h-resume { margin-top: 1.25rem; }
.h-resume__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.h-resume__carte a {
  display: flex; flex-direction: column; gap: .25rem; height: 100%;
  padding: 1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--brand);
  border-radius: var(--r-xs); color: var(--ink); text-decoration: none;
}
.h-resume__carte a:hover { border-color: var(--brand); background: var(--brand-50); }
.h-resume__rang { font-size: var(--t-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); }
.h-resume__carte b { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.2; }
.h-resume__quoi { font-size: var(--t-md); color: var(--ink-2); line-height: 1.4; }
.h-resume__chiffres { margin-top: auto; padding-top: .35rem; font-size: var(--t-sm); font-weight: 650; color: var(--brand-700); font-variant-numeric: tabular-nums; }
.blocsep[id] { scroll-margin-top: .75rem; }
@media (max-width: 760px) { .h-resume__liste { grid-template-columns: 1fr; } }

/* Trois sortes d'information : donnée officielle, calcul dérivé, choix propre.
   Jamais décoratives : c'est ce qui dit au lecteur ce qu'il peut recouper. */
.nature {
  display: inline-block; margin-right: .35rem; padding: .08rem .55rem;
  border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 650;
  letter-spacing: .02em; line-height: 1.5; white-space: nowrap;
}
.nature--officiel { background: var(--brand-50); color: var(--brand-700); }
.nature--calcul { background: var(--paper-2); color: var(--ink-2); }
.nature--choix { background: var(--amber-50); color: var(--amber); }
/* `.prose .natures` : la règle de `.prose ul` (plus spécifique) imposait un retrait que
   seul un !important annulait (audit A-17). */
.natures, .prose .natures { list-style: none; padding-left: 0; display: grid; gap: .9rem; }
.natures em { display: block; margin-top: .2rem; font-size: var(--t-md); color: var(--muted); }

/* Le registre des chiffres cités (page Sources), généré par references.js. */
.registre { width: 100%; border-collapse: collapse; font-size: var(--t-md); margin-top: 1rem; }
.registre caption { text-align: left; padding-bottom: .6rem; font-size: var(--t-sm); color: var(--muted); }
.registre th, .registre td { text-align: left; vertical-align: top; padding: .75rem .9rem .75rem 0; border-top: 1px solid var(--line); }
.registre thead th { border-top: 0; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.registre__note { display: inline-block; margin-top: .15rem; font-size: var(--t-sm); color: var(--muted); }
.registre td:nth-child(2) { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 680px) {
  .registre thead { display: none; }
  .registre tr { display: grid; gap: .2rem; padding: .85rem 0; border-top: 1px solid var(--line); }
  .registre td { border: 0; padding: 0; }
}

/* Page « Guides » : quatre groupes, une phrase par guide. */
/* Page des guides : un sommaire. Des parties ouvertes par le filet epais de l'accueil,
   des guides numerotes, le titre en serif, la duree a droite. Pas de cartes ni de
   pictogrammes. Chaque groupe est un <section> : `padding-block: 0`, sinon il prend le
   rythme des sections de page (98 px dessus et dessous). */
.guides-page { width: min(100% - 2.5rem, var(--colonne)); }
.guides-section { padding-block: clamp(.5rem, 2vw, 1.5rem) clamp(3rem, 6vw, 4.5rem); }
.guides { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); counter-reset: guide; }
.guides__groupe { padding-block: 0; }
.guides__groupe h2 {
  margin: 0; padding-top: .8rem; border-top: 2px solid var(--ink);
  font-size: var(--t-xl); line-height: 1.25;
}
.guides__partie {
  display: block; margin-bottom: .3rem;
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700);
}
.guides__liste { list-style: none; margin: .9rem 0 0; padding: 0; }

/* Une ligne : numero | titre et resume | duree. Le titre est le seul lien ; son ::after
   couvre la ligne entiere. */
.guide-ligne {
  position: relative; counter-increment: guide;
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  column-gap: 1.1rem; align-items: baseline;
  padding: 1.05rem 0 1.15rem; border-top: 1px solid var(--line);
}
.guide-ligne::before {
  content: counter(guide, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--brand-300);
  font-variant-numeric: tabular-nums; transition: color .15s;
}
.guide-ligne h3 { grid-column: 2; margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
.guide-ligne h3 a { color: var(--ink); text-decoration: none; }
.guide-ligne h3 a::after { content: ""; position: absolute; inset: 0; }
.guide-ligne h3 a:focus-visible { outline: 0; }
.guide-ligne:has(a:focus-visible) { outline: 3px solid var(--brand-700); outline-offset: 4px; }
.guide-ligne p { grid-column: 2; margin: .35rem 0 0; font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.guide-ligne__duree {
  grid-column: 3; grid-row: 1; white-space: nowrap;
  font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums;
}
.guide-ligne:hover::before { color: var(--brand); }
.guide-ligne:hover h3 a { color: var(--brand-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .guide-ligne::before { transition: none; } }

/* Telephone : le numero reste a gauche, la duree passe sous le resume. */
@media (max-width: 600px) {
  .guide-ligne { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .8rem; }
  .guide-ligne::before { font-size: 1.45rem; grid-row: 1 / span 3; }
  .guide-ligne h3 { font-size: var(--t-lg); }
  .guide-ligne__duree { grid-column: 2; grid-row: auto; margin-top: .35rem; }
}
.guides-page__suite { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* En-tête statique des deux outils : donne un h1 réel aux pages générées en JS
   et un contexte au visiteur avant la première question. */
/* -------------------------------------------------------------------------
   SUR UNE PAGE-OUTIL, LES COMMANDES SONT LA PAGE
   -------------------------------------------------------------------------
   Le calculateur allemand de Notrationator n'a ni héros ni introduction : les
   deux molettes sont en haut, et le résultat occupe le corps de la page. La
   hiérarchie est la bonne — quelqu'un qui ouvre un outil vient s'en servir.

   Mesuré ici avant correction, sur un écran de 375 × 700 : le premier compteur
   commençait à 671 px, c'est-à-dire tout juste au bord de l'écran, derrière un
   titre de 116 px et un chapô de 152 px. L'intro reste (elle dit ce qu'on va
   obtenir, ce que Notrationator ne dit pas et devrait), mais elle se resserre
   là où l'écran est court.
   ------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .quiz__progress { margin-bottom: 1.5rem; }
}

.quiz { padding-block: clamp(2rem, 5vw, 3.5rem) var(--gap); }

.quiz__progress { margin-bottom: 2.5rem; }
.quiz__progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-sm); color: var(--muted); margin-bottom: .6rem;
}
.quiz__progress-meta b { color: var(--ink); font-weight: 650; }
.quiz__bar { height: 4px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.quiz__bar i { display: block; width: 0; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width .35s cubic-bezier(.4,0,.2,1); }

.qcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--shadow-sm);
}
.qcard__q { margin: 0 0 .4em; font-family: var(--serif); font-size: var(--d-sm); line-height: 1.2; }
.qcard__help { color: var(--muted); font-size: var(--t-md); margin: 0 0 1.9rem; max-width: 56ch; }

/* Options cliquables */
.options { display: grid; gap: .75rem; }
.options--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .options--2 { grid-template-columns: 1fr; } }

.opt {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface);
  padding: 1.05rem 1.2rem; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.opt:hover { border-color: var(--brand-300); background: var(--surface); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Bordure en --muted (5,3:1) : en --line-2 (1,59:1), la case non cochée était presque
   invisible pour un public malvoyant (10 octobre 2026, audit F-03, WCAG 1.4.11). */
.opt__box {
  width: 20px; height: 20px; border: 1.5px solid var(--muted); border-radius: 50%;
  display: grid; place-items: center; margin-top: .15rem; flex: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.opt--multi .opt__box { border-radius: var(--r-xs); }
.opt__box svg { opacity: 0; color: #fff; transition: opacity .12s ease; }
.opt b { display: block; font-weight: 600; font-size: var(--t-base); }
.opt span { display: block; font-size: var(--t-md); color: var(--muted); margin-top: .15rem; line-height: 1.45; }
.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand); }
.opt:has(input:checked) .opt__box { background: var(--brand); border-color: var(--brand); }
.opt:has(input:checked) .opt__box svg { opacity: 1; }
.opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Recherche par code postal ---------- */

.cp {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.25rem 1.35rem; margin-bottom: 1.5rem;
}

/* Variante « vedette » de l'accueil : surface blanche, pour repondre a la carte
   d'apercu en face et ne pas poser un aplat beige sur un fond beige.
   DOIT rester declaree apres `.cp` — meme specificite (0,1,0), donc l'ordre
   tranche. Elle etait plus haut dans la feuille et n'a jamais rien fait.
   C'est le troisieme cas de ce type dans ce fichier : quand vous ajoutez un
   modificateur, verifiez qu'il est bien apres sa base. */
.cp--vedette {
  background: var(--surface); border-color: var(--line-2);
  box-shadow: var(--shadow-md); padding: 1.5rem;
}
.cp--vedette .cp__row input {
  font-size: var(--t-xl); padding: .95rem 1.25rem; text-align: center; letter-spacing: .18em;
  /* Un <input> a une largeur minimale intrinseque tiree de son attribut `size`
     (20 caracteres par defaut). A 24 px avec .18em d'interlettrage, ca faisait
     262 px — plus les 48 px de padding de `.cp`, la colonne du hero passait a
     312 px dans un conteneur de 288. `min-width: 0` autorise la reduction, la
     taille reste pilotee par flex. */
  min-width: 0;
}
.cp--vedette .cp__row input::placeholder { letter-spacing: normal; font-size: var(--t-base); }
.cp--vedette .cp__row .btn { padding: .95rem 1.7rem; }
.cp--vedette .cp__mention { margin-top: .85rem; }
.cp__head { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; }
.cp__icon {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: none;
  background: var(--brand-50); color: var(--brand-700); display: grid; place-items: center;
}
.cp__head b { display: block; font-size: var(--t-base); font-weight: 650; }
.cp__head span { display: block; font-size: var(--t-md); color: var(--muted); margin-top: .1rem; }
/* Commune déjà connue, dans un questionnaire (cp.js) : le rappel « Code postal déjà
   saisi » remplace l'en-tête, AU-DESSUS du champ, pour qu'on ne le retape pas pour rien. */
.cp__head--connue {
  padding: .8rem .9rem; background: var(--brand-50);
  border: 1px solid var(--brand-300); border-left: 4px solid var(--brand); border-radius: var(--r-sm);
}
.cp__head--connue .cp__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; }
.cp__head--connue b { color: var(--brand-700); }
.cp__head--connue span { color: var(--ink-2); }

.cp__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.cp__label { display: block; margin: 0 0 .35rem; font-size: var(--t-md); font-weight: 650; color: var(--ink); }
.cp__row input {
  flex: 1 1 160px; min-width: 0; min-height: 44px;
  font: inherit; font-size: var(--t-base); font-variant-numeric: tabular-nums; letter-spacing: .06em;
  padding: .72rem 1rem; border: 1px solid var(--muted); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
}
.cp__row input::placeholder { color: var(--muted); letter-spacing: normal; font-size: var(--t-base); }
.cp__row input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

.cp__mention { margin: .9rem 0 0; }
.cp__mention a { color: var(--ink-2); }

.cp__sortie:empty { display: none; }
.cp__etat {
  display: flex; align-items: center; gap: .6rem;
  margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--t-md); color: var(--ink-2);
}
.cp__etat--err { background: var(--clay-50); border-color: var(--clay-200); color: var(--clay-700); align-items: flex-start; }
.cp__etat--err svg { flex: none; margin-top: .12rem; }
.cp__etat--err a { color: var(--clay-700); }

.cp__spin {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--brand);
  animation: cp-tourne .7s linear infinite;
}
@keyframes cp-tourne { to { transform: rotate(360deg); } }

.cp__choix { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.cp__choix label { flex: 1 1 100%; font-size: var(--t-md); color: var(--ink-2); margin-bottom: .2rem; }
.cp__choix select {
  flex: 1 1 200px; font: inherit; font-size: var(--t-md); padding: .6rem .9rem;
  border: 1px solid var(--muted); border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
}

.cp__res {
  margin-top: 1rem; padding: 1.15rem 1.25rem;
  background: var(--surface); border: 1px solid var(--brand-300); border-radius: var(--r-md);
}
.cp__res-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 0 1.25rem; margin-bottom: .8rem;
}
/* « Oublier cette commune » : à droite du nom, un lien discret et non un bouton de
   plus. La zone tactile garde ses 44 px ; la marge négative aligne le texte sur le nom. */
.cp__res-head .cp__oubli { margin-block: -.55rem; }
.cp__res-head b { font-size: var(--t-lg); font-weight: 650; display: block; }
.cp__res-head span { font-size: var(--t-sm); color: var(--muted); }
.cp__pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.cp__ligne {
  display: grid; grid-template-columns: 16px 1fr; gap: .6rem; align-items: start;
  margin: 0 0 .55rem; font-size: var(--t-md); color: var(--ink-2); line-height: 1.5;
}
.cp__ligne svg { margin-top: .18rem; color: var(--muted); }
.cp__ligne--note { color: var(--brand-700); }
.cp__ligne--note svg { color: var(--brand); }
/* Les derniers arrêtés de catastrophe naturelle de la commune.
   Décalée pour se caler sur la colonne de texte de `.cp__ligne`, dont elle
   prolonge la phrase : l'icône reste seule dans sa gouttière de 16 px. */
.cp__histoire {
  list-style: none; margin: -.2rem 0 .8rem calc(16px + .6rem); padding: 0;
  font-size: var(--t-sm);
}
.cp__histoire li {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  padding: .32rem 0; border-top: 1px solid var(--line); color: var(--ink-2);
}
.cp__histoire li:first-child { border-top: 0; }
.cp__histoire span { min-width: 0; }
.cp__histoire b {
  color: var(--muted); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Sous 520 px il ne reste que 183 px de large pour la ligne : « Inondations
   et/ou Coulées de Boue » se casse en trois, et la date reste suspendue en haut
   à droite. On empile, et on récupère au passage la gouttière de l'icône. */
@media (max-width: 520px) {
  .cp__histoire { margin-left: 0; }
  .cp__histoire li { display: block; }
  .cp__histoire b { display: block; margin-top: .1rem; }
}


/* Compteurs (nombre de personnes) */
.counters { display: grid; gap: .75rem; }
.counter {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 1rem 1.2rem; background: var(--surface);
}
.counter b { display: block; font-size: var(--t-base); font-weight: 600; }
.counter span { display: block; font-size: var(--t-md); color: var(--muted); }
.counter__ctrl { display: flex; align-items: center; gap: .35rem; }
.counter__ctrl button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font-size: var(--t-lg); line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.counter__ctrl button:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); }
.counter__ctrl button[disabled] { opacity: .3; cursor: not-allowed; }
.counter__ctrl output { min-width: 2.25rem; text-align: center; font-weight: 650; font-size: var(--t-base); font-variant-numeric: tabular-nums; }

.qcard__nav {
  display: flex; align-items: center; justify-content: space-between;
  /* `flex-wrap: wrap` : « Retour » (126 px) + « Continuer » (151 px) + l'ecart
     ne tiennent pas dans 288 px. Sans le retour a la ligne, les deux boutons
     depassaient de 11 px. */
  flex-wrap: wrap;
  gap: .75rem 1rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
/* `.btn` impose `display: inline-flex`, qui l'emporte sur l'attribut `hidden` :
   sans cette regle, le « Retour » masque de la premiere question resterait
   affiche. `margin-left: auto` tient « Continuer » a droite quand il est seul. */
.qcard__nav > [hidden] { display: none; }
.qcard__nav > .btn--primary { margin-left: auto; }
@media (max-width: 400px) {
  /* Sous 400 px les deux boutons prennent chacun toute la largeur : c'est plus
     lisible qu'une paire serree, et la cible tactile y gagne. */
  .qcard__nav { flex-direction: column-reverse; align-items: stretch; }
  .qcard__nav .btn { width: 100%; justify-content: center; }
}

/* ---------- Résultat ---------- */

.result__hero {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 1.5rem; box-shadow: var(--shadow-sm);
}
.result__hero h2 { margin-bottom: .3em; }
.result__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem; }
.result__metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-top: 1.75rem;
}
@media (max-width: 700px) { .result__metrics { grid-template-columns: repeat(2, 1fr); } }
.result__metrics div { background: var(--surface); padding: 1.1rem 1.25rem; }
.result__metrics b { display: block; font-family: var(--serif); font-size: var(--t-xl); color: var(--brand-700); line-height: 1.1; }
.result__metrics span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: .25rem; }

.progress-mini { display: flex; align-items: center; gap: .75rem; font-size: var(--t-md); color: var(--muted); margin-top: 1.25rem; }
.progress-mini .quiz__bar { flex: 1; }

/* -------------------------------------------------------------------------
   LES PALIERS
   -------------------------------------------------------------------------
   Placés entre la barre d'outils et la liste. Les chiffres sont alignés à
   droite en chiffres tabulaires : trois lignes de paliers ne se comparent que
   si leurs colonnes se superposent. Sous 620 px, la comparaison verticale
   devient impossible de toute façon — les chiffres passent alors sous le
   libellé, en ligne, et se lisent comme une phrase.
   ------------------------------------------------------------------------- */
.paliers {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: clamp(1.15rem, 3vw, 1.6rem);
  margin-bottom: 1.5rem;
}
.paliers h3 { font-size: var(--t-xl); margin: 0 0 .3em; }
.paliers__intro {
  font-size: var(--t-md); color: var(--ink-2);
  margin: 0 0 1.1rem; max-width: 62ch;
}
/* Un vrai tableau, et pas une liste stylée : trois paliers ne se comparent que
   si leurs chiffres tombent sur les mêmes verticales. Une rangée de flex les
   justifie à droite indépendamment ligne par ligne — mesuré, « 336–614 € » et
   « 641–1 141 € » décalaient les colonnes voisines de 13 px. Le tableau les
   aligne gratuitement, et décrit correctement une donnée qui est tabulaire.
   Pas d'en-tête : chaque cellule porte son unité, donc elle se lit seule — ce
   qui est aussi ce qui permet d'empiler proprement sur mobile. */
.paliers__table { width: 100%; border-collapse: collapse; }
/* La règle globale `th` habille des en-têtes de colonne : petites capitales
   grises sur fond sable. Un `th[scope="row"]` n'est pas un en-tête de colonne
   mais le libellé d'une ligne, et il porte ici une phrase — il faut donc
   défaire les six déclarations, pas seulement l'alignement. C'est la même
   famille de collision que `.nav a` / `.btn--primary` : une règle d'élément
   écrite pour un usage, héritée par un autre. */
.paliers__table th[scope="row"] {
  text-align: left; font-weight: inherit; padding: .85rem 1.5rem .85rem 0;
  border-top: 1px solid var(--line); vertical-align: baseline;
  background: none; color: var(--ink); font-size: var(--t-base);
  text-transform: none; letter-spacing: normal;
}
.paliers__table th[scope="row"] b { display: block; font-weight: 650; }
.paliers__table th[scope="row"] span {
  display: block; font-size: var(--t-sm); color: var(--muted); margin-top: .12rem;
}
.paliers__table td {
  text-align: right; white-space: nowrap; vertical-align: baseline;
  padding: .85rem 0 .85rem 1.5rem; border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--muted);
}
.paliers__table td b {
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 600;
  color: var(--brand-700); font-variant-numeric: tabular-nums;
}
.paliers > .tiny {
  margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line);
}

/* Sous 620 px, quatre colonnes ne tiennent plus et la comparaison verticale
   n'a de toute façon plus lieu : on empile le libellé, puis les trois chiffres
   sur une ligne, qui se lisent alors comme une phrase. */
@media (max-width: 620px) {
  .paliers__table, .paliers__table tbody, .paliers__table tr { display: block; }
  .paliers__table tr { border-top: 1px solid var(--line); padding: .62rem 0; }
  .paliers__intro { margin-bottom: .8rem; }
  .paliers__table th[scope="row"],
  .paliers__table td { border-top: 0; padding: 0; }
  .paliers__table th[scope="row"] { display: block; }
  .paliers__table td {
    display: inline; text-align: left; white-space: normal;
  }
  /* Empilés, les chiffres au corps d'affichage prenaient chacun leur ligne :
     218 px par palier, soit 650 px avant même d'atteindre la liste. Ramenés au
     corps courant et séparés par un point médian, les trois tiennent sur une
     ligne ou deux et se lisent comme une phrase. */
  .paliers__table td b { font-size: var(--t-base); }
  .paliers__table td + td::before { content: " · "; color: var(--line-2); }
  .paliers__table tr > td:first-of-type { display: inline-block; margin-top: .45rem; }
}

/* Catégories du résultat */
.catblock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 1rem; overflow: hidden; }
.catblock > summary {
  cursor: pointer; list-style: none; padding: 1.15rem 1.4rem;
  display: flex; align-items: center; gap: .9rem;
}
.catblock > summary::-webkit-details-marker { display: none; }
.catblock__icon { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-700); display: grid; place-items: center; flex: none; }
.catblock__title { font-weight: 650; font-size: var(--t-base); }
.catblock__meta { font-size: var(--t-sm); color: var(--muted); display: block; font-weight: 400; margin-top: .1rem; }
.catblock__chev { margin-left: auto; color: var(--muted); transition: transform .2s ease; flex: none; }
.catblock[open] .catblock__chev { transform: rotate(180deg); }

.items { list-style: none; margin: 0; padding: 0 1.4rem 1.1rem; border-top: 1px solid var(--line); }
.item {
  display: grid; grid-template-columns: 24px 1fr auto; gap: .9rem; align-items: start;
  padding: 1rem 0; border-bottom: 1px dashed var(--line);
}
.item:last-child { border-bottom: 0; }
/* Vue Démarrage : ce que la liste complète ajoute à la catégorie (configurateur.js). */
.items__suite { padding: .7rem 0 0; }
.items__suite .lien-outil { display: inline; min-height: 0; padding: 0; color: var(--brand-700); }
/* <label> et non <div> : la case est enveloppée pour que la cible tactile passe
   de 22 px à 44 × 48 sur mobile. Ne pas repasser en div sans ajouter un for=,
   et ne pas rétrécir la première colonne de .item : c'est elle qui donne la
   largeur de la zone cliquable. */
.item__check {
  margin-top: .1rem; display: flex; align-items: flex-start;
  min-height: 44px; padding-right: .35rem; cursor: pointer;
}
.item__check input { flex: none; width: 19px; height: 19px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.item__name { font-weight: 600; font-size: var(--t-base); }
.item__qty { color: var(--brand-700); font-weight: 650; font-variant-numeric: tabular-nums; }
/* Pas de max-width ici : le plafond a 58ch laissait une gouttiere vide
   d'environ 160 px entre la fin de la description et la colonne prix, qui
   ne se rattachait plus visuellement a l'article. La colonne du milieu est
   deja bornee par le conteneur etroit. */
.item__why { font-size: var(--t-md); color: var(--muted); margin-top: .2rem; line-height: 1.5; }
.item__side { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: right; }

/* Le lien marchand etait un bouton plein, repete quarante fois : le rail
   vertical qu'il formait etait l'element le plus bruyant de la page, ce qui
   contredit tout le discours « nous ne sommes pas une boutique ». Un lien
   suffit. Sa cible tactile est ramenee a 44 px dans le bloc mobile en fin de
   feuille — sans ca elle tombe a 27 px de haut. */
.item__lien {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--brand-700);
  text-decoration: none; border-bottom: 1px solid var(--brand-300);
  padding: .15rem 0; white-space: nowrap;
}
.item__lien:hover { color: var(--brand); border-bottom-color: var(--brand); }
.item__lien svg { opacity: .7; }
.item__price { font-size: var(--t-sm); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item__poids {
  font-size: var(--t-xs); color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Barre, mais ne delave pas : a `opacity: .45` le texte tombait a 1,74:1 et
   on ne pouvait plus relire ce qu'on avait deja rassemble — precisement ce
   qu'on vient verifier six mois plus tard. */
.item.is-done .item__name, .item.is-done .item__why {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
  color: var(--muted);
}
/* Les pastilles d'un article fait ne sont pas délavées non plus : à `opacity: .55` elles
   tombaient à 2,2:1 (mesuré le 22 septembre 2026 sur 49 pastilles). Le texte barré suffit. */
.item__badge { font-size: var(--t-xs); font-weight: 650; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .45rem; border-radius: var(--r-xs); background: var(--brand-50); color: var(--brand-700); vertical-align: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.item__badge--opt { background: var(--paper-2); color: var(--muted); }
.item__badge--dej { background: var(--amber-50); color: var(--amber); }
.item__badge--obl { background: var(--clay-50); color: var(--clay); }
.item__badge--aide { background: var(--amber-50); color: var(--amber); }

/* Diagnostic habitat */
.h-chantier { font-weight: 650; color: var(--ink-2); }
/* Encart rouge des articles à combustion. Utilisé par le diagnostic habitat
   ET par le configurateur de sac (réchaud, allumettes) — voir le champ
   `danger`. Ne le retirez jamais pour gagner de la place. */
.h-danger {
  display: grid; grid-template-columns: 16px 1fr; gap: .6rem; align-items: start;
  margin-top: .6rem; padding: .7rem .9rem;
  background: var(--clay-50); border-radius: var(--r-sm);
  font-size: var(--t-md); line-height: 1.5; color: var(--clay-700);
}
.h-danger svg { margin-top: .15rem; color: var(--clay); }

@media (max-width: 640px) {
  .item { grid-template-columns: 44px 1fr; }
  .item__side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }
}

.result__toolbar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 1.5rem;
}
.result__toolbar .btn-row { gap: .5rem; }
.result__toolbar-aide { flex: 1 1 100%; margin: 0; }

/* Pas d'écart vertical : chaque lien a déjà 44 px de haut. Avec 1,1rem en plus, « Effacer
   ou recommencer », passé à la ligne sur téléphone, flottait loin des autres. */
.result__secondaires { display: flex; flex-wrap: wrap; gap: 0 1.1rem; align-items: center; }
.lien-outil {
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  font: inherit; font-size: var(--t-sm); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--muted); min-height: 44px;
}
.lien-outil:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Métrique mise en avant : le « reste à acheter » */
.result__metrics div.is-fort { background: var(--brand-50); }
.result__metrics div.is-fort b { color: var(--brand-700); }
.result__metrics div.is-fort span { color: var(--brand-700); opacity: .75; font-weight: 600; }

/* Sélecteur de vue démarrage / complète */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill);
}
.segmented__btn {
  font: inherit; font-size: var(--t-md); font-weight: 600; color: var(--ink-2);
  padding: .42rem 1rem; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer;
  white-space: nowrap; transition: background-color .15s ease, color .15s ease;
}
.segmented__btn:hover { color: var(--ink); }
.segmented__btn.is-on { background: var(--brand); color: #fff; }
.segmented__nb { font-variant-numeric: tabular-nums; }
.segmented__nb::before { content: " · "; }

/* Séparateur entre le sac 24 h et le complément 72 h */
.blocsep { margin: 2.25rem 0 1rem; padding-left: 1rem; border-left: 3px solid var(--brand); }
.blocsep h3 { margin: 0 0 .2em; font-family: var(--serif); font-size: var(--t-xl); font-weight: 600; }
.blocsep p { margin: 0; font-size: var(--t-md); color: var(--muted); max-width: 60ch; }

/* Vue « courses » : ce qui reste à acheter, par rayon, sans les justifications.
   Elle réutilise `.items` et `.item` de la liste complète (cases, prix, lien) ;
   seuls l'en-tête, les groupes et le total lui sont propres. */
.courses__tete { margin: 0 0 1.25rem; }
.courses__tete h3 { margin: 0 0 .15em; font-family: var(--serif); font-size: var(--t-xl); font-weight: 600; }
.courses__tete p { margin: 0; font-size: var(--t-md); color: var(--muted); }
.courses__bloc {
  margin: 1.75rem 0 .75rem; padding-left: .85rem; border-left: 3px solid var(--brand);
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 600;
}
.courses__groupe { margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.courses__groupe > h4 { margin: 0; padding: .75rem 1.4rem; background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: var(--t-md); }
.courses__groupe .items { border-top: 0; padding-top: .25rem; }
.courses__total { margin: 1.25rem 0 .6rem; font-size: var(--t-lg); }
.courses__total b { font-family: var(--serif); font-size: var(--t-xl); color: var(--brand-700); font-variant-numeric: tabular-nums; }
.courses__vide { padding: 1.25rem 1.4rem; background: var(--brand-50); border-radius: var(--r-md); color: var(--brand-700); font-weight: 600; }

/* Rappel semestriel */
.rappel {
  margin-top: 1.5rem; padding: 1.6rem 1.75rem;
  background: var(--brand-50); border: 1px solid var(--brand-300); border-radius: var(--r-md);
}
.rappel h3 { margin: 0 0 .4em; }
.rappel p { font-size: var(--t-md); color: var(--ink-2); max-width: 62ch; }
.rappel__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.25rem 0 .9rem; }
/* Le formulaire passe en colonne : la case de consentement doit etre AU-DESSUS
   du champ, pas a cote. Un consentement qu'on decouvre apres avoir saisi son
   adresse n'est pas eclaire au sens de l'article 4-11 du RGPD.
   Voir le garde-fou en tete de `rendreRappel()` dans configurateur.js : ce
   formulaire ne s'affiche que si `SITE.emailEndpoint` est renseigne, et il ne
   doit pas l'etre avant le reste du travail de conformite. */
.rappel__form { display: flex; flex-direction: column; gap: .6rem; flex: 1 1 280px; }
.rappel__form > :not(.rappel__consentement) { align-self: stretch; }
.rappel__consentement {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  align-items: start; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2);
}
/* 18 px et non la taille native : la case doit rester une cible tactile
   confortable, et le <label> qui l'enveloppe etend deja la zone au texte. */
.rappel__consentement input { width: 18px; height: 18px; margin-top: .15rem; flex: none; }
/* `input[type="email"]` et non `input` : depuis que le formulaire porte une
   case de consentement, un selecteur generique lui appliquait le rayon en
   gelule et le rembourrage du champ de saisie. Meme specificite, regle plus
   tardive — la case perdait. */
.rappel__form input[type="email"] {
  flex: 1; min-width: 0; font: inherit; font-size: var(--t-md);
  padding: .7rem 1rem; border: 1px solid var(--muted); border-radius: var(--r-pill); background: var(--surface);
}
.rappel .tiny { margin: 0; }

.hidden { display: none !important; }

/* ---------- Fil d'Ariane, date de mise à jour, « À lire aussi » ----------
   Le fil et la date sont VISIBLES parce que leur balisage (BreadcrumbList,
   dateModified) doit décrire ce que le lecteur voit. La date visible, la date
   `dateModified` du JSON-LD et le `lastmod` du sitemap sont la MÊME date : voir
   le README, « Les dates de mise à jour ». */
.fil { margin: 0 0 1.1rem; font-size: var(--t-sm); }
.fil ol { display: flex; flex-wrap: wrap; gap: .2rem .55rem; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.fil li + li::before { content: "›"; margin-right: .55rem; }
/* Cible de 44 px de haut sans écarter les lignes : le remplissage d'un élément en ligne
   agrandit la zone de clic (10 octobre 2026, audit F-19). */
.fil a { color: inherit; text-decoration-color: var(--muted); padding-block: .7rem; }
.fil a:hover { color: var(--ink); }
.fil [aria-current] { color: var(--ink-2); }
.maj { margin: -.4rem 0 1.25rem; font-size: var(--t-sm); color: var(--muted); }

.lire-aussi { padding-top: 1.5rem; border-top: 1px solid var(--line-2); }
/* Des titres seuls, sur une ligne qui passe à la suivante (5 octobre 2026) : chaque lien
   portait une phrase de description, 60 à 90 mots par page pour quatre liens. */
.lire-aussi h2 { margin-bottom: .75rem; font-size: var(--t-lg); }
.lire-aussi ul { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.lire-aussi a { font-weight: 600; }
.lire-aussi a::after { content: " →"; content: " →" / ""; }

/* =========================================================================
   ADAPTATION MOBILE
   Regroupée ici volontairement : un seul endroit à relire pour vérifier le
   comportement sur petit écran.
   ========================================================================= */

@media (max-width: 620px) {

  /* --- Cibles tactiles : 44 px minimum, recommandation d'accessibilité --- */
  .btn { min-height: 44px; }
  /* 44 px aussi pour les petits boutons : le bouton « Voir » des listes est
     le plus cliqué du site, il n'y a aucune raison qu'il soit le plus petit. */
  .btn--sm { min-height: 44px; }
  .counter__ctrl button { width: 44px; height: 44px; font-size: var(--t-xl); }
  /* La cible tactile est le <label> entier, pas la case : 44 x 48 px. */
  .item__check { min-height: 48px; width: 44px; justify-content: flex-start; padding-right: .6rem; }
  /* Le lien marchand est du texte : il faut lui rendre sa hauteur de doigt. */
  .item__lien { min-height: 44px; align-items: center; }
  .item__check input { width: 24px; height: 24px; }
  .nav a { padding-block: .85rem; }

  /* --- Champ code postal : le bouton passe en pleine largeur --- */
  .cp__row { gap: .55rem; }
  .cp__row input { flex: 1 1 100%; }
  .cp__row .btn { flex: 1 1 100%; }
  .cp__choix select, .cp__choix .btn { flex: 1 1 100%; }

  /* --- Tableaux : empilés en fiches plutôt qu'en défilement latéral --- */
  .table-wrap { border: 0; background: transparent; overflow: visible; border-radius: 0; }
  table { min-width: 0; display: block; font-size: var(--t-md); }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tbody, tr, td { display: block; width: 100%; }
  tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); margin-bottom: .85rem; overflow: hidden;
  }
  td { border-bottom: 1px dashed var(--line); padding: .8rem 1.05rem; }
  tr td:last-child { border-bottom: 0; }
  td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: .3rem;
    font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase;
    font-weight: 650; color: var(--muted);
  }

  /* --- Sélecteur de vue : pleine largeur, deux moitiés égales --- */
  .segmented { display: flex; width: 100%; }
  /* Trois onglets sur 288 px (320 - 32) : le nom sur une ligne, le nombre dessous, pour
     tous les onglets (5 octobre 2026), chacun à la largeur de son nom. Coupés au hasard de
     leur longueur, les onglets tenaient sur une, deux ou trois lignes. */
  .segmented__btn {
    flex: 1 1 auto; text-align: center; font-size: var(--t-sm);
    padding: .5rem .35rem; min-height: 42px; line-height: 1.2;
  }
  .segmented__nb { display: block; }
  .segmented__nb::before { content: none; }

  /* --- Barre d'outils du résultat --- */
  .result__toolbar { flex-direction: column; align-items: stretch; }
  .result__toolbar .btn-row { justify-content: stretch; }
  .result__toolbar .btn-row .btn { flex: 1; }

  /* --- Métriques : deux colonnes lisibles (la grille est posée sous 700 px) --- */
  .result__metrics b { font-size: var(--t-xl); }
  .result__metrics span { font-size: var(--t-xs); }

  /* --- Preuves du hero : alignées en grille plutôt qu'en flux --- */
  .hero__proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .hero__proof div { max-width: none; }

  /* --- Respirations générales --- */
  .container { width: calc(100% - 2rem); }
  .qcard, .result__hero { padding: 1.4rem 1.25rem; }
  .items { padding-inline: 1.05rem; }
  .catblock > summary { padding: 1rem 1.05rem; }
  .rappel { padding: 1.35rem 1.25rem; }
  .rappel__actions .btn, .rappel__form { width: 100%; }
  .blocsep { padding-left: .85rem; }
  .prose blockquote { padding: .95rem 1.1rem; }
  .cta-band { padding: 2rem 1.35rem; }
  .cta-band .btn { width: 100%; }
}

/* Très petits écrans : on repasse tout en une colonne. */
@media (max-width: 400px) {
  .hero__proof { grid-template-columns: 1fr; }
  .cp--vedette .cp__row input { font-size: var(--t-lg); letter-spacing: .12em; }
}

/* ---------- Impression ---------- */

@media print {
  .site-header, .site-footer, .result__toolbar, .btn, .aff-notice, .quiz__progress, .cta-band,
  .segmented, .rappel__actions, .cp, .rappel { display: none !important; }
  .blocsep { break-before: page; border-left: 3px solid #999; }
  /* La liste de courses s'imprime seule : sans le recapitulatif du haut ni l'alerte
     de poids, avec des groupes qui ne se coupent pas en deux. */
  #resultat.vue-courses .result__hero, #resultat.vue-courses .callout { display: none !important; }
  .fil, .maj, .lire-aussi-zone, .faq { display: none !important; }
  .courses__groupe { border-color: #999; break-inside: avoid; }
  .courses__groupe > h4 { background: #eee; }
  body { background: #fff; font-size: 11pt; }
  /* Une catégorie entière ne se garde plus sur une seule page : elle laissait des
     demi-pages blanches (6 pages pour 16 articles). Seuls l'article et le titre suivi de
     son premier article restent ensemble (10 octobre 2026, audit F-13). */
  .catblock, .result__hero { border: 1px solid #ccc; box-shadow: none; }
  .result__hero { break-inside: avoid; }
  .catblock > summary { padding: .6rem .8rem; break-after: avoid; }
  .items { padding: 0 .8rem .6rem; }
  .item { break-inside: avoid; padding: .45rem 0; }
  /* Déplier les catégories repliées à l'impression.
     Deux mécanismes, pour deux générations de moteurs :
       • display:block  → moteurs anciens, qui masquaient le contenu en display:none ;
       • ::details-content → Chrome 118+, Firefox 139+, Safari 18.4+, qui masquent
         désormais via content-visibility sur ce pseudo-élément, que display ne défait pas.
     Sans la seconde règle, une liste imprimée perd toutes les catégories fermées. */
  details { display: block; }
  details > .items { display: block !important; }
  details:not([open])::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }
  a::after { content: ""; }
  section { padding-block: 0; }
}


/* Les ancres de `risques.html` sont visees depuis la grille des dangers de
   l'accueil : sans marge de defilement, le titre atterrit sous l'en-tete. */
:target { scroll-margin-top: .75rem; }
/* `scroll-behavior: smooth` et son garde-fou `prefers-reduced-motion` etaient
   redeclares ici, a l'identique du haut de feuille. Doublon supprime : la
   declaration d'origine fait autorite. */


/* ============================================================
   Corrections de revue — 31 aout 2026
   ============================================================ */

/* ---------- Reperes de navigation ---------- */

/* Une page hors menu marque sa rubrique parente (comparatif -> guide du sac,
   sources -> methode). Volontairement plus discret que la page courante, et
   sans `aria-current` : ce serait annoncer « page courante » sur un lien qui
   ne l'est pas. Voir site.js. */
.nav a:not(.btn).nav__rubrique { color: var(--ink); }

/* Les deux boutons d'action sont maintenant sur les 11 pages, y compris sur
   les deux outils qu'ils desservent. Sur sa propre page, le bouton se retire :
   il reste cliquable — recharger est sans consequence — mais il cesse de
   promettre une destination et devient un repere. */
.nav .btn[aria-current="page"] {
  background: transparent; border-color: var(--line-2);
  color: var(--muted); font-weight: 650; box-shadow: none;
}
.nav .btn[aria-current="page"]:hover { background: var(--paper-2); color: var(--ink); }

/* ---------- Le quiz : dire ce qui manque ---------- */

.qcard__requis {
  margin: 0 0 .9rem; font-size: var(--t-sm); color: var(--muted);
}
.qcard__requis[hidden] { display: none; }

/* ---------- Sommaire collant des pages longues ----------
   `guide.html` fait sept chapitres, `risques.html` cinq, `habitat.html`
   quatre (depuis le 19 septembre 2026) : passe le premier
   ecran, on ne savait plus ni ou l'on etait ni ce qui restait. La barre se
   pose sous l'en-tete colle (76 px) et defile horizontalement quand elle ne
   tient pas — jamais de retour a la ligne, ce serait deux hauteurs de barre
   selon la page. */
.sommaire {
  position: sticky; top: 76px; z-index: 20;
  background: rgba(var(--paper-rgb), .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Centré sur toute la largeur du conteneur (5 octobre 2026, soir) : dans la colonne
   de lecture, les sept chapitres du guide du sac étaient coupés (« 7. Le plan famil »). */
.sommaire .container--narrow { --colonne: var(--container); }
.sommaire ul {
  display: flex; justify-content: safe center; gap: .25rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.sommaire ul::-webkit-scrollbar { display: none; }
.sommaire a {
  display: block; white-space: nowrap; text-decoration: none;
  padding: .7rem .7rem; font-size: var(--t-sm); color: var(--ink-2);
  border-bottom: 2px solid transparent;
}
.sommaire a:hover { color: var(--ink); }
/* `aria-current` est pose par site.js sur le chapitre a l'ecran : l'etat est
   donc annonce, pas seulement colore. */
.sommaire a[aria-current="true"] { color: var(--brand-700); border-bottom-color: var(--brand); }

/* Les deux barres collees se cumulent : sans cette marge, un titre atteint par
   une ancre se logeait derriere elles. Les chapitres de `habitat.html` sont
   reperes par leur surtitre, d'ou `.eyebrow[id]`. */
.prose h2[id], .section--surface[id] { scroll-margin-top: .5rem; }
/* Un surtitre est plus petit qu'un titre : a 128 px il collait a la barre du
   sommaire (5 px). Seize de plus lui rendent de l'air. */
.eyebrow[id] { scroll-margin-top: 1rem; }

@media (max-width: 700px) { .sommaire { top: 64px; } }
@media print { .sommaire { display: none; } }

/* ---------- Le rappel qui suit le defilement ---------- */

/* La liste de resultat depasse cinq mille pixels : le recapitulatif du haut
   sort de l'ecran des la premiere categorie. Cette barre reprend les deux
   chiffres qui bougent quand on coche. `top` suit la hauteur de l'en-tete
   colle, `z-index` passe dessous. */
.result__suivi {
  position: sticky; top: 76px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; align-items: baseline;
  padding: .6rem 1.1rem; margin-bottom: 1.25rem;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-xs);
  font-size: var(--t-sm); line-height: 1.4;
}
.result__suivi b { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; }
.result__suivi span { white-space: nowrap; }
.result__suivi-compte { margin-left: auto; color: rgba(var(--paper-rgb), .8); }

@media (max-width: 780px) {
  .result__suivi { top: 62px; gap: .2rem .9rem; padding: .55rem .8rem; }
  .result__suivi-compte { margin-left: 0; }
}

/* ---------- Impression ---------- */

/* La feuille d'impression a ete ecrite avant la refonte : elle ne connaissait
   aucun selecteur `rf-*`. Le bandeau sombre des deux outils, 330 px de haut,
   n'etait pas masque — et comme les navigateurs n'impriment pas les fonds par
   defaut, la premiere page sortait avec un tiers de vide portant du texte
   blanc sur blanc. Les bandes decoratives de l'accueil suivent la meme regle. */
@media print {
  .rf-entree, .rf-transparence, .rf-mesure, .rf-fin, .result__suivi, .qcard__requis, .items__suite { display: none !important; }
  /* Sur papier, la liste ou la feuille, et rien de ce qui sert à naviguer. `details`
     s'ouvrant tous à l'impression (voir plus haut), « Ce que vous obtenez » imprimait
     l'EXEMPLE d'une autre famille, avec d'autres montants, en tête de la vraie liste ;
     et la feuille du plan familial ne commençait qu'en page 2, après le fil des étapes. */
  .attendu, .pmini-zone, .rf-entree__parcours, .suite-parcours, .bilan, .result__origine,
  .rf-pied, .confiance, .plan-entete .eyebrow { display: none !important; }
  .rf-avis { background: #fff !important; color: #000 !important; }
  .rf-avis h1, .rf-avis .rf-eyebrow { color: #000 !important; }
}


/* =========================================================================
   Résultat de la recherche — 21 septembre 2026
   Ordre de lecture : la commune, le résumé des risques, la réserve « commune,
   pas adresse », LES ACTIONS, puis l'historique et les sources, repliés.
   Avant, le bouton « Composer mon sac » tombait à 1 530 px sur un téléphone :
   après l'historique et l'explication des sources.
   ========================================================================= */

.cp__chapeau { margin: 0 0 .55rem; font-size: var(--t-md); color: var(--ink-2); }



/* La suite proposée par la page : vide (outils), elle ne prend pas de place. */
.cp__suite:empty { display: none; }
.cp__suite { margin: 1.1rem 0 .25rem; }
.cp__suite .suite-parcours { margin: 0; }
/* Dans le résultat, la suite était un cadre (filet vert, barre de 4 px) dans le cadre du
   résultat. La teinte suffit à la détacher : plus de bordure. */
.cp__res .suite-parcours { border: 0; border-radius: var(--r-xs); }
.cp__suite .suite-parcours .btn-row { margin-top: 0; }
.cp__suite .suite-parcours .btn { min-height: 48px; }

/* Blocs repliables (historique, sources) : un <details> natif, une zone
   tactile de 48 px, un chevron qui dit l'état sans couleur. */
.cp__plus { margin-top: .5rem; border-top: 1px solid var(--line); }
.cp__plus + .cp__plus { margin-top: 0; }
.cp__plus > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 48px; padding: .5rem 0; cursor: pointer; list-style: none;
  font-size: var(--t-md); font-weight: 600; line-height: 1.4; color: var(--ink);
}
.cp__plus > summary::-webkit-details-marker { display: none; }
.cp__plus > summary::marker { content: ''; }
.cp__plus > summary::after {
  content: ""; flex: none; width: .55rem; height: .55rem; margin-right: .25rem;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); transition: transform .15s;
}
.cp__plus[open] > summary::after { transform: rotate(-135deg); }
.cp__plus > summary:hover { color: var(--brand-700); }
.cp__plus-corps { padding: .1rem 0 .9rem; font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); }
.cp__plus-corps p { margin: 0 0 .55rem; }
.cp__plus-corps p:last-child { margin-bottom: 0; }
.cp__plus-corps a { color: var(--ink-2); }

@media (max-width: 520px) {
  .cp__suite .suite-parcours { padding: 1rem 1.05rem; }
  .cp__suite .suite-parcours .btn-row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .6rem; }
  .cp__suite .suite-parcours .btn { width: 100%; justify-content: center; padding-inline: .75rem; text-align: center; }
  .cp__res { padding-inline: 1rem; }
}
.cp__res { scroll-margin-top: calc(var(--h-bandeau, 69px) + 12px); }

/* Ce que masquent les barres collantes : l'en-tête (65 à 69 px), et sous lui le
   sommaire des pages longues ou la barre de suivi d'un résultat. `scroll-padding`
   réduit la zone de lecture du défilement : ancres, `scrollIntoView` ET focus au
   clavier s'arrêtent sous ces barres. C'est aussi ce qui déclenche le défilement
   quand un élément focalisé est à moitié caché dessous — une simple marge ne le
   fait pas. Les `scroll-margin-top` des titres n'ajoutent donc que le souffle. */
html { scroll-padding-top: var(--ancre, 6rem); }
html:has(.sommaire) { --ancre: 9.25rem; }
html:has(.result__suivi) { --ancre: 10.25rem; }

/* Indicateurs du résultat : deux colonnes jusqu'au bout, le premier (le budget)
   sur toute la largeur. Quatre lignes empilées allongeaient le résultat de 300 px
   sans rien dire de plus. */
@media (max-width: 700px) {
  .result__metrics div:first-child { grid-column: 1 / -1; }
  /* Le premier occupe toute la ligne : si le total est pair, le dernier reste seul
     sur la sienne, sinon la grille laisse une case vide. */
  .result__metrics div:last-child:nth-child(even) { grid-column: 1 / -1; }
  .result__metrics div { padding: .9rem 1rem; }
}

/* « Mes risques » : le champ n'est pas une carte de plus. Il était posé dans un
   cadre, dont le résultat faisait un cadre, dont la suite faisait un cadre :
   trois bordures imbriquées, et 235 px de large pour les boutons. */
.chercheur--page .cp--vedette { background: none; border: 0; box-shadow: none; padding: 0; }
@media (max-width: 520px) {
  .chercheur--page .cp__res { padding: .9rem .85rem; }
  .chercheur--page .cp__suite .suite-parcours { padding: .9rem .85rem; }
}

/* Ligne de confiance : les énoncés se posent bout à bout sans point médian, et un
   énoncé ne se coupe pas au milieu (le point ouvrait une ligne : « · Gratuit »). */
.confiance { gap: .25rem 1.1rem; }
.confiance span { white-space: nowrap; }
@media (max-width: 360px) { .confiance span { white-space: normal; } }
.pmini-zone + .maj { margin-top: 1.25rem; }


/* Reprise d'une commune : changer de code postal (le champ est au-dessus), ou l'oublier.
   Une ligne discrète en pied du résultat, sous les blocs repliés. */
.cp__pied { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; justify-items: start; }
.cp__pied .tiny { margin: 0; color: var(--ink-2); font-size: var(--t-md); }
.cp__histoire-bloc { margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.cp__histoire-bloc .cp__histoire { margin-left: 0; margin-bottom: .2rem; }

/* Pictogrammes : traits de 1,6 px, couleur du texte, jamais seuls — chaque icône est à
   côté d'un mot qui dit la même chose (aria-hidden). Aucun fichier : SVG en ligne. */
.ico {
  width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.pill .ico { width: 1.1em; height: 1.1em; vertical-align: 0; }
/* Une couleur par famille de risque (cp.js, `pictoRisque`). Des tons posés, aucun rouge
   d'alerte : le site informe, il n'effraie pas. Chaque trait dépasse 4,5:1 sur la pastille
   (#e7f1ee) ; les formes fermées reçoivent un aplat très clair de la même teinte. Le
   libellé reste à côté : la couleur n'est jamais seule à porter l'information. */
.pill .ico--eau       { stroke: var(--risque-eau); fill: var(--risque-eau-fond); }
.pill .ico--feu       { stroke: var(--risque-feu); fill: var(--risque-feu-fond); }
.pill .ico--seisme    { stroke: var(--risque-seisme); }
.pill .ico--terrain   { stroke: var(--risque-terrain); fill: var(--risque-terrain-fond); }
.pill .ico--tmd       { stroke: var(--risque-tmd); fill: var(--risque-tmd-fond); }
.pill .ico--industrie { stroke: var(--risque-industrie); fill: var(--risque-industrie-fond); }
.pill .ico--meteo     { stroke: var(--risque-meteo); }
.pill .ico--autre     { stroke: var(--risque-autre); }
.pill .ico[class*="ico--"] { stroke-width: 1.9; }


/* La baseline de la marque, sous le nom, comme dans le logo. Décorative (le lien porte déjà son
   `aria-label`) : elle se masque là où la place manque, avant de faire déborder l'en-tête.
   Crème à 82 % sur le bleu-ardoise : 8,4:1. */
.brand__texte { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand__slogan {
  display: block; margin-top: .05rem; font-family: var(--sans);
  font-weight: 500; letter-spacing: .01em; line-height: 1.25; white-space: nowrap;
  color: rgba(var(--paper-rgb), .82);
}
@media (max-width: 800px) { .brand__slogan { margin-top: 0; } }
@media (max-width: 359px) { .brand__slogan { display: none; } }

/* La marque en tuile (23 septembre 2026) : le symbole simplifié (maison + cadran) sur la tuile
   verte, le même objet que la favicon et l'icône d'écran d'accueil ; le nom en Georgia gras ; le
   slogan « Un plan pour les imprévus. ». Le symbole maison-sac-cadran du 22 septembre ne se
   lisait plus à la taille de l'en-tête (le sac et le cadran s'y mélangeaient). La tuile porte la
   couleur : elle peut être plus petite que l'ancien symbole et se voir mieux. Bandeau de 68 px sur
   ordinateur, 60 px sur téléphone (avant 80 / 72). Les barres collantes (sommaire, suivi) et les
   marges d'ancre suivent `--h-bandeau` (refonte-b-coquille.css) et `--ancre` ci-dessus. */
.site-header__inner { min-height: 68px; }
/* Tuile à la hauteur du bloc nom + slogan (49 px) : à 42 px, elle paraissait petite à côté
   du texte (24 septembre 2026). */
.brand__clock { width: 48px; height: 48px; border-radius: 11px; }
.brand__name { font-size: 28px; line-height: 1.15; }
.brand__slogan { font-size: var(--t-xs); }
@media (min-width: 801px) and (max-width: 1000px) {
  .brand__name { font-size: 25px; }
  .brand__clock { width: 44px; height: 44px; }
}
@media (max-width: 800px) {
  .site-header__inner { min-height: 60px; }
  .site-header .brand { gap: .6rem; }
  .brand__name { font-size: clamp(22px, 6vw, 25px); }
  .brand__clock { width: 42px; height: 42px; border-radius: 9px; }
  .brand__slogan { font-size: .75rem; }
}
@media (max-width: 340px) { .brand__clock { width: 36px; height: 36px; } }

/* Le pied de page porte la même marque que l'en-tête, en texte natif : l'ancien logotype était
   un SVG de 33 Ko au lettrage vectorisé, avec une apostrophe droite, une graisse normale et un
   slogan dans une autre police. */
.site-footer .brand { gap: .75rem; }
.site-footer .brand__clock { width: 54px; height: 54px; }
.site-footer .brand__name { font-size: 26px; color: #fff; }
.site-footer .brand__slogan { display: block; font-size: var(--t-sm); white-space: normal; }


/* =========================================================================
   Revue d'usage — 2 octobre 2026
   ========================================================================= */

/* ---------- Le fil des étapes, sur le papier (« Mes risques », plan familial) ----------
   Il y était fait de quatre cartes, alors que le sac et le logement l'écrivent sur une
   ligne : deux présentations du même repère. Il prend celle des outils, en couleurs de
   papier (les règles du bandeau sombre sont dans refonte-b-outils.css). */
.pmini-zone .pmini__titre { margin-bottom: .35rem; }
.pmini-zone .pmini ol { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; }
.pmini-zone .pmini li a {
  display: flex; align-items: baseline; gap: .45rem; height: auto;
  padding: .15rem 0; background: none; border: 0; border-radius: 0;
  color: var(--ink-2); white-space: nowrap;
}
.pmini-zone .pmini li a:hover { border: 0; }
.pmini-zone .pmini li a:hover .pmini__nom { text-decoration: underline; text-underline-offset: 3px; }
.pmini-zone .pmini li a[aria-current="step"] { background: none; border: 0; color: var(--ink); }
.pmini-zone .pmini li a[aria-current="step"] .pmini__nom {
  text-decoration: underline; text-decoration-color: var(--brand);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.pmini-zone .pmini__etat { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.pmini-zone .pmini li:not(:first-child) .pmini__detail {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 760px) {
  .pmini-zone .pmini ol { display: grid; grid-template-columns: 1fr; gap: 0; }
  .pmini-zone .pmini li a {
    display: grid; grid-template-columns: 1.4rem 1fr; column-gap: .5rem;
    padding: .45rem 0; border-top: 1px solid var(--line); white-space: normal;
  }
  .pmini-zone .pmini li:first-child a { border-top: 0; }
  .pmini-zone .pmini__etat { grid-column: 2; }
  .pmini-zone .pmini li:not(:first-child) .pmini__detail { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
}

/* ---------- « Mes risques » : les risques de la commune en tête ---------- */
.risques-perso[hidden] { display: none; }
.risques-perso {
  margin: 0 0 1.25rem; padding: .65rem .9rem;
  border-left: 3px solid var(--brand); background: var(--brand-50);
  font-size: var(--t-md); line-height: 1.5; color: var(--brand-700);
}
.prose .risque-section__etat {
  display: inline-block; margin: -.35rem 0 .7rem; padding: .15rem .65rem;
  border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-700);
  font-size: var(--t-sm); font-weight: 650; line-height: 1.4;
}

/* ---------- Les cinq cas, repliés ----------
   Ils faisaient 3 600 px : le titre et la date restent visibles, le récit et « ce que ça
   demande » se déplient. Un <details> natif : clavier et lecteur d'écran sans script. */
.cas h3 { margin-bottom: .2em; }
.cas__plus > summary {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  cursor: pointer; list-style: none;
  font-size: var(--t-md); font-weight: 600; color: var(--brand-700);
}
.cas__plus > summary::-webkit-details-marker { display: none; }
.cas__plus > summary::marker { content: ''; }
.cas__plus > summary::after {
  content: ""; width: .5rem; height: .5rem; margin-top: -.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.cas__plus[open] > summary { margin-bottom: .5rem; }
.cas__plus[open] > summary::after { margin-top: .25rem; transform: rotate(-135deg); }
.cas__plus > summary:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Plan familial : ce que l'appareil sait déjà ---------- */
.plan-reprise[hidden] { display: none; }
.plan-reprise p { margin: 0 0 .8rem; }