/* =========================================================================
   REFONTE B — LES DEUX OUTILS (configurateur, diagnostic)

   Meme direction que l'accueil « l'avis » : un aplat sombre porte l'entree du
   parcours, le papier porte le travail. Aucune couleur ni fonte nouvelle.

   La coquille qui etait dupliquee ici depuis refonte-b.css a ete extraite
   dans refonte-b-coquille.css, chargee par toutes les pages. Cette feuille
   ne porte plus que ce qui appartient aux deux outils.
   ========================================================================= */

/* La remise a zero reste page par page : le balisage des deux outils 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; }

/* ---------- L'entree de parcours ---------- */

.rf-entree { background: var(--bandeau, var(--ink)); color: var(--paper); }
.rf-entree__grille {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: end;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.75rem, 3vw, 2.5rem);
}
.rf-entree__grille > * { min-width: 0; }
body.rf-b .rf-entree h1 {
  margin: 0 0 1rem; color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.06; letter-spacing: -.02em;
  max-width: 24ch; text-wrap: pretty;
}
.rf-entree__lead {
  margin: 0; max-width: 54ch;
  font-size: var(--t-md); line-height: 1.6;
  color: rgba(var(--paper-rgb), .74);
}
.rf-entree__lead a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* Le fil des quatre etapes, a hauteur du chapo (rempli par parcours.js).
   Il remplace « L'autre outil » : il y a quatre etapes, plus deux outils, et
   le visiteur doit voir ou il en est sans repasser par l'accueil. */
.rf-entree__parcours {
  border-top: 1px solid rgba(var(--paper-rgb), .18);
  padding-top: 1rem;
}

/* ---------- Le premier ecran appartient au questionnaire ----------

   Sur l'accueil, le bandeau sombre EST la page. Sur les deux outils, il n'est
   qu'une enseigne : la page a un seul travail, faire commencer le
   questionnaire. A 375 px il mangeait 419 px des 667 disponibles — 63 % de
   l'ecran — et repoussait la premiere option a 794 px, sous le pli, sur la
   page qui convertit.

   Mesure avant / apres, a 375x667 comme a 390x844 :
     bandeau         419 -> 242 px
     premiere option 794 -> 617 px, donc visible sans defiler.

   Le bouton « Continuer » reste sous le pli : c'est inherent a une premiere
   question qui affiche quatre compteurs, et ce n'est pas genant des lors qu'on
   peut commencer a repondre sans defiler. */
@media (max-width: 860px) {
  .rf-entree__grille {
    grid-template-columns: 1fr; align-items: start;
    gap: 1rem; padding-block: 1.5rem 1.25rem;
  }
  body.rf-b .rf-entree h1 { max-width: none; font-size: 1.6rem; margin-bottom: .6rem; }
  /* Le fil est un repere, pas un passage obligatoire : le surtitre « Etape N sur 4 »
     reste visible, et l'en-tete porte les quatre outils sur toutes les pages. */
  .rf-entree__parcours { display: none; }
}

/* Arrivée par un lien du parcours (`outil.html#quiz`, voir parcours.js) : la page s'arrête
   12 px sous l'en-tête collant, sur « Question 1 sur N ». La marge d'ancre générale
   (`--ancre`) laissait dépasser, coupée, la ligne « Ce que vous obtenez ». */
body.rf-b #quiz { scroll-margin-top: calc(var(--h-bandeau, 69px) + .75rem - var(--ancre, 6rem)); }

/* ---------- Le parcours, sur le papier ---------- */

body.rf-b .quiz { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(3rem, 6vw, 4.5rem); }

/* Aplatissement : le parcours perd ses ombres et ses grands rayons. Ce sont
   les filets qui separent, comme sur le reste de la refonte. */
body.rf-b .qcard,
body.rf-b .result__hero,
body.rf-b .result__toolbar,
body.rf-b .cp,
body.rf-b .cp--vedette {
  box-shadow: none; border-radius: var(--r-xs);
}
body.rf-b .qcard { border: 1px solid var(--line); }
/* La première question est posée par le script après le premier affichage : sans cette
   réserve, la carte (40 à 60 rem selon la largeur) poussait tout le bas de la page,
   CLS de 0,44 à 0,51 sur le sac et le logement (10 octobre 2026, audit E-01). Un écran
   de haut suffit : ce qui suit reste hors de l'écran avant comme après. */
