/* =========================================================================
   Aperçu du résultat sur les pages d'entrée des outils (configurateur, diagnostic,
   plan familial) — 22 septembre 2026

   Deux composants :
     .attendu  le bloc replié « Ce que vous obtenez », dont le titre propose
               désormais l'aperçu (« Voir un exemple »)
     .exemple  l'aperçu : un ticket, pas une capture d'écran. La mention « Exemple »
               est dans la légende, jamais retirée. Les valeurs du sac viennent du
               moteur (chiffres.js, `data-apercu` / `data-chiffre`) ; celles du
               logement sont des gestes réels du catalogue (habitat.js) ; l'aperçu de
               la feuille ne cite aucune donnée : ce sont les intitulés de ses blocs.
   Aucune couleur ni fonte nouvelle. À charger AVANT refonte-b-outils.css.
   ========================================================================= */

/* ---------- « Ce que vous obtenez » ----------

   Replie par defaut. C'est un arbitrage entre deux besoins qui se contredisent :
   la page a besoin de contenu statique — elle n'en avait que 168 mots, dont
   42 % de gabarit commun — et le questionnaire a besoin du premier ecran.
   Deploye, ce bloc repoussait la premiere option a 1 276 px sur un ecran de
   667. Replie, il coute une ligne. */
.attendu {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
/* Le libelle tient sur UNE ligne, y compris a 375 px : chaque ligne de plus
   repousse la premiere question d'autant. C'est pour ca qu'il dit « Ce que vous
   obtenez » et non « Ce que vous obtenez au bout des sept questions ». */
.attendu > summary {
  cursor: pointer; list-style: none;
  padding: .85rem 0;
  position: relative;
}
.attendu > summary h2 {
  margin: 0; font-family: var(--serif); font-size: var(--t-lg);
  font-weight: 600; letter-spacing: 0; color: var(--ink);
}
/* La promesse, lisible bloc ferme. Fermé, le bloc ne disait que « Ce que vous
   obtenez » : la reponse etait a un clic que presque personne ne fait. Une
   ligne de plus, et une seule — voir plus haut pourquoi chaque ligne compte ;
   la phrase tient en une ligne a 375 px. */
.attendu__promesse {
  display: block; margin-top: .15rem;
  font-size: var(--t-md); line-height: 1.4; color: var(--ink-2);
}
.attendu > summary::-webkit-details-marker { display: none; }
/* Un chevron dessine en CSS plutot qu'un caractere : il tourne, et il ne depend
   d'aucune police. */
.attendu > summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s ease;
}
.attendu[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.attendu > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.attendu > div { padding-bottom: 1.1rem; }

/* Le libellé propose l'action : sur une ligne, bloc fermé, « Voir un exemple ». Il
   disparaît à l'ouverture (l'exemple est alors sous les yeux). */
.attendu > summary { padding-right: 7.5rem; }
.attendu__cta {
  position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
  font-size: var(--t-sm); font-weight: 650; color: var(--brand-700);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.attendu[open] > summary { padding-right: 2rem; }
.attendu[open] .attendu__cta { display: none; }
.attendu > .attendu__corps { padding-bottom: 1.1rem; }

/* ---------- L'aperçu ---------- */
.exemple {
  margin: .25rem 0 1.25rem; padding: 1rem 1.15rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line-2); border-top: 3px solid var(--brand);
  border-radius: var(--r-xs); font-size: var(--t-md); color: var(--ink-2);
  max-width: 34rem;
}
.exemple__tete {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem;
  margin: 0 0 .8rem; padding-bottom: .7rem; border-bottom: 1px dashed var(--line-2);
  font-size: var(--t-base); font-weight: 650; color: var(--ink);
}
.exemple__badge {
  padding: .1rem .55rem; border-radius: var(--r-xs);
  background: var(--amber-100); color: var(--amber-900);
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.exemple ul, .exemple ol { margin: 0; padding: 0; list-style: none; }
.exemple__lignes li { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; }
.exemple__lignes li > span:first-child { flex: 0 1 auto; }
.exemple__lignes li > span:last-child {
  margin-left: auto; padding-left: .5rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600;
}
.exemple__lignes .rf-apercu__deja > span:last-child { color: var(--ink-2); font-weight: 400; font-style: italic; }
.exemple__suite { margin: .35rem 0 0; color: var(--ink-2); }
.exemple__totaux {
  margin: .9rem 0 0; padding-top: .8rem; border-top: 1px dashed var(--line-2);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
}
.exemple__totaux dt { font-size: var(--t-md); color: var(--ink-2); }
.exemple__totaux dd { margin: .15rem 0 0; font-size: var(--t-lg); font-weight: 700; color: var(--brand-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exemple__note { margin: .9rem 0 0; font-size: var(--t-md); color: var(--ink-2); }
.exemple__etapes > li + li { margin-top: .7rem; }
.exemple__etapes b { display: block; margin-bottom: .2rem; font-size: var(--t-md); font-weight: 650; color: var(--brand-700); }
.exemple__etapes ul li { position: relative; padding: .12rem 0 .12rem 1.4rem; font-size: var(--t-base); }
.exemple__etapes ul li::before { content: ""; position: absolute; left: 0; top: .95em; width: .45em; height: 2px; background: var(--brand); }
.exemple__aide {
  display: inline-block; margin-left: .3rem; padding: 0 .4rem;
  font-size: var(--t-sm); font-weight: 650; color: var(--brand-700);
  border: 1px solid currentColor; border-radius: var(--r-xs); white-space: nowrap;
}
/* L'aperçu de la feuille : un bloc par ligne, une icône, l'intitulé, ce qu'on y note. */
@media (max-width: 420px) {
  .exemple__totaux { grid-template-columns: 1fr 1fr; }
  .exemple__totaux > div:last-child { grid-column: 1 / -1; }
}