@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

/* =========================================================
   FORMULAIRE DE RÉSERVATION — CSS FUSIONNÉ (base + overrides)
   - Scope strict au module via .booking-scope
   - Plein écran natif & pseudo‑fullscreen sans bandes noires
   - Calendrier #booking-scheduler stylé et cliquable
   - Dédoublonnage + nettoyage des règles
   ========================================================= */

/* -------- Thème & tokens -------- */
.booking-scope{
  --surface:#0f0f10; --surface-2:#151516; --surface-3:#1b1b1c;
  --text:#f2f2f2; --muted:#9ea0a6; --border:#232325; --shadow:0 12px 30px rgba(0,0,0,.55);
  --gold:#c7a75d; --gold-600:#b3924e; --gold-700:#9a7e40;
  --indigo:#7aa2ff; --ok:#18a673; --warn:#ff9f2e; --danger:#e34f4f;
  --r:12px; --r-lg:16px;
  --sticky-top: clamp(8px, 1.5vw, 24px);
  /* élargi pour occuper plus d'espace sur desktop */
  --content-max: clamp(1200px, 92vw, 1600px);

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* =========================
   LAYOUT
   ========================= */
.booking-main{ padding:32px clamp(20px,5vw,40px) 64px; display:block; }

.booking-scope .booking-container{
  /* laisse respirer la page mais autorise la largeur */
  max-width: none;
  margin-left:auto;
  margin-right:auto;
  padding-inline: clamp(20px,3vw,40px);
  padding-top: clamp(24px,2.5vw,48px);
  padding-bottom: clamp(40px,3vw,72px);
}

.booking-scope .layout-responsive{
  display:grid; gap: clamp(12px, 1.2vw, 24px);
  grid-template-columns: minmax(0, 1fr);
  justify-content:center; align-items:start;
}

.booking-scope .booking-content{
  min-width:0; width:100%; max-width:var(--content-max);
  margin-left:auto; margin-right:auto;
  display:flex; flex-direction:column; gap:24px;
}

/* largeur et centrage francs du bloc étape */
.booking-scope .booking-step{ width:100%; max-width:var(--content-max); margin-left:auto; margin-right:auto; }

/* Aside masquée mobile, visible desktop */
.booking-scope .booking-aside{ display:none; }
@media (min-width: 1024px){
  /* première colonne = contenu large centré, seconde = aside fixe */
  .booking-scope .layout-responsive:not(.no-aside){ grid-template-columns: minmax(0, var(--content-max)) 420px; justify-content:center; }
  .booking-scope .booking-aside{ display:block; }
}
@media (min-width: 1440px){
  .booking-scope .layout-responsive:not(.no-aside){ grid-template-columns:minmax(0, var(--content-max)) 480px; }
}

/*
 * Lorsque la classe `no-aside` est appliquée au conteneur de mise en page,
 * on souhaite que la grille n’occupe qu’une seule colonne afin de centrer
 * correctement le formulaire. Ce style s’applique quel que soit le point
 * de rupture, y compris en plein écran ou pseudo‑plein écran.
 */
.booking-scope .layout-responsive.no-aside{
  grid-template-columns: 1fr !important;
  justify-content: center;
}
/* Même comportement lorsque la classe est appliquée à `.booking-container`,
   utilisée en mode plein écran et pseudo‑plein écran pour définir la grille. */
.booking-scope .booking-container.no-aside{
  grid-template-columns: 1fr !important;
}

/* Mobile : masquer le hero pour aller droit au formulaire */
@media (max-width: 768px){ .shooting-hero{ display:none !important; } }

/* =========================
   CARTES / BLOCS
   ========================= */
.booking-scope .card,
.booking-scope .booking-step,
.booking-scope .aside-card,
.booking-scope .price-summary,
.booking-scope .final-summary{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}

.booking-scope .booking-step{ padding:clamp(32px,3vw,48px); margin-bottom:24px; border-width:2px; border-color:var(--gold); }
.booking-scope .booking-step.hidden{ display:none; }

.booking-scope h2, .booking-scope h3{ margin:0 0 10px; color:var(--text); font-family:"Playfair Display", serif; }
.booking-scope .booking-step h2{ font-size:clamp(26px,2.4vw,34px); font-weight:600; margin-bottom:24px; }
.booking-scope .booking-step h3{ font-size:clamp(20px,1.6vw,24px); font-weight:500; }

/* =========================
   PROGRESS BAR
   ========================= */
.booking-scope .progress-bar{
  position:sticky; top:var(--sticky-top); z-index:1;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding: 0.75rem 1rem; margin:0 auto 2rem; width:100%; max-width:var(--content-max);
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
}
.booking-scope .progress-step{
  flex:1;
  text-align:center;
  padding:0.5rem 0.75rem;
  font-size:0.875rem;
  font-weight:600;
  border-radius:999px;
  background:var(--surface-3);
  border:2px dashed var(--border);
  color:var(--muted);
  transition:all .2s ease;
  /* Rendre les étapes cliquables : curseur main et événements autorisés */
  cursor: pointer;
  pointer-events: auto;
}
.booking-scope .progress-step.active{ color:var(--text); border-color:var(--gold); }
.booking-scope .progress-step.current{ box-shadow:0 0 0 2px var(--surface-2) inset, 0 0 0 4px rgba(199,167,93,.35); }
/*
 * Sur les très petits écrans (≤480px), la barre de progression est transformée en bandeau
 * fixe en haut de l’écran. Elle ne suit plus le défilement du contenu et occupe toute
 * la largeur de la fenêtre. Les étapes se répartissent sur plusieurs lignes si besoin.
 */
/*
 * Sur les écrans mobiles et tablettes (≤768px), la barre de progression doit
 * rester fixe en haut de l’écran afin de ne pas masquer le formulaire lorsqu’on
 * défile. On étend cette règle au‑delà de 480px pour couvrir les grands
 * téléphones et petites tablettes.
 */
@media (max-width:768px) {
  .booking-scope .progress-bar {
    /* Sur les écrans mobiles, la barre de progression ne doit pas rester au premier
       plan. On la laisse défiler naturellement avec la page en utilisant
       position: static. Aucun top n’est nécessaire puisque le flux la place
       correctement dans le document. */
    position: static !important;
    top: auto !important;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0 0 1rem;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
    flex-wrap: wrap;
    row-gap: 8px;
    z-index: 1;
  }
  .booking-scope .progress-step {
    flex: 1 1 100%;
  }

  /* Ajuster l’espacement en haut du formulaire uniquement lorsque la barre
     est réellement fixée en haut de l’écran. En mode sticky, aucune
     compensation n’est nécessaire. */
  .booking-scope {
    padding-top: 0;
    transform: none !important;
  }
}

/* Bouton plein écran injecté par JS */
.booking-scope .fullscreen-toggle{
  margin-left:auto; display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .875rem; height:36px;
  font-size:.875rem; font-weight:700; color:#fff;
  background:var(--gold); border:2px solid var(--gold); border-radius:999px; box-shadow:var(--shadow);
  cursor:pointer; transition:background .2s, transform .2s;
}
.booking-scope .fullscreen-toggle i{ font-size:1rem; }
.booking-scope .fullscreen-toggle:hover{ background:var(--gold-600); transform:translateY(-2px); }
.booking-scope .fullscreen-toggle:active{ background:var(--gold-700); transform:none; }
@media (max-width:768px){ .booking-scope .fullscreen-toggle{ display:none !important; } }

/* =========================
   SERVICE GRID
   ========================= */
.booking-scope .service-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; align-items:stretch; }
.booking-scope .service-card{
  position:relative; padding:28px 24px; border-radius:16px; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border); box-shadow:0 4px 16px rgba(0,0,0,.45);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; min-height:210px;
  transition:transform .25s, box-shadow .25s, border-color .25s, background .25s; color:var(--text); cursor:pointer;
}
.booking-scope .service-card .service-icon{ font-size:32px; color:var(--gold); }
.booking-scope .service-card h3{ font-family:"Playfair Display", serif; font-weight:500; font-size:clamp(20px,1.6vw,24px); line-height:1.2; margin:0; color:var(--text); }
.booking-scope .service-card p{ color:var(--muted); margin:0; font-size:16px; }
.booking-scope .service-card .service-price{ margin-top:auto; font-weight:600; font-size:16px; color:var(--gold); }
.booking-scope .service-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.55); }
.booking-scope .service-card.selected{ border-color:var(--gold); background:rgba(199,167,93,.08); }
.booking-scope .service-card.selected::after{ content:""; position:absolute; inset:0; border-radius:16px; box-shadow:0 0 0 3px rgba(199,167,93,.35); pointer-events:none; }

