/**
 * ds-booking.css — refonte visuelle de la page /reservation.
 *
 * Philosophie : additif, même DOM, mêmes IDs, même `booking.js`. Ne
 * remplace la couche présentation que pour homogénéiser la réservation
 * avec le reste du portail (glassmorphism, halos néon, micro-anims).
 *
 * Chargé APRÈS components.css (cascade) et après ds-tokens / ds-anim.
 */

/* =============================================================
   Hero / page shell
   ============================================================= */

body[data-page="booking"],
body.ds-booking-body {
  background:
    radial-gradient(1200px 680px at 8% -10%, rgba(124, 255, 91, 0.08), transparent 60%),
    radial-gradient(1100px 620px at 100% 0%, rgba(91, 200, 255, 0.05), transparent 60%),
    var(--bg-0);
}

/* Hero : même famille que les autres pages, accent vertical. */
body .page-hero {
  position: relative;
}
body .page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 255, 91, 0.25),
    transparent
  );
  pointer-events: none;
}

/* =============================================================
   Layout global : 2-col desktop, stack mobile
   ============================================================= */

.booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 380px);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
  max-width: 1320px;
  margin-inline: auto;
  padding: 0;
}

@media (max-width: 960px) {
  .booking {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   Carte-hôte : le form devient un panneau glass
   ============================================================= */

.booking__form {
  position: relative;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  border-radius: 22px;
  background: var(--ds-surface-glass);
  border: var(--ds-hairline);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    var(--ds-elev-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  /* Par défaut on clippe : cela contient proprement le halo
     du stepper (bloom du dot actif) et le halo `::before` du
     panneau. Dès qu'un popup est ouvert (select custom ou
     datepicker), on passe en `overflow: visible` via `:has()`
     plus bas pour laisser le popup déborder librement.
     Cf. §2 ci-dessous pour la règle `:has()`. */
  overflow: hidden;
  isolation: isolate;
}

/* Dès qu'un popup est ouvert dans le formulaire (heure d'une
   séance extra, date picker, sélecteur de niveau, etc.), on
   ouvre le clip pour que le popup puisse dépasser. Cela
   préserve le clip au repos (halo stepper bien contenu) tout
   en permettant aux popups deeply-nested d'être pleinement
   visibles. Nécessite `:has()` — fallback : la règle 1009+
   bas neutralise `overflow: hidden` sur les conteneurs
   intermédiaires quoi qu'il arrive. */
.booking__form:has(.cm-custom-select.is-open),
.booking__form:has(.cm-datepicker.is-open),
.booking__form:has(.cm-datepicker__pop:not([hidden])) {
  overflow: visible;
}

/* Halo discret derrière le panneau (neon accent subtil en haut).
   NB. depuis que `.booking__form` passe en `overflow: visible`
   pour laisser déborder les popups, le halo est positionné à
   l'intérieur (inset-top 0) pour ne pas saigner au-dessus du
   panneau. L'effet reste visible, plus doux. */
.booking__form::before {
  content: "";
  position: absolute;
  inset: 0 20% auto 20%;
  height: 180px;
  background: radial-gradient(
    60% 80% at 50% 0%,
    rgba(124, 255, 91, 0.22),
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  transition: opacity var(--ds-dur-med) var(--ds-ease-snap);
}
.booking__form > * {
  position: relative;
  z-index: 1;
}
.booking__form:focus-within::before {
  opacity: 1;
}

/* =============================================================
   Stepper : barre de progression + points néon
   ============================================================= */

/* =============================================================
   Stepper (redesign) — pills sit ON TOP of the track, not
   pierced by it. Key rules :
     • `.stepper__step` establishes its own stacking context
       (z-index: 2) ABOVE the track (z-index: 0).
     • `.stepper__dot` uses FULLY OPAQUE backgrounds (no more
       translucent rgba(…, 0.18) that leaked the line through).
     • The track is split into a dim base (::before) and a
       bright progress fill (::after), both clipped so they end
       AT the centre of each dot — no visible protrusion.
   ============================================================= */

.stepper {
  --ds-stepper-dot: 34px;
  --ds-stepper-padY: 0.75rem;
  --ds-stepper-padX: 0.5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
  position: relative;
  padding: var(--ds-stepper-padY) var(--ds-stepper-padX);
  background: rgba(11, 15, 20, 0.72);
  border: var(--ds-hairline);
  border-radius: 18px;
  isolation: isolate;
}

/* Piste de base (grise). Calée entre le centre du premier et du
   dernier dot — ainsi elle ne « dépasse » jamais les pills. */
.stepper::before {
  content: "";
  position: absolute;
  left: calc(var(--ds-stepper-padX) + var(--ds-stepper-dot) / 2);
  right: calc(var(--ds-stepper-padX) + var(--ds-stepper-dot) / 2);
  top: calc(var(--ds-stepper-padY) + var(--ds-stepper-dot) / 2 - 1px);
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  z-index: 0;
}

/* Piste de progression (accent). Remplie jusqu'au centre du dot
   actif via `--ds-stepper-progress`. */
.stepper::after {
  content: "";
  position: absolute;
  left: calc(var(--ds-stepper-padX) + var(--ds-stepper-dot) / 2);
  top: calc(var(--ds-stepper-padY) + var(--ds-stepper-dot) / 2 - 1px);
  height: 2px;
  width: calc(
    (100% - 2 * (var(--ds-stepper-padX) + var(--ds-stepper-dot) / 2))
    * var(--ds-stepper-progress, 0) / 100
  );
  background: var(--grad-accent);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(124, 255, 91, 0.55);
  transition: width var(--ds-dur-med) var(--ds-ease-spring);
  z-index: 0;
}

.stepper:has(.stepper__step[data-step="1"].is-active) { --ds-stepper-progress: 0; }
.stepper:has(.stepper__step[data-step="2"].is-active) { --ds-stepper-progress: 25; }
.stepper:has(.stepper__step[data-step="3"].is-active) { --ds-stepper-progress: 50; }
.stepper:has(.stepper__step[data-step="4"].is-active) { --ds-stepper-progress: 75; }
.stepper:has(.stepper__step[data-step="5"].is-active) { --ds-stepper-progress: 100; }
.stepper:has(.stepper__step[data-step="6"].is-active) { --ds-stepper-progress: 100; }

.stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  z-index: 2;
  cursor: default;
}

.stepper__dot {
  width: var(--ds-stepper-dot);
  height: var(--ds-stepper-dot);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  /* Fond entièrement opaque (pas de rgba alpha < 1) :
     c'est ce qui empêche la piste de traverser le pill. */
  background: #141a22;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-3);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.45);
  transition:
    transform var(--ds-dur-fast) var(--ds-ease-spring),
    box-shadow var(--ds-dur-fast) var(--ds-ease-snap),
    background var(--ds-dur-fast) var(--ds-ease-snap),
    color var(--ds-dur-fast) var(--ds-ease-snap),
    border-color var(--ds-dur-fast) var(--ds-ease-snap);
}

.stepper__label {
  font-size: 0.78rem;
  color: var(--text-3);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  transition: color var(--ds-dur-fast) var(--ds-ease-snap);
}

/* Étape complétée — fond OPAQUE vert foncé (remplace la version
   transparente d'origine qui laissait passer la piste). */
.stepper__step.is-done .stepper__dot {
  background:
    radial-gradient(140% 140% at 50% 0%, rgba(124, 255, 91, 0.25), transparent 55%),
    linear-gradient(135deg, #143a1f 0%, #0f2a1a 100%);
  border-color: rgba(124, 255, 91, 0.65);
  color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(124, 255, 91, 0.15),
    0 4px 14px rgba(124, 255, 91, 0.25);
}
.stepper__step.is-done .stepper__label {
  color: var(--text-2);
}

/* Étape active — déjà opaque (gradient solide), on garde la bloom. */
.stepper__step.is-active .stepper__dot,
.stepper--five .stepper__step.is-active .stepper__dot {
  background: var(--grad-accent);
  color: var(--bg-0);
  border-color: transparent;
  transform: scale(1.1);
  box-shadow:
    0 0 0 4px rgba(124, 255, 91, 0.22),
    0 0 24px rgba(124, 255, 91, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.stepper__step.is-active .stepper__label {
  color: var(--text-0);
  font-weight: 600;
}

/* Checkmark dans les étapes complétées (sans rien changer au JS). */
.stepper__step.is-done .stepper__dot::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}
.stepper__step.is-done .stepper__dot {
  color: #b6ffa3;
  font-size: 0;
}

/* Mobile : labels cachés, dots compacts.
   Les variables --ds-stepper-* propagent automatiquement le bon
   calcul de position pour la piste ::before / ::after. */
@media (max-width: 620px) {
  .stepper {
    --ds-stepper-dot: 28px;
    --ds-stepper-padY: 0.6rem;
    --ds-stepper-padX: 0.4rem;
  }
  .stepper__label {
    display: none;
  }
  .stepper__dot {
    font-size: 0.78rem;
  }
}

/* =============================================================
   Étapes (panneaux) + transitions
   ============================================================= */

.booking-step {
  display: none;
  animation: none;
}
.booking-step.is-active {
  display: block;
  animation: ds-booking-step-in var(--ds-dur-slow) var(--ds-ease-spring) both;
}

@keyframes ds-booking-step-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* En-tête d’étape */
.booking-section-head {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.booking-section-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(124, 255, 91, 0.08);
  border: 1px solid rgba(124, 255, 91, 0.25);
  color: var(--accent);
  font-weight: 700;
}
.booking-section-head__title {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  margin: 0.3rem 0 0.1rem;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.booking-section-head__lead {
  color: var(--text-2);
  margin: 0;
  line-height: 1.55;
  max-width: 62ch;
}

/* =============================================================
   Sub-panels (sections du form)
   ============================================================= */

.booking-subpanel {
  background: rgba(22, 29, 38, 0.55);
  border: var(--ds-hairline);
  border-radius: 16px;
  padding: clamp(0.9rem, 1.6vw, 1.25rem);
  margin-bottom: 1rem;
  transition:
    transform var(--ds-dur-fast) var(--ds-ease-snap),
    border-color var(--ds-dur-fast) var(--ds-ease-snap);
}
.booking-subpanel:focus-within {
  border-color: rgba(124, 255, 91, 0.35);
}

.booking-subpanel--soft {
  background: rgba(11, 15, 20, 0.45);
}
.booking-subpanel--inset {
  background: rgba(11, 15, 20, 0.55);
  border-color: rgba(124, 255, 91, 0.15);
}

.booking-subpanel__title {
  font-size: 0.92rem;
  color: var(--text-0);
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* =============================================================
   Form controls (dark glass, accent focus)
   ============================================================= */

.booking__form .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.booking__form .field > label {
  font-size: 0.82rem;
  color: var(--text-2);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.booking__form .field .required {
  color: var(--accent);
  font-weight: 700;
  margin-left: 2px;
}

.booking__form input[type="text"],
.booking__form input[type="email"],
.booking__form input[type="tel"],
.booking__form input[type="number"],
.booking__form input[type="date"],
.booking__form textarea,
.booking__form select,
.booking__form .cm-custom-select__trigger,
.booking__form .booking-coupon-row__input {
  background: rgba(11, 15, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-0);
  padding: 0.72rem 0.9rem;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.3;
  transition:
    border-color var(--ds-dur-fast) var(--ds-ease-snap),
    background var(--ds-dur-fast) var(--ds-ease-snap),
    box-shadow var(--ds-dur-fast) var(--ds-ease-snap);
  width: 100%;
  font-family: inherit;
}

.booking__form input::placeholder,
.booking__form textarea::placeholder {
  color: var(--text-3);
  opacity: 0.8;
}

.booking__form input:hover,
.booking__form textarea:hover,
.booking__form select:hover,
.booking__form .cm-custom-select__trigger:hover {
  border-color: rgba(124, 255, 91, 0.25);
  background: rgba(11, 15, 20, 0.75);
}

.booking__form input:focus,
.booking__form textarea:focus,
.booking__form select:focus,
.booking__form .cm-custom-select__trigger:focus,
.booking__form .cm-custom-select.is-open .cm-custom-select__trigger {
  outline: none;
  border-color: rgba(124, 255, 91, 0.55);
  background: rgba(11, 15, 20, 0.8);
  box-shadow:
    0 0 0 3px rgba(124, 255, 91, 0.12),
    0 8px 30px rgba(0, 0, 0, 0.35);
}

.booking__form textarea {
  min-height: 96px;
  resize: vertical;
}

/* Two-column row */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.form-row--booking-selects {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 620px) {
  .form-row,
  .form-row--booking-selects {
    grid-template-columns: 1fr;
  }
}

/* Custom-select dropdown dark */
.cm-custom-select__menu {
  background: rgba(22, 29, 38, 0.96);
  border: var(--ds-hairline-strong);
  border-radius: 12px;
  box-shadow: var(--ds-elev-3);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow: hidden;
}
.cm-custom-select__option {
  color: var(--text-1);
  padding: 0.6rem 0.9rem;
  transition: background var(--ds-dur-fast) var(--ds-ease-snap);
}
.cm-custom-select__option:hover,
.cm-custom-select__option.is-hover {
  background: var(--ds-surface-hover);
  color: var(--text-0);
}
.cm-custom-select__option.is-selected {
  background: rgba(124, 255, 91, 0.1);
  color: var(--accent);
}

/* =============================================================
   Service picker (cartes) — si booking.js hydrate .service-picker
   ============================================================= */

.service-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.service-picker [role="option"],
.service-picker .service-option {
  padding: 1rem;
  border-radius: 14px;
  background: rgba(11, 15, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition:
    transform var(--ds-dur-fast) var(--ds-ease-snap),
    border-color var(--ds-dur-fast) var(--ds-ease-snap),
    box-shadow var(--ds-dur-fast) var(--ds-ease-snap),
    background var(--ds-dur-fast) var(--ds-ease-snap);
}
.service-picker [role="option"]:hover,
.service-picker .service-option:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 255, 91, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.service-picker [aria-selected="true"],
.service-picker .service-option.is-selected {
  border-color: rgba(124, 255, 91, 0.65);
  background: linear-gradient(
    145deg,
    rgba(124, 255, 91, 0.1),
    rgba(22, 29, 38, 0.8)
  );
  box-shadow:
    0 0 0 2px rgba(124, 255, 91, 0.25) inset,
    0 0 36px rgba(124, 255, 91, 0.22);
}

/* Hint compact du service sélectionné */
.booking-service-hint {
  margin-top: 0.9rem;
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  background: rgba(124, 255, 91, 0.08);
  border: 1px solid rgba(124, 255, 91, 0.22);
  color: var(--text-1);
  font-size: 0.9rem;
  animation: ds-fade-in var(--ds-dur-med) var(--ds-ease-spring) both;
}
.booking-service-hint__meta {
  color: var(--accent);
}

/* =============================================================
   Résumé (sidebar collante)
   ============================================================= */

.booking-summary {
  position: sticky;
  top: calc(var(--ds-topbar-h, 64px) + 1rem);
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: 20px;
  background: linear-gradient(
    160deg,
    rgba(22, 29, 38, 0.78),
    rgba(15, 20, 27, 0.78)
  );
  border: var(--ds-hairline);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--ds-elev-2);
  animation: ds-fade-up var(--ds-dur-slow) var(--ds-ease-spring) both;
}
@media (max-width: 960px) {
  .booking-summary {
    position: static;
  }
}

.booking-summary h4 {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.9rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.booking-summary h4::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--grad-accent);
  box-shadow: 0 0 8px rgba(124, 255, 91, 0.6);
}

.booking-summary dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem 0.9rem;
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
}
.booking-summary dt {
  color: var(--text-3);
  font-weight: 500;
}
.booking-summary dd {
  margin: 0;
  color: var(--text-1);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.booking-summary .total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  color: var(--text-3);
}
.booking-summary .total strong {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  color: var(--text-0);
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}

.booking-summary__mode {
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  background: rgba(124, 255, 91, 0.08);
  border: 1px solid rgba(124, 255, 91, 0.2);
  color: var(--accent);
  font-size: 0.78rem;
  margin: 0 0 0.75rem 0;
  display: inline-block;
}

/* =============================================================
   Compte (gate, radios)
   ============================================================= */

.booking-compte {
  padding: 1rem;
  border-radius: 14px;
  border: var(--ds-hairline);
  background: rgba(11, 15, 20, 0.45);
}
.booking-compte--prominent {
  border-color: rgba(124, 255, 91, 0.2);
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(124, 255, 91, 0.05), transparent 70%),
    rgba(11, 15, 20, 0.55);
}
.booking-compte__title {
  color: var(--text-0);
  font-size: 1rem;
  display: block;
  margin-bottom: 0.35rem;
}

.booking-compte__radios {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.booking-compte__opt {
  display: flex;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 15, 20, 0.35);
  cursor: pointer;
  transition:
    border-color var(--ds-dur-fast) var(--ds-ease-snap),
    background var(--ds-dur-fast) var(--ds-ease-snap),
    transform var(--ds-dur-fast) var(--ds-ease-snap);
  align-items: flex-start;
}
.booking-compte__opt:hover {
  border-color: rgba(124, 255, 91, 0.3);
  background: rgba(11, 15, 20, 0.5);
}
.booking-compte__opt input {
  accent-color: var(--accent);
  margin-top: 0.2rem;
}
.booking-compte__opt input:checked ~ span {
  color: var(--text-0);
}
.booking-compte__opt:has(input:checked) {
  border-color: rgba(124, 255, 91, 0.55);
  background: rgba(124, 255, 91, 0.06);
  box-shadow: 0 0 0 1px rgba(124, 255, 91, 0.25) inset;
}

.booking-infos-gate__row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.booking-infos-gate__sep {
  color: var(--text-3);
  font-size: 0.82rem;
}
.booking-infos-gate__manual {
  color: var(--text-2);
  font-size: 0.9rem;
}

/* =============================================================
   Legal accepts — listed like step checkmarks
   ============================================================= */

.booking-legal-accepts .booking-compte__opt {
  background: rgba(22, 29, 38, 0.55);
}
.booking-legal-lead {
  color: var(--text-2);
  margin: 0.3rem 0 0.9rem 0;
}

/* =============================================================
   Coupon row
   ============================================================= */

.booking-coupon-row {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.booking-coupon-row__field {
  flex: 1 1 220px;
}
.booking-coupon-row__input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.booking-coupon-msg {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  font-size: 0.86rem;
  animation: ds-fade-in var(--ds-dur-fast) var(--ds-ease-snap) both;
}
.booking-coupon-msg[data-tone="ok"] {
  background: rgba(124, 255, 91, 0.08);
  border: 1px solid rgba(124, 255, 91, 0.25);
  color: var(--accent);
}
.booking-coupon-msg[data-tone="err"] {
  background: rgba(255, 91, 91, 0.08);
  border: 1px solid rgba(255, 91, 91, 0.25);
  color: var(--danger);
}

/* =============================================================
   Date / hour — calendar renders via booking.js. On donne un
   fallback date-picker natif propre si jamais.
   ============================================================= */

.cm-datepicker,
.flatpickr-calendar,
.booking-datepicker {
  background: rgba(15, 20, 27, 0.95) !important;
  border: var(--ds-hairline-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--ds-elev-3) !important;
  color: var(--text-0) !important;
  backdrop-filter: blur(22px);
}

/* =============================================================
   Bandeau mode / dispo
   ============================================================= */

.booking-mode-banner {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  background: rgba(91, 200, 255, 0.08);
  border: 1px solid rgba(91, 200, 255, 0.25);
  color: var(--text-1);
  margin-bottom: 1rem;
}
.booking-mode-banner__icon {
  color: var(--info);
  flex-shrink: 0;
  margin-top: 2px;
}
.booking-mode-banner__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* =============================================================
   Navigation (Retour / Continuer)
   ============================================================= */

.booking__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.booking__nav > span:empty {
  display: none;
}

.booking__nav .btn {
  min-height: 46px;
  padding-inline: 1.2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
}
.booking__nav .btn--primary {
  background: var(--grad-accent);
  color: var(--bg-0);
  border: none;
  box-shadow:
    0 10px 30px rgba(124, 255, 91, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition:
    transform var(--ds-dur-fast) var(--ds-ease-spring),
    box-shadow var(--ds-dur-fast) var(--ds-ease-snap),
    filter var(--ds-dur-fast) var(--ds-ease-snap);
}
.booking__nav .btn--primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 40px rgba(124, 255, 91, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  filter: saturate(1.08);
}
.booking__nav .btn--primary:disabled {
  background: rgba(124, 255, 91, 0.25);
  color: rgba(11, 15, 20, 0.6);
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(0.5);
}
.booking__nav .btn--ghost {
  background: rgba(22, 29, 38, 0.6);
  border: var(--ds-hairline);
  color: var(--text-1);
}
.booking__nav .btn--ghost:hover {
  border-color: rgba(124, 255, 91, 0.3);
  background: rgba(22, 29, 38, 0.85);
  color: var(--text-0);
}

/* =============================================================
   Extra sessions / forfaits multi
   ============================================================= */

.extra-sessions__head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}
.extra-sessions__head strong {
  color: var(--text-0);
}
.extra-sessions__head small {
  color: var(--text-3);
  font-size: 0.82rem;
}
.extra-sessions__list {
  display: grid;
  gap: 0.65rem;
}
.extra-sessions__list > * {
  padding: 0.75rem;
  border-radius: 12px;
  background: rgba(11, 15, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* =============================================================
   Payment container / Stripe element
   ============================================================= */

#card-element {
  background: rgba(11, 15, 20, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  transition: border-color var(--ds-dur-fast) var(--ds-ease-snap);
}
#card-element.StripeElement--focus {
  border-color: rgba(124, 255, 91, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 255, 91, 0.12);
}
#card-element.StripeElement--invalid {
  border-color: rgba(255, 91, 91, 0.5);
}

#booking-reference {
  background: rgba(124, 255, 91, 0.08) !important;
  border: 1px dashed rgba(124, 255, 91, 0.4) !important;
  color: var(--accent) !important;
}

/* =============================================================
   Success / confirmation
   ============================================================= */

.success-card {
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 22px;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(124, 255, 91, 0.18), transparent 70%),
    rgba(22, 29, 38, 0.65);
  border: 1px solid rgba(124, 255, 91, 0.28);
  box-shadow:
    var(--ds-elev-3),
    0 0 80px rgba(124, 255, 91, 0.08) inset;
  animation: ds-fade-up var(--ds-dur-slow) var(--ds-ease-spring) both;
}
.success-card__check {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  margin: 0 auto 1rem auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-accent);
  color: var(--bg-0);
  box-shadow:
    0 0 0 8px rgba(124, 255, 91, 0.14),
    0 0 36px rgba(124, 255, 91, 0.5);
  animation: ds-pulse 2.2s var(--ds-ease-snap) infinite;
}
.success-card__ref {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  background: rgba(11, 15, 20, 0.65);
  border: 1px dashed rgba(124, 255, 91, 0.4);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--accent);
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}

/* Accessibilité : reduce motion */
@media (prefers-reduced-motion: reduce) {
  .booking-step.is-active,
  .booking-summary,
  .success-card,
  .booking-service-hint,
  .booking-coupon-msg {
    animation: none !important;
  }
  .stepper::after {
    transition: none !important;
  }
  .success-card__check {
    animation: none !important;
  }
}

/* ============================================================
   PHASE 4 — Bug fixes (Résumé, z-index, calendrier, mobile)
   ============================================================ */

/* --- §2.1 Pill vide dans le résumé ---------------------------
   `#sum-mode` a un padding + border + background → quand le JS
   fait `m.hidden = true; m.textContent = ''`, l'élément reste
   visible car la règle `.booking-summary__mode { display:
   inline-block }` écrase l'attribut HTML `hidden`. On force
   `display: none` via deux guards (attribut + vide).
   ------------------------------------------------------------- */
.booking-summary__mode[hidden],
.booking-summary__mode:empty {
  display: none !important;
}

/* --- §2.2 Dropdowns (z-index & position) ---------------------
   Les `<select>` natifs ouvrent leur popup dans la couche
   système du navigateur — donc pas de problème z-index. En
   revanche les sélecteurs custom `.cm-custom-select` vivent
   dans le DOM et doivent flotter au-dessus du résumé sticky
   (z-index 2) et du formulaire glass.
   ------------------------------------------------------------- */
.booking__form .cm-custom-select.is-open {
  z-index: 60 !important;
  position: relative;
}
.booking__form .cm-custom-select__panel,
.booking__form .cm-custom-select__menu {
  z-index: 70 !important;
  background: rgba(15, 20, 27, 0.98) !important;
  border: var(--ds-hairline-strong) !important;
  box-shadow: var(--ds-elev-3), 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

/* On neutralise tout `overflow: hidden` susceptible de couper
   les popups sur les conteneurs de formulaire (la règle se
   limite au scope `.booking__form` pour ne pas perturber
   d'autres panels). */
.booking__form,
.booking__form .booking-step,
.booking__form .booking-subpanel,
.booking__form .form-row,
.booking__form .field {
  overflow: visible !important;
}

/* --- §2.3 Calendrier (datepicker) popover --------------------
   Sur desktop, on bump simplement le z-index pour passer au-
   dessus de la sidebar summary sticky et du `.booking__form::
   before` halo. */
.cm-datepicker {
  position: relative;
  z-index: 1;
}
.cm-datepicker.is-open {
  z-index: 80;
}
.cm-datepicker__pop {
  z-index: 80 !important;
  background: rgba(13, 18, 25, 0.98) !important;
  border: var(--ds-hairline-strong) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    var(--ds-elev-3) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

/* Disponibilités coach (guidage visuel seulement) :
   un point vert discret sous la date, sans désactiver les autres jours. */
.cm-datepicker__day {
  position: relative;
}

.cm-datepicker__day.cm-datepicker__day--available:not(.is-selected)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.2rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #22c55e;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.3),
    0 0 10px rgba(34, 197, 94, 0.5);
}

.cm-datepicker__day.cm-datepicker__day--available:not(.is-selected) {
  background:
    linear-gradient(
      180deg,
      rgba(34, 197, 94, 0.2) 0%,
      rgba(34, 197, 94, 0.08) 52%,
      rgba(34, 197, 94, 0) 100%
    ),
    rgba(11, 15, 20, 0.35);
  border-color: rgba(34, 197, 94, 0.35);
}

.cm-datepicker__day.cm-datepicker__day--available:not(.is-selected):hover::after,
.cm-datepicker__day.cm-datepicker__day--available:not(.is-selected):focus-visible::after {
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.45),
    0 0 14px rgba(34, 197, 94, 0.62);
}

.cm-datepicker__day.cm-datepicker__day--available:not(.is-selected):hover,
.cm-datepicker__day.cm-datepicker__day--available:not(.is-selected):focus-visible {
  background:
    linear-gradient(
      180deg,
      rgba(34, 197, 94, 0.28) 0%,
      rgba(34, 197, 94, 0.12) 56%,
      rgba(34, 197, 94, 0) 100%
    ),
    rgba(11, 15, 20, 0.45);
  border-color: rgba(34, 197, 94, 0.48);
}

.cm-datepicker__day.is-selected::after {
  display: none;
}

.booking-datepicker-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--text-2);
}

