/* ==========================================================================
   IMPRA — TUNNEL D'ESSAI (/essai, /essai/succes)
   Une colonne, quatre temps, l'impression que ça prend deux minutes.
   Tous les tokens viennent du Design System partagé.
   ========================================================================== */

.essai-page { background: var(--color-warm-canvas); min-height: 100vh; display: flex; flex-direction: column; }
/* L'attribut hidden gagne TOUJOURS — même sur un .btn dont le display est
   posé par sa classe (la leçon du .cine[hidden]). */
.essai-page [hidden] { display: none !important; }
.essai { flex: 1 1 auto; padding-block: var(--space-56) var(--space-80); }
/* Une lumière, pas un décor : la page s'éclaire par le haut, la surface
   reste celle du site. Ni gros dégradé, ni verre dépoli. */
.essai-page {
  background:
    radial-gradient(110% 52% at 50% -4%, rgba(31, 116, 231, .085) 0%, transparent 60%),
    var(--color-warm-canvas);
}

/* ── Le jeu d'icônes : un seul trait pour toute la page ─────────────── */
.ic-defs { position: absolute; }
.essai-page svg use { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.essai__head { max-width: 30ch; margin-bottom: var(--space-40); }
.essai__titre { margin: 0; }
.essai__sous-titre {
  margin: var(--space-16) 0 0;
  max-width: 46ch;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--impra-muted);
}

/* ── Deux colonnes : le choix, et ce qu'il engage ───────────────────── */
.essai-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.essai-main { min-width: 0; }
@media (min-width: 1024px) {
  .essai-grid {
    grid-template-columns: minmax(0, 1fr) 348px;
    gap: var(--space-40);
    align-items: start;
  }
  .essai__head { max-width: 34ch; }
}

.essai-retour {
  margin-left: auto;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--impra-muted);
  text-decoration: none;
}
.essai-retour:hover { color: var(--impra-navy); }

/* ── Le fil des étapes ─────────────────────────────────────────────────── */
.fil {
  display: flex; align-items: center; gap: var(--space-8);
  margin: 0 0 var(--space-32); padding: 0; list-style: none;
}
.fil__etape {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--impra-muted);            /* étapes à venir : lisibles, pas fantômes */
  white-space: nowrap;
}
.fil__etape:not(:last-child)::after {
  content: "";
  display: block; width: 18px; height: 1px;
  background: var(--impra-border-strong, rgba(15,23,46,.18));
}
.fil__num {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 11px; font-weight: var(--weight-bold);
}
.fil__etape[aria-current="step"] { color: var(--impra-blue-text); }
.fil__etape[aria-current="step"] .fil__num { background: var(--impra-blue); border-color: var(--impra-blue); color: #fff; }
.fil__etape.is-fait { color: var(--impra-navy); }
.fil__etape.is-fait .fil__num {
  border-color: var(--impra-navy); background: var(--impra-navy); color: #fff;
}

/* ── Étapes ────────────────────────────────────────────────────────────── */
.etape__titre {
  margin: 0 0 var(--space-16);
  font-family: var(--font-geometric);
  font-size: var(--text-subheading);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-subheading);
  color: var(--impra-navy);
}
.essai-sous { margin: 0 0 var(--space-24); font-size: var(--text-body-sm); color: var(--impra-muted); }
.etape__actions {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-12);
  margin-top: var(--space-32);
}
.etape__actions .btn { min-height: 48px; }

/* ── Étape 1 : le choix ────────────────────────────────────────────────
   La hiérarchie de l'écran, dans l'ordre : 0 € aujourd'hui → 30 jours →
   ce qui sera payé, et quand → le détail de la formule. Le prix futur
   reste parfaitement lisible ; il n'est simplement plus ce qu'on voit en
   premier. Aucun artifice promotionnel : c'est un essai, pas une promo.
   ---------------------------------------------------------------------- */
.choix { display: flex; flex-direction: column; gap: var(--space-12); }

.choix__carte {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-24);
  border-radius: var(--radius-cards);
  background: var(--surface-1);
  border: 1px solid var(--impra-border-strong, rgba(15, 23, 46, .14));
  cursor: pointer;
  transition: border-color 160ms var(--ease-standard),
              box-shadow 160ms var(--ease-standard),
              transform 160ms var(--ease-standard);
}
@media (hover: hover) {
  .choix__carte:hover { border-color: var(--impra-blue); transform: translateY(-1px); }
}
.choix__carte input { position: absolute; opacity: 0; pointer-events: none; }

.choix__haut { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.choix__nom {
  font-family: var(--font-geometric);
  font-size: 19px;
  color: var(--impra-navy);
}
.choix__pour {
  margin-top: 3px;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--impra-muted);
}