/* =========================
   FORM & INPUTS
   ========================= */
.booking-scope .form-group{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.booking-scope .form-group.full-width{ grid-column:1 / -1; }
.booking-scope .form-grid{ display:grid; grid-template-columns:1fr; gap:clamp(20px,2vw,32px); }
.booking-scope label{ font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--text); }
.booking-scope .required{ color:var(--danger); }

/* Anti-zoom iOS + tailles tactiles confortables */
.booking-scope input[type="text"],
.booking-scope input[type="number"],
.booking-scope input[type="email"],
.booking-scope input[type="tel"],
.booking-scope input[type="date"],
.booking-scope input[type="time"],
.booking-scope select,
.booking-scope textarea{
  width:100%; max-width:100%; min-height:56px; padding:16px 20px; border-radius:16px;
  border:2px solid var(--border); background:var(--surface-3); color:var(--text);
  outline:none; transition:border-color .18s, box-shadow .18s; font-size:16px;
}
.booking-scope ::placeholder{ color:var(--muted); opacity:.85; }
.booking-scope textarea{ resize:vertical; min-height:100px; }
.booking-scope input:focus, .booking-scope textarea:focus, .booking-scope select:focus{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(199,167,93,.18); }
.booking-scope input:invalid, .booking-scope textarea:invalid, .booking-scope select:invalid{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(227,79,79,.2); }
.booking-scope .form-group:has(:invalid)>label{ color:var(--danger); }