#quiz:not(.hidden):not(:has(.qcard)) { min-height: 100vh; }
body.rf-b .opt { border-radius: var(--r-xs); }
body.rf-b .cp--vedette .cp__row input,
body.rf-b .cp__row input,
body.rf-b .cp__choix select { border-radius: var(--r-xs); }
body.rf-b .cp--vedette .cp__row input { text-align: left; letter-spacing: .12em; }
body.rf-b .quiz__bar { border-radius: 0; }
body.rf-b .quiz__bar i { border-radius: 0; }
body.rf-b .result__metrics { border-radius: var(--r-xs); }
body.rf-b .result__metrics b { font-family: var(--serif); }
/* Le budget, plus large que les autres chiffres (5 octobre 2026) : en quatre cases égales,
   « 110–197 € » se coupait en deux lignes et sa case doublait de hauteur. Une seule rangée,
   quel que soit le nombre de chiffres (quatre pour le sac, trois ou quatre pour le logement). */
@media (min-width: 701px) {
  body.rf-b .result__metrics:has(> .is-fort:first-child) {
    grid-template-columns: minmax(0, 1.6fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  }
  body.rf-b .result__metrics .is-fort b { white-space: nowrap; }
}

/* Le mot de la fin de page : au fer a gauche, comme tout le reste. */
body.rf-b .quiz .rf-pied {
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: var(--t-sm); line-height: 1.6; color: var(--muted);
  text-align: left;
}
body.rf-b .quiz .rf-pied a { color: var(--ink-2); }


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

/* Voir refonte-b-coquille.css : le vert de l'anneau de focus donne 2,17:1 sur
   l'encre. L'entree de parcours des deux outils est le meme aplat. */
body.rf-b .rf-entree :focus-visible { outline-color: var(--paper); }

/* Le bloc « Ce que vous obtenez » (`.attendu`) et l'aperçu (`.exemple`) vivent dans
   exemple.css, partagé avec le plan familial. Les réglages mobiles sont en fin de feuille. */


/* ---------- Ligne de confiance sur l'aplat sombre ---------- */
.rf-entree .confiance { margin-top: 1rem; color: rgba(var(--paper-rgb), .74); }

/* ---------- Le fil d'Ariane sur l'aplat sombre ----------
   Les étapes 2 et 3 étaient les seules pages sans fil d'Ariane (11 octobre 2026, audit
   F-12). L'aplat et sa grille large restent : un en-tête à deux colonnes garde --container. */
.rf-entree .fil { margin-bottom: .6rem; }
.rf-entree .fil ol, .rf-entree .fil [aria-current] { color: rgba(var(--paper-rgb), .74); }
.rf-entree .fil a { text-decoration-color: rgba(var(--paper-rgb), .5); }
.rf-entree .fil a:hover { color: var(--paper); }


/* ---------- Le fil des étapes sur l'aplat sombre ---------- */
.rf-entree .pmini__titre {
  margin: 0 0 .5rem; font-size: var(--t-xs); font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--paper-rgb), .6);
}
.rf-entree .pmini ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.rf-entree .pmini a {
  display: grid; grid-template-columns: 1.4rem 1fr; grid-template-rows: auto auto; column-gap: .5rem;
  height: auto; padding: .45rem 0; color: rgba(var(--paper-rgb), .74); text-decoration: none;
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid rgba(var(--paper-rgb), .1);
}
.rf-entree .pmini li:first-child a { border-top: 0; }
.rf-entree .pmini a:hover .pmini__nom { text-decoration: underline; text-underline-offset: 3px; }
.rf-entree .pmini a[aria-current="step"] { color: var(--paper); background: none; border-color: rgba(var(--paper-rgb), .1); }
.rf-entree .pmini a:hover { background: none; }
.rf-entree .pmini .pmini__num { color: var(--brand-300); }
.rf-entree .pmini a[aria-current="step"] .pmini__nom { font-weight: 650; }
.rf-entree .pmini__etat { grid-column: 2; font-size: var(--t-sm); color: rgba(var(--paper-rgb), .74); }
.rf-entree .pmini__astuce { margin: .6rem 0 0; font-size: var(--t-sm); color: rgba(var(--paper-rgb), .74); }
.rf-entree .pmini__astuce a {
  display: inline; padding: 0; border: 0; color: var(--paper);
  text-decoration: underline; text-underline-offset: 3px;
}

/* La ligne de confiance de l'entrée : une seule phrase, qui peut se couper entre les
   mots (voir plus bas). */
.rf-entree .confiance { gap: .2rem 1rem; }