/* La coche : un état du système, pas un gros bouton radio. */
.choix__coche {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--impra-border-strong, rgba(15, 23, 46, .25));
  transition: border-color 160ms var(--ease-standard), background-color 160ms var(--ease-standard);
}

/* Le 0 € : l'objet le plus grand de la carte. */
.choix__essai {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-12);
  margin-top: var(--space-20);
}
.choix__zero {
  font-family: var(--font-geometric);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  line-height: .95;
  font-size: clamp(40px, 9vw, 52px);
  color: var(--impra-navy);
}
.choix__periode {
  display: flex; flex-direction: column;
  font-size: var(--text-body-sm);
  line-height: 1.3;
  color: var(--impra-muted);
}
.choix__periode b {
  font-weight: var(--weight-semibold);
  color: var(--impra-blue-text);
}

/* Le prix futur et sa date : second niveau, jamais caché. */
.choix__suite {
  flex: 1 0 100%;                      /* mobile : sa propre ligne, sous le filet */
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid color-mix(in srgb, var(--impra-navy) 8%, transparent);
  font-size: var(--text-body-sm);
  line-height: 1.45;
  color: var(--impra-muted);
}
.choix__suite b {
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
  font-variant-numeric: tabular-nums;
}
.choix__date { display: block; color: var(--impra-muted); }

/* Dès que la colonne est assez large, l'essai et l'échéance partagent une
   ligne : la carte respire au lieu de s'allonger, et l'œil lit « 0 €
   aujourd'hui » puis « puis tant, à telle date » d'un seul mouvement. */
@media (min-width: 700px) {
  .choix__essai {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-32);
  }
  .choix__essai { flex-wrap: nowrap; }
  .choix__essai > .choix__periode { margin-right: auto; }
  .choix__suite {
    flex: 0 1 auto;
    margin: 0; padding: 0 0 0 var(--space-24);
    border-top: none;
    border-left: 1px solid color-mix(in srgb, var(--impra-navy) 8%, transparent);
    text-align: right;
    align-self: flex-end;
  }
}

/* L'état sélectionné : la bordure passe au bleu, la surface s'éclaire à
   peine. Pas de double bordure, pas de halo. */
.choix__carte:has(input:checked) {
  border-color: var(--impra-blue);
  box-shadow: 0 0 0 1px var(--impra-blue), 0 10px 24px rgba(31, 116, 231, .10);
}
.choix__carte:has(input:checked) .choix__coche {
  border-color: var(--impra-blue);
  background: var(--impra-blue)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>')
    center / 12px no-repeat;
}
.choix__carte:has(input:focus-visible) { outline: 2px solid var(--impra-blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .choix__carte { transition: none; }
  .choix__carte:hover { transform: none; }
}

/* Les trois faits sous les cartes — la même grammaire que la homepage. */
.assur--essai {
  margin-top: var(--space-20);
  justify-content: center;
  color: var(--impra-muted);
}
.assur--essai li + li::before { color: var(--impra-border-strong, rgba(15, 23, 46, .3)); }

/* Groupe : un autre régime commercial, donc une autre ligne — ni 0 €,
   ni 30 jours, puisque l'offre n'a pas d'essai automatique. */
.groupe-ligne {
  display: flex; align-items: center; gap: var(--space-16);
  margin-top: var(--space-20);
  padding: var(--space-20) var(--space-24);
  border-radius: var(--radius-cards);
  border: 1px dashed var(--impra-border-strong, rgba(15, 23, 46, .2));
}
.groupe-ligne__ic {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--impra-blue) 8%, transparent);
  color: var(--impra-blue-text);
}
.groupe-ligne__ic svg { width: 22px; height: 22px; display: block; }
.groupe-ligne__texte { min-width: 0; margin-right: auto; }
.groupe-ligne__nom {
  margin: 0;
  font-family: var(--font-geometric);
  font-size: 17px;
  color: var(--impra-navy);
}
.groupe-ligne__pour { margin: 2px 0 0; font-size: var(--text-body-sm); color: var(--impra-muted); }
.groupe-ligne__cta { flex: 0 0 auto; white-space: nowrap; }

/* ── LE RÉSUMÉ — colonne de droite ──────────────────────────────────────
   Ce que la formule choisie engage, en trois temps : aujourd'hui, après
   l'essai, à quelle date. Il suit le défilement sur grand écran, et
   redevient un simple bloc sous les cartes en dessous.
   ---------------------------------------------------------------------- */