/* Étape 2 : grille large + calendrier sticky (desktop) */
#step-2-standard .form-grid{ grid-template-columns:1fr; }
@media (min-width:1100px){
  #step-2-standard .form-grid{ grid-template-columns:minmax(520px,1.25fr) 1fr; column-gap:16px; row-gap:12px; align-items:start; }
  #step-2-standard .form-group:has(#location){ grid-column:1 / 2; }
  #step-2-standard .form-group:has(#duration){ grid-column:1 / 2; max-width:320px; }
  #step-2-standard .form-group.full-width:has(#booking-scheduler){
    grid-column:2 / 3; grid-row:1 / span 10; align-self:start;
    position:sticky; top: calc(var(--sticky-top) + 58px);
    max-height:72dvh; overflow:auto; overscroll-behavior:contain;
  }
}

/* Étape 3 : 2 colonnes desktop */
#step-3 .form-grid{ grid-template-columns:1fr; }
@media (min-width:1100px){
  #step-3 .form-grid{ grid-template-columns:1fr 1fr; column-gap:16px; row-gap:12px; }
  #step-3 .form-group:has(#client-email),
  #step-3 .form-group:has(#ambiance),
  #step-3 .form-group:has(#client-message),
  #step-3 .form-group:has(#reference-file){ grid-column:1 / -1; }
}

/* =========================
   OPTIONS
   ========================= */
