/* Page de souscription : titre, stepper, formulaire, récapitulatif collant, états (fermé, confirmation). */
.souscription { padding: clamp(1.5rem, 4vw, 3rem) 0 4rem; }
.titre-page { text-align: center; max-width: 44rem; margin: 0 auto 2rem; }
.titre-page h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0.3rem 0 0.8rem; }
.titre-page p { color: var(--texte-doux); font-size: 1.08rem; margin: 0; }
.disposition { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.6rem; align-items: start; }
@media (max-width: 980px) { .disposition { grid-template-columns: 1fr; } }

/* Étapes */
.pas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-bottom: 1.8rem; counter-reset: none; }
.pas li { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 500; color: var(--texte-doux); text-align: center; position: relative; }
.pas li::before { content: ""; position: absolute; top: 18px; right: 50%; width: 100%; height: 3px; background: var(--trait); z-index: 0; }
.pas li:first-child::before { display: none; }
.pas li span { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--trait); font: 1.35rem var(--police-titre); color: var(--texte-doux); }
.pas li[aria-current="step"] { color: var(--orange-fort); font-weight: 600; }
.pas li[aria-current="step"] span { background: var(--orange-fort); border-color: var(--orange-fort); color: #fff; }
.pas li.fait span { background: var(--ok); border-color: var(--ok); color: #fff; }
.pas li.fait::before, .pas li[aria-current="step"]::before { background: var(--orange-fort); }

/* Formulaire */
.formulaire { padding: clamp(1.3rem, 3vw, 2.2rem); }
.etape { border: 0; padding: 0; margin: 0; min-width: 0; }
.etape[hidden] { display: none; }
.etape legend { font: 2rem/1.1 var(--police-titre); text-transform: uppercase; color: var(--brun-profond); margin-bottom: 1.2rem; padding: 0; outline: none; letter-spacing: 0.02em; }
.aide-bloc { background: var(--orange-fond); border-radius: 10px; padding: 0.8rem 1rem; color: var(--texte-doux); margin: 0 0 1.2rem; font-size: 0.97rem; }
.champ { margin-bottom: 1.1rem; min-width: 0; }
.champ[hidden] { display: none; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .deux { grid-template-columns: 1fr; } }
label, .etiquette { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.97rem; }
label b, .etiquette b { color: var(--danger); }
input[type="text"], input[type="tel"], input[type="email"], select { width: 100%; min-height: 50px; padding: 0.7rem 0.9rem; font: 400 1rem var(--police); color: var(--texte); background: #fff; border: 1.5px solid #d9c3b0; border-radius: 10px; }
input:hover, select:hover { border-color: var(--orange); }
input:focus-visible, select:focus-visible { outline: 3px solid rgba(180, 80, 12, 0.35); outline-offset: 0; border-color: var(--orange-fort); }
.champ.invalide input, .champ.invalide select { border-color: var(--danger); background: #fff7f6; }
.aide { color: var(--texte-doux); font-size: 0.88rem; margin: 0.35rem 0 0; }
.erreur { color: var(--danger); font-weight: 500; font-size: 0.9rem; margin: 0.35rem 0 0; }
.erreur::before { content: "⚠ "; }
.piege { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Plans et durées */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.9rem; }
.plan, .duree { position: relative; }
.plan input, .duree input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.plan .corps { display: block; height: 100%; padding: 1.1rem; background: #fff; border: 2px solid var(--trait); border-radius: 12px; font-weight: 400; margin: 0; }
.plan strong { display: block; font: 1.7rem var(--police-titre); text-transform: uppercase; color: var(--brun-profond); }
.plan .desc { display: block; color: var(--texte-doux); font-size: 0.92rem; margin: 0.2rem 0 0.6rem; }
.plan ul { display: grid; gap: 0.2rem; font-size: 0.9rem; color: var(--texte-doux); }
.plan input:checked + .corps { border-color: var(--orange-fort); background: var(--orange-fond); box-shadow: 0 0 0 3px rgba(240, 125, 31, 0.25); }
.plan input:focus-visible + .corps, .duree input:focus-visible + .corps { outline: 3px solid var(--orange-fort); outline-offset: 2px; }
.durees { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.duree .corps { display: block; min-height: 56px; padding: 0.55rem 1.1rem; background: #fff; border: 2px solid var(--trait); border-radius: 12px; font-weight: 500; margin: 0; text-align: center; }
.duree .corps small { display: block; color: var(--texte-doux); font-weight: 400; font-size: 0.82rem; }
.duree input:checked + .corps { border-color: var(--orange-fort); background: var(--orange-fond); box-shadow: 0 0 0 3px rgba(240, 125, 31, 0.25); }

/* Récapitulatif et consentement */
.recap { display: grid; gap: 0; margin: 0 0 1.4rem; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.recap > div { display: grid; grid-template-columns: 11rem 1fr; gap: 0.8rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--trait); }
.recap > div:last-child { border: 0; }
.recap dt { color: var(--texte-doux); }
.recap dd { margin: 0; font-weight: 500; word-break: break-word; }
@media (max-width: 520px) { .recap > div { grid-template-columns: 1fr; gap: 0; } }
.case { display: flex; gap: 0.8rem; align-items: flex-start; font-weight: 400; cursor: pointer; margin: 0; }
.case input { width: 24px; height: 24px; flex: none; margin-top: 0.15rem; accent-color: var(--orange-fort); }

/* Boutons de navigation */
.boutons { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }
@media (max-width: 520px) { .boutons .btn { flex: 1 1 100%; } .boutons #precedent { order: 2; } }
.alerte { border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; font-weight: 500; }
.alerte-erreur { background: #fdecea; color: #7d1a14; border: 1px solid #f3b8b3; }
.alerte-erreur ul { margin: 0.4rem 0 0; padding-left: 1.2rem; list-style: disc; font-weight: 400; }

/* Récapitulatif collant */
.resume { padding: 1.4rem; position: sticky; top: 96px; }
.resume h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.resume dl { margin: 0 0 1rem; }
.resume dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--trait); }
.resume dt { color: var(--texte-doux); }
.resume dd { margin: 0; font-weight: 600; text-align: right; }
.resume .total { border: 0; padding-top: 0.9rem; }
.resume .total dd { font: 2rem/1 var(--police-titre); color: var(--orange-fort); }
.garanties { display: grid; gap: 0.5rem; margin-top: 1rem; font-size: 0.9rem; color: var(--texte-doux); }
.garanties li { display: flex; gap: 0.5rem; align-items: center; }
.garanties .ico { color: var(--ok); }
@media (max-width: 980px) { .resume { position: static; } }

/* États : fermé et confirmation */
.etat { max-width: 40rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.6rem); text-align: center; }
.etat[hidden] { display: none; }
.etat .rond { margin-inline: auto; }
.etat .rond-ok { background: #dff3e8; color: var(--ok); }
.etat h2 { margin-bottom: 0.8rem; }
.reference { background: var(--orange-fond); border: 2px dashed var(--orange); border-radius: 14px; padding: 1.2rem; margin: 1.4rem 0 0.8rem; display: grid; gap: 0.6rem; justify-items: center; }
.reference span { color: var(--texte-doux); font-size: 0.92rem; }
.reference strong { font: 2.1rem/1.1 var(--police-titre); letter-spacing: 0.08em; color: var(--brun-profond); word-break: break-all; user-select: all; }
.alerte-ref { display: flex; gap: 0.5rem; align-items: flex-start; text-align: left; background: #fff8e6; border: 1px solid #f0d78a; border-radius: 10px; padding: 0.8rem 1rem; color: #6b4e00; }
.alerte-ref .ico { margin-top: 0.2rem; }
.recap-succes { display: flex; justify-content: center; gap: 2.2rem; flex-wrap: wrap; margin: 1.2rem 0; }
.recap-succes dt { color: var(--texte-doux); font-size: 0.9rem; }
.recap-succes dd { margin: 0; font-weight: 600; font-size: 1.1rem; }
.muted { color: var(--texte-doux); }

.formulaire { scroll-margin-top: 90px; }
@media (max-width: 520px) { .pas li { font-size: 0.78rem; } .pas li span { width: 34px; height: 34px; } .pas li::before { top: 16px; } }

/* Paiement en ligne : choix du mode, moyens, attente */
.mode-zone { margin: 0 0 1.4rem; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .modes { grid-template-columns: 1fr; } }
.mode, .moyen { position: relative; margin: 0; }
.mode input, .moyen input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mode .corps { display: block; height: 100%; padding: 1rem 1.1rem; background: #fff; border: 2px solid var(--trait); border-radius: 12px; font-weight: 400; }
.mode strong { display: block; font: 1.5rem var(--police-titre); text-transform: uppercase; color: var(--brun-profond); margin-bottom: 0.2rem; }
.mode .corps span { color: var(--texte-doux); font-size: 0.92rem; }
.mode input:checked + .corps { border-color: var(--orange-fort); background: var(--orange-fond); box-shadow: 0 0 0 3px rgba(240, 125, 31, 0.25); }
.moyens { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem; }
.moyen .corps { display: block; min-height: 52px; min-width: 6.5rem; padding: 0.8rem 1.2rem; background: #fff; border: 2px solid var(--trait); border-radius: 12px; font-weight: 600; text-align: center; }
.moyen input:checked + .corps { border-color: var(--orange-fort); background: var(--orange-fond); box-shadow: 0 0 0 3px rgba(240, 125, 31, 0.25); }
.mode input:focus-visible + .corps, .moyen input:focus-visible + .corps { outline: 3px solid var(--orange-fort); outline-offset: 2px; }
.paiement-champs[hidden] { display: none; }
.reessai { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; justify-content: center; margin: 1rem 0; text-align: left; }
.reessai label { margin: 0 0 0.3rem; }
.reessai select { min-width: 9rem; }
#etat-paiement .rond { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { #etat-paiement .rond { animation: none; } }
.etat > p:last-child { margin-top: 1.4rem; display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

/* Code promo : champ + bouton « Appliquer », message de résultat, remises dans le récapitulatif. */
.champ-action { display: flex; gap: 0.6rem; align-items: stretch; }
.champ-action input { flex: 1; min-width: 0; }
.champ-action .btn { min-height: 50px; flex: none; }
.duree .corps small.promo { display: block; margin-top: 0.15rem; font-size: 0.78rem; font-weight: 600; color: var(--orange-fort); }
.promo-ok { color: var(--ok); font-weight: 600; }
.promo-ko { color: var(--danger); font-weight: 600; }
.resume dd s { color: var(--texte-doux); font-weight: 400; margin-right: 0.4rem; }
.resume .remise dd { color: var(--ok); font-weight: 600; }