/* =========================================================================
   REFONTE — DIRECTION B : « l'avis »

   Meme identite que le site actuel : papier chaud, vert de marque, Georgia.
   Aucune couleur ni fonte nouvelle, tout vient des variables de styles.css.
   Ce qui change est la structure, le rythme, et un parti pris de plus.

   Le parti pris : le premier ecran est un aplat sombre — un avis, pas une
   page d'accueil. Il ne contient qu'une phrase et un champ. Le champ y est le
   seul objet clair, donc le seul geste possible. Sur le papier qui suit, les
   deux outils, puis quatre nombres. Trois sections au lieu de cinq.

   Comme la direction A, elle renonce aux cartes ombrees : ce sont les filets,
   les blancs et le contraste des deux plans qui organisent.
   ========================================================================= */

/* La coquille (en-tete sombre, largeur, micro-typo) vit desormais dans
   refonte-b-coquille.css, chargee par toutes les pages. Ne reste ici que
   ce qui appartient a l'accueil.

   Cette remise a zero, elle, reste page par page : le balisage de l'accueil
   porte ses propres respirations, alors qu'une page de texte a besoin du
   rythme de `section { padding-block: var(--gap) }`. */
body.rf-b section { padding-block: 0; }

/* ---------- Trois niveaux de texte ----------
   L'accueil comptait plus de mots en 13 px qu'en 17 : 287 contre 80. Or une
   bonne part de ces 13 px etait de l'information, pas des mentions — la bande
   « ni l'Etat, ni un vendeur », les legendes des trois chiffres, l'apercu du
   sac et ses totaux, la portee des chiffres des outils. Depuis le 18 septembre
   2026, la regle est la suivante :
     17 px et plus (--t-base)  l'essentiel : titres, chapos, textes des outils ;
     15 px (--t-md)            l'explication : tout ce qui se lit pour decider ;
     13 px (--t-sm)            les mentions : transmission du code postal,
                               liens vers les sources, modele economique.
   Un texte qu'on doit lire pour choisir n'a rien a faire en 13 px. */

/* ---------- 1. L'avis ---------- */

.rf-avis { background: var(--ink); color: var(--paper); position: relative; isolation: isolate; }

/* Resserre : l'aplat prenait plus d'un ecran a lui seul. Les deux colonnes se
   partagent la hauteur au lieu de s'empiler visuellement, et le pied de
   bandeau se replie sur une ligne. */
.rf-avis__grille {
  display: grid;
  /* Le contenu passe au-dessus du fond. (Un `pointer-events: none` laissait
     ici atteindre le cadre photo a la souris, pour y deposer une image avec
     l'outil de maquettage retire le 12 septembre 2026 : il n'avait plus
     d'objet.) */
  position: relative; z-index: 1;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 3.5vw, 3.5rem) clamp(2.25rem, 4vw, 4.5rem);
  /* Les deux colonnes partent de la meme ligne. Le champ etait cale en bas
     parce que sa colonne etait courte : trois elements legers contre quatre
     blocs de texte. Elle porte maintenant ce que la recherche renvoie, donc
     elle a de quoi tenir en face, et l'alignement haut donne au bandeau une
     ligne de depart commune. */
  align-items: start;
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem) clamp(2rem, 3.5vw, 3rem);
}
.rf-avis__grille > * { min-width: 0; }

/* Deux gris sur l'aplat, pas cinq. `--sur-ink-1` porte tout ce qui doit se
   lire (chapo, texte courant), `--sur-ink-2` tout ce qui accompagne (libelles,
   mentions, notes). La page melait sept opacites differentes entre .58 et .86
   pour cinq roles : rien ne hierarchisait plus rien.
   Les deux valeurs ont ete relevees : a .84 et .6 sur un aplat traverse par
   une photographie, le texte courant tombait sous le seuil AA des que l'image
   eclaircissait le fond. .94 et .8 tiennent le contraste quelle que soit
   l'image deposee — le voile a ete renforce dans le meme mouvement. */
.rf-avis {
  --sur-ink-1: rgba(var(--paper-rgb), .94);
  --sur-ink-2: rgba(var(--paper-rgb), .8);
  /* Une mesure par colonne, en rem, la meme a toutes les largeurs. Dans une
     page tenue par des filets, la largeur du filet EST la largeur du bloc :
     tout `max-width` en `ch` la fait varier avec le corps du texte, et deux
     paragraphes voisins de 15 et 13 px au meme nombre de caracteres donnent
     deux filets differents. Les blocs d'une colonne partagent donc une seule
     valeur absolue, et la colonne unique du mobile la garde — replier la
     grille ne dispense pas de brider la longueur de ligne. */
  --mesure-titre: 34rem;
  --mesure-champ: 31rem;
}

body.rf-b .rf-avis h1 {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  /* Reduit de 3.15rem a 2.65rem (50,4 -> 42,4 px a 1440). Le bandeau avait
     deux points focaux : ce titre, le plus gros objet, et le champ, le seul
     objet clair. Aucun des deux ne l'emportait. Le titre porte la promesse,
     le champ porte l'action : c'est le champ qui doit gagner. */
  font-size: clamp(1.75rem, 3.3vw, 2.65rem);
  line-height: 1.06; letter-spacing: -.02em;
  text-wrap: pretty;
}

/* Ce que fait le site prend la place du chapo.
   Il etait en troisieme position, en 15 px et au gris le plus pale de la
   colonne : la phrase la plus importante de la page etait la moins visible. Un
   visiteur de passage lisait un slogan sur une situation, pas la description
   d'un service. Elle passe donc juste sous le titre, en 19 px. */
.rf-quoi {
  margin: 0;
  font-size: var(--t-lg); line-height: 1.55;
  color: var(--sur-ink-1);
}
.rf-quoi b { font-weight: 650; }

/* La colonne du champ ne porte plus que le geste.
   Cinq paragraphes fins se succedaient sous le code postal — ce que la
   recherche renvoie, la confidentialite, le preavis, l'independance : l'oeil
   n'avait aucune raison de s'arreter, et la promesse de gauche etait epuisee
   avant la premiere frappe. Le preavis part en tete du registre des dangers,
   qu'il nomme justement ; la transparence descend dans sa propre bande.

   Cette bande est sur blanc, et non sur papier : entre l'aplat encre et le
   papier chaud des sections suivantes, la coupure etait franche. Le blanc fait
   la marche — encre, blanc, papier — au lieu du saut. */
