/* Commande en 3 étapes (assets/js/tunnel-etapes.js). Sans JavaScript : trois panneaux à la suite, sans barre ni boutons Continuer. */
.sg .sg-etapes, .sg .sg-suite { display: none; }
.sg-js-etapes .sg .sg-etapes { display: flex; gap: var(--sg-2); list-style: none; margin: 0 0 var(--sg-5); padding: 0; }
.sg-js-etapes .sg .sg-etapes li { flex: 1; min-width: 0; }
.sg-js-etapes .sg .sg-suite { display: flex; align-items: center; justify-content: center; }
.sg .sg-etape-lien { width: 100%; min-height: 48px; padding: 8px var(--sg-3); border: 1px solid var(--sg-champ); border-radius: var(--sg-rayon); background: var(--sg-blanc); color: var(--sg-encre); font: 500 15px var(--sg-sans); text-align: left; cursor: pointer; }
.sg .sg-etape-lien.actif { border: 2px solid var(--sg-encre); padding: 7px calc(var(--sg-3) - 1px); }
.sg .sg-etape-lien.fait, .sg .sg-etape-lien:disabled { color: var(--sg-gris); }
.sg .sg-etape-lien:disabled { cursor: default; }
@media (max-width: 479px) { .sg .sg-etape-lien b { display: none; } }

/* Panneaux inactifs : repliés mais gardés à pleine largeur (les champs de paiement de Stripe se montent sur une largeur réelle) */
.sg-js-etapes .sg-panneau:not(.actif) { height: 0; overflow: hidden; visibility: hidden; margin: 0; padding: 0; }
.sg .sg-rappel { margin: 0 0 var(--sg-4); }
.sg .sg-rappel:empty { display: none; }
.sg .sg-rappel .retirer { min-height: 0; display: inline; }
.sg .sg-erreur-etape { margin: 0 0 var(--sg-3); color: var(--sg-erreur); }
.sg .sg-panneau .sg-suite { margin-top: var(--sg-2); }

/* Client connecté : adresse du compte résumée, modifiable */
.sg .sg-compte-resume { display: none; }
.sg-js-etapes .sg .sg-compte-resume { display: block; margin-bottom: var(--sg-5); padding: var(--sg-4); border: 1px solid var(--sg-encre); box-shadow: inset 0 0 0 1px var(--sg-encre); background: var(--sg-blanc); }
.sg .sg-compte-resume p { margin: 0 0 var(--sg-2); }
.sg-js-etapes .sg .sg-champs-compte[data-replie] { display: none; }