.essai-aside { min-width: 0; }
@media (min-width: 1024px) {
  .essai-aside { position: sticky; top: calc(72px + var(--space-24)); }
}

.resume {
  padding: var(--space-24);
  border-radius: var(--radius-cards);
  background: var(--surface-1);
  border: 1px solid var(--impra-border-strong, rgba(15, 23, 46, .12));
  box-shadow: 0 1px 2px rgba(15, 23, 46, .04), 0 12px 32px rgba(15, 23, 46, .05);
}
.resume__titre {
  margin: 0 0 var(--space-16);
  font-family: var(--font-geometric);
  font-size: 20px;
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-subheading);
  color: var(--impra-navy);
}

.resume__plan {
  padding: var(--space-20);
  border-radius: 12px;                 /* pas --radius-buttons : 100px = pilule */
  background: color-mix(in srgb, var(--impra-blue) 4%, var(--color-warm-canvas));
  border: 1px solid color-mix(in srgb, var(--impra-blue) 14%, transparent);
}
.resume__vide { margin: 0; font-size: var(--text-body-sm); color: var(--impra-muted); }
.resume__plan:not([data-vide="true"]) .resume__vide { display: none; }

.resume__nom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  margin: 0;
  font-family: var(--font-geometric);
  font-size: 18px;
  color: var(--impra-navy);
}
.resume__coche { display: block; width: 20px; height: 20px; color: var(--impra-blue); }
.resume__coche svg { display: block; width: 100%; height: 100%; }

.resume__lignes { margin: var(--space-16) 0 0; }
.resume__lignes > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12);
  padding: var(--space-8) 0;
}
.resume__lignes > div + div { border-top: 1px solid color-mix(in srgb, var(--impra-navy) 8%, transparent); }
.resume__lignes dt { font-size: var(--text-body-sm); color: var(--impra-muted); }
.resume__lignes dd {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--impra-navy);
  text-align: right;
}
.resume__zero {
  font-family: var(--font-geometric);
  font-size: 26px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  color: var(--impra-navy);
}
.resume__date {
  margin: var(--space-12) 0 0;
  padding-top: var(--space-12);
  border-top: 1px solid color-mix(in srgb, var(--impra-navy) 8%, transparent);
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--impra-muted);
}
/* Le résumé change sans recharger : une reprise en fondu, discrète. */
.js .resume__corps { transition: opacity 220ms var(--ease-standard); }
.resume__corps.is-maj { opacity: .35; }

.resume__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: var(--space-20);
}
.resume__cta:disabled { opacity: .5; cursor: not-allowed; }
.resume__cta svg { flex: 0 0 auto; }

.resume__info,
.resume__sur {
  display: flex; align-items: flex-start; gap: var(--space-12);
  margin-top: var(--space-20);
}
.resume__info { padding-top: var(--space-20); border-top: var(--border-hairline); }
.resume__info p, .resume__sur-texte {
  margin: 0;
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--impra-muted);
}
.resume__info-ic, .resume__sur-ic {
  flex: 0 0 32px; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--impra-blue) 9%, transparent);
  color: var(--impra-blue-text);
}
.resume__info-ic svg, .resume__sur-ic svg { width: 18px; height: 18px; display: block; }
.resume__sur-titre {
  margin: 0 0 2px;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
}

.resume__moyens { margin-top: var(--space-20); padding-top: var(--space-16); border-top: var(--border-hairline); }
.resume__moyens-titre {
  margin: 0 0 var(--space-12);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--impra-muted);            /* muted-soft tombait à 3,02:1 */
}
.moyens { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.moyens li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: 8px;
  border: var(--border-hairline);
  background: var(--surface-1);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--impra-navy);
}
.moyens svg { width: 16px; height: 16px; color: var(--impra-muted); }

/* ── LA RANGÉE DE RÉASSURANCE ──────────────────────────────────────────
   Trois faits, trois signes du même jeu. Elle clôt la page ; elle ne
   répète pas le résumé, elle le confirme.
   ---------------------------------------------------------------------- */
.trust {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  margin: var(--space-48) 0 0; padding: var(--space-24) 0 0;
  list-style: none;
  border-top: var(--border-hairline);
}
.trust__item { display: flex; align-items: flex-start; gap: var(--space-12); }
.trust__ic {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--impra-blue) 9%, transparent);
  color: var(--impra-blue-text);
}
.trust__ic svg { width: 20px; height: 20px; display: block; }
.trust__texte {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--impra-muted);
}
.trust__texte b {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
}

