/* shared/pages/consultation.css — feuille de consultation.html, sortie de son bloc \3c style> le 17/10/2026 (lot 8 du dossier 1 : CSP sans
   style en ligne). Chargée par une balise <link> à la place exacte de l’ancien bloc : même ordre dans la cascade. */
/* ==============================================================================
 * Page Consultation : funnel à 4 stages aligné sur le design Claude Design
 * (Consultation.html du bundle, 755 lignes JSX → vanilla JS).
 *
 *   1. liste       — liste des psychologues + slots (3 jours × 5 créneaux)
 *   2. reason      — saisie du motif de consultation (textarea + chips)
 *   3. recap-pay   — récap psy/date + formulaire CB (Stripe Elements)
 *   4. confirm     — confirmation visuelle + récap RDV créé
 *
 * State persisté en localStorage pour résister aux F5 du navigateur.
 * Tous les endpoints sont VRAIS (zero hardcode patient/psy/RDV) :
 *   - GET /public-psychologues?days=7
 *   - POST /patient-profile/appointments
 *   - GET /stripe/config
 *   - POST /stripe/payment-intent
 *   - stripe.confirmCardPayment(client_secret, ...)
 * ============================================================================== */

/* `[hidden]` doit toujours gagner sur les display: flex de mes conteneurs */
[hidden] { display: none !important; }

/* Main + page wrapper */
.main { background: var(--bg); display: flex; flex-direction: column; min-width: 0; }
.page { padding: var(--palette-espacement-components-5) var(--palette-espacement-components-3) var(--palette-espacement-invitation-5); max-width: 1080px; margin: 0 auto; width: 100%; flex: 1; }
.page-head { margin-bottom: var(--palette-espacement-composants-3); }
.page-head h1 { font-size: var(--palette-typographie-cabinet-2); letter-spacing: var(--palette-typographie-layout-2); margin: 0 0 var(--palette-espacement-cabinet-conversation-3); font-weight: 700; color: var(--ink); }
.page-head .sub { color: var(--muted); font-size: var(--palette-typographie-composants-14); max-width: 560px; line-height: 1.55; }

/* ===== STEPPER (topbar) ===== */
.cons-topbar { padding: var(--palette-espacement-composants-3) var(--palette-espacement-components-3); display: flex; align-items: center; gap: var(--palette-espacement-cabinet); border-bottom: 1px solid var(--line); background: var(--bg); }
/* Stepper RETIRÉ 20/05/2026 sur demande user — le progress bar visuel
   n'apportait pas grand-chose vs le scroll naturel du flux. Le bouton
   "Retour" (top desktop + sticky bottom mobile) suffit à orienter. */
.stepper { display: none !important; }
/* Tb-left/right gardent leur largeur pour ne pas déstabiliser le centrage
   de la topbar (qui devient un wrapper quasi vide, mais utile pour héberger
   le topBackBtn sur desktop stages 2+3). */
.step { display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-6); color: var(--muted); }
.step .bubble { width: 28px; height: 28px; border-radius: var(--palette-rayon-composants-2); background: var(--surface); border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: var(--palette-typographie-cabinet-conversation-4); font-weight: 600; color: var(--muted); }
.step.active .bubble { background: var(--adaptation-fond-action-accent, var(--accent)); border-color: var(--adaptation-bordure-action-accent, var(--accent)); color: var(--palette-texte-inverse-components); }
.step.active { color: var(--accent-ink); font-weight: 600; }
.step.done .bubble { background: var(--accent-softer); border-color: var(--adaptation-bordure-accent-soft, var(--accent-soft)); color: var(--accent); }
.step.done { color: var(--accent-ink); }
.step .lbl { font-size: var(--palette-typographie-cabinet-conversation-3); letter-spacing: var(--palette-typographie-conversation); }
.step-sep { width: 52px; height: 1.5px; background: var(--adaptation-surface-action-line-strong, var(--line-strong)); border-radius: var(--palette-rayon-consultation); }
.step-sep.done { background: var(--accent-soft); }
.tb-left, .tb-right { width: 140px; display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-6); }
.tb-right { justify-content: flex-end; margin-left: auto; width: auto; }
/* Lien "Mes rendez-vous" (historique des séances) — accès rapide depuis la page
   consultation. Desktop : épinglé à droite du topbar. Mobile : le topbar est
   masqué, donc un lien dédié apparaît sous le sous-titre du stage 1
   (.history-link-mobile). */
.tb-history { display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-3); font-size: var(--palette-typographie-cabinet-conversation-3); font-weight: 600; color: var(--accent-ink); text-decoration: none; padding: var(--palette-espacement-components) var(--palette-espacement-composants-6); border-radius: var(--palette-rayon-components-2); background: var(--accent-softer); border: 1px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.tb-history:hover { background: var(--adaptation-fond-action-accent, var(--accent)); color: var(--palette-texte-inverse-components); border-color: var(--adaptation-bordure-action-accent, var(--accent)); }
.tb-history svg { width: 15px; height: 15px; }
.history-link-mobile { display: none; }
@media (max-width: 768px) {
  .history-link-mobile { display: inline-flex; align-items: center; gap: var(--palette-espacement-components); margin-top: var(--palette-espacement-cabinet-conversation-5); font-size: var(--palette-typographie-components); font-weight: 600; color: var(--accent-ink); text-decoration: none; padding: var(--palette-espacement-cabinet-conversation-6) var(--palette-espacement-cabinet-conversation-5); border-radius: var(--palette-rayon-cabinet-conversation-3); background: var(--accent-softer); border: 1px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); }
  .history-link-mobile svg { width: 16px; height: 16px; }
}
.btn-text-danger { color: var(--danger, var(--palette-texte-danger-consultation)); font-size: var(--palette-typographie-cabinet-conversation-3); padding: var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-cabinet-conversation-5); border-radius: var(--palette-rayon-cabinet-conversation-2); border: 1px solid var(--palette-bordure-composants-2); background: var(--surface); font-weight: 500; cursor: pointer; font-family: inherit; }
.btn-text-danger:hover { background: var(--palette-surface-danger-composants); }
.btn-back { color: var(--muted); font-size: var(--palette-typographie-cabinet-conversation-3); padding: var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-cabinet-conversation-7); border-radius: var(--palette-rayon-cabinet-conversation-2); font-weight: 500; display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-3); cursor: pointer; border: 0; background: transparent; font-family: inherit; }
.btn-back:hover { color: var(--ink); background: var(--surface-2); }