.booking-datepicker-legend__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #22c55e;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.3),
    0 0 10px rgba(34, 197, 94, 0.45);
}

@media (max-width: 640px) {
  .cm-datepicker__day.cm-datepicker__day--available:not(.is-selected)::after {
    width: 0.34rem;
    height: 0.34rem;
    bottom: 0.16rem;
  }
  .booking-datepicker-legend {
    font-size: 0.74rem;
    margin-top: 0.4rem;
  }
}

/* --- §3.1 Mobile booking — datepicker en bottom sheet --------
   Sur les petits écrans, le popup datepicker collait avec la
   bande de navigation (Retour / Continuer) et avec le select
   Heure en dessous : on le convertit en **bottom sheet** fixe
   (overlay modal light) — l'élément sort du flow et ne pousse
   plus rien. Un `::before` sert de backdrop qui désactive le
   fond (tap-to-close est géré par le JS existant via blur/focus).
   ------------------------------------------------------------- */
@media (max-width: 640px) {
  .cm-datepicker.is-open {
    /* On augmente le z-index à un niveau modal. */
    z-index: 1000;
  }

  .cm-datepicker__pop {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 82vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0 !important;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%) !important;
    transition:
      transform var(--ds-dur-med) var(--ds-ease-spring),
      opacity var(--ds-dur-fast) var(--ds-ease-snap);
    z-index: 1001 !important;
  }
  .cm-datepicker.is-open .cm-datepicker__pop {
    transform: translateY(0) !important;
  }

  /* Backdrop sombre derrière le sheet — via pseudo injecté sur
     l'élément racine `.cm-datepicker.is-open`. */
  .cm-datepicker.is-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 12, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    animation: ds-fade-in var(--ds-dur-fast) var(--ds-ease-snap) both;
    pointer-events: none;
  }

  /* Même traitement pour les sélecteurs custom (niveau, etc.)
     → popup plein largeur, pas clippé. */
  .booking__form .cm-custom-select.is-open .cm-custom-select__panel {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0 !important;
    padding: 0.85rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1001 !important;
  }
}

/* --- §3.2 Mobile booking — navigation (Retour / Continuer) ---
   Les boutons s'empilent à plat, pleine largeur ; Continuer
   reste au-dessus de Retour pour l'ergonomie pouce. */
@media (max-width: 540px) {
  .booking__nav {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.6rem;
  }
  .booking__nav .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Mobile: garantir espace entre champs et nav ------------- */
@media (max-width: 640px) {
  .booking-step {
    /* Espace entre le dernier champ et le bandeau nav pour
       éviter que le bouton Retour ne colle au clavier ou aux
       champs quand on ferme le datepicker. */
    padding-bottom: 0.5rem;
  }
  .booking-subpanel + .booking-subpanel,
  .booking-subpanel + .booking__nav,
  .booking-mode-banner + .booking-subpanel {
    margin-top: 1rem;
  }
}