/* ── Étape 2 : le formulaire ───────────────────────────────────────────── */
.champs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-16) var(--space-16);
}
.champs__section {
  grid-column: 1 / -1;
  margin: var(--space-8) 0 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--impra-muted);
}
.champs__section:first-child { margin-top: 0; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ--plein { grid-column: 1 / -1; }
.champ label {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--impra-navy);
}
.champ__aide { font-weight: var(--weight-regular); color: var(--impra-muted-soft); }
.champ textarea {
  min-height: 92px;
  padding: var(--space-12) var(--space-16);
  resize: vertical;
  line-height: 1.5;
}
/* Le piège à robots ne doit être ni vu, ni lu, ni atteint au clavier —
   `display: none` suffit et reste ce que les automates lisent le moins. */
.champ--piege { display: none; }

.champ input, .champ select, .champ textarea {
  min-height: 48px;
  padding: 0 var(--space-16);
  border-radius: var(--radius-buttons);
  border: 1px solid var(--impra-border-strong, rgba(15,23,46,.22));
  background: var(--surface-1);
  font: inherit; font-size: 16px;   /* 16px : pas de zoom iOS à la saisie */
  color: var(--impra-navy);
}
.champ textarea { padding: var(--space-12) var(--space-16); border-radius: 12px; }
.champ select { appearance: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23565E73" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: 2px solid var(--impra-blue); outline-offset: 1px; border-color: var(--impra-blue);
}
.champ.is-invalide input,
.champ.is-invalide select,
.champ.is-invalide textarea { border-color: #C7331F; }
.champ__erreur { display: none; font-size: var(--text-caption); color: #B32D1A; }
.champ.is-invalide .champ__erreur { display: block; }

/* ── Étape 3 : le récapitulatif ────────────────────────────────────────── */
.recap {
  border-radius: var(--radius-cards);
  background: var(--surface-1);
  border: var(--border-hairline);
  padding: var(--space-8) var(--space-24);
}
.recap__ligne {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-16) 0;
}
.recap__ligne + .recap__ligne { border-top: var(--border-hairline); }
.recap__cle {
  margin: 0 0 3px;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--impra-muted-soft);
}
.recap__val { margin: 0; font-weight: var(--weight-semibold); color: var(--impra-navy); }
.recap__det { margin: 2px 0 0; font-size: var(--text-body-sm); color: var(--impra-muted); }
.recap__modif {
  border: none; background: none; padding: var(--space-8);
  margin: calc(var(--space-8) * -1);
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  color: var(--impra-blue-text); cursor: pointer;
}
.recap__modif:hover { text-decoration: underline; }
.recap__total {
  margin: 0 calc(var(--space-24) * -1);
  padding: var(--space-20) var(--space-24);
  border-top: var(--border-hairline);
  background: var(--impra-blue-soft, rgba(31,116,231,.07));
  border-radius: 0 0 var(--radius-cards) var(--radius-cards);
}
.recap__zero {
  margin: 0;
  font-family: var(--font-geometric);
  font-size: 24px; font-weight: 700;
  color: var(--impra-navy);
}
.recap__puis { margin: 4px 0 0; font-size: var(--text-body-sm); color: var(--impra-navy); }
.recap__date { margin: 2px 0 0; font-size: var(--text-caption); color: var(--impra-muted); }

.essai-note {
  margin: 0 0 var(--space-24);
  padding: var(--space-12) var(--space-16);
  border-radius: 12px;
  background: var(--impra-blue-soft, rgba(31,116,231,.08));
  font-size: var(--text-body-sm);
  color: var(--impra-navy);
}
.essai-erreur {
  margin: var(--space-16) 0 0;
  padding: var(--space-12) var(--space-16);
  border-radius: 12px;
  background: rgba(199, 51, 31, .08);
  font-size: var(--text-body-sm);
  color: #8F2413;
}
.essai-note-stripe {
  margin: var(--space-16) 0 0;
  font-size: var(--text-caption);
  color: var(--impra-muted-soft);
}
.btn.is-occupe { opacity: .65; pointer-events: none; }

/* ── Succès ────────────────────────────────────────────────────────────── */
.succes { text-align: left; }
.succes h1 { margin: 0 0 var(--space-12); }
.succes__coche {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0 0 var(--space-16);
  border-radius: 50%;
  background: var(--impra-blue); color: #fff;
}
.succes__spinner {
  width: 26px; height: 26px; margin: 0 0 var(--space-16);
  border-radius: 50%;
  border: 3px solid var(--impra-blue-soft, rgba(31,116,231,.2));
  border-top-color: var(--impra-blue);
  animation: essaiTourne .9s linear infinite;
}
@keyframes essaiTourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .succes__spinner { animation: none; } }