/* =========================================================================
   Entrée des questionnaires et barre « Continuer » — 22 septembre 2026
   ========================================================================= */

/* Sur téléphone, les deux outils s'ouvrent sur ce qui compte : le titre, une ligne
   de bénéfice, une seule mention de confiance, puis la question. Avant : 65 → 561 px
   avant la carte, et les compteurs à 759 px, sous le pli. */
@media (max-width: 700px) {
  .rf-entree__grille { padding-block: 1.1rem 1rem; gap: .6rem; }
  .rf-entree .rf-eyebrow { margin-bottom: .35rem; }
  body.rf-b .rf-entree h1 { font-size: var(--t-xl); line-height: 1.12; margin-bottom: .45rem; }
  .rf-entree__lead { line-height: 1.5; }
  .rf-entree .confiance { margin-top: .6rem; }
  /* « Ce que vous obtenez » : une seule ligne fermée. La promesse est dans le chapô. */
  .attendu { margin-bottom: 0; border-top: 0; }
  .attendu > summary { padding-block: .7rem; min-height: 48px; display: flex; align-items: center; }
  .attendu__promesse { display: none; }
  .attendu > summary h2 { font-size: var(--t-md); font-family: var(--sans); font-weight: 650; }
  body.rf-b .quiz { padding-block: 1rem 2.5rem; }
  .quiz__progress { margin-bottom: .9rem; }
  .quiz__progress-meta { margin-bottom: .4rem; }
  body.rf-b .qcard { padding: 1.1rem 1rem; }
  .qcard__q { font-size: 1.4rem; margin-bottom: .3em; }
  .qcard__help { margin-bottom: 1rem; }
}

/* Le message « Choisissez une réponse » et les boutons forment UNE barre
   (`.qcard__barre`). Sur téléphone elle est collée en bas de l'écran, mais seulement
   quand la zone de réponse est à l'écran (site.js, BarreQuestion) : sans quoi un
   « Continuer » actif se voit avant les compteurs, et laisse passer sans les avoir
   regardés. Elle garde sa place dans le flux : masquée ou non, la page ne saute pas. */