/* ===== STAGE 1 : LISTE PSY ===== */
.psy-list { display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-2); }
.psy-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--palette-rayon-cabinet-conversation); padding: var(--palette-espacement-composants-3) var(--palette-espacement-cabinet-conversation) var(--palette-espacement-cabinet-conversation-10); box-shadow: var(--shadow-card); transition: transform .18s ease, border-color .15s, box-shadow .18s ease; cursor: pointer; }
.psy-card:hover { border-color: var(--line-strong); transform: scale(1.005); box-shadow: 0 1px 0 var(--palette-ombre-consultation-2), 0 16px 36px -20px var(--palette-ombre-consultation); }
.psy-card:active { transform: scale(0.998); }

/* Section labels au-dessus de chaque groupe (Mon psy / Autres) — affichés
   uniquement si le patient a un psy attitré ET qu'il est dans la liste. */
.psy-section-label { font-size: var(--palette-typographie-composants-3); text-transform: uppercase; letter-spacing: var(--palette-typographie-layout); color: var(--muted); font-weight: 700; margin: var(--palette-espacement-cabinet-conversation-3) var(--palette-espacement-cabinet-2) var(--palette-espacement-consultation); display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-11); }
.psy-section-label .dot { width: 6px; height: 6px; border-radius: var(--palette-rayon-composants-2); background: var(--adaptation-fond-action-accent, var(--accent)); }
.psy-section-label.muted .dot { background: var(--adaptation-surface-secondaire-muted-2, var(--muted-2)); }

/* Carte "psy attitré" : mise en avant visuelle (border accent, fond légèrement
   teinté, badge "VOTRE PSY" en haut à droite, ombre plus prononcée). */
.psy-card.is-mine { background: linear-gradient(180deg, var(--accent-softer) 0%, var(--surface) 60%); border: 1.5px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); box-shadow: 0 1px 0 var(--palette-ombre-consultation-2), 0 24px 50px -28px var(--palette-ombre-consultation-3); position: relative; }
.psy-card.is-mine:hover { border-color: var(--adaptation-bordure-action-accent, var(--accent)); }
.psy-card.is-mine .mine-badge { position: absolute; top: -10px; left: 22px; display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-3); background: var(--adaptation-fond-action-accent, var(--accent)); color: var(--palette-texte-inverse-components); padding: var(--palette-espacement-cabinet-conversation-9) var(--palette-espacement-components-2); border-radius: var(--palette-rayon-components-2); font-size: var(--palette-typographie-composants-17); font-weight: 700; letter-spacing: var(--palette-typographie-layout); text-transform: uppercase; box-shadow: 0 8px 16px -6px var(--palette-ombre-composants-4); }
.psy-card.is-mine .psy-av { box-shadow: 0 0 0 2px var(--adaptation-reflet-accent-soft, var(--accent-soft)), 0 4px 14px -4px var(--palette-ombre-bilan); }
.psy-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--palette-espacement-cabinet-conversation); align-items: center; }
.psy-ident { display: flex; gap: var(--palette-espacement-cabinet-conversation-2); align-items: flex-start; min-width: 0; }
.psy-av { width: 62px; height: 62px; border-radius: var(--palette-rayon-composants-2); background: linear-gradient(135deg, var(--accent-soft), var(--adaptation-fond-action-accent, var(--accent))); flex: 0 0 62px; border: 2px solid var(--adaptation-bordure-surface, var(--surface)); box-shadow: 0 0 0 1px var(--adaptation-reflet-line-strong, var(--line-strong)), 0 4px 12px -4px var(--palette-ombre-consultation-4); position: relative; overflow: hidden; color: var(--palette-texte-inverse-components); display: flex; align-items: center; justify-content: center; font-size: var(--palette-typographie-components-6); font-weight: 600; letter-spacing: var(--palette-typographie-layout-4); }
.psy-av img { width: 100%; height: 100%; object-fit: cover; }
.psy-name-row { display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-6); flex-wrap: wrap; }
.psy-name { font-size: var(--palette-typographie-composants); font-weight: 600; letter-spacing: var(--palette-typographie-layout-4); color: var(--ink); }
.badge-sat { display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-9); background: var(--success-soft, var(--palette-surface-succes-composants-2)); color: var(--palette-texte-succes-components); padding: var(--palette-espacement-components-4) var(--palette-espacement-cabinet-conversation-4); border-radius: var(--palette-rayon-components-2); font-size: var(--palette-typographie-components-4); font-weight: 600; }
.psy-title { font-size: var(--palette-typographie-components); color: var(--muted); margin-top: var(--palette-espacement-composants-5); }
.psy-tags { display: flex; flex-wrap: wrap; gap: var(--palette-espacement-cabinet-conversation-3); margin-top: var(--palette-espacement-cabinet-conversation-6); }
.tag { font-size: var(--palette-typographie-components-4); padding: var(--palette-espacement-cabinet-2) var(--palette-espacement-cabinet-conversation-4); border-radius: var(--palette-rayon-components-2); background: var(--accent-softer); color: var(--accent-ink); border: 1px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); font-weight: 500; }
/* Desktop : tous les tags visibles, le chip "+N" caché.
   Mobile @640 (cf. plus bas) : tags > 3 cachés via .tag-mobile-hide,
   chip "+N" affiché via .tag-mobile-only. */
.tag-mobile-only { display: none; }
/* Bio tronquée à 4 lignes par défaut (demande 15/06 : ~moitié de la description),
   dépliable via "Voir plus" (la détection d'overflow révèle le bouton). Mobile
   garde son clamp à 3 lignes (média query plus bas). */