.booking-scope .options-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin:10px 0 4px; }
@media (min-width:900px){ .booking-scope .options-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.booking-scope .option-card{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:16px; border:1px solid var(--border); background:var(--surface-2); box-shadow:var(--shadow); transition:border-color .2s, box-shadow .2s, transform .2s; color:var(--text); }
.booking-scope .option-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.booking-scope .option-card.selected{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(199,167,93,.35) inset; }
.booking-scope .option-card input[type="checkbox"]{ appearance:none; width:46px; height:26px; border-radius:999px; background:#3a3a3c; position:relative; outline:none; border:1px solid var(--border); transition:background .2s; flex-shrink:0; accent-color:var(--gold); }
.booking-scope .option-card input[type="checkbox"]::after{ content:""; width:20px; height:20px; border-radius:50%; background:#fff; position:absolute; top:50%; left:3px; transform:translateY(-50%); box-shadow:0 2px 6px rgba(0,0,0,.45); transition:left .2s; }
.booking-scope .option-card input[type="checkbox"]:checked{ background:var(--gold); }
.booking-scope .option-card input[type="checkbox"]:checked::after{ left:23px; }
.booking-scope .option-content{ display:flex; align-items:center; gap:10px; width:100%; }
.booking-scope .option-content i{ font-size:18px; color:var(--indigo); }
.booking-scope .option-texts{ display:flex; flex-direction:column; gap:2px; }
.booking-scope .option-texts .title{ font-weight:600; }
.booking-scope .option-texts .hint{ color:var(--muted); font-size:12px; }
.booking-scope .option-price{ margin-left:auto; font-weight:700; white-space:nowrap; }

/* =========================
   RÉSUMÉS / ASIDE
   ========================= */
.booking-scope .aside-card{ position:sticky; top:var(--sticky-top); padding: clamp(16px, 1.6vw, 22px); max-height: calc(100dvh - var(--sticky-top) - 24px); overflow:auto; }
.booking-scope .aside-card h3{ padding-bottom:8px; border-bottom:1px dashed var(--border); margin-bottom:10px; }
.booking-scope .aside-total{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); }
.booking-scope .aside-total span, .booking-scope .aside-total strong{ color:#fff; }

.booking-scope .price-summary, .booking-scope .final-summary{ padding:16px; position:relative; z-index:0; }
.booking-scope .price-breakdown p{ margin:6px 0; color:var(--text); opacity:.9; font-size:14px; }
.booking-scope .total-price{ margin-top:10px; display:flex; justify-content:space-between; align-items:center; font-size:16px; }
.booking-scope .final-summary h3{ margin:0 0 10px; }
.booking-scope .final-total{ margin-top:12px; display:flex; justify-content:space-between; align-items:center; font-size:18px; font-weight:800; }

/* Totaux en or */
.booking-scope .total-price [id^="total-price"],
.booking-scope [data-total],
.booking-scope #final-total-price,
.booking-scope [data-final="total"]{ color:var(--gold); font-weight:800; }

/* =========================
   BOUTONS
   ========================= */
.booking-scope .btn{ display:inline-flex; gap:8px; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; border:1px solid transparent; font-weight:700; transition:transform .15s, background .2s, box-shadow .2s; }
.booking-scope .btn:hover{ transform:translateY(-1px); }
.booking-scope .btn:active{ transform:translateY(0); }
.booking-scope .btn-primary{ background:var(--gold); color:#fff; }
.booking-scope .btn-primary:hover{ background:var(--gold-600); }
.booking-scope .btn-primary:active{ background:var(--gold-700); }
.booking-scope .btn-secondary{ background:var(--surface-3); color:var(--text); border-color:var(--border); }
.booking-scope .btn-secondary:hover{ background:#222; }
.booking-scope .btn-success{ background:#1f9468; color:#fff; }
.booking-scope .btn-success:hover{ background:#177c57; }
.booking-scope .step-actions{ display:flex; justify-content:space-between; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
@media (max-width:768px){ .booking-scope .step-actions{ position: sticky; bottom: calc(env(safe-area-inset-bottom, 0) + 0px); background: linear-gradient(180deg, transparent, rgba(15,15,16,.85) 35%); padding-top: 12px; margin-top: 12px; backdrop-filter: blur(6px); } .booking-scope .step-actions .btn{ width:100%; } }

/* =========================
   CALENDRIER (#booking-scheduler)
   ========================= */
.booking-scope #booking-scheduler{ --cell: 38px; width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:10px; }
.booking-scope #booking-scheduler button{ cursor:pointer; }
.booking-scope .cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:var(--text); }
.booking-scope .cal-title{ font-weight:700; font-family:"Playfair Display", serif; }
.booking-scope .cal-nav{ border:1px solid var(--border); background:var(--surface-3); border-radius:10px; padding:6px 10px; color:var(--text); }
.booking-scope .cal-grid{ display:flex; flex-direction:column; gap:6px; }
.booking-scope .cal-row{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.booking-scope .cal-cell{ height:var(--cell); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--surface-3); font-size:13px; color:var(--text); }
.booking-scope .cal-cell.head{ background:transparent; font-weight:700; color:var(--muted); }
.booking-scope .cal-cell.empty{ background:transparent; border:1px dashed var(--border); }
.booking-scope .day{ position:relative; transition:transform .2s, box-shadow .2s, border-color .2s; }
.booking-scope .day .num{ font-weight:600; }
.booking-scope .day .dot{ position:absolute; width:8px; height:8px; border-radius:50%; bottom:6px; right:6px; }
.booking-scope .dot-free{ background:var(--ok); }
.booking-scope .dot-low{ background:var(--warn); }
.booking-scope .dot-full{ background:var(--danger); }
.booking-scope .day.free{ background:#14261c; }
.booking-scope .day.low{ background:#2a2115; }
.booking-scope .day.full, .booking-scope .day.disabled{ background:#1a1a1a; color:#8f8f8f; cursor:not-allowed; }
.booking-scope .day:not(.disabled):hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.35); }

/* Slots / chips */
.booking-scope #booking-scheduler .slots,
.booking-scope #booking-scheduler .slot-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
.booking-scope #booking-scheduler .slot,
.booking-scope #booking-scheduler .slot-btn,
.booking-scope #booking-scheduler a.slot,
.booking-scope #booking-scheduler button.slot{
  display:inline-flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface-3); color:var(--text);
  text-decoration:none; font-weight:600; font-size:13px; line-height:1; cursor:pointer;
  transition:transform .15s, box-shadow .2s, border-color .2s, background .2s;
}
.booking-scope #booking-scheduler .slot:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.35); }
.booking-scope #booking-scheduler .slot:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(199,167,93,.35); border-color:var(--gold); }
.booking-scope #booking-scheduler a{ color:inherit; text-decoration:none; }
.booking-scope #booking-scheduler a:visited{ color:inherit; }
.booking-scope #booking-scheduler .cap, .booking-scope #booking-scheduler .slot-capacity{ opacity:.85; font-weight:600; font-size:12px; }
.booking-scope #booking-scheduler .is-free{ background:rgba(24,166,115,.12); border-color:rgba(24,166,115,.45); }
.booking-scope #booking-scheduler .is-low { background:rgba(255,159,46,.12); border-color:rgba(255,159,46,.45); }
.booking-scope #booking-scheduler .is-full,
.booking-scope #booking-scheduler .slot[aria-disabled="true"],
.booking-scope #booking-scheduler .slot-btn[disabled]{ background:rgba(227,79,79,.10); border-color:rgba(227,79,79,.45); color:#9a9a9a; cursor:not-allowed; filter:grayscale(.1); }

/*
 * Indicateur de sélection de créneau.
 * Lorsque l’utilisateur choisit une heure, le bouton reçoit la classe
 * `.selected`. On met en avant le créneau sélectionné en changeant
 * la bordure et en ajoutant une légère ombre dorée.
 */
/* Mise en évidence du créneau sélectionné : couleur de fond et bordure dorée
   pour un contraste clair sur les slots. On utilise une légère transparence
   pour conserver la lisibilité du texte. */
.booking-scope #booking-scheduler .slot.selected {
  background: rgba(199, 167, 93, 0.25);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 0 2px rgba(199,167,93,.45);
}

/*
 * Styles pour la légende des créneaux. Les icônes `.chip` n’avaient pas
 * de styles définis auparavant, ce qui rendait les couleurs invisibles.
 * On crée de petits cercles colorés correspondant aux états libre, bientôt
 * complet et complet.
 */
.booking-scope #booking-scheduler .slot-legend .chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}
.booking-scope #booking-scheduler .chip-free { background: var(--ok); }
.booking-scope #booking-scheduler .chip-low  { background: var(--warn); }
.booking-scope #booking-scheduler .chip-full { background: var(--danger); }

/* =========================
   PLEIN ÉCRAN — NATIF & PSEUDO
   ========================= */
/* Natif */
.booking-scope:fullscreen,
.booking-scope:-webkit-full-screen{
  width:100dvw; height:100dvh; margin:0; padding:0; background:var(--surface);
  display:flex; flex-direction:column; overflow:hidden;
}
.booking-scope:fullscreen .booking-container,
.booking-scope:-webkit-full-screen .booking-container{
  flex:1; min-height:0; max-width:none; width:100%; margin:0; padding:20px; box-sizing:border-box;
  display:grid; grid-template-columns:3fr 1fr; gap:20px;
}
.booking-scope:fullscreen .booking-content,
.booking-scope:-webkit-full-screen .booking-content{ min-height:0; height:100%; display:flex; flex-direction:column; overflow:hidden; max-width:none; margin:0; }
.booking-scope:fullscreen .progress-bar,
.booking-scope:-webkit-full-screen .progress-bar{ position:sticky; top:0; z-index:5; }
.booking-scope:fullscreen .booking-step:not(.hidden),
.booking-scope:-webkit-full-screen .booking-step:not(.hidden){ flex:1; min-height:0; margin:0; display:flex; flex-direction:column; overflow:auto; }
.booking-scope:fullscreen .booking-aside .aside-card,
.booking-scope:-webkit-full-screen .booking-aside .aside-card{ position:static; height:100%; overflow:auto; }
@media (max-width:768px){
  .booking-scope:fullscreen .booking-container,
  .booking-scope:-webkit-full-screen .booking-container{ grid-template-columns:1fr; }
  .booking-scope:fullscreen .booking-aside,
  .booking-scope:-webkit-full-screen .booking-aside{ display:none; }
}
@media (min-width:1400px){
  .booking-scope:fullscreen .booking-container,
  .booking-scope:-webkit-full-screen .booking-container{ grid-template-columns:4fr 1.2fr; }
}

/* Pseudo‑fullscreen (fallback JS) */
.booking-scope.pseudo-fullscreen{
  position: fixed; inset: 0; width: 100dvw; height: 100dvh; background: var(--surface);
  margin: 0; padding: 0; z-index: 9999; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
.booking-scope.pseudo-fullscreen .booking-container{ flex:1; min-height:0; max-width:none; width:100%; margin:0; padding:20px; box-sizing:border-box; display:grid; grid-template-columns:3fr 1fr; gap:20px; }
@media (max-width:768px){ .booking-scope.pseudo-fullscreen .booking-container{ grid-template-columns:1fr; } .booking-scope.pseudo-fullscreen .booking-aside{ display:none; } }

/*
 * Dans le mode pseudo‑fullscreen, chaque étape visible du formulaire doit pouvoir
 * défiler lorsque son contenu dépasse la hauteur de l’écran.  Le sélecteur
 * ci‑dessous reproduit les règles appliquées en fullscreen natif afin de
 * garantir une expérience cohérente : l’étape occupe toute la hauteur
 * disponible, adopte une disposition en colonne et autorise le défilement.
 */
.booking-scope.pseudo-fullscreen .booking-step:not(.hidden){
  flex: 1;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

/* Assurer que la carte du résumé dans l’aside reste scrollable en pseudo‑FS */
.booking-scope.pseudo-fullscreen .booking-aside .aside-card{
  position: static;
  height: 100%;
  overflow: auto;
}

/* Supprimer les paddings/marges hérités du conteneur principal en pseudo‑FS */
.booking-main.pseudo-fullscreen{ padding:0 !important; margin:0 !important; }

/* Verrouillage scroll uniquement sur mobile quand on force le FS via JS */
body.mobile-fullscreen { height: 100dvh; overflow: hidden; }
/* Desktop : laisser le scroll normal */
html, body { height: auto; overflow: auto; }

/* =========================
   QUALITÉ DE VIE
   ========================= */
.booking-scope *{ scrollbar-width:thin; scrollbar-color:#4a4a4a transparent; }
.booking-scope *::-webkit-scrollbar{ height:10px; width:10px; }
.booking-scope *::-webkit-scrollbar-thumb{ background:#3a3a3a; border-radius:10px; }
.booking-scope *::-webkit-scrollbar-track{ background:transparent; }

.booking-scope input[type="file"]{ padding:10px 12px; background:var(--surface-3); border:1px solid var(--border); border-radius:12px; }

/* Focus visible accessible */
.booking-scope :focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; border-radius:8px; }

/* Tactile & reduced motion */
@media (hover:none){ .booking-scope .service-card:hover, .booking-scope .option-card:hover{ transform:none; box-shadow:var(--shadow); } }
@media (prefers-reduced-motion:reduce){ .booking-scope *{ transition:none !important; animation:none !important; } }

/* Utilitaires */
.booking-scope .slot-empty, .booking-scope .zone-info, .booking-scope .option-texts .hint { color: var(--muted); }
.booking-scope .full-height{ height:100dvh; }
.hidden{ display:none !important; }

/*
 * Réorganisation de la mise en page pour les écrans d’ordinateur intermédiaires.
 * Lorsque la largeur de l’écran est comprise entre 1024px et 1280px, la
 * colonne de résumé (aside) peut comprimer la colonne principale. Pour
 * améliorer la lisibilité, on masque l’aside et on laisse le formulaire
 * occuper toute la largeur disponible.  Au‑delà de 1280px, on affiche
 * l’aside normalement.
 */
@media (min-width: 1024px) and (max-width: 1280px) {
  .booking-scope .layout-responsive:not(.no-aside) {
    grid-template-columns: 1fr !important;
  }
  .booking-scope .booking-aside {
    display: none !important;
  }
}

/* Footer links alignés avec le thème */
footer a{ color:#cccccc; text-decoration:none; transition:color .3s ease; }
footer a:hover{ color:#ffffff; }