/* Écran de commande (C3) : étapes Retrait, Coordonnées, Avant de commander, Paiement ou Code ; barre basse (base.css). */

.steps { display: grid; }
.step { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #2a323c; }
.step-num { width: 28px; height: 28px; border-radius: var(--pill); flex: none; display: grid; place-items: center; font-weight: 700; font-size: 0.875rem; background: var(--navy-3); color: var(--caramel-bright); }
/* Étapes faites séparées par un filet ; l'étape en cours, toujours la dernière, n'en a pas. */
.step.is-current { padding-top: 18px; border-bottom: 0; }
.step.is-current .step-num { background: var(--caramel); color: var(--navy); }
.step-body { flex: 1; min-width: 0; display: grid; gap: 12px; }
.step-label { font-size: 0.8125rem; color: var(--ink-on-navy-2); }
.step-value { font-weight: 600; font-size: 1rem; }
.step-value small { display: block; font-weight: 400; font-size: 0.84375rem; color: var(--ink-on-navy-2); }
.step-title { font-size: 1.5rem; }
.step-lead { margin-top: -6px; font-size: 0.90625rem; line-height: 1.45; color: var(--cream-muted); }
.step-done { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.step-done .link-btn { flex: none; font-size: 0.875rem; }
.step-message .notice { margin-top: 12px; }
.page-notice { margin-bottom: 8px; }
.issue-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }

/* Jours et créneaux */
.picker { display: grid; gap: 12px; }
.day-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.day-pills::-webkit-scrollbar { display: none; }
.day-pill { flex: none; min-width: 88px; min-height: 54px; padding: 6px 12px; border-radius: var(--r); border: 1px solid var(--rule-dark); background: var(--navy-2); color: var(--cream); display: grid; justify-items: start; align-content: center; text-align: left; }
.day-pill strong { font-weight: 600; }
.day-pill small { font-size: 0.75rem; color: var(--ink-on-navy-2); }
.day-pill[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.day-pill[aria-pressed="true"] small { color: var(--ink-2); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.slot { min-height: 54px; border-radius: var(--r); border: 1px solid var(--rule-dark); background: transparent; color: var(--cream); display: grid; align-content: center; justify-items: center; padding: 4px; }
.slot strong { font-family: var(--font-cond); font-size: 1.2rem; font-weight: 600; line-height: 1.1; }
.slot small { font-size: 0.75rem; color: var(--caramel-bright); }
.slot:hover:not(:disabled) { border-color: var(--caramel); }
.slot[aria-pressed="true"] { background: var(--caramel); border-color: var(--caramel); color: var(--navy); }
.slot[aria-pressed="true"] small { color: var(--navy); }
.slot:disabled { opacity: 0.4; cursor: not-allowed; }
.slot:disabled small { color: var(--ink-on-navy-2); }

/* Champs (thème nuit) */
.form-grid { display: grid; gap: 12px; }
.field { display: grid; gap: 4px; align-content: start; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.input { width: 100%; min-height: 48px; padding: 0.55rem 0.75rem; border-radius: var(--r); border: 1px solid var(--rule-dark); background: var(--navy-2); color: var(--cream); font-size: 1rem; caret-color: var(--caramel-bright); }
.input:focus { outline: 2px solid var(--caramel); outline-offset: 0; border-color: transparent; }
.input[aria-invalid="true"] { border-color: var(--terracotta); }
.field .error-text { font-size: 0.875rem; }
@media (min-width: 560px) { .form-grid { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }

/* Informations avant la commande (L221-5, L221-14) */
.pre-contract { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r); background: var(--navy-2); border: 1px solid var(--rule-dark); font-size: 0.875rem; color: var(--cream-muted); }
.pre-contract h2 { font-family: var(--font-cond); font-size: 1.35rem; font-weight: 600; color: var(--cream); }
.pre-contract ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; }
.pre-contract a { font-weight: 600; }

/* Code reçu par SMS : quatre cases, centrées sur toute la largeur (sous la pastille de l'étape comprise, maquette C3) */
.code-boxes, .code-error, .code-help { margin-left: -40px; }
.code-boxes { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.code-box { width: 58px; height: 66px; border-radius: 10px; border: 1px solid var(--rule-dark); background: var(--navy-2); color: var(--cream); font-family: var(--font-cond); font-size: 2.1rem; font-weight: 700; text-align: center; padding: 0; caret-color: var(--caramel-bright); }
.code-box[aria-invalid="true"] { border-color: var(--terracotta); }
/* Après l'état invalide : la case qui a le focus reste repérable. */
.code-box:focus { outline: none; border: 2px solid var(--caramel-bright); }
.code-error { text-align: center; }
.code-help { text-align: center; font-size: 0.84375rem; color: var(--ink-on-navy-2); }
.code-help .link-btn { display: inline-flex; color: var(--caramel-bright); text-decoration: none; font-size: 0.84375rem; }
.code-help .link-btn:disabled { color: var(--ink-on-navy-2); cursor: default; }

/* Paiement intégré : cadre du Payment Element (Stripe dessine l'intérieur) ou paiement simulé en dev */
.payment-box { padding: 14px; border-radius: var(--r); background: var(--navy-2); border: 1px solid var(--rule-dark); min-height: 120px; }
.payment-simulated { display: grid; gap: 6px; text-align: center; color: var(--cream-muted); font-size: 0.9375rem; }
.payment-simulated strong { color: var(--caramel-bright); }
/* Message de l'étape « Paiement » (carte refusée) : entre le Payment Element et le récapitulatif, sans espace quand il est
   vide ; amené à l'écran au-dessus de la barre basse fixe (comme le message sous les étapes). */
.pay-message:empty, .sms-status:empty { display: none; }
.step-message, .pay-message { scroll-margin-bottom: 180px; }
.waiting { display: grid; justify-items: center; gap: 12px; padding: 2rem 0; text-align: center; color: var(--cream-muted); }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--rule-dark); border-top-color: var(--caramel); animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Récapitulatif « Votre commande », juste avant le bouton qui conclut (L221-14) */
.order-recap { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--rule-dark); font-size: 0.875rem; color: var(--cream-muted); }
.order-recap h3 { font-family: var(--font); font-size: 0.9375rem; font-weight: 700; color: var(--cream); margin-bottom: 2px; }
.order-recap ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 2px; color: var(--cream); }
.order-recap small { font-size: 0.8125rem; color: var(--ink-on-navy-2); }
.recap-total strong { font-family: var(--font-cond); font-size: 1.1rem; color: var(--cream); }