.psy-bio { font-size: var(--palette-typographie-components); color: var(--ink-2); line-height: 1.55; margin-top: var(--palette-espacement-cabinet-conversation-5); max-width: 560px; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.psy-bio.is-expanded { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.psy-bio-more { display: inline-block; margin-top: var(--palette-espacement-cabinet-conversation-3); font-size: var(--palette-typographie-components-2); color: var(--accent); cursor: pointer; font-weight: 600; background: transparent; border: none; padding: var(--palette-espacement-cabinet-2) 0; font-family: inherit; }
.verif { display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-3); font-size: var(--palette-typographie-components-4); color: var(--muted); font-weight: 500; margin-top: var(--palette-espacement-cabinet-conversation-7); }
.verif .dot { width: 14px; height: 14px; border-radius: var(--palette-rayon-composants-2); background: var(--adaptation-fond-action-accent, var(--accent)); color: var(--palette-texte-inverse-components); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 14px; }
.verif.gold .dot { background: var(--palette-fond-avertissement-consultation); }

.psy-book { display: flex; flex-direction: column; align-items: flex-end; gap: var(--palette-espacement-cabinet-conversation-6); min-width: 340px; }
.slot-rows { display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-11); width: 100%; }
.slot-row { display: grid; grid-template-columns: 60px 1fr; gap: var(--palette-espacement-cabinet-conversation-7); align-items: center; }
.slot-day { font-size: var(--palette-typographie-components-4); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: var(--palette-typographie-consultation); line-height: 1.2; }
.slot-day b { display: block; color: var(--ink); font-size: var(--palette-typographie-cabinet-conversation-3); font-weight: 600; letter-spacing: 0; text-transform: none; margin-top: var(--palette-espacement-conversation); }
.slots { display: flex; gap: var(--palette-espacement-cabinet-conversation-3); flex-wrap: wrap; }
.slot { padding: var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-cabinet-conversation-5); border-radius: var(--palette-rayon-cabinet-conversation-4); border: 1px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); background: var(--accent-softer); color: var(--accent-ink); font-size: var(--palette-typographie-cabinet-conversation-3); font-weight: 600; cursor: pointer; transition: all .15s; font-variant-numeric: tabular-nums; font-family: inherit; }
.slot:hover { background: var(--adaptation-fond-action-accent, var(--accent)); color: var(--palette-texte-inverse-components); border-color: var(--adaptation-bordure-action-accent, var(--accent)); transform: translateY(-1px); }
.slot.full { background: var(--surface-2); border-color: var(--line); color: var(--muted-2); cursor: not-allowed; text-decoration: line-through; }
.slot.full:hover { background: var(--surface-2); color: var(--muted-2); transform: none; }
.psy-price { margin-top: var(--palette-espacement-cabinet-2); font-size: var(--palette-typographie-components-2); color: var(--muted); align-self: flex-end; }
.psy-price b { color: var(--ink); font-weight: 700; font-size: var(--palette-typographie-cabinet-conversation-2); }
/* "ou 1 crédit" — sous le prix, seulement si crédit utilisable avec ce psy */
.psy-credit-or { margin-top: var(--palette-espacement-composants-5); font-size: var(--palette-typographie-cabinet-conversation-4); font-weight: 700; color: var(--accent); align-self: flex-end; text-align: right; }

/* État empty / loading */
.empty-state { padding: var(--palette-espacement-components-6) var(--palette-espacement-cabinet-conversation-10); text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--palette-rayon-cabinet); }
.empty-state b { color: var(--ink); display: block; font-size: var(--palette-typographie-cabinet-conversation-5); margin-bottom: var(--palette-espacement-cabinet-2); }
.loading-row { padding: var(--palette-espacement-components-3); text-align: center; color: var(--muted); }

/* ─── Loading skeleton : cards fantômes pendant le fetch ────────────
   Affichées dans #loadingBox quand la liste psy n'est pas encore chargée.
   3 cards en gradient animé, pour donner une sensation de progression. */
.psy-skeleton-list { display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-5); max-width: 100%; }
.psy-skeleton { background: var(--surface); border: 1px solid var(--line); border-radius: var(--palette-rayon-composants-3); padding: var(--palette-espacement-cabinet-conversation-8); display: flex; gap: var(--palette-espacement-cabinet-conversation-5); }
.skel-av { width: 56px; height: 56px; border-radius: var(--palette-rayon-composants-2); flex: 0 0 56px; }
.skel-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-11); }
.skel-line { height: 12px; border-radius: var(--palette-rayon-conversation); background: var(--surface-2); }
.skel-line.short { width: 40%; }
.skel-line.mid { width: 70%; }
.skel-line.long { width: 95%; }
@keyframes skel-shimmer {
  0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; }
}
.skel-av, .skel-line { background: linear-gradient(90deg, var(--surface-2) 0%, var(--line) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; }

/* ===== STAGE 2 : MOTIF ===== */
.stage { max-width: 640px; margin: var(--palette-espacement-cabinet-conversation) auto 0; }
.stage-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--palette-rayon-cabinet-conversation); padding: var(--palette-espacement-cabinet) var(--palette-espacement-cabinet) var(--palette-espacement-components-5); box-shadow: var(--shadow-card); }
.stage-card h2 { margin: 0 0 var(--palette-espacement-cabinet-conversation-11); font-size: var(--palette-typographie-cabinet-conversation); letter-spacing: var(--palette-typographie-consultation-2); font-weight: 700; }
.stage-card .lead { color: var(--muted); font-size: var(--palette-typographie-cabinet-conversation-2); margin-bottom: var(--palette-espacement-composants-3); line-height: 1.55; }
.reason-area { width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--palette-rayon-composants-3); background: var(--surface); padding: var(--palette-espacement-cabinet-conversation-5) var(--palette-espacement-cabinet-conversation-2); min-height: 140px; font-size: var(--palette-typographie-composants-14); line-height: 1.55; color: var(--ink); transition: border-color .15s, box-shadow .15s; font-family: inherit; resize: vertical; box-sizing: border-box; }
.reason-area:focus { outline: 0; border-color: var(--adaptation-bordure-action-accent, var(--accent)); box-shadow: 0 0 0 4px var(--accent-softer); }
.reason-area::placeholder { color: var(--muted-2); font-style: italic; }
.help-row { display: flex; justify-content: space-between; align-items: center; margin-top: var(--palette-espacement-cabinet-conversation-11); font-size: var(--palette-typographie-components-4); color: var(--muted-2); font-style: italic; }
.help-row .count { font-variant-numeric: tabular-nums; font-style: normal; }
.sug-label { font-size: var(--palette-typographie-components-4); text-transform: uppercase; letter-spacing: var(--palette-typographie-layout-3); color: var(--muted); font-weight: 600; margin: var(--palette-espacement-composants-3) 0 var(--palette-espacement-cabinet-conversation-6); }
.sug { display: flex; gap: var(--palette-espacement-cabinet-conversation-11); flex-wrap: wrap; }
.sug-chip { padding: var(--palette-espacement-components) var(--palette-espacement-composants-6); border-radius: var(--palette-rayon-components-2); border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--palette-typographie-components-2); color: var(--ink-2); font-weight: 500; cursor: pointer; transition: all .15s; font-family: inherit; display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-9); }
.sug-chip:hover { border-color: var(--adaptation-bordure-accent-soft, var(--accent-soft)); color: var(--accent-ink); background: var(--accent-softer); }
.sug-chip.sel { background: var(--accent-softer); border-color: var(--adaptation-bordure-action-accent, var(--accent)); color: var(--accent-ink); font-weight: 600; }
.confid { margin-top: var(--palette-espacement-composants-3); display: flex; gap: var(--palette-espacement-cabinet-conversation-6); padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-5); background: var(--surface-2); border-radius: var(--palette-rayon-cabinet-conversation-3); border: 1px solid var(--line); font-size: var(--palette-typographie-components-2); color: var(--muted); line-height: 1.5; }
.confid .ico { color: var(--accent); flex: 0 0 18px; margin-top: var(--palette-espacement-conversation); }

