/* =========================================================================
   REFONTE B — LA COQUILLE COMMUNE

   Ce que toutes les pages du site partagent une fois la direction B retenue :
   l'en-tete sombre, la largeur de page, le rayon des boutons, et les deux
   micro-styles de texte qui reviennent partout.

   Cette feuille est nee de la fusion annoncee dans refonte-b-outils.css :
   la coquille y etait dupliquee « tant que la direction est en validation ».
   L'arbitrage est fait, la duplication est levee. Le partage se lit ainsi :

     refonte-b-coquille.css   toutes les pages          <- vous etes ici
     refonte-b.css            l'accueil seulement
     refonte-b-outils.css     configurateur, diagnostic

   Ce qui N'EST PAS ici, volontairement : `section { padding-block: 0 }`.
   Cette remise a zero n'a de sens que sur les trois pages dont le balisage
   porte ses propres respirations. Sur les pages de texte, elle supprimerait
   le rythme vertical (jusqu'a 6.5rem par section) et collerait les blocs.
   Elle reste donc dans les deux feuilles de page.

   Aucune couleur ni fonte nouvelle : tout vient des variables de styles.css.
   ========================================================================= */

body.rf-b { --container: 1220px; background: var(--paper); }
body.rf-b .btn { border-radius: var(--r-xs); }

/* ---------- En-tete sombre ---------- */

/* Le bandeau : un bleu-ardoise un peu moins noir que l'encre du texte (#14202a,
   luminosité 12 %) et tiré vers le vert-de-gris de la marque (#1d3542,
   luminosité 18 %, teinte 201° contre 207°). Une seule valeur, ici : le menu
   déroulant du mobile la reprend. Contrastes mesurés le 21 septembre 2026 sur
   ce fond : nom et pictogramme 12,1:1, liens du menu (ivoire à 82 %) 8,4:1,
   accent ambre de l'horloge 5,3:1. Le même bleu sert aux autres aplats sombres
   (pied de page, bloc d'entrée des pages-outils, bande finale de l'accueil,
   légende de la photo, barre de suivi) : un seul bleu sombre sur le site.
   L'encre #14202a reste celle du texte. */