@media (max-width: 700px) {
  body.rf-b .quiz .qcard__barre {
    position: sticky; bottom: 0; z-index: 10;
    margin: 1.25rem -1rem -1.1rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line-2);
    box-shadow: 0 -8px 16px -10px rgba(var(--ink-rgb), .25);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  body.rf-b .quiz .qcard__barre--attente {
    visibility: hidden; opacity: 0; transform: translateY(12px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
  }
  /* Clavier virtuel ouvert : la barre reprend sa place en fin de carte. */
  body.rf-b .quiz .qcard__barre--libre { position: static; box-shadow: none; }
}
/* Écran très bas (zoom à 200 ou 400 %, téléphone à l'horizontale) : rien ne colle, sinon
   l'en-tête, la barre « Continuer » et le récapitulatif ne laissaient que 79 px pour lire
   la question (10 octobre 2026, audit F-07, WCAG 1.4.10). */
@media (max-height: 500px) {
  body.rf-b .site-header,
  body.rf-b .quiz .qcard__barre,
  body.rf-b .result__suivi,
  body.rf-b .sommaire { position: static; }
}
@media (max-width: 700px) {
  body.rf-b .quiz .qcard__requis { margin: 0 0 .5rem; }
  body.rf-b .quiz .qcard__nav {
    flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .75rem;
    margin: 0; padding: 0; border-top: 0;
  }
  body.rf-b .quiz .qcard__nav .btn { width: auto; min-height: 48px; }
  body.rf-b .quiz .qcard__nav > .btn--primary { flex: 1 1 auto; }
  body.rf-b .quiz .qcard__nav > .btn--ghost { flex: 0 0 auto; }
  /* Ce qui reçoit le focus ne passe ni sous la barre ni sous l'en-tête. */
  body.rf-b .quiz :where(input, button, select, textarea, summary, a):focus { scroll-margin-bottom: 8.5rem; }
}
/* La mention de confiance de l'entrée est une seule phrase : elle peut se couper
   entre les mots (sur une ligne étroite), contrairement aux anciens énoncés courts. */
.rf-entree .confiance span { white-space: normal; }
.rf-entree .confiance { font-size: var(--t-sm); }

/* Textes d'aide des questionnaires sur téléphone : ce sont des informations utiles
   (pourquoi « Continuer » est grisé, ce que devient le code postal), pas des mentions
   légales. 16 px pour celles qui conditionnent un geste, 15 px pour les notes. */
@media (max-width: 700px) {
  .qcard__requis, body.rf-b .quiz .rf-pied, .rf-entree .confiance { font-size: var(--t-md); }
  body.rf-b .quiz .tiny { font-size: var(--t-ui); }
}
/* Un « − » à 30 % d'opacité ne se voyait plus (1,9:1). Le contrôle reste visiblement
   désactivé, et lisible : 50 %, avec un contour effacé. */
.counter__ctrl button[disabled] { opacity: .5; }
/* 320 px (petits Android, iPhone SE de première génération) : les compteurs du foyer
   dépassaient de 9 px et faisaient défiler toute la page de côté. Resserrer ne suffisait
   pas sans couper « compagnie » en plein mot : les boutons passent sous le libellé, à
   droite, et gardent leurs 44 px. */
@media (max-width: 340px) {
  .counter { flex-wrap: wrap; padding: .85rem .9rem; gap: .5rem 1rem; }
  .counter > div:first-child { flex: 1 1 100%; }
  .counter__ctrl { margin-left: auto; }
}

/* ---------- Ordinateur : le bandeau redevient une enseigne (23 septembre 2026) ----------
   À 1366 × 768, le bandeau mesurait 396 px et la question « Qui vit sous votre toit ? »
   arrivait à 747 px : ses compteurs étaient sous le pli, on arrivait « sur un grand
   bandeau bleu ». Le fil des quatre étapes, en colonne de quatre lignes, en faisait
   l'essentiel : il passe sur UNE ligne sous le titre, avec le mot d'état seul (le détail
   reste lu par les lecteurs d'écran, sauf la commune, qui tient). Le chapô et la mention
   de confiance partagent une ligne quand la largeur le permet. En FIN de feuille : les
   règles du fil (`.rf-entree .pmini …`) sont plus haut, à spécificité égale. */
@media (min-width: 861px) {
  .rf-entree__grille { grid-template-columns: 1fr; gap: .8rem; align-items: start; padding-block: 1.4rem 1rem; }
  .rf-entree__grille > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.25rem; }
  .rf-entree__grille > div:first-child > .fil,
  .rf-entree__grille > div:first-child > .rf-eyebrow,
  .rf-entree__grille > div:first-child > h1 { flex: 1 1 100%; }
  .rf-entree .rf-eyebrow { margin-bottom: .35rem; }
  body.rf-b .rf-entree h1 { font-size: clamp(1.7rem, 2.3vw, 2.1rem); line-height: 1.12; max-width: none; margin-bottom: .4rem; }
  .rf-entree .confiance { margin-top: 0; }
  .rf-entree__parcours { padding-top: .65rem; }
  .rf-entree .pmini__titre,
  .rf-entree .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;
  }
  .rf-entree .pmini ol { grid-template-columns: repeat(4, max-content); column-gap: 2.25rem; }
  .rf-entree .pmini a { display: flex; align-items: baseline; gap: .45rem; padding: .15rem 0; border-top: 0; white-space: nowrap; }
  .rf-entree .pmini__etat { font-size: var(--t-sm); }
  .rf-entree .pmini__astuce { margin-top: .35rem; }
  body.rf-b .quiz { padding-top: 1.25rem; }
}

/* ---------- Ligne prix · action (23 septembre 2026) ----------
   Le prix, le poids et le lien « Voir » formaient un rail gris à droite de chaque article
   (ordinateur) et tombaient après toute l'explication (téléphone) : on ne les voyait pas
   au moment de décider. Ils passent juste sous le nom (configurateur.js, diagnostic.js),
   sur une ligne : le prix en clair, le poids à côté, puis un bouton tonal « Voir les
   offres ». Tonal et non plein : quarante boutons verts pleins feraient une boutique
   (voir .item__lien dans styles.css). En FIN de feuille, à spécificité supérieure. */
body.rf-b .item { grid-template-columns: 24px minmax(0, 1fr); }
@media (max-width: 640px) { body.rf-b .item { grid-template-columns: 44px minmax(0, 1fr); } }
body.rf-b .item__side {
  grid-column: auto; display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: flex-start; gap: .45rem 1rem;
  margin: .5rem 0 .2rem; text-align: left;
}
/* Une largeur fixe pour le prix et le poids (5 octobre 2026) : « 7–12 € 120 g » et
   « 36–66 € 285 g » n'ont pas la même largeur, et les boutons d'achat partaient d'un
   endroit différent à chaque ligne. */