.actions-row { display: flex; justify-content: space-between; align-items: center; margin-top: var(--palette-espacement-composants-3); gap: var(--palette-espacement-cabinet-conversation-7); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--palette-espacement-cabinet-conversation-11); padding: var(--palette-espacement-composants-6) var(--palette-espacement-composants-3); border-radius: var(--palette-rayon-cabinet-conversation-3); font-size: var(--palette-typographie-cabinet-conversation-2); font-weight: 600; border: 1px solid transparent; text-decoration: none; transition: all .15s; cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--adaptation-fond-action-accent, var(--accent)); color: var(--palette-texte-inverse-components); }
.btn-primary:hover { background: var(--adaptation-fond-action-accent-hover, var(--accent-hover)); }
.btn-primary:disabled { background: var(--adaptation-surface-action-line-strong, var(--line-strong)); color: var(--muted); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-lg { padding: var(--palette-espacement-cabinet-conversation-5) var(--palette-espacement-composants-2); font-size: var(--palette-typographie-composants-14); width: 100%; }

/* ===== STAGE 3 : RÉCAP + PAIEMENT ===== */
.recap-grid { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 0; align-items: start; margin-top: var(--palette-espacement-cabinet-conversation-11); max-width: 980px; margin-left: auto; margin-right: auto; }
.recap-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--palette-rayon-cabinet-conversation); padding: var(--palette-espacement-cabinet-conversation); box-shadow: var(--shadow-card); }
.recap-psy { display: flex; gap: var(--palette-espacement-cabinet-conversation-5); align-items: center; padding-bottom: var(--palette-espacement-cabinet-conversation-10); border-bottom: 1px solid var(--line); }
.recap-psy .av { width: 54px; height: 54px; border-radius: var(--palette-rayon-composants-2); flex: 0 0 54px; background: linear-gradient(135deg, var(--accent-soft), var(--adaptation-fond-action-accent, var(--accent))); color: var(--palette-texte-inverse-components); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--palette-typographie-composants); overflow: hidden; }
.recap-psy .av img { width: 100%; height: 100%; object-fit: cover; }
.recap-psy .name { font-size: var(--palette-typographie-components-3); font-weight: 600; letter-spacing: var(--palette-typographie-conversation); color: var(--ink); }
.recap-psy .title { font-size: var(--palette-typographie-cabinet-conversation-3); color: var(--muted); margin-top: var(--palette-espacement-composants-5); }
.recap-price { margin-left: auto; text-align: right; }
.recap-price .lbl { font-size: var(--palette-typographie-composants-17); text-transform: uppercase; letter-spacing: var(--palette-typographie-layout); color: var(--muted); font-weight: 600; }
.recap-price .amt { font-size: var(--palette-typographie-cabinet-conversation); font-weight: 700; letter-spacing: var(--palette-typographie-layout-4); color: var(--ink); margin-top: var(--palette-espacement-composants-5); }
.recap-details { padding: var(--palette-espacement-cabinet-conversation-10) 0 var(--palette-espacement-cabinet-2); display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-7); }
.rd-row { display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-7); font-size: var(--palette-typographie-components); color: var(--ink-2); }
.rd-row .ico { width: 18px; height: 18px; color: var(--accent); flex: 0 0 18px; display: inline-flex; }
.rd-row b { color: var(--ink); font-weight: 600; }
.recap-arrow { display: flex; align-items: center; justify-content: center; padding-top: var(--palette-espacement-invitation-4); color: var(--muted-2); }
/* #stage3BackBtn : visible en mobile (dans .stage3-actions sticky bottom).
   Caché en desktop car le topBackBtn dans le stepper fait le même rôle. */
#stage3BackBtn { display: none; }
.stage3-actions { display: contents; } /* desktop : le wrapper devient invisible, #payBtn reste fluide */
.pay-card h3 { margin: 0 0 var(--palette-espacement-cabinet-conversation-2); font-size: var(--palette-typographie-components-4); text-transform: uppercase; letter-spacing: var(--palette-typographie-layout); color: var(--muted); font-weight: 600; }
.field { margin-bottom: var(--palette-espacement-cabinet-conversation-5); }
.field label { display: block; font-size: var(--palette-typographie-components-2); color: var(--ink-2); font-weight: 500; margin-bottom: var(--palette-espacement-cabinet-conversation-3); }
.input-wrap { position: relative; }
.input, .select, .stripe-element-wrap { width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--palette-rayon-cabinet-conversation-4); padding: var(--palette-espacement-components-2) var(--palette-espacement-cabinet-conversation-5); font-size: var(--palette-typographie-cabinet-conversation-2); background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; font-family: inherit; box-sizing: border-box; }
.input:focus, .select:focus, .stripe-element-wrap.focus { outline: 0; border-color: var(--adaptation-bordure-action-accent, var(--accent)); box-shadow: 0 0 0 3px var(--accent-softer); }
.stripe-element-wrap { padding: var(--palette-espacement-composants-6) var(--palette-espacement-cabinet-conversation-5); min-height: 44px; }
.stripe-error { font-size: var(--palette-typographie-cabinet-conversation-4); color: var(--danger, var(--palette-texte-danger-consultation)); margin-top: var(--palette-espacement-cabinet-2); }
.secure-note { display: flex; align-items: center; justify-content: center; gap: var(--palette-espacement-cabinet-conversation-11); font-size: var(--palette-typographie-cabinet-conversation-4); color: var(--muted); margin: var(--palette-espacement-cabinet-conversation-5) 0 var(--palette-espacement-cabinet-conversation-7); padding: var(--palette-espacement-cabinet-conversation-6); background: var(--surface-2); border-radius: var(--palette-rayon-cabinet-conversation-4); }
.secure-note .ico { color: var(--palette-texte-succes-components); }
/* Acceptation des CGVU au clic (25/09/2026) : mention juste avant « Confirmer ma séance ». */
.cgv-note { margin: 0 0 var(--palette-espacement-cabinet-conversation-7); font-size: var(--palette-typographie-cabinet-conversation-4); line-height: 1.5; color: var(--muted); text-align: center; }
.cgv-note a { color: var(--accent); text-decoration: underline; }