.succes__fiche {
  margin: var(--space-24) 0 0;
  border-radius: var(--radius-cards);
  background: var(--surface-1);
  border: var(--border-hairline);
  padding: var(--space-8) var(--space-24);
}
.succes__fiche > div {
  display: flex; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-12) 0;
}
.succes__fiche > div + div { border-top: var(--border-hairline); }
.succes__fiche dt { font-size: var(--text-body-sm); color: var(--impra-muted); }
.succes__fiche dd { margin: 0; font-weight: var(--weight-semibold); color: var(--impra-navy); text-align: right; }
.succes__actions { margin-top: var(--space-24); }
.succes__stores { margin-top: var(--space-40); }
.succes__badges { display: flex; align-items: center; gap: var(--space-12); --store-ink: 40px; }

.essai-pied {
  padding: var(--space-24) 0;
  border-top: var(--border-hairline);
  font-size: var(--text-caption);
  color: var(--impra-muted-soft);
}
.essai-pied p { margin: 0; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .essai { padding-block: var(--space-32) var(--space-56); }
  .fil { gap: 6px; }
  .fil__etape:not(:last-child)::after { width: 10px; }
  /* Seule l'étape courante garde son libellé : quatre libellés ne tiennent
     pas à 390 px, et les numéros suffisent pour le chemin parcouru. */
  .fil__etape:not([aria-current="step"]) .fil__nom { display: none; }
  .champs { grid-template-columns: 1fr; }
  .champ--cp { grid-column: auto; }
  .etape__actions { flex-direction: column-reverse; align-items: stretch; }
  .etape__actions .btn { width: 100%; }
  .etape__actions > span { display: none; }
  .choix__carte { padding: var(--space-20); }
  .choix__essai { margin-top: var(--space-16); gap: var(--space-8); }
  .choix__suite { margin-top: var(--space-12); padding-top: var(--space-12); }
  .assur--essai { font-size: var(--text-caption); }
  /* Le signe se cale sur la première ligne du texte, pas sur son milieu. */
  .groupe-ligne {
    flex-wrap: wrap; align-items: flex-start;
    gap: var(--space-12); padding: var(--space-20); margin-top: var(--space-16);
  }
  .groupe-ligne__texte { flex: 1 1 60%; }
  .groupe-ligne__cta { width: 100%; }

  /* Le résumé perd son ornement : il dit la même chose, plus court. */
  .essai { padding-block: var(--space-32) var(--space-56); }
  .essai__head { margin-bottom: var(--space-24); }
  .essai__sous-titre { font-size: var(--text-body-sm); margin-top: var(--space-12); }
  .resume { padding: var(--space-20); }
  .resume__plan { padding: var(--space-16); }
  .resume__zero { font-size: 24px; }
  .resume__cta { min-height: 50px; }

  /* Trois faits empilés : la ligne de badges ne se comprime pas. */
  .trust {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
    margin-top: var(--space-32); padding-top: var(--space-20);
  }
  .trust__ic { flex-basis: 32px; width: 32px; height: 32px; }
  .trust__ic svg { width: 18px; height: 18px; }
  .recap { padding-inline: var(--space-20); }
  .recap__total { margin-inline: calc(var(--space-20) * -1); padding-inline: var(--space-20); }
  .succes__fiche { padding-inline: var(--space-20); }
  .succes__fiche > div { flex-direction: column; gap: 2px; }
  .succes__fiche dd { text-align: left; }
}
@media (max-width: 380px) {
  .fil__etape .fil__nom { font-size: 11px; }
  .choix__carte { padding: var(--space-16); }
  .choix__nom { font-size: 18px; }
  .resume, .resume__plan { padding: var(--space-16); }
  .groupe-ligne { padding: var(--space-16); }
  .groupe-ligne__texte { flex: 1 1 100%; }
}

/* Le pouce reste au chaud : sur les écrans à encoche, la page garde ses
   marges sûres — aucune barre collante n'est ajoutée, rien à masquer. */
@supports (padding: max(0px)) {
  @media (max-width: 620px) {
    .essai { padding-bottom: max(var(--space-56), env(safe-area-inset-bottom)); }
  }
}

/* Le CTA du résumé : une pression franche, jamais un rebond. */
.resume__cta { transition: transform 120ms var(--ease-standard), box-shadow 160ms var(--ease-standard); }
@media (hover: hover) { .resume__cta:not(:disabled):hover { transform: translateY(-1px); } }
.resume__cta:not(:disabled):active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .resume__cta, .js .resume__corps { transition: none; }
  .resume__cta:hover, .resume__cta:active { transform: none; }
  .resume__corps.is-maj { opacity: 1; }
}