/* ══════════════════════════════════════════════════════════════════════════ StudioBooking — direction artistique « Nexa » pour tout le site public (accueil, inscription, blog, villes, pages légales, page de réservation). Même langage que l'admin (admin-nexa.css) : noir profond, verre, chrome, boutons pilule, touches de vert StudioBooking #3ECF8E. Chargée en dernier dans : elle ne fait que surcharger. ══════════════════════════════════════════════════════════════════════════ */ html:not([data-theme="light"]){ --bg:#070809; --bg-2:#0A0B0D; --bg2:rgba(255,255,255,0.03); --bg3:rgba(255,255,255,0.045); --bg4:rgba(255,255,255,0.07); --panel:rgba(255,255,255,0.03); --panel-2:rgba(255,255,255,0.045); --soft:rgba(255,255,255,0.04); --border:rgba(255,255,255,0.075); --border-soft:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.13); --line:rgba(255,255,255,0.075); --fg:#F4F4F5; --ink:#F4F4F5; --white:#F4F4F5; --muted:rgba(244,244,245,0.58); --dim:rgba(244,244,245,0.55); --dim2:rgba(244,244,245,0.38); --sbx-card:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.014) 100%); --sbx-card-h:linear-gradient(180deg,rgba(255,255,255,0.065) 0%,rgba(255,255,255,0.022) 100%); --sbx-line:rgba(255,255,255,0.075); --sbx-line-2:rgba(255,255,255,0.14); --sbx-green:#3ECF8E; } /* ── Fond ──────────────────────────────────────────────────────────────── */ html:not([data-theme="light"]) body{ background: radial-gradient(1100px 520px at 50% -10%,rgba(255,255,255,0.06),transparent 62%), radial-gradient(800px 560px at 100% 100%,rgba(62,207,142,0.06),transparent 60%), #070809 !important; background-attachment:fixed !important; } /* ── Typographie ───────────────────────────────────────────────────────── */ html:not([data-theme="light"]) h1{letter-spacing:-0.045em !important;font-weight:600 !important} html:not([data-theme="light"]) h2{letter-spacing:-0.03em !important} /* ── Navigation ────────────────────────────────────────────────────────── */ html:not([data-theme="light"]) body > header, html:not([data-theme="light"]) body > nav, html:not([data-theme="light"]) .nav{ background:rgba(7,8,9,0.72) !important; backdrop-filter:blur(20px) saturate(160%) !important;-webkit-backdrop-filter:blur(20px) saturate(160%) !important; border-bottom:1px solid var(--sbx-line) !important;box-shadow:none !important; } /* ── Boutons principaux → pilule blanche ──────────────────────────────── */ html:not([data-theme="light"]) .btn-green, html:not([data-theme="light"]) .btn-cta, html:not([data-theme="light"]) .btn-cta-article, html:not([data-theme="light"]) .btn-submit, html:not([data-theme="light"]) .nav-cta, html:not([data-theme="light"]) .mh-btn, html:not([data-theme="light"]) .m-cta, html:not([data-theme="light"]) a.btn{ background:#FFFFFF !important;color:#08090B !important;border:none !important;border-radius:999px !important; font-weight:500 !important;box-shadow:0 12px 34px -14px rgba(255,255,255,0.45) !important; transition:background .2s,transform .2s,box-shadow .2s !important; } html:not([data-theme="light"]) .btn-green:hover, html:not([data-theme="light"]) .btn-cta:hover, html:not([data-theme="light"]) .btn-cta-article:hover, html:not([data-theme="light"]) .btn-submit:hover, html:not([data-theme="light"]) .nav-cta:hover, html:not([data-theme="light"]) .mh-btn:hover, html:not([data-theme="light"]) a.btn:hover{ background:#E9E9EC !important;transform:translateY(-1px);box-shadow:0 16px 44px -14px rgba(255,255,255,0.55) !important; } /* Boutons secondaires → pilule en verre */ html:not([data-theme="light"]) .btn-ghost, html:not([data-theme="light"]) .btn-sec{ background:rgba(255,255,255,0.04) !important;color:var(--fg) !important;border:1px solid var(--sbx-line-2) !important; border-radius:999px !important; } html:not([data-theme="light"]) .btn-ghost:hover, html:not([data-theme="light"]) .btn-sec:hover{background:rgba(255,255,255,0.08) !important} /* ── Cartes → verre ────────────────────────────────────────────────────── */ html:not([data-theme="light"]) .card, html:not([data-theme="light"]) .blog-card, html:not([data-theme="light"]) .feat-card, html:not([data-theme="light"]) .cta-band, html:not([data-theme="light"]) .cta-inline, html:not([data-theme="light"]) .booking-card, html:not([data-theme="light"]) .studio-card, html:not([data-theme="light"]) .ev-card, html:not([data-theme="light"]) .ticket-modal{ background:var(--sbx-card) !important;border:1px solid var(--sbx-line) !important;border-radius:18px !important; box-shadow:0 30px 80px -40px rgba(0,0,0,0.9) !important; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } html:not([data-theme="light"]) .card:hover, html:not([data-theme="light"]) .blog-card:hover, html:not([data-theme="light"]) .feat-card:hover, html:not([data-theme="light"]) .studio-card:hover, html:not([data-theme="light"]) .ev-card:hover{ background:var(--sbx-card-h) !important;border-color:var(--sbx-line-2) !important; } html:not([data-theme="light"]) .card .ico{ background:rgba(62,207,142,0.10) !important;border:1px solid rgba(62,207,142,0.24) !important;color:var(--sbx-green) !important; border-radius:12px !important; } /* Badges / étiquettes → pilule fine */ html:not([data-theme="light"]) .hero-badge, html:not([data-theme="light"]) .tag, html:not([data-theme="light"]) .step-pill{ border-radius:999px !important;background:rgba(255,255,255,0.04) !important;border:1px solid var(--sbx-line) !important; } html:not([data-theme="light"]) .hero-badge{color:var(--sbx-green) !important;border-color:rgba(62,207,142,0.28) !important;background:rgba(62,207,142,0.06) !important} /* Champs */ html:not([data-theme="light"]) input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), html:not([data-theme="light"]) select, html:not([data-theme="light"]) textarea{ background:rgba(255,255,255,0.03) !important;border:1px solid var(--sbx-line) !important;border-radius:12px !important; } html:not([data-theme="light"]) input:focus, html:not([data-theme="light"]) select:focus, html:not([data-theme="light"]) textarea:focus{ border-color:rgba(62,207,142,0.5) !important;box-shadow:0 0 0 3px rgba(62,207,142,0.10) !important;outline:none !important; } /* Pied de page */ html:not([data-theme="light"]) body > footer, html:not([data-theme="light"]) footer{background:transparent !important;border-top:1px solid var(--sbx-line) !important} /* ── Accueil : halo du héros plus discret, façon verre ─────────────────── */ .hero .mesh b{opacity:.45 !important;filter:blur(90px) !important} .hero h1 .grad{ background:linear-gradient(180deg,#F4F4F5 0%,var(--sbx-green) 120%) !important; -webkit-background-clip:text !important;background-clip:text !important;color:transparent !important; } /* ── Page de réservation client ──────────────────────────────────────── Les boutons gardent la couleur choisie par le studio (--primary), mais prennent la forme pilule et la lumière de la nouvelle DA. */ html:not([data-theme="light"]) .btn-next, html:not([data-theme="light"]) .btn-select, html:not([data-theme="light"]) .btn-reserve, html:not([data-theme="light"]) #pay-btn, html:not([data-theme="light"]) #ticket-pay-btn, html:not([data-theme="light"]) .ev-btn{ background:var(--primary) !important;border:none !important;border-radius:999px !important; box-shadow:0 14px 40px -16px var(--primary),0 1px 0 rgba(255,255,255,0.25) inset !important; font-weight:500 !important; } html:not([data-theme="light"]) .btn-next:not(:disabled):hover, html:not([data-theme="light"]) .btn-select:hover, html:not([data-theme="light"]) #pay-btn:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px)} html:not([data-theme="light"]) .btn-back{border-radius:999px !important} html:not([data-theme="light"]) .studio-img{background:linear-gradient(160deg,#0B0C0E,#16171B) !important} html:not([data-theme="light"]) .type-opt:not(.selected):not(.active):not(.taken):not(.disabled):not(.empty), html:not([data-theme="light"]) .dur-opt:not(.selected):not(.active):not(.taken):not(.disabled):not(.empty), html:not([data-theme="light"]) .slot-btn:not(.selected):not(.active):not(.taken):not(.disabled):not(.empty), html:not([data-theme="light"]) .eng-opt:not(.selected):not(.active):not(.taken):not(.disabled):not(.empty), html:not([data-theme="light"]) .cal-day:not(.selected):not(.active):not(.taken):not(.disabled):not(.empty){ border-radius:14px !important;border-color:var(--sbx-line) !important;background:rgba(255,255,255,0.025) !important; } html:not([data-theme="light"]) .slot-btn:not(.selected):not(.active):not(.taken):not(.disabled):not(.empty){border-radius:999px !important} html:not([data-theme="light"]) .recap{background:rgba(255,255,255,0.025) !important;border:1px solid var(--sbx-line) !important;border-radius:16px !important} html:not([data-theme="light"]) .studio-price-badge{border-radius:999px !important} /* ── Inscription : panneau du formulaire en verre ─────────────────────── */ html:not([data-theme="light"]) .right-panel{ background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015)) !important; border-left:1px solid var(--sbx-line) !important; backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); } html:not([data-theme="light"]) .plan-opt, html:not([data-theme="light"]) .billing-switch, html:not([data-theme="light"]) .bseg, html:not([data-theme="light"]) .booking-link-box{ background:rgba(255,255,255,0.03) !important;border-color:var(--sbx-line) !important;border-radius:14px !important; } html:not([data-theme="light"]) .bseg button{border-radius:999px !important} html:not([data-theme="light"]) .bseg button.on{background:#FFFFFF !important;color:#08090B !important} html:not([data-theme="light"]) .price{background:var(--sbx-card) !important;border:1px solid var(--sbx-line) !important;border-radius:20px !important} /* ── Accueil : la maquette du tableau de bord reprend l'admin actuel ──── */ html:not([data-theme="light"]) .mock, html:not([data-theme="light"]) .mockup{background:#08090B !important;border:1px solid var(--sbx-line-2) !important;border-radius:18px !important;box-shadow:0 60px 140px -50px rgba(0,0,0,0.95),0 0 0 1px rgba(255,255,255,0.03) inset !important} html:not([data-theme="light"]) .mock-bar .url{background:rgba(255,255,255,0.04) !important;border-radius:999px !important} html:not([data-theme="light"]) .mock-side{background:#0A0B0D !important;border-right:1px solid var(--sbx-line) !important} html:not([data-theme="light"]) .mstat, html:not([data-theme="light"]) .mock-cal, html:not([data-theme="light"]) .mock-chart, html:not([data-theme="light"]) .mrow, html:not([data-theme="light"]) .pv-row{ background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012)) !important; border:1px solid var(--sbx-line) !important;border-radius:14px !important; } html:not([data-theme="light"]) .cal-grid span{background:rgba(255,255,255,0.04) !important} html:not([data-theme="light"]) #mobile-menu{background:rgba(7,8,9,0.96) !important;backdrop-filter:blur(20px)} /* ══ Menu et pied de page communs (identiques à l'accueil) ═════════════ Balisage posé par StudioBook-prive/outils/unifier_menu_pied.py. Classes sbh-/sbf- pour ne jamais hériter des anciens styles de page. */ .sbh{position:sticky;top:0;z-index:60;background:rgba(7,8,9,0.72);border-bottom:1px solid rgba(255,255,255,0.075); backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%); font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;letter-spacing:-0.01em} .sbh-nav{display:flex;align-items:center;gap:28px;height:64px;max-width:1216px;margin:0 auto;padding:0 24px;position:relative;box-sizing:border-box} .sbh-logo{display:flex;align-items:center;gap:9px;font-weight:500;font-size:15px;letter-spacing:-0.02em;color:#F4F4F5 !important;text-decoration:none !important} .sbh-logo img{width:26px;height:26px;border-radius:7px;display:block;object-fit:contain} .sbh-links{display:flex;gap:24px;margin-left:8px} .sbh-links a,.sbh-login{font-size:14px;color:rgba(244,244,245,0.72) !important;text-decoration:none !important;transition:color .15s} .sbh-links a:hover,.sbh-login:hover{color:#F4F4F5 !important} .sbh-right{margin-left:auto;display:flex;align-items:center;gap:16px} .sbh-cta{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;border-radius:999px; background:#FFFFFF !important;color:#08090B !important;font-size:14px;font-weight:500;text-decoration:none !important;white-space:nowrap; box-shadow:0 12px 34px -14px rgba(255,255,255,0.45);transition:background .2s,transform .2s} .sbh-cta:hover{background:#E9E9EC !important;transform:translateY(-1px)} .sbh-burger{display:none;margin-left:auto} .sbh-burger summary{list-style:none;cursor:pointer;width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:center} .sbh-burger summary::-webkit-details-marker{display:none} .sbh-burger summary span{display:block;width:20px;height:1.5px;background:#F4F4F5;border-radius:2px;transition:transform .2s,opacity .2s} .sbh-burger[open] summary span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .sbh-burger[open] summary span:nth-child(2){opacity:0} .sbh-burger[open] summary span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .sbh-mobile{position:absolute;left:0;right:0;top:64px;padding:8px 24px 20px;background:rgba(7,8,9,0.97); border-bottom:1px solid rgba(255,255,255,0.075);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .sbh-mobile a{display:block;padding:12px 0;font-size:15px;color:rgba(244,244,245,0.8) !important;text-decoration:none !important;border-bottom:1px solid rgba(255,255,255,0.06)} .sbh-mobile .sbh-cta{display:flex;width:100%;margin-top:16px;height:46px;border-bottom:none} @media (max-width:880px){.sbh-links,.sbh-right{display:none}.sbh-burger{display:block}} .sbf{border-top:1px solid rgba(255,255,255,0.075);padding:60px 0 40px;margin-top:80px;background:transparent; font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;letter-spacing:-0.01em;text-align:left} .sbf-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;max-width:1216px;margin:0 auto;padding:0 24px;box-sizing:border-box} .sbf-brand .sbh-logo{margin-bottom:14px} .sbf-brand p{font-size:13.5px;color:rgba(244,244,245,0.45);max-width:260px;line-height:1.6;margin:0} .sbf-col h5{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:500;color:#F4F4F5;text-transform:uppercase;letter-spacing:.03em;margin:0 0 16px} .sbf-col a{display:block;font-size:14px;color:rgba(244,244,245,0.58) !important;padding:6px 0;text-decoration:none !important;transition:color .15s} .sbf-col a:hover{color:#3ECF8E !important} .sbf-bottom{max-width:1216px;margin:48px auto 0;padding:24px 24px 0;border-top:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(244,244,245,0.45);box-sizing:border-box} .sbf-bottom a{color:rgba(244,244,245,0.58) !important;text-decoration:none !important} .sbf-bottom a:hover{color:#3ECF8E !important} @media (max-width:880px){.sbf-grid{grid-template-columns:1fr 1fr;gap:32px}.sbf-brand{grid-column:1/-1}} /* Boutons de contenu : une seule taille partout (celle du bouton du héros de l'accueil) */ html:not([data-theme="light"]) .btn-cta, html:not([data-theme="light"]) .btn-cta-article, html:not([data-theme="light"]) .btn-sec, html:not([data-theme="light"]) a.btn, html:not([data-theme="light"]) .btn-lg{ display:inline-flex !important;align-items:center;justify-content:center;gap:8px; min-height:44px !important;padding:0 22px !important;font-size:15px !important;letter-spacing:-0.01em; } .sbh-mobile{background:#070809 !important;box-shadow:0 30px 60px -20px rgba(0,0,0,0.9)} .sbh-mobile a.sbh-cta{color:#08090B !important;justify-content:center} /* Accueil : bande de confiance sous le bouton principal */ .sb-confiance{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:22px auto 0;padding:0;max-width:760px} .sb-confiance li{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:rgba(244,244,245,0.72)} .sb-confiance svg{width:16px;height:16px;fill:none;stroke:#3ECF8E;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}