/* Sélecteur de moyen de paiement (3 radios stylés) */
.pay-choice { display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-7); padding: var(--palette-espacement-cabinet-conversation-5) var(--palette-espacement-cabinet-conversation-2); border: 1.5px solid var(--line-strong); border-radius: var(--palette-rayon-cabinet-conversation-3); background: var(--surface); cursor: pointer; transition: all .15s; }
.pay-choice:hover { border-color: var(--adaptation-bordure-accent-soft, var(--accent-soft)); background: var(--accent-softer); }
.pay-choice input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: var(--palette-rayon-composants-2); border: 2px solid var(--line-strong); flex: 0 0 18px; cursor: pointer; position: relative; margin: 0; }
.pay-choice input[type="radio"]:checked { border-color: var(--adaptation-bordure-action-accent, var(--accent)); }
.pay-choice input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: var(--palette-rayon-composants-2); background: var(--adaptation-fond-action-accent, var(--accent)); }
.pay-choice.sel { border-color: var(--adaptation-bordure-action-accent, var(--accent)); background: var(--accent-softer); box-shadow: 0 0 0 3px var(--palette-ombre-consultation-5); }
.pay-choice .pc-ico { width: 32px; height: 32px; border-radius: var(--palette-rayon-cabinet-conversation-2); background: var(--accent-softer); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.pay-choice .pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--palette-espacement-composants-5); }
.pay-choice .pc-title { font-size: var(--palette-typographie-cabinet-conversation-2); font-weight: 600; color: var(--ink); }
.pay-choice .pc-sub { font-size: var(--palette-typographie-cabinet-conversation-4); color: var(--muted); }
.pay-choice .pc-brand { font-size: var(--palette-typographie-composants-3); font-weight: 700; padding: var(--palette-espacement-components-4) var(--palette-espacement-components); border-radius: var(--palette-rayon-conversation-2); background: var(--ink); color: var(--palette-texte-inverse-components); letter-spacing: var(--palette-typographie-consultation-3); text-transform: uppercase; }

/* ===== STAGE 4 : CONFIRMATION ===== */
.confirm-wrap { max-width: 560px; margin: var(--palette-espacement-components-6) auto 0; text-align: center; }
.check-orb { width: 92px; height: 92px; border-radius: var(--palette-rayon-composants-2); background: radial-gradient(circle at 30% 30%, var(--palette-surface-cabinet-conversation), var(--accent-softer)); border: 2px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--palette-espacement-cabinet-conversation); position: relative; box-shadow: 0 20px 40px -15px var(--palette-ombre-consultation-3); }
.check-orb::before { content: ""; position: absolute; inset: -8px; border-radius: var(--palette-rayon-composants-2); border: 1px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); opacity: .5; animation: ring 2.4s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.25); opacity: 0; } }
.check-orb .ring2 { position: absolute; inset: -16px; border-radius: var(--palette-rayon-composants-2); border: 1px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); opacity: .25; animation: ring 2.4s ease-out infinite .6s; }
.confirm-wrap h2 { font-size: var(--palette-typographie-cabinet-2); letter-spacing: var(--palette-typographie-layout-2); margin: 0 0 var(--palette-espacement-cabinet-conversation-6); font-weight: 700; color: var(--ink); }
.confirm-wrap .lead { color: var(--muted); font-size: var(--palette-typographie-cabinet-conversation-5); line-height: 1.55; max-width: 460px; margin: 0 auto var(--palette-espacement-components-5); }
.confirm-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--palette-rayon-cabinet-conversation); padding: var(--palette-espacement-cabinet-conversation); text-align: left; box-shadow: var(--shadow-card); }
.cb-row { display: flex; gap: var(--palette-espacement-cabinet-conversation-5); align-items: center; padding: var(--palette-espacement-cabinet-conversation-6) 0; }
.cb-row:not(:last-child) { border-bottom: 1px dashed var(--line); }
.cb-row .ico { width: 36px; height: 36px; border-radius: var(--palette-rayon-cabinet-conversation-4); background: var(--accent-softer); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; }
.cb-row .t { font-size: var(--palette-typographie-components); color: var(--ink); font-weight: 600; }
.cb-row .s { font-size: var(--palette-typographie-components-2); color: var(--muted); margin-top: var(--palette-espacement-conversation); }
.confirm-actions { display: flex; gap: var(--palette-espacement-cabinet-conversation-6); margin-top: var(--palette-espacement-composants-3); }
.confirm-actions .btn { flex: 1; }
.next-hint { margin-top: var(--palette-espacement-cabinet-conversation); font-size: var(--palette-typographie-cabinet-conversation-3); color: var(--muted); }

@media (max-width: 1180px) {
  .psy-top { grid-template-columns: 1fr; }
  .psy-book { min-width: 0; align-items: stretch; }
  .psy-price { align-self: flex-start; }
  .psy-credit-or { align-self: flex-start; text-align: left; }
}

/* ============================================================
   Mobile consultation booking — audit responsive 20/05/2026
   ============================================================ */