body.rf-b .item__infos { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; min-width: 3.65rem; }
@media (min-width: 641px) { body.rf-b .item__infos { min-width: 9.5rem; } }
body.rf-b .item__price { font-size: var(--t-md); font-weight: 650; color: var(--ink); }
/* « Budget indicatif » devant la fourchette d'un produit retenu (audit G-02). */
body.rf-b .item__budget { font-size: var(--t-xs); font-weight: 500; color: var(--muted); }
body.rf-b .item__poids { font-size: var(--t-sm); }
body.rf-b .item__lien {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 34px; padding: .3rem .85rem;
  border: 1px solid var(--brand-300); border-radius: var(--r-btn, 8px);
  background: var(--brand-50); color: var(--brand-700);
  font-size: var(--t-sm); font-weight: 650; line-height: 1.2; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.rf-b .item__lien svg { opacity: 1; }
body.rf-b .item__lien:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 620px) { body.rf-b .item__lien { min-height: 40px; } }
/* Téléphone : le poids passe sous le prix pour que le bouton tienne sur la même ligne.
   Sinon il tombait en dessous, et quarante-deux articles rallongeaient la liste d'un écran. */
@media (max-width: 640px) {
  body.rf-b .item__side { gap: .45rem .75rem; }
  body.rf-b .item__infos { flex-direction: column; gap: 0; line-height: 1.25; }
}
/* Article déjà rassemblé : le bouton s'efface, le prix aussi. */
body.rf-b .item.is-done .item__price { color: var(--muted); font-weight: 500; }
body.rf-b .item.is-done .item__lien { background: transparent; border-color: var(--line-2); color: var(--muted); }
body.rf-b .item.is-done .item__lien:hover { border-color: var(--brand-300); color: var(--brand-700); }
/* « Comparer les offres » : le second bouton, quand un modèle est retenu (« Voir notre
   choix »). Deux boutons à la demande du propriétaire (24 septembre 2026), mais pas deux
   boutons égaux : celui-ci est à contour, sans fond, pour que « Voir notre choix » reste
   le geste principal de la ligne (voir liensAchat() dans socle.js). */
body.rf-b .item__comparer {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 34px; padding: .3rem .85rem;
  border: 1px solid var(--line-2); border-radius: var(--r-btn, 8px);
  background: var(--surface); color: var(--brand-700);
  font-size: var(--t-sm); font-weight: 650; line-height: 1.2; text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.rf-b .item__comparer svg { opacity: .7; }
body.rf-b .item__comparer:hover { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-700); }
@media (max-width: 620px) { body.rf-b .item__comparer { min-height: 40px; } }
/* Téléphone : les deux boutons ne tiennent pas côte à côte (≈ 265 px de colonne) ; ils
   s'empilent sous le prix, à la même largeur, plutôt qu'en escalier. */
@media (max-width: 640px) {
  body.rf-b .item__side:has(.item__lien ~ .item__comparer) .item__lien,
  body.rf-b .item__lien ~ .item__comparer { flex: 1 1 100%; justify-content: center; }
}
body.rf-b .item.is-done .item__comparer { background: transparent; border-color: var(--line); color: var(--muted); }
@media print { body.rf-b .item__lien, body.rf-b .item__comparer { display: none; } body.rf-b .item__side { margin: .2rem 0 0; } }


/* =========================================================================
   Revue d'usage — 2 octobre 2026 (sac et logement)
   ========================================================================= */

/* « Commencez par connaître les risques de votre commune. » se lisait sur trois lignes :
   la règle des liens du fil (`.rf-entree .pmini a`, affichage en bloc) atteignait aussi
   le lien de cette phrase, et l'emportait sur sa règle propre, écrite plus haut. */
.rf-entree .pmini .pmini__astuce a { display: inline; padding: 0; border: 0; white-space: normal; }

/* ---------- Le questionnaire ---------- */
/* « Recommandé » : l'option que retient le guide officiel. */
.opt b .opt__reco {
  display: inline-block; margin: 0 0 0 .5rem; padding: .05rem .5rem;
  border: 1px solid var(--brand-300); border-radius: var(--r-pill);
  background: var(--surface); color: var(--brand-700);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: .12em; line-height: 1.5;
}
/* Le budget chiffré pour ce foyer, sous chaque option. */
.opt span.opt__prix { margin-top: .4rem; font-size: var(--t-sm); font-weight: 650; color: var(--brand-700); }
/* Le résultat de la recherche, compact dans un questionnaire (cp.js). */
.cp__res--compact { padding: .85rem 1rem; }
.cp__res--compact .cp__res-head { margin-bottom: .4rem; }
.cp__renvoi { margin: .5rem 0 0; color: var(--muted); }
.cp__res--compact .cp__chapeau { margin-bottom: .45rem; }
.cp__res--compact .cp__ligne { margin-bottom: .4rem; font-size: var(--t-sm); line-height: 1.45; }