.rf-transparence {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.rf-transparence .container { padding-block: clamp(1.25rem, 2.2vw, 1.75rem); }
.rf-transparence p {
  margin: 0; max-width: 78ch;
  font-size: var(--t-md); line-height: 1.6; color: var(--ink-2);
}
/* Pas de `nowrap` sur ce lien : c'est une phrase de huit mots. A 15 px elle
   mesure 333 px et debordait de 44 px a 320 — le piege deja decrit dans le
   README, section « Responsive ». */
.rf-transparence a { font-weight: 600; }

/* Ce que la recherche renvoie. C'etaient trois lignes courtes posees dans des
   filets pleine largeur : une structure de tableau pour une phrase. Une
   phrase, donc. Elle disparait quand le vrai resultat la remplace. */
.rf-retour {
  margin: 1.2rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(var(--paper-rgb), .22);
  font-size: var(--t-md); line-height: 1.55;
  color: var(--sur-ink-1);
}

/* Le champ n'est plus un panneau. Le socle de papier etait un rectangle dont
   le champ occupait le quart : tout le reste etait vide, et il ramenait la
   carte que la page avait justement congediee. Le champ lui-meme est l'objet
   clair de l'aplat — il n'a pas besoin qu'on lui en construise un.
   Le libelle, le filet sous le libelle et la mention passent donc sur le
   sombre. (Jusqu'au 1er octobre 2026, ils repassaient sur le papier quand la
   commune etait trouvee : voir « L'accueil se remplit », en fin de feuille.) */
.rf-champ { background: none; padding: 0; border-top: 0; max-width: var(--mesure-champ); }

.rf-avis:not(:has(.cp__res)) .rf-label {
  color: var(--sur-ink-2);
  border-bottom-color: rgba(var(--paper-rgb), .22);
}
.rf-avis:not(:has(.cp__res)) .rf-mention { color: var(--sur-ink-2); }
.rf-avis:not(:has(.cp__res)) .rf-mention a {
  color: var(--paper); text-decoration-color: rgba(var(--paper-rgb), .4);
}
.rf-avis:not(:has(.cp__res)) .cp--vedette .cp__row input {
  background: var(--surface); border-color: transparent; color: var(--ink);
}
.rf-avis:not(:has(.cp__res)) .cp--vedette .cp__row input:focus {
  outline-color: var(--paper); border-color: transparent;
}
.rf-label {
  margin: 0 0 1.1rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
/* Le libelle du champ etait un surtitre de 12 px en capitales : la seule
   question que le site pose au visiteur se lisait comme une etiquette. Elle
   passe en vraie question, sur la police des titres. */
.rf-label--question {
  display: block; font-family: var(--serif); font-size: var(--t-lg); font-weight: 600;
  letter-spacing: 0; text-transform: none; line-height: 1.25;
}
.rf-avis:not(:has(.cp__res)) .rf-label--question { color: var(--paper); }
/* Le numéro de l'étape 1 : le champ du bandeau est la première étape du parcours, dont les
   cartes, plus bas, reprennent à 2 (5 octobre 2026). Même cercle que les cartes, en clair. */
.rf-label__num {
  display: inline-grid; place-items: center; vertical-align: .1em;
  width: 1.7rem; height: 1.7rem; margin-right: .55rem;
  border: 1.5px solid currentColor; border-radius: 50%;
  font-size: var(--t-md); line-height: 1; font-variant-numeric: tabular-nums;
}
body.rf-b .chercheur { max-width: none; margin: 0; }
body.rf-b .cp,
body.rf-b .cp--vedette {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; margin-bottom: 0;
}
/* Un code postal fait cinq caracteres. Le champ en faisait 680 px, avec
   l'action rejetee a l'autre bout de la ligne : l'echelle contredisait le
   contenu. Il est dimensionne pour cinq chiffres, le bouton reste contre lui. */
body.rf-b .cp__row { flex-wrap: nowrap; align-items: stretch; gap: .5rem; }
body.rf-b .cp--vedette .cp__row input {
  flex: 0 0 auto; width: 7.4em;
  text-align: left; letter-spacing: .12em;
  border-radius: var(--r-xs); border-color: var(--ink-2);
}
/* Un resultat affiche : le champ propose « Autre code postal » (cp.js), qui ne tient
   pas dans cinq chiffres. */
body.rf-b .cp--vedette:has(.cp__bref) .cp__row input { width: 9.8em; }
body.rf-b .cp--vedette .cp__row input::placeholder {
  color: var(--muted); font-size: var(--t-md); letter-spacing: .02em;
}
body.rf-b .cp--vedette .cp__row .btn { border-radius: var(--r-xs); }
/* Le bouton etait le vert de marque (#145e52) pose sur l'aplat encre
   (#14202a) : deux sombres a 1,6:1 l'un de l'autre — l'action la plus urgente
   de la page en etait l'objet le moins visible. Sur le sombre il prend donc la
   version lumineuse du meme vert (meme teinte OKLCH, clarte .84) avec l'encre
   pour label ; sur le papier, une fois la commune trouvee, il redevient le
   vert de marque, qui y contraste deja. */
.rf-avis:not(:has(.cp__res)) .cp--vedette .cp__row .btn--primary {
  /* Repli sRGB avant l'oklch : un navigateur qui connait `:has()` sans connaitre
     `oklch()` (Chrome 105 a 110) ignorerait la ligne oklch et garderait le vert
     de marque sous une encre sombre — illisible. #77e3bc = meme couleur, 10,6:1. */
  background: var(--menthe); background: oklch(.84 .115 168); color: var(--ink);
  border-color: transparent; font-weight: 650;
}
.rf-avis:not(:has(.cp__res)) .cp--vedette .cp__row .btn--primary:hover {
  background: var(--menthe-clair); background: oklch(.91 .09 168); color: var(--ink);
}
/* La mention du composant disait la confidentialite une deuxieme fois, a une
   ligne de la mention de la page qui la disait deja. Une seule fois suffit. */
body.rf-b .cp__mention { display: none; }

@media (max-width: 620px) {
  body.rf-b .cp__row { flex-wrap: wrap; }
  body.rf-b .cp--vedette .cp__row input { flex: 1 1 100%; width: auto; }
  body.rf-b .cp--vedette .cp__row .btn { flex: 1 1 100%; }
}


/* La mesure est portee par la colonne, pas par ses enfants : appliquee
   paragraphe par paragraphe, le libelle — dont le filet est le plus visible du
   groupe, juste au-dessus du champ — restait en dehors, et tout enfant ajoute
   plus tard en sortirait aussi. */
.rf-avis__intro { max-width: var(--mesure-titre); }

@media (max-width: 960px) {
  .rf-avis__grille { grid-template-columns: 1fr; }
}

/* ---------- La confiance, en cinq engagements ----------
   La bande « ni l'État, ni une assurance, ni un vendeur » gagne une ligne de
   cinq engagements courts. Chacun renvoie à la page qui le détaille ; aucun
   n'est un argument commercial. */
.rf-confiance {
  list-style: none; margin: .8rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem 1.6rem;
  font-size: var(--t-md); color: var(--ink-2);
}
.rf-confiance li { display: inline-flex; align-items: baseline; gap: .45rem; }
.rf-confiance li::before { content: "✓"; content: "✓" / ""; color: var(--brand-700); font-weight: 700; }
.rf-confiance a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.rf-confiance a:hover { color: var(--brand-700); text-decoration-color: currentColor; }
/* Sur téléphone, 26 px de haut : sous le minimum tactile de 44 px (4 octobre 2026). */
@media (max-width: 620px) {
  .rf-confiance { row-gap: 0; }
  .rf-confiance li { align-items: center; }
  .rf-confiance a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Le parcours en quatre étapes ----------
   Ici les nombres ont leur place : c'est une suite, contrairement aux deux
   outils « partir / rester » qui sont des options parallèles. Un état
   (rempli par parcours.js) et UN bouton par étape ; seul celui de la première
   étape à faire est plein. */
.rf-parcours { background: var(--paper); border-top: 1px solid var(--line-2); }
.rf-parcours .container { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* Le découpage de l'accueil (5 octobre 2026, soir) : une section, un fond, un en-tête
   (surtitre, titre), et le même souffle pour toutes. Le crème du parcours et le blanc des
   « Trois gestes » ne se distinguaient pas ; les exemples vivaient sous un filet, dans le
   parcours. Les exemples et les trois gestes ont quitté l'accueil le 19 octobre 2026 :
   restent le crème du parcours, le vert pâle, la bande finale verte et le pied bleu nuit. */
.rf-parcours__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.rf-etape { display: flex; flex-direction: column; padding: 1.6rem 1.5rem 0 0; }
.rf-etape + .rf-etape { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.rf-etape__num {
  font-family: var(--serif); line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.rf-b .rf-etape h3 {
  margin: 0 0 .55rem; font-family: var(--serif);
  font-size: var(--t-xl); line-height: 1.18; letter-spacing: -.01em;
}
.rf-etape h3 + p { flex: 1 1 auto; margin: 0 0 1rem; font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); }
.rf-etape .parcours__cta {
  align-self: stretch; margin-bottom: .25rem;
  min-height: 48px; text-align: center; justify-content: center;
}

/* ---------- 2. Le registre des dangers ----------
   Le rappel visuel demande : six familles, un pictogramme chacune, les memes
   couleurs semantiques que les puces de resultat (bleu eau, terre cuite feu,
   ambre sol, violet industriel). Sur papier, juste sous l'aplat : il fait la
   transition entre le danger et les deux outils, et il rend le bandeau sombre
   inutilement bavard — d'ou son resserrement. */

.rf-label--registre { border-bottom: 0; padding-bottom: 0; margin-bottom: .8rem; }
/* Le preavis, remonte de la colonne du champ : il nomme exactement les six
   familles qui suivent, il est donc chez lui ici plutot qu'en cinquieme ligne
   d'un formulaire. */
.rf-risques__intro {
  margin: 0 0 1.6rem; max-width: 62ch;
  line-height: 1.5; color: var(--ink-2);
}

/* Trois colonnes sur deux rangs, et non six : a six, chaque cellule faisait
   185 px, « Accident industriel » cassait sur deux lignes, le detail tombait a
   13 px et devait disparaitre en mobile.
   Les pictogrammes sont en encre. Leurs six couleurs etaient le seul endroit
   polychrome de la page et ne codaient rien que le lecteur puisse deduire : la
   legende n'etait ecrite nulle part. Les classes --eau, --feu... restent comme
   points d'accroche, sans couleur : si la couleur revient, il faudra d'abord
   la legender. */
.rf-risques__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.rf-risques__liste li { border-left: 1px solid var(--line); }
.rf-risques__liste li:nth-child(3n+1) { border-left: 0; }
.rf-risques__liste li:nth-child(n+4) { border-top: 1px solid var(--line); }

/* La grille etait morte : six pictogrammes qui repondaient a une question que
   le visiteur ne se pose pas encore, sans rien a en faire. Chaque cellule est
   maintenant le lien vers sa famille de danger — meme place, meme dessin, mais
   la grille sert a quelque chose. La cellule entiere est la cible, pas le
   libelle : c'est ce que la souris et le doigt visent. */
.rf-risques__liste a {
  display: block; height: 100%; text-decoration: none; color: inherit;
  padding: 1.5rem clamp(1rem, 2vw, 1.9rem);
  transition: background-color .12s ease;
}
/* Meme retrait dans TOUTES les cellules. La premiere colonne en etait privee,
   pour caler ses icones sur le bord du texte au-dessus : dans les deux autres,
   le texte partait a 30 px du filet, dans la premiere il touchait le bord — et
   au survol, le fond clair venait buter contre les lettres. Une grille se lit
   cellule par cellule ; c'est la regularite des cellules qui compte. */
.rf-risques__liste a:hover { background: var(--surface); }
.rf-risques__liste a:hover b { color: var(--brand-700); }
.rf-risques__liste a:focus-visible {
  outline: 2px solid var(--brand-700); outline-offset: -2px;
}


.rf-risques__liste b {
  font-weight: 650;
  color: var(--ink); line-height: 1.3;
}
/* Le preavis de chaque famille, et non plus ses sous-types (« crue,
   ruissellement… ») : c'est le critere que pose l'intro de la section. Le mot
   « Preavis » en retrait, la duree en encre — c'est elle qu'on lit en
   balayant la grille. Les durees sont sourcees sur risques.html. */
.rf-risque__preavis {
  font-size: var(--t-md); line-height: 1.4;
}
.rf-risque__preavis strong { color: var(--ink); font-weight: 600; }
.rf-risques__note {
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: var(--t-md); color: var(--ink-2);
}
.rf-risques__note a { color: var(--brand-700); font-weight: 650; }
.rf-risques__action .rf-lien { color: var(--brand-700); font-weight: 650; }

/* Deux colonnes en mobile, et le preavis reste : c'est lui qui distingue une
   famille de danger d'une autre. */
@media (max-width: 640px) {
  .rf-risques__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-risques__liste li:nth-child(3n+1) { border-left: 1px solid var(--line); }
  .rf-risques__liste li:nth-child(odd) { border-left: 0; }
  .rf-risques__liste li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- 3. Les deux outils ---------- */


/* ---------- Tete de section ----------
   Surtitre puis titre, a la mesure du texte. `rf-outils__tete` etait seule a
   en porter une : trois sections de l'accueil s'ouvraient sans titre, si bien
   que le plan du document sautait du h1 a un unique h2 en milieu de page — un
   lecteur d'ecran ne pouvait pas parcourir la page par ses titres, et l'oeil
   ne voyait pas ou commencait un chapitre. */
.rf-tete { max-width: 46ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.rf-tete .rf-eyebrow { color: var(--brand-700); }
body.rf-b .rf-tete h2 {
  margin: 0; font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.14; letter-spacing: -.012em;
}

/* Le lien secondaire est pose dans la meme rangee que le bouton principal :
   c'est un controle, pas un mot de phrase, et il faisait 25 px de haut contre
   56 pour son voisin. Au-dessus du minimum AA de 24 px, mais loin des 44 px que
   le projet s'impose ailleurs (voir `.nav-toggle` dans styles.css). La zone
   cliquable est etendue sans que le texte bouge. */
.rf-lien {
  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);
}
.rf-lien:hover { color: var(--brand-700); text-decoration-color: currentColor; }




/* ---------- 4. La mesure du probleme ---------- */

/* Trois tiers exacts, mais la deuxieme legende (« d'entre elles l'ignorent »)
   fait quatre mots contre vingt a la premiere : le tiers du milieu se vidait
   et le troisieme chiffre semblait pousse au loin. Les legendes sont donc
   bridees a la meme mesure et les colonnes separees par une gouttiere
   declaree — le vide devient une gouttiere reguliere au lieu d'un trou. */
.rf-mesure__grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
}
.rf-mesure__grille > div {
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--line-2);
}
.rf-mesure__grille > div:first-child { padding-left: 0; border-left: 0; }
.rf-mesure__grille b {
  display: block; font-family: var(--serif);
  /* Taille, interligne et couleur : voir « 4. Les chiffres », plus bas. */
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rf-mesure__grille span {
  display: block; margin-top: .6rem; max-width: 26ch;
  font-size: var(--t-md); line-height: 1.45; color: var(--ink-2);
}
/* Le paragraphe s'arretait a 84ch au milieu d'un filet qui, lui, allait au
   bord : rien ne tenait la fin de la ligne. Le lien des sources passe donc au
   bout du filet, et le texte redescend a une mesure de lecture. Le filet est
   pleine largeur parce qu'il est tenu aux deux bouts. */
.rf-mesure__note {
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding-top: 1.5rem; border-top: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 2.5rem;
  max-width: none; font-size: var(--t-md); line-height: 1.68; color: var(--ink-2);
  text-wrap: pretty;
}
.rf-mesure__note strong { color: var(--ink); font-weight: 650; }
.rf-mesure__texte { max-width: 64ch; }
.rf-mesure__lien {
  flex: 0 0 auto; color: var(--brand-700); font-weight: 650;
  white-space: nowrap;
  /* Zone de clic de 24 px au moins (WCAG 2.5.8) : le lien mesurait 22 px de haut.
     La marge negative annule le remplissage, la mise en page ne bouge pas. */
  padding-block: .3rem; margin-block: -.3rem;
}

@media (max-width: 860px) {
  .rf-mesure__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .rf-mesure__grille > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
  .rf-mesure__grille { grid-template-columns: 1fr; row-gap: 1.35rem; }
  .rf-mesure__grille > div { padding-left: 0; border-left: 0; }
  .rf-mesure__grille > div + div { padding-top: 1.35rem; border-top: 1px solid var(--line-2); }
  .rf-mesure__grille span { max-width: none; }
}

/* ---------- 5. La sortie ----------
   La page se terminait sur un paragraphe explicatif et tombait dans le pied,
   sans jamais rappeler son unique geste. Un filet epais, une phrase, le
   bouton — qui renvoie au champ lui-meme et non au haut de la page. */

.rf-fin__inner {
  padding-block: clamp(1.75rem, 3.2vw, 2.75rem);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.5rem 2.5rem;
}
.rf-fin p {
  margin: 0; max-width: 38ch;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.24; letter-spacing: -.012em;
  text-wrap: pretty;
}


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

/* Le choix de commune, quand le code postal en dessert plusieurs.
   `.cp__choix label` est en `--ink-2` : une couleur faite pour le papier,
   posee ici sur l'aplat encre. Contraste mesure : 1,95:1, contre 4,5 exiges.
   C'est la question charniere du parcours — « laquelle de ces cinq communes
   est la votre ? » — et elle etait invisible. Les codes postaux partages sont
   frequents en zone rurale : le parcours s'arretait la. */
.rf-avis:not(:has(.cp__res)) .cp__choix label { color: var(--sur-ink-1); }
.rf-avis:not(:has(.cp__res)) .cp__sortie { color: var(--sur-ink-1); }

/* Meme raison que dans la coquille : le vert de l'anneau de focus est
   illisible sur l'encre. (Le `:not(:has(.cp__res))` date du bandeau qui
   passait sur le papier : voir « L'accueil se remplit », en fin de feuille.) */
.rf-avis:not(:has(.cp__res)) :focus-visible { outline-color: var(--paper); }

/* Le bandeau mobile faisait 860 px pour une fenetre de 844, en-tete colle
   compris : le lien de secours « Passer directement aux deux outils » tombait
   juste sous la ligne de flottaison. Quelqu'un qui ne veut pas donner son code
   postal n'avait donc aucune sortie visible, et les deux outils sont au
   troisieme ecran. On resserre le bandeau jusqu'a ce que le lien remonte
   au-dessus du pli — sans rien retirer. */
@media (max-width: 620px) {
  .rf-avis__grille {
    gap: 1.3rem 0;
    padding-block: 1.5rem 1rem;
  }
  .rf-avis .rf-eyebrow { margin-bottom: .6rem; }
  body.rf-b .rf-avis h1 { margin-bottom: .6rem; }
  /* Le chapo etait descendu a 17 px pour faire tenir le bandeau au-dessus du
     pli. Resultat : la phrase qui explique le site etait plus petite que
     l'intro de la section suivante, moins importante. La hierarchie passe
     avant le pli — le corps est rendu, la place est reprise sur le titre. */
  .rf-avis .rf-quoi { line-height: 1.5; margin-bottom: 0; }
  .rf-avis .rf-label { margin-bottom: .45rem; }
  .rf-avis .rf-retour { margin-top: .65rem; }
}


/* ---------- La grille des dangers : trois etats ---------- */

/* Voir chiffres.js pour la regle qui compte : on ne masque jamais un danger
   non recense. On le met en retrait, avec le mot juste. La couleur reste
   `--muted` et non une opacite : `--muted` sur le papier de cette section
   tient 5:1, une opacite arbitraire ne garantirait rien. */

.rf-risque__etat {
  display: inline-block; margin-top: .8rem;
  padding: .2rem .55rem;
  border-radius: var(--r-xs);
  font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.35;
}
.rf-risques__liste li[data-etat="recense"] .rf-risque__etat {
  color: var(--brand-700); background: var(--brand-50);
}
/* Trois niveaux, trois contrastes, tous au-dessus d'AA :
     recense  8,8  vert de marque   — ce qui vous concerne
     universel 7,4 encre secondaire — une affirmation positive, elle se lit
     absent    4,7 gris sourd       — en retrait, mais lisible */
.rf-risques__liste li[data-etat="universel"] .rf-risque__etat {
  color: var(--ink-2); background: var(--paper-2);
}
.rf-risques__liste li[data-etat="absent"] .rf-risque__etat {
  color: var(--muted); background: var(--paper-2);
}

/* Le retrait porte sur l'icone et le preavis, pas sur le nom du danger : on
   doit pouvoir lire « Séisme » aussi vite dans les deux etats, sinon on croit
   que la carte est desactivee. */
.rf-risques__liste li[data-etat="absent"] .rf-risque__preavis strong { color: var(--muted); }

/* Ce qui vous concerne prend le pas visuellement, sans quitter la grille. */



/* =========================================================================
   Évolution de l'accueil — 20 septembre 2026
   « Préparer son foyer avec calme et méthode. »

   Même identité (nom, horloge, palette, serif + sans), autre équilibre :
   - le bleu nuit reste à l'en-tête, au pied de page, sur la légende de la
     photo et sur la dernière bande ; le premier écran passe sur le papier ;
   - la photographie n'est plus un fond sous un voile : c'est une figure, en
     couleur, à côté du formulaire, avec sa légende ;
   - les sections alternent papier, blanc et une teinte verte très claire ;
   - l'ambre (celui du logo) ne sert que de repère ponctuel : le vert reste la
     couleur de l'action.
   Cette partie est placée en fin de feuille : elle remplace les règles « sur
   fond sombre » du bandeau plus haut sans les réécrire.
   ========================================================================= */

/* ---------- 1. Bandeau clair ---------- */
body.rf-b .rf-avis {
  --sur-ink-1: var(--ink-2);
  --sur-ink-2: var(--muted);
  background: var(--paper-2); color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.rf-avis .rf-eyebrow { color: var(--brand-700); }
body.rf-b .rf-avis h1 { color: var(--ink); }
.rf-quoi b { color: var(--ink); }

.rf-retour { border-top-color: var(--line-2); }

/* Le repère des 72 heures : un fait, marqué d'un filet ambre. */
.rf-repere {
  display: flex; align-items: baseline; gap: .9rem; margin: 1.5rem 0 0;
  padding: .15rem 0 .15rem 1rem; border-left: 3px solid var(--amber-vif);
  max-width: 30rem; font-size: var(--t-md); line-height: 1.5; color: var(--ink-2);
}
.rf-repere b {
  flex: 0 0 auto; font-family: var(--serif); font-size: 1.75rem; line-height: 1;
  color: var(--ink); font-weight: 600; white-space: nowrap;
}

/* La photographie : une figure, pas un décor. Colonne de droite sur toute la
   hauteur du bandeau, recadrée sur les objets (sac, eau, radio, lampe), en
   couleur. Légende sur le bleu nuit. Sans elle, texte et champ se suffisent. */
@media (min-width: 961px) {
  .rf-avis__grille > .rf-avis__intro { grid-column: 1; grid-row: 1; }
  .rf-avis__grille > .rf-champ { grid-column: 1; grid-row: 2; }
  .rf-avis__grille > .rf-avis__photo { grid-column: 2; align-self: start; }
}
.rf-avis__photo {
  position: relative; margin: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bandeau); border-radius: var(--r-xs); overflow: hidden;
}
.rf-avis__photo picture { display: contents; }
.rf-avis__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: 80% 70%;
}
.rf-avis__photo figcaption {
  padding: .85rem 1.1rem 1rem;
  color: rgba(var(--paper-rgb), .92); border-top: 3px solid var(--amber-vif);
}
.rf-avis__photo figcaption span { display: block; margin-top: .2rem; }
@media (max-width: 960px) {
  .rf-avis__photo img { aspect-ratio: 16 / 9; max-height: 22rem; object-position: 78% 70%; }
}
@media (max-width: 620px) {
  .rf-avis__photo img { aspect-ratio: 4 / 3; }
  .rf-repere { margin-top: 1rem; }
  body.rf-b .rf-avis h1 { font-size: 1.75rem; }
}

/* ---------- 2. Parcours ---------- */
.rf-etape__num {
  display: inline-grid; place-items: center; align-self: flex-start;
  width: 2.5rem; height: 2.5rem; margin-bottom: 1rem;
  border: 1.5px solid var(--brand); border-radius: 50%;
  font-size: var(--t-lg); color: var(--brand-700); background: var(--surface);
}
/* Trois cartes (étapes 2 à 4) depuis le 5 octobre 2026 : elles tiennent côte à côte dès
   800 px ; en dessous, une par ligne (à deux par rangée, la troisième restait seule). */
@media (min-width: 800px) {
  body.rf-b .rf-etape h3 { min-height: 2.36em; }
}
.rf-etape .parcours__cta { padding-inline: .6rem; white-space: normal; }
@media (max-width: 799px) {
  .rf-parcours__liste { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .rf-etape, .rf-etape + .rf-etape { padding: 1.5rem 0 1.6rem; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .rf-etape, .rf-etape + .rf-etape { padding: 1.25rem 0 1.35rem; }
}

/* ---------- 4. Les chiffres : la valeur d'abord, l'explication ensuite ---------- */
.rf-mesure { background: var(--brand-50); border-top: 1px solid var(--line-2); }
.rf-mesure .container { padding-block: clamp(2.5rem, 5vw, 4rem); }
.rf-mesure__grille > div { border-left-color: rgba(var(--brand-rgb), .25); }
.rf-mesure__grille b {
  font-size: clamp(3rem, 6vw, 4.75rem); line-height: .95; color: var(--brand-700);
}
.rf-mesure__grille b::before {
  content: ""; display: block; width: 2.25rem; height: 3px; margin-bottom: 1rem;
  background: var(--amber-vif);
}
/* L'ancienne règle visait tous les <span>, y compris celui du nombre : elle le
   rapetissait à 15 px. Elle ne vise plus que la légende. */
.rf-mesure__grille b span {
  display: inline; margin: 0; max-width: none; font: inherit; color: inherit; line-height: inherit;
}
.rf-mesure__grille > div > span {
  margin-top: .85rem; max-width: 27ch; font-size: var(--t-md); line-height: 1.5; color: var(--ink-2);
}
.rf-mesure__note { border-top-color: rgba(var(--brand-rgb), .25); }
.rf-mesure__lien { font-size: var(--t-md); }
/* Insécable, le lien dépassait l'écran de 4 px à 320 px : toute la page défilait de côté. */
@media (max-width: 400px) { .rf-mesure__lien { white-space: normal; flex-shrink: 1; } }

/* ---------- 6. Dernière bande, sur le vert de la marque ----------
   Sur le bleu nuit, elle se fondait dans le pied de page (5 octobre 2026). */
.rf-fin { background: var(--brand); border-top: 0; }
.rf-fin p { color: var(--paper); }
.rf-fin :focus-visible { outline-color: var(--paper); }


/* ---------- Ajustements du 20 septembre 2026 (soir) ---------- */

/* Le repère des 72 h suit désormais la recherche et ses mentions : il reste
   dans la colonne du champ, à la mesure du formulaire. */
.rf-champ .rf-repere { margin-top: 1.5rem; }

/* Titres de section : sur ordinateur, la mesure de 46 caractères (celle du
   texte courant) les coupait sur trois lignes avec un grand vide à droite.
   Ils prennent une largeur en rem, et `balance` répartit les lignes. Le
   mobile ne change pas : la colonne y est déjà plus étroite que cette mesure. */
@media (min-width: 900px) {
  .rf-tete { max-width: 46rem; }
  body.rf-b .rf-tete h2 { text-wrap: balance; }
}


/* =========================================================================
   Accueil plus direct — 21 septembre 2026

   Ordre de la page : bandeau, confiance, parcours, exemples des outils,
   rappel des six situations, chiffres, sortie. Les exemples viennent juste
   après le parcours ; la grille des risques devient une liste compacte.
   ========================================================================= */


.rf-risques__intro { margin-bottom: 1.25rem; font-size: var(--t-base); }
body.rf-b .rf-risques__liste {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  border-top: 0; border-bottom: 1px solid var(--line);
}
body.rf-b .rf-risques__liste li { border-left: 0; border-top: 1px solid var(--line); }
body.rf-b .rf-risques__liste a {
  display: block; height: auto; padding: .8rem 0 .9rem; background: none;
}
body.rf-b .rf-risques__liste a:hover { background: none; }
body.rf-b .rf-risques__liste a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rf-risques__liste b { font-size: var(--t-base); }
.rf-risque__preavis { display: block; margin-top: .15rem; color: var(--ink-2); }
.rf-risques__liste .rf-risque__etat { margin-top: .4rem; }
body.rf-b .rf-risques__note { max-width: 46rem; margin-top: 1.25rem; padding-top: 0; border-top: 0; color: var(--ink-2); }
.rf-risques__action { margin: 1.25rem 0 0; }
.rf-risques__action .btn { min-height: 48px; padding-inline: 1.4rem; }
@media (max-width: 860px) {
  body.rf-b .rf-risques__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.rf-b .rf-risques__liste { grid-template-columns: minmax(0, 1fr); }
  body.rf-b .rf-risques__liste a {
    display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline;
    padding: .65rem 0;
  }
  .rf-risque__preavis { margin-top: 0; }
  .rf-risques__liste .rf-risque__etat { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Textes secondaires ----------
   Mesuré le 21 septembre 2026 : aucun texte sous 4,5:1, mais la mention du code
   postal (13 px, 4,66:1) et plusieurs notes en gris de repli (5,0–5,3:1, et moins
   dès qu'un fond teinté passe dessous) étaient à la limite. Ces textes prennent
   l'encre secondaire (≥ 8:1 sur tous les fonds de la page) et, pour les notes de
   13 px, le corps 15 px. Aucune taille n'est réduite. */
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-mention { font-size: var(--t-md); line-height: 1.55; }
/* Surtitres : 12 px en capitales espacées, dont le plus long tenait sur trois
   lignes. 13 px, interlettrage réduit. */
.rf-avis .rf-eyebrow, .rf-tete .rf-eyebrow, .rf-label--registre {
  font-size: var(--t-sm); letter-spacing: .1em; line-height: 1.5;
}
/* La légende de la photo : deux lignes courtes, lisibles à la même taille. */
.rf-avis__photo figcaption { font-size: var(--t-md); line-height: 1.5; }
.rf-avis__photo figcaption span { color: rgba(var(--paper-rgb), .86); }
/* Le surtitre de la liste des six situations rejoint les autres surtitres. */
.rf-label--registre { color: var(--brand-700); }
.rf-risque__etat { font-size: var(--t-sm); }
body.rf-b .rf-risques__liste a:focus-visible { outline-offset: 3px; }

/* Photo plus présente. La colonne de droite passe de 45 % à 55 % de la largeur
   et le cadre devient plus haut (5:4 au lieu de 4:3). Le recadrage reste calé
   à droite, sur les objets. À partir de 1100 px seulement : en dessous, la
   colonne du formulaire serait trop étroite (le bouton « Connaître mes
   risques » passait sur deux lignes à 961 px). */
@media (min-width: 1100px) {
  .rf-avis:not(:has(.cp__res)) .rf-avis__grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .rf-avis__photo img { aspect-ratio: 5 / 4; object-position: 84% 72%; }
}


/* =========================================================================
   Accueil : moins de texte autour de l'action — 21 septembre 2026
   Le premier écran garde le titre, une phrase, la question, le champ, son
   bouton et UNE phrase de réassurance. Ce que la recherche renvoie, le repère
   des 72 heures et la référence officielle sont dans un bloc repliable ; une
   fois la commune trouvée, le bandeau ne garde que le résultat et ses actions.
   ========================================================================= */

.rf-avis__plus { grid-column: 1 / -1; max-width: var(--mesure-champ); margin: 0; }
.rf-avis__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);
  border-bottom: 1px solid var(--line-2);
}
.rf-avis__plus > summary::-webkit-details-marker { display: none; }
.rf-avis__plus > summary::marker { content: ''; }
.rf-avis__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;
}
.rf-avis__plus[open] > summary::after { transform: rotate(-135deg); }
.rf-avis__plus > summary:hover { color: var(--brand-700); }
.rf-avis__plus-corps { padding: .9rem 0 .25rem; font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); }
.rf-avis__plus-corps > p { margin: 0 0 .8rem; }
.rf-avis__plus-corps a { color: var(--ink); }
.rf-avis__plus .rf-repere { margin: 0; max-width: none; }

@media (min-width: 961px) {
  .rf-avis__grille > .rf-avis__plus { grid-column: 1; grid-row: 4; }
  .rf-avis__grille > .rf-avis__photo { grid-row: 1 / span 4; }
}


@media (max-width: 620px) {
  .rf-avis .rf-mention { margin-top: .6rem; }
  .rf-avis__plus > summary { min-height: 44px; }
}

/* Parcours sur téléphone : le numéro passe à gauche du titre au lieu de le
   surmonter, et le bouton se cale sous le texte. Quatre étapes tenaient en
   1 220 px ; elles doivent tenir en un peu plus d'un écran. */
@media (max-width: 600px) {
  .rf-etape { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .9rem; align-items: start; }
  .rf-etape__num { grid-row: 1 / span 3; width: 2.25rem; height: 2.25rem; margin: .1rem 0 0; font-size: var(--t-base); }
  .rf-etape > :not(.rf-etape__num) { grid-column: 2; min-width: 0; }
  .rf-etape h3 { margin-bottom: .3rem; }
  .rf-etape h3 + p { margin-bottom: .8rem; }
  .rf-etape .parcours__cta { min-height: 48px; justify-content: center; }
  .rf-parcours .rf-tete { margin-bottom: 1rem; }
}

/* Le rappel « Reprenez où vous en étiez » : pour qui revient, ce qui est déjà
   enregistré sur l'appareil, un geste par ligne. Un cadre sobre, sous le champ ;
   il disparaît quand la commune est trouvée (le résultat porte alors ses propres
   boutons « Reprendre mon sac » et « Reprendre mon logement »). */
.rf-reprise-zone[hidden] { display: none; }
.rf-reprise { margin-top: 1.25rem; padding: 1rem 1.1rem 1.1rem; background: var(--surface); border: 1px solid var(--line-2); border-left: 4px solid var(--brand); border-radius: var(--r-xs); }
body.rf-b .rf-reprise h2 { margin: 0 0 .7rem; font-family: var(--serif); font-size: var(--t-lg); line-height: 1.25; letter-spacing: 0; color: var(--ink); }
.rf-reprise__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.rf-reprise__liste li { display: grid; gap: .55rem; }
.rf-reprise__liste li + li { padding-top: .9rem; border-top: 1px solid var(--line); }
.rf-reprise__etat { display: grid; gap: .1rem; margin: 0; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
.rf-reprise__etat strong { font-size: var(--t-base); font-weight: 650; color: var(--ink); }
.rf-reprise__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.rf-reprise__liste .btn { justify-content: center; }
.rf-reprise__pied { margin: .9rem 0 0; }
.rf-avis:has(.cp__bref) .rf-reprise-zone { display: none; }
body.rf-b .rf-reprise { padding: 1rem 1.1rem 1.1rem; }

/* =========================================================================
   Pictogrammes discrets — 22 septembre 2026
   Un trait fin, la couleur du texte ou du vert de marque, toujours à côté d'un mot.
   Trois emplacements : les quatre étapes, les deux situations (partir / rester),
   les six situations du registre. Aucun effet, aucune animation.
   ========================================================================= */
.rf-etape { position: relative; }
.rf-etape > .ico--etape {
  position: absolute; top: 1.7rem; right: 1.5rem;
  width: 1.75rem; height: 1.75rem; color: var(--brand); opacity: 1;
}
.rf-etape h3 { padding-right: 2.4rem; }
.rf-risques__liste b { display: inline-flex; align-items: center; gap: .55rem; }
.rf-risques__liste b .ico { width: 1.3em; height: 1.3em; color: var(--brand-700); }
.rf-risques__liste li[data-etat="absent"] b .ico { color: var(--muted); }
@media (max-width: 600px) {
  .rf-etape > .ico--etape { grid-column: auto; top: 1.3rem; right: .2rem; width: 1.5rem; height: 1.5rem; }
}


/* =========================================================================
   La photo sous le texte — 22 septembre 2026
   La photographie n'est plus une figure dans la grille : c'est une bande horizontale sur
   toute la largeur du bandeau, calée à droite. Un voile crème en dégradé la recouvre à
   gauche, si bien qu'elle se glisse SOUS le texte (texture, profondeur) sans jamais le
   gêner : le voile ne descend pas sous 84 % d'opacité là où il y a du texte.

   Contraste mesuré le 22 septembre 2026 sur le PIRE pixel de la photo (le plus sombre de la
   zone du texte, à 1 280 px) : sous un voile à 84 %, texte courant (#3d4f5c) 5,0:1, titre
   (#14202a) 10:1 ; à 78 %, le texte courant tombait à 4,4:1 — d'où le relèvement. Ne baissez
   pas l'opacité du voile sans refaire la mesure : le petit gris `--muted` ne passerait pas.
   ========================================================================= */
body.rf-b .rf-avis > .rf-avis__photo {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 26%; right: 0;
  margin: 0; display: block; border-radius: 0; overflow: hidden;
}
body.rf-b .rf-avis > .rf-avis__photo img {
  display: block; width: 100%; height: 100%; max-height: none; aspect-ratio: auto;
  object-fit: cover;
}
body.rf-b .rf-avis > .rf-avis__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
/* La légende (mention « générée par IA » : obligation, voir les mentions légales) devient
   une étiquette en bas à droite de la photo, sur le bleu-ardoise. */
body.rf-b .rf-avis > .rf-avis__photo figcaption {
  position: absolute; z-index: 1; max-width: calc(100% - 2rem);
  border-radius: var(--r-xs);
  color: rgba(var(--paper-rgb), .94);
}
body.rf-b .rf-avis > .rf-avis__photo figcaption span { display: inline; }

/* Le contenu ne partage plus sa grille avec la photo : une colonne, à sa mesure. */
.rf-avis:not(:has(.cp__res)) .rf-avis__grille { grid-template-columns: minmax(0, 1fr); }
.rf-avis:not(:has(.cp__res)) .rf-avis__grille > * { max-width: 34rem; }
body.rf-b .rf-avis__grille { position: relative; z-index: 1; }
.rf-avis:not(:has(.cp__res)) .rf-avis__grille { min-height: clamp(26rem, 38vw, 33rem); }

@media (max-width: 960px) {
  /* Téléphone et tablette : la bande passe sous le contenu, pleine largeur, et son bord
     haut se fond dans le crème — elle se glisse sous les dernières lignes de texte. */
  body.rf-b .rf-avis > .rf-avis__photo { top: auto; left: 0; height: 15.5rem; }
  .rf-avis:not(:has(.cp__res)) .rf-avis__grille { padding-bottom: 12.5rem; min-height: 0; }
}
@media (min-width: 1100px) {
  body.rf-b .rf-avis > .rf-avis__photo { left: 30%; }
  body.rf-b .rf-avis > .rf-avis__photo img { aspect-ratio: auto; }
}
@media (max-width: 620px) {
  /* Sur téléphone, l'étiquette ne garde que la mention obligatoire : « Illustration générée par
     IA. » — l'accroche qui la précède prenait deux lignes sur la photo. */
  body.rf-b .rf-avis > .rf-avis__photo figcaption { font-size: 0; padding: .35rem .7rem; }
  body.rf-b .rf-avis > .rf-avis__photo figcaption span { font-size: var(--t-sm); margin: 0; }
}
@media (min-width: 961px) and (max-width: 1099px) {
  /* Colonne de texte plus large qu'à 1 280 px, relativement : la photo commence plus à droite
     pour que le texte reste dans la zone du voile à 84 % et plus. */
  body.rf-b .rf-avis > .rf-avis__photo { left: 36%; }
}


/* ---- Réglages après relecture (22 septembre 2026) ----
   Bandeau moins haut sur ordinateur : espaces resserrés (≈ 620 px au lieu de 720).
   (Le filtre et le cadrage de la photo réglés ce jour-là ont été remplacés depuis : voir
   « Voile allégé » et « Nouvelle photo du bandeau », plus bas.) */
@media (min-width: 961px) {
  .rf-avis:not(:has(.cp__res)) .rf-avis__grille {
    padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 1.75rem);
    row-gap: clamp(1rem, 1.6vw, 1.4rem);
    min-height: 0;
  }
}


/* =========================================================================
   Bandeau sombre, photo texturée et contrastée — 22 septembre 2026
   Le bandeau clair (voile crème) avait un rendu pâle et délavé. Il repasse au bleu-ardoise, la
   couleur de l'en-tête : la photo, voilée de bleu-ardoise à gauche, se glisse sous le texte en
   crème ; à droite elle garde tout son contraste. Depuis le 1er octobre 2026, il le reste après
   une recherche : voir « L'accueil se remplit », en fin de feuille.

   Contraste mesuré le 22 septembre 2026 sur le pire pixel — le PLUS CLAIR de la zone du texte
   (luminance 0,45) — sous un voile à 78 % : crème #fbf8f3 5,6:1, #f3f0ea 5,3:1. Le voile ne
   descend pas sous 78 % là où il y a du texte : ne le baissez pas sans refaire la mesure.
   ========================================================================= */
body.rf-b .rf-avis:not(:has(.cp__res)) {
  --sur-ink-1: var(--paper-voile); --sur-ink-2: var(--paper-voile);
  background: var(--hero); color: var(--paper); border-bottom: 0;
}
body.rf-b .rf-avis > .rf-avis__photo { background: var(--hero); }
body.rf-b .rf-avis > .rf-avis__photo figcaption {
  background: rgba(var(--bandeau-rgb), .94); border: 1px solid rgba(var(--paper-rgb), .22);
}

body.rf-b .rf-avis:not(:has(.cp__res)) .rf-eyebrow { color: var(--brand-200); }
body.rf-b .rf-avis:not(:has(.cp__res)) h1 { color: var(--paper); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-quoi { color: var(--paper-voile); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-quoi b { color: var(--paper); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-label { color: var(--paper); border-bottom-color: rgba(var(--paper-rgb), .28); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-label--question { color: var(--paper); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-mention { color: var(--paper-voile); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-mention a { color: var(--paper); text-decoration-color: rgba(var(--paper-rgb), .5); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-retour { color: var(--paper-voile); border-top-color: rgba(var(--paper-rgb), .28); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-retour a { color: var(--paper); }
/* Le champ reste l'objet clair du bandeau. */
body.rf-b .rf-avis:not(:has(.cp__res)) .cp--vedette .cp__row input {
  background: var(--surface); border-color: transparent; color: var(--ink);
}
body.rf-b .rf-avis:not(:has(.cp__res)) .cp--vedette .cp__row input:focus { outline-color: var(--paper); border-color: transparent; }
/* Le bouton : la règle menthe plus haut (#77e3bc, 10,6:1). Une seconde règle, plus
   spécifique, le repassait en --brand-300, qui paraissait grisé (10 octobre 2026, audit F-11). */
body.rf-b .rf-avis:not(:has(.cp__res)) :focus-visible { outline-color: var(--paper); }
body.rf-b .rf-avis:not(:has(.cp__res)) .cp__choix label,
body.rf-b .rf-avis:not(:has(.cp__res)) .cp__sortie { color: var(--paper-voile); }
/* Le pied du bandeau : filet crème sur l'ardoise. */
/* « Comment ça marche » : texte crème, filets crème. */
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-avis__plus > summary { color: var(--paper); border-bottom-color: rgba(var(--paper-rgb), .34); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-avis__plus > summary::after { border-color: var(--paper); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-avis__plus > summary:hover { color: var(--brand-100); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-avis__plus-corps { color: var(--paper-voile); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-avis__plus-corps a { color: var(--paper); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-repere { color: var(--paper-voile); }
body.rf-b .rf-avis:not(:has(.cp__res)) .rf-repere b { color: var(--paper); }


/* Le bandeau d'accueil est d'un bleu INTERMÉDIAIRE (#35525f), entre l'en-tête (#1d3542) et le
   crème de la page : trois paliers, au lieu d'un bloc sombre unique de 730 px suivi d'une
   coupure franche. Un filet clair sépare l'en-tête du bandeau. Contraste du texte courant #f3f0ea
   sur le pire pixel (le plus clair, luminance 0,45) sous le voile à 86 % : 5,0:1. */
body.rf-b .rf-avis:not(:has(.cp__res)) { box-shadow: inset 0 1px 0 rgba(var(--paper-rgb), .14); }


/* =========================================================================
   Voile de la photo allégé — 24 septembre 2026
   Le fondu bleu-ardoise courait jusqu'à 80 % de la photo, à 86 % d'opacité sur plus d'un tiers
   de sa largeur : le sac, au milieu, restait voilé, ses noirs relevés — un aspect délavé. Deux
   changements :
   1. Le voile ne couvre plus que la zone du texte, qui ne dépasse jamais 33 % de la largeur de
      la photo (mesuré de 961 à 2 560 px : 32,8 % à 961 px, 19 à 28 % au-delà de 1 100 px), puis
      s'annule vite — à 56 % (52 % au-delà de 1 100 px). Le sac sort entièrement du voile.
   2. Sous le texte, il descend de 86 % à 80 % : on devine la photo derrière le texte (75 % avec
      l'ancienne photo ; 80 % depuis la nouvelle, du 25 septembre, dont les reflets des bouteilles
      passent sous le texte : à 75 %, le pire pixel tombait à 4,6:1).
   Contraste mesuré pixel par pixel sous chaque ligne de texte, avec la couleur réelle de
   chacune, de 390 à 2 560 px : voir le README (« Voile allégé »). Le point faible est le
   sur-titre vert pâle (#b9dbd3) : 5,6:1 sur le fond uni, il ne peut pas faire mieux. Ne
   baissez pas le voile sous le texte sans refaire cette mesure.
   ========================================================================= */
body.rf-b .rf-avis > .rf-avis__photo img { filter: saturate(.95) contrast(1.1) brightness(.96); }
body.rf-b .rf-avis > .rf-avis__photo::after {
  background: linear-gradient(90deg,
    var(--hero) 0%,
    rgba(var(--hero-rgb), .9) 10%,
    rgba(var(--hero-rgb), .8) 35%,
    rgba(var(--hero-rgb), .3) 43%,
    rgba(var(--hero-rgb), .08) 50%,
    rgba(var(--hero-rgb), 0) 56%);
}
@media (min-width: 1100px) {
  body.rf-b .rf-avis > .rf-avis__photo::after {
    background: linear-gradient(90deg,
      var(--hero) 0%,
      rgba(var(--hero-rgb), .9) 10%,
      rgba(var(--hero-rgb), .8) 31%,
      rgba(var(--hero-rgb), .3) 39%,
      rgba(var(--hero-rgb), .08) 46%,
      rgba(var(--hero-rgb), 0) 52%);
  }
}
@media (max-width: 960px) {
  body.rf-b .rf-avis > .rf-avis__photo::after {
    background: linear-gradient(180deg, var(--hero) 0%, rgba(var(--hero-rgb), .8) 21%,
      rgba(var(--hero-rgb), .3) 30%, rgba(var(--hero-rgb), .08) 39%, rgba(var(--hero-rgb), 0) 48%);
  }
}


/* ---- Nouvelle photo du bandeau — 25 septembre 2026 ----
   Sac ouvert sur la table, le soir (1 672 × 941). Le sac occupe le tiers droit de l'image :
   le cadrage part à droite pour ne pas couper sa bretelle ; les bouteilles, la radio et les
   conserves, à gauche, passent sous le voile du texte. */
body.rf-b .rf-avis > .rf-avis__photo img { object-position: 82% 55%; }
@media (max-width: 960px) {
  body.rf-b .rf-avis > .rf-avis__photo img { object-position: 80% 55%; }
}
/* L'étiquette ne garde, à toutes les largeurs, que la mention obligatoire « Illustration
   générée par IA. », en petit : l'accroche qui la précédait encombrait la photo (et recouvrait
   « Comment ça marche » de 961 à 1 099 px). */
body.rf-b .rf-avis > .rf-avis__photo figcaption {
  right: .75rem; bottom: .75rem; font-size: 0; padding: .2rem .5rem; line-height: 1.3;
}
body.rf-b .rf-avis > .rf-avis__photo figcaption span {
  font-size: var(--t-xs); margin: 0; color: rgba(var(--paper-rgb), .8);
}


/* =========================================================================
   L'accueil se remplit, il ne se transforme pas — 1er octobre 2026

   Jusqu'ici, une recherche faisait basculer le bandeau : la photo, l'accroche et
   les boutons disparaissaient, le fond passait sur le papier, et la page défilait
   jusqu'au résultat. Le visiteur croyait avoir changé de page. Plus bas, la page
   ne tenait pas compte de la recherche : « Connaître mes risques » revenait deux
   fois, « Composer mon sac » trois fois, et deux blocs disaient l'avancement.

   Désormais :
   1. le bandeau garde sa forme. Sous le champ, une réponse courte (`.cp__bref`,
      cp.js) : la commune, ses risques en pastilles, un lien vers la suite. Elle
      remplace les deux boutons du pied, qui menaient au même endroit ;
   2. le résultat complet (précisions, arrêtés, sources) est sur « Mes risques »,
      où mène « Voir le détail ». Il allait dans une carte « Découvrez vos
      risques », étape 1 du parcours, retirée le 5 octobre 2026 : elle répétait
      le champ du bandeau, qui porte désormais le numéro 1 ;
   3. chaque carte dit son état (`.rf-etape__etat`, parcours.js) : le bloc
      « Ma préparation » a disparu de l'accueil ;
   4. la dernière bande propose la prochaine action (les exemples repliés ont quitté
      l'accueil le 19 octobre 2026).

   Le résultat complet (`.cp__res`) n'est donc plus jamais dans le bandeau : les
   qualificatifs `:not(:has(.cp__res))`, plus haut, sont toujours vrais. Ils sont
   gardés parce qu'ils donnent leur priorité à ces règles ; les retirer
   demanderait de revérifier tout le bandeau.
   ========================================================================= */

/* Un attribut `hidden` posé par parcours.js l'emporte sur l'affichage des boutons
   et des grilles. */
.parcours__cta[hidden], .rf-parcours__pied[hidden] { display: none !important; }

/* ---------- 1. La réponse courte, dans le bandeau ----------
   Un cadre à peine plus sombre que le bandeau : le contraste du texte ne dépend
   plus du voile de la photo. */
.rf-avis .cp__bref {
  margin-top: 1rem; padding: 1rem 1.1rem 1.1rem;
  background: rgba(var(--bandeau-rgb), .6); border: 1px solid rgba(var(--paper-rgb), .28);
  border-radius: var(--r-sm); color: var(--paper-voile);
}
/* La commune, et « Oublier cette commune » à sa droite (à la ligne sur téléphone). La
   zone tactile du lien garde ses 44 px ; la marge négative l'aligne sur le nom. */
.cp__bref-tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0 1rem; margin: 0 0 .3rem; font-size: var(--t-md); line-height: 1.4;
}
.cp__bref-tete p { margin: 0; }
.cp__bref-tete .cp__oubli { margin-block: -.55rem; }
.cp__bref-tete b { margin-right: .4rem; font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; color: var(--paper); }
.rf-avis .cp__bref .cp__chapeau { margin-bottom: .6rem; color: var(--paper-voile); }
.rf-avis .cp__bref .cp__pills { margin-bottom: 1rem; }
.rf-avis .cp__bref .cp__ligne,
.rf-avis .cp__bref .cp__ligne--note { color: var(--paper-voile); }
.rf-avis .cp__bref .cp__ligne svg { color: var(--paper); }
.rf-avis .cp__bref .lien-outil { color: var(--paper); text-decoration-color: rgba(var(--paper-rgb), .5); }
.cp__bref-suite { margin: 0; }
/* L'historique des catastrophes naturelles, au pied de la réponse courte (5 octobre 2026) :
   affiché d'emblée, en petit, sur le crème voilé du bandeau. */
.rf-avis .cp__bref .cp__histoire-bloc { border-top-color: rgba(var(--paper-rgb), .22); }
.rf-avis .cp__bref .cp__histoire-bloc .cp__ligne { font-size: var(--t-sm); }
.rf-avis .cp__bref .cp__histoire li { border-top-color: rgba(var(--paper-rgb), .16); color: var(--paper-voile); }
.rf-avis .cp__bref .cp__histoire b { color: var(--paper); }
.cp__bref-lien {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--btn-h); padding: .45rem 1.05rem;
  font-size: var(--t-ui); font-weight: 600; line-height: 1.2; text-decoration: none;
  color: var(--paper); background: rgba(var(--bandeau-rgb), .32);
  border: 1px solid rgba(var(--paper-rgb), .7); border-radius: var(--r-btn);
}
.cp__bref-lien:hover { background: rgba(var(--paper-rgb), .14); border-color: var(--paper); }
@media (max-width: 520px) {
  .cp__bref-lien { min-height: 44px; }
}

/* ---------- 3. L'état de chaque étape ---------- */
.rf-etape__etat {
  margin: 0 0 .8rem; font-size: var(--t-sm); font-weight: 650; line-height: 1.4;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.rf-etape.is-termine .rf-etape__etat { color: var(--brand-700); }
.rf-etape.is-termine .rf-etape__num { background: var(--brand); border-color: var(--brand); color: #fff; }
.rf-parcours__pied { margin: 1.25rem 0 0; color: var(--muted); }
.rf-parcours__pied .lien-outil { display: inline; min-height: 0; padding: .35rem 0; }
.rf-parcours__fini { color: var(--ink-2); }



/* =========================================================================
   Revue d'usage — 2 octobre 2026 (accueil)
   ========================================================================= */

/* ---------- La réponse courte : la prochaine action, puis le détail ---------- */
.cp__bref-suite { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; }
.cp__bref-lien::after { content: none; }
/* « ↓ » descend dans la page ; « → » ouvre « Mes risques » (5 octobre 2026). */
.cp__bref-lien--ancre::after { content: "↓"; content: "↓" / ""; }
.cp__bref-detail::after,
.cp__bref-lien--ancre[href$=".html"]::after { content: "→"; content: "→" / ""; }
.cp__bref-detail {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-size: var(--t-md); color: var(--paper);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(var(--paper-rgb), .5);
}
.cp__bref-detail:hover { text-decoration-color: currentColor; }

/* ---------- La Journée nationale de la résilience ----------
   Un bandeau daté (parcours.js, marquerJNR), sous le bandeau d'accueil : l'ambre du logo,
   en teinte claire, pour un repère et non une alerte. */
.rf-jnr[hidden] { display: none; }
.rf-jnr { background: var(--amber-50); border-bottom: 1px solid var(--amber-200); }
.rf-jnr__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .7rem 1.5rem; padding-block: .9rem;
}
.rf-jnr__texte {
  margin: 0; max-width: 78ch; padding-left: .9rem; border-left: 3px solid var(--amber-vif);
  font-size: var(--t-md); line-height: 1.5; color: var(--ink);
}
.rf-jnr__texte a { color: var(--ink); text-underline-offset: 3px; }
.rf-jnr__agenda { flex: 0 0 auto; }

/* =========================================================================
   Allègement de l'accueil — 4 octobre 2026
   La page faisait 8 100 px sur téléphone : les outils y étaient présentés deux fois
   (le parcours, puis « Ce que vous obtenez »), la confiance quatre fois, et les
   nombres et les six situations formaient deux sections. Voir le README,
   « Allègement de l'accueil ». Les règles `.rf-outils` / `.rf-outil` de l'ancienne
   section ont été retirées le même jour ; celles des exemples, le 19 octobre 2026.
   ========================================================================= */

/* ---------- La confiance : une ligne sur ordinateur ---------- */
@media (min-width: 961px) {
  .rf-transparence .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; }
  .rf-transparence .rf-confiance { margin-top: 0; column-gap: 1.25rem; }
  .rf-transparence p { max-width: none; }
}

/* ---------- Le raccourci du parcours (4 octobre 2026) ---------- */
.rf-parcours__presse { margin: .7rem 0 0; font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); }
.rf-parcours__presse a { color: var(--brand-700); font-weight: 650; text-underline-offset: 3px; }

/* ---------- Pourquoi s'y préparer : les nombres, puis les six situations ----------
   Une seule section, sur le vert clair de la mesure ; les filets prennent sa teinte. */
.rf-pourquoi .rf-mesure__note { margin-top: clamp(1.5rem, 3vw, 2rem); }
.rf-pourquoi__situations { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.rf-pourquoi .rf-label--registre { border-bottom-color: rgba(var(--brand-rgb), .25); }
body.rf-b .rf-pourquoi .rf-risques__liste,
body.rf-b .rf-pourquoi .rf-risques__liste li { border-color: rgba(var(--brand-rgb), .2); }
/* Sur téléphone, chaque nombre se lit à côté de sa légende et non au-dessus : trois
   lignes au lieu de trois blocs. */
@media (max-width: 560px) {
  .rf-pourquoi .rf-mesure__grille > div {
    display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1rem; align-items: center;
  }
  .rf-pourquoi .rf-mesure__grille b { font-size: 2.25rem; }
  .rf-pourquoi .rf-mesure__grille b::before { width: 1.75rem; margin-bottom: .6rem; }
  .rf-pourquoi .rf-mesure__grille > div > span { margin-top: 0; }
}

/* ---------- Après une recherche : les deux outils côte à côte ----------
   « Composer mon sac » et « Préparer mon logement » (parcours.js, `actionsBref`). Sur
   téléphone, ils ne tiennent pas sur une ligne : l'un sous l'autre, à la même largeur. */
@media (max-width: 520px) {
  .rf-avis .cp__bref-suite .cp__bref-lien { flex: 1 1 100%; justify-content: center; }
}

/* Au survol, une règle générique des liens (`a:hover`) passait le texte au vert foncé,
   illisible sur l'ardoise : il reste crème. */
body.rf-b .rf-avis .cp__bref-suite .cp__bref-lien:hover,
body.rf-b .rf-avis .cp__bref-suite .cp__bref-lien:focus-visible { color: var(--paper); }