@media (max-width: 768px) {
  /* ─── A1 : Stepper compact (juste numéros, page-title fait le contexte) ─── */
  .stepper { gap: var(--palette-espacement-cabinet-conversation-3); }
  .stepper .lbl { display: none; } /* toutes les labels cachées en mobile */
  .stepper .bubble { width: 26px; height: 26px; font-size: var(--palette-typographie-components-4); }
  .step-sep { width: 18px; flex: 0 0 18px; }

  /* Topbar : moins de padding */
  .cons-topbar { padding: var(--palette-espacement-cabinet-conversation-5) var(--palette-espacement-cabinet-conversation-2); }

  /* Bouton "Retour" du topbar : caché en mobile car doublon avec le
     sticky bottom bar des stages 2 et 3. L'user navigue via la sticky. */
  #topBackBtn { display: none !important; }

  /* La topbar n'héberge plus rien en mobile (stepper retiré globalement, back
     caché, "Fermer" retiré) → on masque toute la barre pour supprimer le filet
     (border-bottom) inutile en haut de page (demande user). */
  .cons-topbar { display: none !important; }

  /* Burger FAB : visible sur le listing (étape 1) et la confirmation (étape 4),
     masqué aux étapes 2 et 3 où il chevauche le bouton "Continuer" du sticky bar. */
  body[data-stage="2"] .mobile-burger-fab,
  body[data-stage="3"] .mobile-burger-fab { display: none !important; }

  /* ─── A3 : Cache la section header "VOTRE PSYCHOLOGUE" sur mobile.
     Le badge "Votre psychologue" sur la carte (.mine-badge) suffit. */
  .psy-section-label { display: none; }

  /* Recap grid (3 cols → 1 col) : empile vertical, flèche cachée */
  .recap-grid { grid-template-columns: 1fr; gap: var(--palette-espacement-cabinet-conversation-5); }
  .recap-arrow { display: none; }

  /* Slot row : 60px label → 50px pour gagner de la largeur */
  .slot-row { grid-template-columns: 50px 1fr; gap: var(--palette-espacement-cabinet-conversation-11); }

  /* ─── APP-SHELL : la PAGE ne scrolle pas, seul le contenu de l'étape active
     scrolle en interne → la barre d'outils Chrome ne se masque plus au scroll,
     la sticky bar reste SOLIDE et rien ne "flotte". (Hauteur de .app posée en px
     par fitApp() = visualViewport.height, fiable Chrome iOS.) ─────────────── */
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .app {
    display: flex;
    flex-direction: column;
    min-height: 0;            /* annule le min-height:100vh de layout.css (=824 sur Chrome iOS) */
    overflow: hidden;
  }
  .main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* L'étape active (.page non [hidden]) = la zone scrollable interne. */
  .page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── BANDE MORTE SOUS LA TAB BAR (bug iOS 31/08, signalé par Alexandre :
     « la barre du bas est trop haute avec un gros espacement, c'est la seule
     page où j'ai ce bug ») ────────────────────────────────────────────────
     mobile.css pose `body.has-tabbar main.main { padding-bottom:
     var(--tabbar-clearance) }` (~122 px). Cette règle suppose que le DOCUMENT
     scrolle : le padding s'ajoute alors APRÈS le dernier contenu, invisible,
     et sert juste à ce qu'on puisse scroller le dernier élément au-dessus de
     la pill flottante. C'est vrai sur toutes les pages… SAUF celle-ci.
     Ici le layout est un APP-SHELL : .main est un conteneur flex en
     `overflow:hidden` dans une hauteur FIXE (fitApp). Le padding-bottom n'y
     est donc pas du scroll en trop — il AMPUTE la zone visible de 122 px, et
     ça se lit exactement comme « la tab bar est remontée avec un gros vide
     dessous ». On remet la clearance là où elle a un sens dans ce layout :
     sur le scroller interne (.page). */
  body.has-tabbar main.main { padding-bottom: 0; }
  body.has-tabbar .page { padding-bottom: var(--tabbar-clearance); }

  /* Étapes 2 et 3 : MÊME raison que la règle .mobile-burger-fab ci-dessus,
     transposée à la tab bar qui a REMPLACÉ le FAB le 02/07 — la règle du FAB
     est restée là, celle de la tab bar n'a jamais été écrite. Ces deux étapes
     ont une barre d'actions FIXÉE en bas qui porte le CTA principal
     (« Continuer », « Confirmer ma séance ») ; la pill flotte au-dessus
     (z-index 120 contre 30) et le recouvre. On la masque : la navigation s'y
     fait par le bouton « Retour » de la barre d'actions. */
  body[data-stage="2"] .mobile-tabbar,
  body[data-stage="3"] .mobile-tabbar { display: none !important; }
  /* …et donc pas de clearance de tab bar sur ces étapes : elles réservent
     déjà la hauteur de LEUR barre (#stage2 .stage, #stage3). Cumuler les deux
     réserves recréerait le vide qu'on vient de supprimer. */
  body.has-tabbar[data-stage="2"] .page,
  body.has-tabbar[data-stage="3"] .page { padding-bottom: 0; }
}
@media (max-width: 640px) {
  /* Récap final compact, créneaux pleins */
  .cons-topbar { padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-5); }
  .icon-btn { width: 44px; height: 44px; }

  /* Modale confirmation : padding réduit + safe-area-bottom */
  .confirm-modal .box {
    padding: var(--palette-espacement-composants-3) var(--palette-espacement-cabinet-conversation-8);
    padding-bottom: calc(var(--palette-espacement-composants-3) + env(safe-area-inset-bottom, var(--palette-espacement-composants)));
    max-width: 100%;
  }

  /* ─── B1 : Bio truncate à 3 lignes + bouton "Voir plus" ──────── */
  .psy-bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    margin-top: var(--palette-espacement-cabinet-conversation-6);
    font-size: var(--palette-typographie-cabinet-conversation-3);
  }
  .psy-bio.is-expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
  }
  .psy-bio-more {
    display: inline-block;
    margin-top: var(--palette-espacement-cabinet-conversation-3);
    font-size: var(--palette-typographie-components-2);
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    background: transparent;
    border: none;
    padding: var(--palette-espacement-cabinet-2) 0;
    font-family: inherit;
  }

  /* ─── B2 : Chip "+N" pour les tags supplémentaires ──────────── */
  .psy-tags { gap: var(--palette-espacement-cabinet-conversation-9); margin-top: var(--palette-espacement-cabinet-conversation-11); }
  .tag { font-size: var(--palette-typographie-composants-3); padding: var(--palette-espacement-components-4) var(--palette-espacement-cabinet-conversation-11); }
  .tag-mobile-hide { display: none; }
  .tag-mobile-only { display: inline-flex; }
  .tag-more {
    background: var(--surface-2) !important;
    color: var(--muted) !important;
    border-color: var(--line) !important;
    font-weight: 600;
  }

  /* ─── B3 : Cards "Autres" plus compactes (non is-mine) ─────── */
  .psy-card { padding: var(--palette-espacement-cabinet-conversation-5); border-radius: var(--palette-rayon-composants-3); }
  /* Carte "Votre psychologue" : plus de padding-haut pour aérer le badge
     "✓ Votre psychologue" qui chevauche le bord (demande 16/06). */
  .psy-card.is-mine { padding-top: var(--palette-espacement-composants-2); }
  .psy-card:not(.is-mine) .psy-av {
    width: 48px; height: 48px; flex: 0 0 48px; font-size: var(--palette-typographie-components-3);
  }
  .psy-card:not(.is-mine) .psy-name { font-size: var(--palette-typographie-composants-10); }
  /* Autres psys : on affiche le DÉBUT de la bio (2 lignes), sans bouton
     "Voir plus" (cartes compactes — demande 16/06). */
  .psy-card:not(.is-mine) .psy-bio { -webkit-line-clamp: 2; line-clamp: 2; margin-top: var(--palette-espacement-cabinet-conversation-11); font-size: var(--palette-typographie-components-2); }
  .psy-card:not(.is-mine) .psy-bio-more { display: none; }
  .psy-card:not(.is-mine) .verif { font-size: var(--palette-typographie-composants-3); margin-top: var(--palette-espacement-cabinet-conversation-11); }
  .psy-ident { gap: var(--palette-espacement-cabinet-conversation-7); }
  .psy-av { width: 56px; height: 56px; flex: 0 0 56px; }
  .psy-name { font-size: var(--palette-typographie-composants-12); }

  /* ─── A2 : Quick book — slots cachés par défaut sauf 1er jour ── */
  .slot-rows.is-collapsed .slot-row:not(:first-child) { display: none; }
  .slots-toggle {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--palette-rayon-cabinet-conversation-4);
    color: var(--accent);
    font-size: var(--palette-typographie-components-2);
    font-weight: 600;
    padding: var(--palette-espacement-cabinet-conversation-4) var(--palette-espacement-cabinet-conversation-5);
    cursor: pointer;
    font-family: inherit;
    margin-top: var(--palette-espacement-cabinet-conversation-11);
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--palette-espacement-cabinet-conversation-3);
  }
  .slots-toggle:active { background: var(--accent-softer); }

  /* Slot compact + scroll horizontal (au lieu de wrap sur 2 lignes).
     Le user voit 3 slots à la fois et swipe horizontalement pour les autres.
     scroll-snap pour caler chaque slot proprement. */
  .slot { padding: var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-cabinet-conversation-7); font-size: var(--palette-typographie-cabinet-conversation-3); flex: 0 0 auto; scroll-snap-align: start; min-width: 60px; }
  .slot-day { font-size: var(--palette-typographie-composants-17); }
  .slot-day b { font-size: var(--palette-typographie-components-2); }
  .slot-row { grid-template-columns: 44px 1fr; gap: var(--palette-espacement-cabinet-conversation-3); min-width: 0; }
  .slots {
    gap: var(--palette-espacement-cabinet-conversation-9);
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: var(--palette-espacement-composants-5);
    /* Scrollbar thin (Firefox) + WebKit override plus bas */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .slots::-webkit-scrollbar { height: 3px; }
  .slots::-webkit-scrollbar-track { background: transparent; }
  .slots::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--palette-rayon-consultation); }

  /* Mine badge : repositionner pour qu'il ne sorte pas du card en mobile */
  .psy-card.is-mine .mine-badge { left: 14px; top: -9px; font-size: var(--palette-typographie-mobile); padding: var(--palette-espacement-cabinet-2) var(--palette-espacement-cabinet-conversation-6); }

  /* ─── Empty / loading states mobile ────────────────────────── */
  .empty-state { padding: var(--palette-espacement-cabinet) var(--palette-espacement-cabinet-conversation-8); }
  .loading-row { padding: var(--palette-espacement-components-5) var(--palette-espacement-cabinet-conversation-8); }

  /* ─── Stage 2 (motif) : padding réduit + actions sticky bottom ── */
  .page { padding-left: var(--palette-espacement-cabinet-conversation-5) !important; padding-right: var(--palette-espacement-cabinet-conversation-5) !important; }
  .stage { margin-top: var(--palette-espacement-cabinet-conversation-7); padding-bottom: var(--palette-espacement-consultation-2); /* clearance pour sticky actions */ }
  .stage-card { padding: var(--palette-espacement-cabinet-conversation-8) var(--palette-espacement-cabinet-conversation-2) var(--palette-espacement-cabinet-conversation-2); border-radius: var(--palette-rayon-composants-3); }
  .stage-card h2 { font-size: var(--palette-typographie-consultation-4); }
  .stage-card .lead { font-size: var(--palette-typographie-cabinet-conversation-3); margin-bottom: var(--palette-espacement-cabinet-conversation-2); }
  .reason-area { min-height: 110px; padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-5); font-size: var(--palette-typographie-components-3); /* 16px = pas de zoom iOS */ }
  .reason-area::placeholder { font-style: italic; }
  /* help-row : compacter en 1 ligne (vs 2 lignes wrap) */
  .help-row { font-size: var(--palette-typographie-composants-3); gap: var(--palette-espacement-cabinet-conversation-11); }
  .confid { padding: var(--palette-espacement-cabinet-conversation-6) var(--palette-espacement-cabinet-conversation-7); font-size: var(--palette-typographie-cabinet-conversation-4); }
  /* C1 — Sticky bottom bar : actions-row fixée en bas du viewport.
     Sur stage 2, contient [Retour] + [Continuer]. Pas de chevauchement
     avec le burger FAB (la FAB est cachée sur cette page via hideBurger). */
  #stage2 .actions-row {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-5);
    padding-bottom: calc(var(--palette-espacement-cabinet-conversation-7) + env(safe-area-inset-bottom, var(--palette-espacement-composants)));
    margin: 0;
    gap: var(--palette-espacement-cabinet-conversation-6);
    z-index: 30;
    box-shadow: 0 -8px 24px -8px var(--palette-ombre-consultation-6);
  }
  #stage2 .actions-row .btn-ghost { padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-5); flex: 0 0 auto; }
  #stage2 .actions-row .btn-lg { flex: 1; max-width: none; padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-8); font-size: var(--palette-typographie-cabinet-conversation-2); }

  /* ─── D1 : Stage 4 (confirmation) polish mobile ────────────── */
  .confirm-wrap { margin: var(--palette-espacement-cabinet-conversation) auto 0; padding-bottom: calc(var(--palette-espacement-components-3) + env(safe-area-inset-bottom, var(--palette-espacement-composants))); }
  .check-orb { width: 76px; height: 76px; margin-bottom: var(--palette-espacement-cabinet-conversation-8); }
  .check-orb svg { width: 38px; height: 38px; }
  .confirm-wrap h2 { font-size: var(--palette-typographie-cabinet-conversation); line-height: 1.2; }
  .confirm-wrap .lead { font-size: var(--palette-typographie-cabinet-conversation-2); margin-bottom: var(--palette-espacement-composants-3); padding: 0 var(--palette-espacement-cabinet-2); }
  .confirm-box { padding: var(--palette-espacement-cabinet-conversation-2) var(--palette-espacement-cabinet-conversation-5); border-radius: var(--palette-rayon-composants-3); }
  .cb-row { gap: var(--palette-espacement-cabinet-conversation-7); padding: var(--palette-espacement-cabinet-conversation-11) 0; }
  .cb-row .ico { width: 32px; height: 32px; flex: 0 0 32px; }
  .cb-row .t { font-size: var(--palette-typographie-cabinet-conversation-3); }
  .cb-row .s { font-size: var(--palette-typographie-cabinet-conversation-4); }
  .confirm-actions { flex-direction: column-reverse; gap: var(--palette-espacement-cabinet-conversation-11); }
  .confirm-actions .btn { width: 100%; padding: var(--palette-espacement-composants-6) var(--palette-espacement-cabinet-conversation-8); font-size: var(--palette-typographie-cabinet-conversation-2); }
  .next-hint { font-size: var(--palette-typographie-components-2); }

  /* ─── C3 : Polish stage 3 — payment cards + sticky bottom bar ─── */
  /* Sticky bar contenant [Retour] + [Confirmer ma séance], fixée en bas
     du viewport. Padding-bottom sur #stage3 pour la clearance. */
  #stage3 {
    padding-bottom: calc(var(--palette-espacement-consultation-3) + env(safe-area-inset-bottom, var(--palette-espacement-composants)));
  }
  /* Override le display:contents desktop : sur mobile on rend visible le
     wrapper en flex sticky-bottom. */
  #stage3BackBtn { display: inline-flex !important; }
  .stage3-actions {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    gap: var(--palette-espacement-cabinet-conversation-6);
    padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-5);
    padding-bottom: calc(var(--palette-espacement-cabinet-conversation-7) + env(safe-area-inset-bottom, var(--palette-espacement-composants)));
    z-index: 30;
    box-shadow: 0 -8px 24px -8px var(--palette-ombre-consultation-6);
  }
  .stage3-actions #stage3BackBtn {
    flex: 0 0 auto;
    padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-5);
  }
  .stage3-actions #payBtn {
    flex: 1;
    border-radius: var(--palette-rayon-cabinet-conversation-3);
    margin: 0;
    padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-8);
    font-size: var(--palette-typographie-cabinet-conversation-2);
    box-shadow: none; /* la shadow est sur le container parent */
  }
  .pay-card h3 { font-size: var(--palette-typographie-composants-3); margin-bottom: var(--palette-espacement-cabinet-conversation-7); }
  .pay-choice { padding: var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-5); gap: var(--palette-espacement-cabinet-conversation-6); }
  .pay-choice .pc-ico { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--palette-rayon-cabinet-2); }
  .pay-choice .pc-title { font-size: var(--palette-typographie-components); }
  .pay-choice .pc-sub { font-size: var(--palette-typographie-components-4); }
  .pay-choice .pc-brand { font-size: var(--palette-typographie-consultation-5); padding: var(--palette-espacement-composants-5) var(--palette-espacement-cabinet-conversation-3); }
  .recap-card { padding: var(--palette-espacement-cabinet-conversation-8) var(--palette-espacement-cabinet-conversation-2); border-radius: var(--palette-rayon-composants-3); }
  .recap-psy .av { width: 46px; height: 46px; flex: 0 0 46px; font-size: var(--palette-typographie-cabinet-conversation-5); }
  .recap-psy .name { font-size: var(--palette-typographie-cabinet-conversation-5); }
  .recap-psy .title { font-size: var(--palette-typographie-components-2); }
  .recap-price .amt { font-size: var(--palette-typographie-consultation-4); }
  .recap-details { padding-top: var(--palette-espacement-cabinet-conversation-2); gap: var(--palette-espacement-cabinet-conversation-6); }
  .rd-row { font-size: var(--palette-typographie-cabinet-conversation-3); }
  .secure-note { font-size: var(--palette-typographie-components-4); padding: var(--palette-espacement-cabinet-conversation-4) var(--palette-espacement-cabinet-conversation-7); }
}