/* ---------- Le résultat ---------- */
/* Sous le montant principal : ce qui est souvent déjà chez soi. */
.result__metrics div.is-fort span.metrique__plus { margin-top: .4rem; color: var(--ink-2); opacity: 1; font-weight: 500; }

/* « Effacer ou recommencer » : les deux gestes qui effacent, rangés à droite, à part. */
.result__effacer { margin-left: auto; }
.result__effacer > summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
  font-size: var(--t-sm); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted);
}
.result__effacer > summary::-webkit-details-marker { display: none; }
.result__effacer > summary::marker { content: ''; }
.result__effacer[open] > summary { color: var(--ink); }
.result__effacer-corps { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
@media (max-width: 640px) { .result__effacer { margin-left: 0; flex: 1 1 100%; } }
@media print { .result__effacer { display: none; } }

/* Un article compact sur téléphone : nom, prix, lien principal ; « Détails » déplie
   l'explication et « Comparer les offres » (socle.js, boutonDetails). Sur ordinateur,
   tout reste visible et le bouton est masqué. */
.item__ouvrir { display: none; }
@media (max-width: 640px) {
  /* Au bout du nom, sur sa dernière ligne : une ligne de 40 px de plus par article, sinon.
     Cible de 24 px au moins (WCAG 2.5.8). */
  body.rf-b .item__name .item__ouvrir {
    display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; margin-left: .35rem; padding: 0 .15rem;
    font-size: var(--t-sm); font-weight: 500; vertical-align: baseline;
  }
  body.rf-b .item:not(.is-ouvert) .item__details,
  body.rf-b .item:not(.is-ouvert) .item__lien ~ .item__comparer { display: none; }
  body.rf-b .item:not(.is-ouvert) .item__side:has(.item__lien ~ .item__comparer) .item__lien { flex: 0 1 auto; }
  body.rf-b .item__side { margin-bottom: 0; }
}
@media print {
  .item__ouvrir { display: none !important; }
  .item__details { display: block !important; }
}

/* « Pour commencer » (diagnostic.js, 4 octobre 2026) : la suite du plan, en une carte. */
.h-suite { margin-top: 1.5rem; }
body.rf-b .h-suite h3 { margin: 0 0 .5rem; font-family: var(--serif); font-size: var(--t-lg); }
.h-suite__liste { display: grid; gap: .3rem; margin: .7rem 0 1rem; padding-left: 1.2rem; font-size: var(--t-md); color: var(--ink-2); }
.h-suite__liste b { color: var(--ink); }
@media print { .h-suite .btn { display: none !important; } }

/* =========================================================================
   Résultats plus courts sur téléphone — 4 octobre 2026
   La première catégorie du sac arrivait à 2 070 px sous le haut du résultat,
   la première action du logement à 1 350 px : note du budget dépliée, quatre
   chiffres en deux rangées de grandes cases, explication du lien copié et
   obligations au-dessus de la liste. La note et le lien sont repliés ou passés
   sous la liste (configurateur.js, diagnostic.js) ; ici, les chiffres.
   ========================================================================= */
.result__note { margin-top: .9rem; }
.result__lien-copie { margin-top: 1.5rem; }
@media (max-width: 700px) {
  body.rf-b .result__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.rf-b .result__metrics div { padding: .7rem .75rem; }
  body.rf-b .result__metrics div.is-fort { grid-column: 1 / -1; }
  /* Le budget seul sur sa ligne, les autres trois par trois. La règle de styles.css qui
     étale le dernier quand le total est pair vaut pour deux colonnes, pas pour trois :
     ici, seul un dernier resté seul sur sa ligne prend toute la largeur. */
  body.rf-b .result__metrics div:last-child:nth-child(even) { grid-column: auto; }
  body.rf-b .result__metrics div.is-fort ~ div:last-child:nth-child(3n+2) { grid-column: 1 / -1; }
  body.rf-b .result__metrics b { font-size: var(--t-lg); }
}