/* Tunnel de demande. Jetons : tokens.css. */
.demande { padding: var(--s-6) 0 var(--s-8); }
.demande h1 { font-size: var(--t-2xl); }
.demande .intro { margin-top: var(--s-2); }
.tunnel { margin-top: var(--s-5); scroll-margin-top: 80px; }
.tunnel__grille { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .tunnel__grille { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-8); align-items: start; } }

.etape-sur { margin: 0; font-size: var(--t-s); color: var(--brume); }
.steps { list-style: none; margin: var(--s-2) 0 var(--s-5); padding: 0; display: flex; gap: var(--s-2); }
.steps li { flex: 1; display: flex; align-items: center; gap: var(--s-2); padding-top: var(--s-2); border-top: 3px solid var(--trait); font-size: var(--t-s); color: var(--brume); }
.steps li.fait { border-top-color: var(--lagon); color: var(--encre); }
.steps li.fait::after { content: " ✓"; color: var(--lagon); }
.steps li[aria-current="step"] { border-top-color: var(--marine); color: var(--encre); font-weight: 600; }
.steps__n { display: none; }
@media (max-width: 420px) { .steps li { font-size: var(--t-xs); } }

.etape { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.champ { display: grid; gap: var(--s-1); }
.champ label { font-weight: 600; font-size: var(--t-s); }
.champ input, .champ select, .champ textarea {
  min-height: 48px; padding: var(--s-2) var(--s-3); border: 1px solid var(--brume); border-radius: var(--r-champ); background-color: var(--coque); width: 100%;
}
.champ textarea { min-height: 96px; resize: vertical; }
.champ [aria-invalid="true"] { border-color: var(--alerte); border-width: 2px; }
.champ__erreur { margin: 0; color: var(--alerte); font-size: var(--t-s); font-weight: 600; }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.aide { margin: 0; font-size: var(--t-s); color: var(--brume); }

.choix { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.choix legend { font-weight: 600; font-size: var(--t-s); margin-bottom: var(--s-2); padding: 0; }
.choix > label, .bascule { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; cursor: pointer; }
.choix input[type=radio], .choix input[type=checkbox], .bascule input { width: 20px; height: 20px; accent-color: var(--marine); flex: none; }
.option { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border: 1px solid var(--trait); border-radius: var(--r-champ); cursor: pointer; }
.option input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--marine); flex: none; }
.option span { display: grid; gap: 2px; }
.option small { color: var(--brume); font-size: var(--t-s); }
.option:has(input:checked) { border-color: var(--marine); background: var(--ecume); }
.option:has(input:focus-visible) { outline: 3px solid var(--lagon); outline-offset: 2px; }
.linge { padding-left: 32px; max-width: 220px; }
.bascule { padding: var(--s-3) var(--s-4); background: var(--ecume); border-radius: var(--r-champ); font-weight: 600; }
.agence { display: grid; gap: var(--s-4); padding-left: var(--s-4); border-left: 3px solid var(--sable); }

.actions { display: flex; gap: var(--s-3); justify-content: flex-end; margin-top: var(--s-2); }
.actions .bouton { min-width: 140px; }
@media (max-width: 640px) { .actions .bouton { flex: 1; min-width: 0; } }
.wa-demande { margin: 0; display: grid; gap: var(--s-2); justify-items: start; }
.humain { margin: 0; font-size: var(--t-s); color: var(--brume); }
.humain a { margin-left: var(--s-2); font-weight: 600; }

.rappel { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s-3); align-items: baseline; padding: var(--s-3) var(--s-4); background: var(--ecume); border-radius: var(--r-champ); }
.rappel p { margin: 0; }
.rappel__total { grid-column: 1; font-weight: 600; }
.rappel .lien { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.rappel__acompte { grid-column: 1; font-size: var(--t-s); color: var(--brume); }
.rappel__detail { color: var(--lagon); font-weight: 600; white-space: nowrap; }
@media (min-width: 1024px) { .rappel__detail { display: none; } }
.lien { border: 0; background: none; padding: var(--s-2) 0; color: var(--lagon); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; min-height: 44px; }

.conditions-courtes h3 { font-family: var(--f-texte); font-size: var(--t-s); font-weight: 600; margin: var(--s-3) 0 var(--s-1); }
.conditions-courtes ul { margin: 0; padding-left: 1.1em; font-size: var(--t-s); }
.conditions-courtes li::marker { color: var(--sable); }
.conditions-courtes p { font-size: var(--t-s); margin: 0 0 var(--s-2); }
.etape > .conditions-courtes { padding: var(--s-4); border: 1px solid var(--trait); border-radius: var(--r-champ); }

/* Récapitulatif */
.recap { background: var(--coque); border: 1px solid var(--trait); border-radius: var(--r-panneau); padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
@media (min-width: 1024px) { .recap { position: sticky; top: 88px; box-shadow: var(--ombre-panneau); border-color: transparent; } }
.recap h2 { font-size: var(--t-xl); }
.recap h3 { font-family: var(--f-texte); font-size: var(--t-s); font-weight: 600; }
.recap__bateau { margin: 0; font-family: var(--f-titre); font-size: var(--t-l); }
.recap__bateau a { color: var(--encre); }
.lignes { width: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.lignes th, .lignes td { padding: var(--s-2) 0; border-bottom: 1px solid var(--trait); text-align: left; font-weight: 400; }
.lignes td { text-align: right; white-space: nowrap; }
.lignes tfoot th, .lignes tfoot td { border-bottom: 0; font-weight: 600; font-size: var(--t-m); padding-top: var(--s-3); }
.lignes .total { font-size: var(--t-xl); font-weight: 600; }
.echeances { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--t-s); }
.echeances li { display: flex; justify-content: space-between; gap: var(--s-3); }
.recap__cond summary { cursor: pointer; font-weight: 600; font-size: var(--t-s); min-height: 44px; display: flex; align-items: center; }

/* Écran de fin */
.done-screen { max-width: 640px; margin: 0 auto; text-align: center; display: grid; gap: var(--s-3); justify-items: center; padding: var(--s-6) 0; scroll-margin-top: 80px; }
.done-screen:focus { outline: none; }
.done-screen__ancre { color: var(--lagon); }
.done-screen h2 { font-size: var(--t-2xl); }
.done-screen h3 { font-family: var(--f-texte); font-size: var(--t-m); font-weight: 600; margin-top: var(--s-4); }
.done-screen__texte { font-size: var(--t-l); max-width: 34ch; }
.suite-etapes { text-align: left; margin: 0; padding-left: 1.4em; display: grid; gap: var(--s-2); }
.suite-etapes li::marker { color: var(--sable); font-weight: 600; }