/* ===== MODALE DE CONFIRMATION (avant validation finale) =====
   Affichée au clic sur "Réserver" pour récap psy + créneau + paiement.
   Évite les bookings accidentels — l'utilisateur doit cliquer 2 fois (modal CTA). */
.confirm-modal { position: fixed; inset: 0; background: var(--palette-fond-inverse-changer-psychologue); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: var(--palette-espacement-cabinet-conversation-10); animation: cm-fade-in .18s ease-out; }
.confirm-modal[hidden] { display: none; }
@keyframes cm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.confirm-modal .box { background: var(--surface); border-radius: var(--palette-rayon-composants); max-width: 460px; width: 100%; padding: var(--palette-espacement-components-5); box-shadow: 0 30px 80px -20px var(--palette-ombre-changer-psychologue-3); animation: cm-pop .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cm-pop { from { transform: scale(.94) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.confirm-modal h3 { margin: 0 0 var(--palette-espacement-cabinet-conversation-3); font-size: var(--palette-typographie-components-6); letter-spacing: var(--palette-typographie-composants-2); color: var(--ink); font-weight: 700; }
.confirm-modal .sub { color: var(--muted); font-size: var(--palette-typographie-components); margin-bottom: var(--palette-espacement-cabinet-conversation-10); line-height: 1.5; }
.confirm-modal .recap { background: var(--accent-softer); border: 1px solid var(--adaptation-bordure-accent-soft, var(--accent-soft)); border-radius: var(--palette-rayon-composants-3); padding: var(--palette-espacement-cabinet-conversation-2); display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-6); margin-bottom: var(--palette-espacement-composants-3); }
.confirm-modal .recap-row { display: flex; gap: var(--palette-espacement-cabinet-conversation-7); align-items: flex-start; }
.confirm-modal .recap-row .ico { width: 32px; height: 32px; border-radius: var(--palette-rayon-cabinet-conversation-2); background: var(--surface); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.confirm-modal .recap-row .t { font-size: var(--palette-typographie-components); color: var(--ink); font-weight: 600; line-height: 1.3; }
.confirm-modal .recap-row .s { font-size: var(--palette-typographie-components-2); color: var(--muted); margin-top: var(--palette-espacement-composants-5); line-height: 1.3; }
.confirm-modal .actions { display: flex; gap: var(--palette-espacement-cabinet-conversation-6); }
.confirm-modal .actions .btn { flex: 1; }