/* ═══════════════════════════════════════════════════════════════════════════════
   StudioBooking — couche Motion UI de la page publique de réservation (25/09/2026)
   Mêmes jetons de mouvement que le tableau de bord (admin-motion.css). Purement visuel :
   aucune logique de réservation, de prix, d'acompte ni de paiement n'est modifiée.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root{
  --m-ease:cubic-bezier(.22,1,.36,1);
  --m-t-micro:170ms; --m-t-hover:220ms; --m-t-trans:300ms; --m-t-modal:300ms; --m-t-in:440ms;
  --m-bleu:#6EA8FF; --m-vert:#3ECF8E; --m-violet:#A78BFA; --m-cyan:#22D3EE; --m-orange:#F5A524; --m-rouge:#F87171;
  --m-acc:var(--sbp-principale,#3ECF8E);
}
@keyframes mMonteFondu{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mEtape{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes mFondu{from{opacity:0}to{opacity:1}}
@keyframes mPop{0%{transform:scale(.86)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes mCoche{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes mRespire{from{transform:scale(1.035)}to{transform:scale(1)}}
@keyframes mAnneau{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--m-acc) 55%,transparent)}100%{box-shadow:0 0 0 22px color-mix(in srgb,var(--m-acc) 0%,transparent)}}
@keyframes mFlash{0%{color:var(--m-acc);text-shadow:0 0 18px color-mix(in srgb,var(--m-acc) 60%,transparent)}100%{text-shadow:none}}

/* ── Hero : apparition en cascade, photo qui « respire » à l'arrivée ─────────── */
html.sbp #sbp-fond i{animation:mRespire 1.4s var(--m-ease) both}
html.sbp #sbp-hero :is(.topbar-logo,.sbp-kicker,.sbp-titre,.sbp-baseline,.sbp-desc,.sbp-meta,.sbp-prochain){animation:mMonteFondu var(--m-t-in) var(--m-ease) both}
html.sbp #sbp-hero .sbp-kicker{animation-delay:40ms} html.sbp #sbp-hero .sbp-titre{animation-delay:110ms}
html.sbp #sbp-hero .sbp-baseline{animation-delay:180ms} html.sbp #sbp-hero .sbp-desc{animation-delay:230ms}
html.sbp #sbp-hero .sbp-meta{animation-delay:280ms} html.sbp #sbp-hero .sbp-prochain{animation-delay:340ms}
html.sbp .topbar{animation:mFondu 360ms var(--m-ease) both}
html.sbp :is(.studios-section,#events-section,#rules-sec){animation:mMonteFondu 520ms var(--m-ease) 380ms both}

/* ── Cartes studios / événements : flottent au survol, halo de la couleur du studio ─ */
html.sbp :is(.studio-card,.ev-card){transition:transform var(--m-t-hover) var(--m-ease),box-shadow var(--m-t-trans) var(--m-ease),border-color var(--m-t-hover) var(--m-ease),background-color var(--m-t-hover) var(--m-ease) !important}
html.sbp .studio-card .studio-img{overflow:hidden}
html.sbp .studio-card .studio-img img{transition:transform 600ms var(--m-ease)}
html.sbp .studio-card .btn-select{transition:filter var(--m-t-hover) var(--m-ease),box-shadow var(--m-t-hover) var(--m-ease),transform 160ms var(--m-ease) !important}
@media (hover:hover) and (pointer:fine){
  html.sbp :is(.studio-card,.ev-card):not(#m1):not(#m2):not(#m3):hover{transform:translateY(-4px) scale(1.01) !important;
    border-color:color-mix(in srgb,var(--m-acc) 50%,rgba(255,255,255,.3)) !important;
    box-shadow:0 20px 44px -24px rgba(0,0,0,.6),0 26px 80px -22px color-mix(in srgb,var(--m-acc) 45%,transparent) !important}
  html.sbp .studio-card:hover .studio-img img{transform:scale(1.05)}
  html.sbp .studio-card:hover .btn-select{filter:brightness(1.08);box-shadow:0 12px 30px -12px var(--m-acc) !important}
}
html.sbp :is(.studio-card,.ev-card):not(#m1):active{transform:scale(.985) !important;transition-duration:90ms !important}

/* ── Fenêtre de réservation : barre de progression, étapes ──────────────────── */
html.sbp .booking-card{position:relative}
#m-progres{position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;pointer-events:none}
#m-progres b{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--m-acc) 60%,transparent),var(--m-acc));
  box-shadow:0 0 12px color-mix(in srgb,var(--m-acc) 70%,transparent);transition:width 480ms var(--m-ease)}
.m-etape{animation:mEtape var(--m-t-trans) var(--m-ease) both}
html.sbp .booking-card .step-pill{transition:background-color var(--m-t-trans) var(--m-ease),border-color var(--m-t-trans) var(--m-ease),color var(--m-t-trans) var(--m-ease) !important}
html.sbp .booking-card .step-pill.done .snum{display:inline-block;animation:mCoche 360ms var(--m-ease) both}

/* ── Options (type, durée, ingénieur) : réaction au survol, sélection franche ── */
html.sbp .booking-card :is(.type-opt,.dur-opt,.eng-opt,.slot,.cal-day){transition:background-color var(--m-t-micro) var(--m-ease),border-color var(--m-t-micro) var(--m-ease),transform var(--m-t-micro) var(--m-ease),box-shadow var(--m-t-hover) var(--m-ease) !important}
@media (hover:hover) and (pointer:fine){
  html.sbp .booking-card :is(.type-opt,.dur-opt,.eng-opt):not(.active):not(.selected):hover{transform:translateY(-2px)}
  html.sbp .booking-card .slot:not(.taken):not(.selected):hover{transform:translateY(-1px);box-shadow:0 8px 22px -12px color-mix(in srgb,var(--m-acc) 70%,transparent) !important}
  html.sbp .booking-card .cal-day:not(.disabled):not(.empty):not(.fully-booked):not(.selected):hover{transform:scale(1.07);background:rgba(255,255,255,.2) !important}
}
html.sbp .booking-card :is(.type-opt,.dur-opt,.eng-opt,.slot:not(.taken),.cal-day:not(.disabled):not(.empty)):not(#m1):active{transform:scale(.96);transition-duration:80ms !important}
html.sbp .booking-card :is(.type-opt.active,.type-opt.selected,.dur-opt.active,.dur-opt.selected,.eng-opt.active,.slot.selected,.cal-day.selected):not(#m1):not(#m2){
  box-shadow:0 0 0 1px var(--m-acc),0 10px 30px -12px color-mix(in srgb,var(--m-acc) 75%,transparent) !important;animation:mPop 320ms var(--m-ease)}
/* créneau choisi : petite coche animée */
html.sbp .booking-card .slot{position:relative}
html.sbp .booking-card .slot.selected::after{content:"✓";position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:var(--m-acc);color:var(--sbp-sur-principale,#062B1A);animation:mCoche 280ms var(--m-ease) both;box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}
html.sbp .booking-card .slot.taken{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--m-rouge) 60%,transparent)}
/* calendrier : aujourd'hui discret, complet gris-rouge léger */
html.sbp .booking-card .cal-day{position:relative}
html.sbp .booking-card .cal-day.today::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--m-acc);transform:translateX(-50%)}
html.sbp .booking-card .cal-day.fully-booked:not(#m1){background:color-mix(in srgb,var(--m-rouge) 10%,transparent) !important;border-color:color-mix(in srgb,var(--m-rouge) 25%,transparent) !important;text-decoration:line-through}

/* ── Prix : le montant s'illumine quand il change ───────────────────────────── */
.m-flash{animation:mFlash 700ms var(--m-ease)}
#ps-total,#ps-deposit,.recap .rv{font-variant-numeric:tabular-nums}

/* ── Formulaire : focus premium, validation instantanée ─────────────────────── */
html.sbp .booking-card :is(.fc,.fc-inline,input,select,textarea){transition:border-color var(--m-t-micro) var(--m-ease),box-shadow var(--m-t-hover) var(--m-ease),background-color var(--m-t-micro) var(--m-ease) !important}
html.sbp .booking-card :is(.fc,.fc-inline,input:not([type=checkbox]):not([type=radio]),select,textarea):not(#m1):not(#m2):focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--m-acc) 28%,transparent) !important;border-color:var(--m-acc) !important}
html.sbp .booking-card .fc.m-ok:not(#m1):not(#m2){border-color:color-mix(in srgb,var(--m-vert) 70%,transparent) !important;padding-right:38px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ECF8E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:16px 16px !important}
html.sbp .booking-card .fc.m-err:not(#m1):not(#m2){border-color:color-mix(in srgb,var(--m-rouge) 75%,transparent) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--m-rouge) 16%,transparent) !important}
.m-aide{font-size:12px;margin-top:6px;color:var(--m-rouge);animation:mMonteFondu 220ms var(--m-ease) both}

/* ── Boutons : luminosité, pression, état « traitement en cours » ──────────── */
html.sbp .booking-card .btn-next{transition:transform 160ms var(--m-ease),filter var(--m-t-hover) var(--m-ease),box-shadow var(--m-t-hover) var(--m-ease) !important}
@media (hover:hover) and (pointer:fine){html.sbp .booking-card .btn-next:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 14px 34px -14px var(--m-acc) !important}}
html.sbp .booking-card .btn-next:not(:disabled):active{transform:scale(.98);transition-duration:80ms !important}
html.sbp .booking-card .btn-next:disabled{cursor:progress;position:relative;overflow:hidden;filter:saturate(.9)}
html.sbp .booking-card .btn-next:disabled::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-100%);animation:mBalaye 1.1s var(--m-ease) 6}
@keyframes mBalaye{to{transform:translateX(100%)}}
#m-securite{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0 4px;font-size:12.5px;color:var(--sbp-texte-2,rgba(255,255,255,.72));animation:mFondu 400ms var(--m-ease) both}
#m-securite svg{flex:none;color:var(--m-vert)}
#m-securite b{color:var(--sbp-texte,#fff);font-weight:600}

/* ── État vide des créneaux ─────────────────────────────────────────────────── */
#m-vide{grid-column:1/-1;padding:18px 16px;border-radius:14px;border:1px dashed rgba(255,255,255,.22);text-align:center;animation:mMonteFondu 300ms var(--m-ease) both}
#m-vide b{display:block;color:var(--sbp-texte,#fff);font-size:14px;font-weight:600}
#m-vide span{display:block;color:var(--sbp-texte-2,rgba(255,255,255,.72));font-size:12.5px;margin-top:4px}
#m-vide button{margin-top:12px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--m-acc);background:color-mix(in srgb,var(--m-acc) 18%,transparent);color:var(--sbp-texte,#fff);font:600 13px/1 inherit;font-family:inherit;cursor:pointer}

/* ── Récapitulatif collant (ordinateur) et barre du bas (mobile) ─────────────── */
#m-resume{position:fixed;right:24px;top:50%;width:280px;z-index:40;padding:20px;border-radius:22px;color:var(--sbp-texte,#fff);
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.6);transform:translate(16px,-50%);opacity:0;pointer-events:none;transition:opacity var(--m-t-trans) var(--m-ease),transform var(--m-t-trans) var(--m-ease)}
#m-resume.vu{opacity:1;transform:translate(0,-50%);pointer-events:auto}
#m-resume h4{margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sbp-texte-2,rgba(255,255,255,.72));font-weight:600}
#m-resume .l{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1)}
#m-resume .l span:first-child{color:var(--sbp-texte-2,rgba(255,255,255,.72))}
#m-resume .t{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
#m-resume .t b{font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#m-resume .a{font-size:12px;color:var(--sbp-texte-2,rgba(255,255,255,.72));margin-top:2px;text-align:right}
#m-resume button{margin-top:14px;width:100%;height:46px;border:0;border-radius:999px;background:var(--m-acc);color:var(--sbp-sur-principale,#062B1A);font:600 14px/1 inherit;font-family:inherit;cursor:pointer;transition:transform 160ms var(--m-ease),filter var(--m-t-hover) var(--m-ease)}
#m-resume button:hover{filter:brightness(1.07);transform:translateY(-1px)} #m-resume button:active{transform:scale(.98)}
@media (max-width:1359px){#m-resume{display:none}}
#m-barre{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;
  color:var(--sbp-texte,#fff);background:rgba(20,20,24,.72);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);transform:translateY(140%);transition:transform var(--m-t-trans) var(--m-ease)}
#m-barre.vu{transform:none}
#m-barre .p{flex:1;min-width:0;line-height:1.15} #m-barre .p b{display:block;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums} #m-barre .p span{font-size:11.5px;color:rgba(255,255,255,.7)}
#m-barre button{height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--m-acc);color:var(--sbp-sur-principale,#062B1A);font:600 14px/1 inherit;font-family:inherit;white-space:nowrap}
#m-barre button:active{transform:scale(.97)}
@media (min-width:761px){#m-barre{display:none}}

/* ── Confirmation : cercle → coche, puis récapitulatif progressif ────────────── */
#bs-ok .success-icon{animation:mPop 520ms var(--m-ease) both;border-radius:50%}
#bs-ok .success-icon svg{animation:mCoche 420ms var(--m-ease) 180ms both}
#bs-ok .success-icon{box-shadow:0 0 0 0 transparent}
#bs-ok.m-ok .success-icon{animation:mPop 520ms var(--m-ease) both,mAnneau 900ms var(--m-ease) 200ms 1}
#bs-ok :is(h2,#ok-subtitle,.ref-box,#ok-ref-note,#m-conf){animation:mMonteFondu var(--m-t-in) var(--m-ease) both}
#bs-ok h2{animation-delay:240ms} #bs-ok #ok-subtitle{animation-delay:300ms} #bs-ok .ref-box{animation-delay:360ms} #bs-ok #ok-ref-note{animation-delay:400ms} #bs-ok #m-conf{animation-delay:460ms}
#m-conf{margin:18px auto 6px;max-width:420px;text-align:left;border-radius:18px;padding:16px 18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--sbp-texte,#fff)}
#m-conf .l{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1)}
#m-conf .l:last-of-type{border-bottom:0}
#m-conf .l span:first-child{color:var(--sbp-texte-2,rgba(255,255,255,.72))}
#m-conf .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#m-conf .actions :is(a,button){flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.1);color:var(--sbp-texte,#fff);font:600 13px/1 inherit;font-family:inherit;text-decoration:none;cursor:pointer;transition:background-color var(--m-t-micro) var(--m-ease),transform 160ms var(--m-ease)}
#m-conf .actions :is(a,button):hover{background:rgba(255,255,255,.2)} #m-conf .actions :is(a,button):active{transform:scale(.97)}
@media print{body *{visibility:hidden !important}#bs-ok,#bs-ok *{visibility:visible !important;color:#000 !important;-webkit-text-fill-color:#000 !important}#bs-ok{position:absolute;inset:0}#m-conf .actions,#bs-ok button{display:none !important}}

/* ── Mouvement réduit ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;animation-delay:0ms !important;transition-duration:1ms !important}
  html.sbp :is(.studio-card,.ev-card):hover{transform:none !important}
}

/* ═══ 25/09 (2) : SYSTÈME DE BOUTONS — Neutre → Survol → Clic → Sélectionné (couleur principale + ✓) → Validé (vert) → Erreur (rouge doux) ═══ */
:root{--m-succes:#3ECF8E;--m-erreur:#F87171}
/* sélection : coche en tête du libellé, apparition 0.7 → 1 */
@keyframes mCocheIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
html.sbp .booking-card .slot.selected::after{content:none !important}
html.sbp .booking-card .slot.selected::before,
html.sbp .booking-card :is(.type-opt.selected,.type-opt.active) .type-label::before,
html.sbp .booking-card :is(.dur-opt.selected,.dur-opt.active) .dur-label::before{content:"✓";display:inline-block;margin-right:6px;font-weight:700;color:var(--sbp-texte,#fff);animation:mCocheIn 200ms var(--m-ease) both}
html.sbp .booking-card .eng-opt.active{position:relative}
html.sbp .booking-card :is(.eng-opt.active,.cal-day.selected)::before{content:"✓";position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;
  background:var(--m-acc);color:var(--sbp-sur-principale,#062B1A);box-shadow:0 3px 10px -3px rgba(0,0,0,.5);animation:mCocheIn 200ms var(--m-ease) both;z-index:1}
/* état sélectionné : fond + bordure + texte de la couleur principale du studio, léger glow */
html.sbp .booking-card :is(.type-opt.active,.type-opt.selected,.dur-opt.active,.dur-opt.selected,.eng-opt.active,.slot.selected,.cal-day.selected):not(#m1):not(#m2):not(#m3){
  background:color-mix(in srgb,var(--m-acc) 30%,transparent) !important;border-color:var(--m-acc) !important;color:var(--sbp-texte,#fff) !important}
/* studio choisi : carte marquée + bouton « ✓ Sélectionné » */
html.sbp .studio-card.selected:not(#m1):not(#m2):not(#m3){border-color:var(--m-acc) !important;box-shadow:0 0 0 1px var(--m-acc),0 22px 60px -26px color-mix(in srgb,var(--m-acc) 60%,transparent) !important}
html.sbp .studio-card.selected .btn-select:not(#m1){font-size:0 !important}
html.sbp .studio-card.selected .btn-select:not(#m1)::before{content:"✓ Sélectionné";font-size:14px;font-weight:600;animation:mCocheIn 200ms var(--m-ease) both}
/* étapes franchies = validées (vert) */
html.sbp .booking-card .step-pill.done:not(#m1):not(#m2):not(#m3){background:color-mix(in srgb,var(--m-succes) 22%,transparent) !important;border-color:color-mix(in srgb,var(--m-succes) 55%,transparent) !important;color:var(--sbp-texte,#fff) !important}
/* CTA d'étape : Validation… → ✓ Validé (vert, seulement si l'étape a réellement avancé) → erreur douce */
.m-spin{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mTourne .7s linear infinite}
@keyframes mTourne{to{transform:rotate(360deg)}}
html.sbp .booking-card .btn-next.m-charge{pointer-events:none;filter:brightness(.97)}
html.sbp .booking-card :is(.btn-next,#pay-btn,#free-btn,#req-btn).m-erreur:not(#m1){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-erreur) 70%,transparent) !important;animation:none}
#m-valide{position:absolute;left:50%;top:14px;z-index:5;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:999px;
  background:var(--m-succes);color:#062B1A;font:700 12.5px/1 inherit;font-family:inherit;box-shadow:0 10px 26px -10px rgba(62,207,142,.8);animation:mValide 1.3s var(--m-ease) both;pointer-events:none}
@keyframes mValide{0%{opacity:0;transform:translate(-50%,-6px) scale(.9)}14%{opacity:1;transform:translate(-50%,0) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-4px)}}
#m-erreur-msg{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 14px;border-radius:12px;font-size:13px;color:var(--sbp-texte,#fff);
  background:color-mix(in srgb,var(--m-erreur) 14%,transparent);border:1px solid color-mix(in srgb,var(--m-erreur) 45%,transparent);animation:mMonteFondu 240ms var(--m-ease) both}
#m-erreur-msg i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--m-erreur);color:#2a0b0b;font-weight:800;font-size:12px;flex:none}
/* options sous forme de div : cible tactile confortable + focus clavier visible */
html.sbp .booking-card :is(.type-opt,.dur-opt,.eng-opt,.slot){min-height:44px}
html.sbp .booking-card :is(.type-opt,.dur-opt,.eng-opt,.slot,.cal-day):focus-visible{outline:2px solid var(--m-acc);outline-offset:2px}
.m-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.sbp .booking-card .slot.selected:not(#m1){display:inline-flex !important;flex-direction:row !important;align-items:center;justify-content:center;gap:0}