body.rf-b { --bandeau: #1d3542; --bandeau-rgb: 29, 53, 66; --h-bandeau: 69px; }
/* Le bleu-ardoise du bandeau d'accueil, entre l'en-tête et le crème (refonte-b.css). */
body.rf-b { --hero: #35525f; --hero-rgb: 53, 82, 95; }
body.rf-b .site-header {
  background: var(--bandeau); backdrop-filter: none;
  border-bottom: 1px solid rgba(var(--paper-rgb), .08);
}
body.rf-b .site-header__inner { min-height: 68px; }
@media (max-width: 800px) {
  body.rf-b .site-header__inner { min-height: 60px; }
  body.rf-b { --h-bandeau: 61px; }
}
/* Les barres collantes se posent juste sous le bandeau (elles étaient réglées
   pour 76 px ; il en mesure maintenant 69, ou 65 sur mobile). */
body.rf-b .sommaire, body.rf-b .result__suivi { top: calc(var(--h-bandeau) - 1px); }
body.rf-b .site-footer, body.rf-b .result__suivi { background: var(--bandeau); }
body.rf-b .brand { color: var(--paper); letter-spacing: -.01em; }
body.rf-b .nav a:not(.btn) { color: rgba(var(--paper-rgb), .82); }
body.rf-b .nav a:not(.btn):hover {
  color: var(--paper); background: rgba(var(--paper-rgb), .1);
}
/* Page courante : gras, ivoire plein et un filet ambre (celui de l'horloge). */
body.rf-b .nav a:not(.btn)[aria-current="page"] {
  color: var(--paper); font-weight: 650;
  text-decoration: underline; text-decoration-color: var(--amber-vif);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}
body.rf-b .nav-toggle { color: var(--paper); border-color: rgba(var(--paper-rgb), .42); }
body.rf-b .nav .btn--outline {
  color: var(--paper); border-color: rgba(var(--paper-rgb), .38); background: none;
}
body.rf-b .nav .btn--outline:hover {
  background: rgba(var(--paper-rgb), .1); border-color: var(--paper);
}
/* Le menu deroulant du mobile reprend le fond sombre, sinon il s'ouvre en
   beige sous un en-tete noir. Le seuil doit etre EXACTEMENT celui du hamburger
   dans styles.css : il etait a 880 quand le hamburger etait a 780, et entre
   les deux la barre horizontale recevait un fond qu'elle n'avait pas demande —
   invisible parce qu'encre sur encre, mais faux. Les quatre sont a 1100 depuis le 4 octobre 2026 (styles.css x2, ici x2 : voir styles.css). */
@media (max-width: 1100px) {
  body.rf-b .nav {
    background: var(--bandeau);
    border-top: 1px solid rgba(var(--paper-rgb), .14);
    box-shadow: none;
  }
}

/* ---------- Micro-typographie ---------- */

/* Les deux feuilles de page definissaient chacune leur `.rf-eyebrow`, a
   1.25rem et 1.1rem de marge basse. Valeur unique retenue : celle de
   l'accueil, qui est la page de reference de la direction. */
.rf-eyebrow {
  margin: 0 0 1.25rem; font-size: var(--t-xs); font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-300);
}
.rf-mention { margin: 1rem 0 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.6; }
.rf-mention a { color: var(--ink-2); }


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

/* L'anneau de focus clavier est en `--brand` (#145e52) par defaut. Sur l'encre
   de l'en-tete, ce vert donne 2,17:1 : sous le seuil de 3:1 exige par WCAG 2.2
   (1.4.11) pour un indicateur de focus, et c'est le premier endroit ou l'on
   tabule en arrivant. Sur papier le meme anneau donne 7:1 et reste inchange.
   Mesure : `--paper` sur l'encre donne 15,6:1. */
body.rf-b .site-header :focus-visible { outline-color: var(--paper); }

/* Page hors menu : la rubrique parente se marque, entre le .72 des liens au
   repos et le blanc plein de la page courante. */
body.rf-b .nav a:not(.btn).nav__rubrique { color: rgba(var(--paper-rgb), .92); }

/* Le bouton d'action pose sur sa propre page. Il perd sa bordure : depuis que
   les deux outils portent la meme forme, une bordure a peine plus pale ne se
   voyait plus (.32 contre .38). Sans cadre au milieu de deux boutons cadres,
   il se lit comme eteint — c'est le but. */
body.rf-b .nav .btn[aria-current="page"] {
  background: transparent;
  border-color: transparent;
  color: rgba(var(--paper-rgb), .55);
}
body.rf-b .nav .btn[aria-current="page"]:hover {
  background: rgba(var(--paper-rgb), .06); color: rgba(var(--paper-rgb), .75);
}

/* Le filet qui separe « lire » de « faire » : sur l'encre, la ligne claire de
   styles.css disparaitrait. */
body.rf-b .nav__guides { border-color: rgba(var(--paper-rgb), .18); }

/* ---------- Le champ « code postal » hors de l'accueil ----------
   La page « Mes risques » monte le même champ que l'accueil (parcours.js).
   Ces règles vivaient dans refonte-b.css, chargée par l'accueil seul : hors de
   lui, le champ reprenait l'ancien dessin arrondi et sa suite se centrait.
   Mêmes valeurs qu'à l'accueil ; refonte-b.css garde ses propres règles, pour
   l'aplat sombre. */
body.rf-b .cp--vedette,
body.rf-b .cp--vedette .cp__row input,
body.rf-b .cp--vedette .cp__row .btn { border-radius: var(--r-xs); box-shadow: none; }
body.rf-b .cp--vedette .cp__row input { text-align: left; letter-spacing: .12em; }
/* Mentions légales du pied de page : 13 px à 55 % d'opacité, 5,0:1 — lisible
   mais pâle. Même taille, plus d'opacité. */
body.rf-b .site-footer__legal { color: rgba(var(--paper-rgb), .74); }


/* =========================================================================
   Lisibilité et navigation mobile — 21 septembre 2026
   ========================================================================= */

/* Focus au clavier : voir `scroll-padding-top` en fin de styles.css. Ici, la seule
   marge basse, pour que la barre collante du questionnaire ne couvre rien. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus { scroll-margin-bottom: 1.5rem; }

/* Le corps de texte des blocs repliables et des notes : une mesure de lecture
   bornée. Dans la colonne de lecture (`.prose`), c'est la colonne qui la donne. */
.cp__plus-corps, .rf-avis__plus-corps { max-width: 68ch; }

/* Les liens « Connaître mes risques » visent le champ, pas sa question : sans
   cette marge, « Que risque-t-on chez vous ? » se retrouvait sous l'en-tête. */
#champ-cp:target { scroll-margin-top: 4.75rem; }

/* =========================================================================
   Revue d'usage — 4 octobre 2026 (soir)
   ========================================================================= */

/* « En cas d'alerte » dans l'en-tête : les fiches réflexes (que-faire.html, lisibles
   hors connexion) n'étaient que dans le pied de page, alors que c'est la page dont on
   a besoin le jour même. Un lien, pas un bouton : il ne concurrence pas les outils,
   mais l'ambre de l'horloge le distingue. Sur ordinateur, après « Guides » ; dans le
   menu déroulant du téléphone, en premier. */
.nav__alerte svg { width: 1.05em; height: 1.05em; margin-right: .35em; flex-shrink: 0; }
body.rf-b .nav a.nav__alerte:not(.btn) { color: var(--amber-clair); font-weight: 600; margin-left: .35rem; }
body.rf-b .nav a.nav__alerte:not(.btn):hover { color: var(--amber-clair-survol); }
/* Sur mobile (10 octobre 2026, audit F-06 et F-15) : le lien d'alerte n'est plus remonté
   en tête du menu par `order` (l'ordre affiché ne suivait plus celui du clavier) ; il est
   visible dans la barre, à côté du bouton du menu, et reste à sa place dans le menu. */
.site-header__alerte { display: none; }
@media (max-width: 1100px) {
  body.rf-b .nav a.nav__alerte:not(.btn) {
    margin: .35rem 0 0;
    border-top: 1px solid rgba(var(--paper-rgb), .14);
  }
  body.rf-b .site-header__alerte {
    display: inline-flex; align-items: center; gap: .35em; flex-shrink: 0;
    min-height: 44px; min-width: 44px; justify-content: center; padding: 0 .7rem;
    color: var(--amber-clair); font-weight: 600; font-size: var(--t-ui); text-decoration: none;
    border: 1px solid rgba(var(--paper-rgb), .42); border-radius: var(--r-btn);
  }
  body.rf-b .site-header__alerte:hover { color: var(--amber-clair-survol); }
  body.rf-b .site-header__alerte svg { width: 1.15em; height: 1.15em; }
}
@media (max-width: 420px) {
  /* Icône seule sous 420 px : le nom accessible reste « En cas d'alerte ». */
  body.rf-b .site-header__alerte { padding: 0; }
  body.rf-b .site-header__alerte span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Le pied de page sur téléphone : cinq blocs empilés en une colonne mesuraient
   1 457 px à 375 px de large, presque deux écrans de liens. Sous 520 px, la marque
   garde toute la largeur et les quatre groupes de liens vont deux par deux. */
@media (max-width: 520px) {
  .site-footer { padding-block: 2.5rem 1.5rem; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
  .site-footer__grid h2 { margin-bottom: .6rem; }
  .site-footer__rs-titre { margin-top: 1rem; }
}