/* app.css — identité visuelle La Plage (maquette du graphiste)
   Conventions : la composition "bureau" (>= 900px) reproduit le PSD (1780px de large)
   proportionnellement : --u = 1 pixel de la maquette, quelle que soit la largeur d'écran. */

/* --- Polices auto-hébergées (libres : SIL OFL). Pas d'appel à Google Fonts (RGPD). --- */
@font-face { font-family: 'Raleway'; font-weight: 200; font-display: swap; src: url('/assets/fonts/raleway-latin-200-normal.woff2') format('woff2'), url('/assets/fonts/raleway-latin-200-normal.woff') format('woff'); }
@font-face { font-family: 'Raleway'; font-weight: 300; font-display: swap; src: url('/assets/fonts/raleway-latin-300-normal.woff2') format('woff2'), url('/assets/fonts/raleway-latin-300-normal.woff') format('woff'); }
@font-face { font-family: 'Raleway'; font-weight: 400; font-display: swap; src: url('/assets/fonts/raleway-latin-400-normal.woff2') format('woff2'), url('/assets/fonts/raleway-latin-400-normal.woff') format('woff'); }
@font-face { font-family: 'Raleway'; font-weight: 700; font-display: swap; src: url('/assets/fonts/raleway-latin-700-normal.woff2') format('woff2'), url('/assets/fonts/raleway-latin-700-normal.woff') format('woff'); }
@font-face { font-family: 'Raleway'; font-weight: 800; font-display: swap; src: url('/assets/fonts/raleway-latin-800-normal.woff2') format('woff2'), url('/assets/fonts/raleway-latin-800-normal.woff') format('woff'); }
@font-face { font-family: 'Work Sans'; font-weight: 300; font-display: swap; src: url('/assets/fonts/work-sans-latin-300-normal.woff2') format('woff2'), url('/assets/fonts/work-sans-latin-300-normal.woff') format('woff'); }
@font-face { font-family: 'Work Sans'; font-weight: 400; font-display: swap; src: url('/assets/fonts/work-sans-latin-400-normal.woff2') format('woff2'), url('/assets/fonts/work-sans-latin-400-normal.woff') format('woff'); }
@font-face { font-family: 'Bodoni Moda'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/bodoni-moda-latin-400-normal.woff2') format('woff2'), url('/assets/fonts/bodoni-moda-latin-400-normal.woff') format('woff'); }
@font-face { font-family: 'Bodoni Moda'; font-weight: 400; font-style: italic; font-display: swap; src: url('/assets/fonts/bodoni-moda-latin-400-italic.woff2') format('woff2'), url('/assets/fonts/bodoni-moda-latin-400-italic.woff') format('woff'); }
@font-face { font-family: 'Playfair Display'; font-weight: 400; font-style: italic; font-display: swap; src: url('/assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2'), url('/assets/fonts/playfair-display-latin-400-italic.woff') format('woff'); }

@font-face { font-family: 'AstonScript'; src: url('/assets/fonts/AstonScript.woff2') format('woff2'), url('/assets/fonts/AstonScript.woff') format('woff'); font-display: swap; }

/* Adobe Caslon Pro (licence détenue, fichier en attente) : décommenter dès réception.
@font-face { font-family: 'ACaslonPro'; font-weight: 600; src: url('/assets/fonts/ACaslonPro-Semibold.woff2') format('woff2'); font-display: swap; }
*/

:root {
    --u: calc(100vw / 1780);   /* 1 px de la maquette */
    --bg-dark: #0d0d0d;
    --bg-sage: #777E60;
    --gold: #C49849;
    --cream: #f5f0e6;
    --ink: #15130f;
    --sage-text: #878F73;      /* titres discrets de la maquette */
    --sage-body: #8B8F7D;      /* texte courant sur fond sombre */

    --font-display: 'Raleway', sans-serif;
    --font-body: 'Work Sans', sans-serif;
    --font-serif: 'Bodoni Moda', serif;
    --font-script: 'AstonScript', 'Playfair Display', serif;
    --font-caslon: 'ACaslonPro', 'Bodoni Moda', serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;
    background: var(--bg-dark);
    color: var(--cream);
    overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; }
a { color: inherit; text-decoration: none; }

.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* --- En-tête --- */
.site-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10; background: transparent;
    padding: calc(0.85rem + env(safe-area-inset-top, 0px)) 1rem 0.85rem;
}
.site-nav { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.site-logo { display: block; }
.site-logo span { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; }
.nav-toggle { background: none; border: none; color: var(--cream); font-size: 1.5rem; }
.nav-links { list-style: none; display: none; flex-direction: column; width: 100%; padding: 0; margin: 1rem 0 0; }
.nav-links li { padding: 0.5rem 0; }
.nav-links a { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.site-nav.is-open .nav-links {
    display: flex; position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    background: rgba(10,10,8,.97); padding: 0.5rem 1.25rem 1rem;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.site-content { padding: 1rem; max-width: 700px; margin: 0 auto; }
.site-content--full { padding: 0; max-width: none; margin: 0; }
.site-content h1 { margin-bottom: 1.2rem; }

/* --- Hero (accueil) ---
   Téléphone (< 600 px) : composition portrait du même visuel (feuillages des deux côtés, fondu noir vers l'en-tête),
   logo et grande feuille à leur place relative, comme sur la maquette. Toile de 900 x 879 px. */
.hero {
    position: relative; z-index: 2; display: block; height: 0; padding: 0 0 128.56% 0;
    background: #000 url('/assets/img/brand/hero-mobile.webp') center top / 100% 100% no-repeat;
}
.hero-logo { position: absolute; z-index: 2; left: 30%; top: 25%; width: 42%; height: auto; }
/* La bordure de feuillage est désormais intégrée à hero-mobile.webp (fichier du graphiste) :
   plus besoin de la superposer séparément sur mobile (elle reste utilisée telle quelle sur bureau). */
.hero-leaf { display: block; position: absolute; z-index: 1; left: 42%; top: 70%; width: 54%; height: auto; pointer-events: none; }

/* Tablette (600–899 px) : composition paysage de la maquette, sans la feuille suspendue (le contenu dessous est centré) */
@media (min-width: 600px) {
    .hero { padding-bottom: 67.3%; background: #0d0d0d url('/assets/img/brand/hero-bg.webp') center top / 100% 100% no-repeat; }
    .hero-logo { left: 35.73%; top: 37.23%; width: 28.54%; }
    .hero-leaf { display: none; }
}

/* --- Section "Club privé SPA" --- */
.section-spa {
    position: relative;
    z-index: 1;
    /* Fond uni sur mobile : la photo (prévue pour le format bureau) s'étirait et créait une
       coupure visible avant "Nos Soirées". La teinte est calée sur le haut du fond mobile de
       cette section suivante, pour une transition invisible. La vraie photo revient au-delà
       de 900px, où elle est calibrée (cf. plus bas). */
    background: #1b1b17;
    padding: 2rem 1.25rem 3rem;
}
.spa-frame { max-width: 720px; margin: 0 auto; }
.spa-chandelier { display: block; width: 70%; max-width: 320px; margin: 0 auto 1rem; }
.spa-title { font-size: 3rem; line-height: 1.06; color: var(--sage-text); text-align: center; margin-bottom: 1.5rem; }
.spa-chapo { font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--gold); text-align: center; margin: 0 0 1.5rem; }
.spa-body { font-family: var(--font-body); font-weight: 300; font-size: 1rem; line-height: 1.5; color: var(--sage-body); text-align: center; margin: 0 auto 2rem; }
.spa-body p { margin: 0 0 1.4em; }
.spa-circles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.spa-circle {
    width: 150px; height: 150px; border-radius: 50%;
    background: #32392B; color: var(--sage-text);
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-family: var(--font-display);
}
.spa-circle .small { display: block; font-weight: 300; font-size: 1.1rem; line-height: 1; }
.spa-circle .big { display: block; font-weight: 800; font-size: 1.3rem; line-height: 1.1; }

/* --- Section "Nos Soirées" --- */
.section-soirees {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(27,27,23,.08) 0%, rgba(14,18,10,.55) 30%, rgba(14,18,10,.12) 100%), #1b1b17 url('/assets/img/brand/section-soirees-bg-m.webp') center top / cover no-repeat;
    padding: 2.5rem 1rem 3rem;
}
.soirees-eyebrow { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--sage-text); margin: 0; text-align: center; }
.soirees-title { font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: 3.2rem; line-height: 1; color: var(--sage-text); text-align: center; margin: 0 0 1rem; }
.soirees-chapo { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; line-height: 1.3; color: var(--gold); text-align: center; margin: 0 auto 2rem; max-width: 620px; }
.soirees-chapo strong { font-weight: 800; }
.soirees-empty { text-align: center; opacity: 0.8; }
.soirees-track {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem; scrollbar-width: none;
}
.soirees-track::-webkit-scrollbar { display: none; }
.soiree-card {
    flex: 0 0 78%; max-width: 300px; scroll-snap-align: start;
    background: linear-gradient(180deg, rgba(27,22,7,.94), rgba(88,69,33,.9));
    border-radius: 4px; color: #fff; text-align: center;
}
.soiree-card > a { display: flex; flex-direction: column; align-items: center; padding: 1.25rem 1rem 1.5rem; }
.soiree-card-image { display: block; flex: none; width: 170px; height: 170px; border-radius: 50%; background: #6b6b6b center / cover no-repeat; margin: 0 0 1rem; }
.soiree-card-text { display: block; width: 100%; }
.soiree-card-date { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.15; margin-bottom: 0.35rem; }
.soiree-card-name { display: -webkit-box; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.08; margin-bottom: 0.7rem; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.soiree-card-desc { display: -webkit-box; font-family: var(--font-display); font-weight: 300; font-size: 0.8rem; line-height: 1.3; opacity: .85; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.soiree-card-cta { display: block; margin-top: auto; padding-top: 1.3rem; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.soiree-card:first-child { margin-left: auto; }
.soiree-card:last-child { margin-right: auto; }
.soirees-arrow { display: none; }

/* ====== Composition "bureau" : reproduit le PSD (1780 px), proportionnellement ====== */
@media (min-width: 900px) {
    /* En-tête transparent superposé au hero */
    .site-header--overlay { padding: 0; }
    /* Une seule ligne : logo à gauche, liens centrés, tous centrés verticalement sur le même axe */
    .site-header--overlay .site-nav {
        display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
        height: calc(var(--u) * 150); padding: 0 9.6%;
    }
    .site-header--overlay .nav-toggle { display: none; }
    .site-header--overlay .site-logo { grid-column: 1; justify-self: start; }
    .site-header--overlay .site-logo span { font-size: calc(var(--u) * 24); letter-spacing: calc(var(--u) * 9); }
    .site-header--overlay .nav-links {
        grid-column: 2; margin: 0; display: flex; flex-direction: row; justify-content: center;
        width: auto; gap: calc(var(--u) * 45);
    }
    .site-header--overlay .nav-links li { padding: 0; }
    .site-header--overlay .nav-links a {
        position: relative; display: block; line-height: 1; font-size: calc(var(--u) * 18); letter-spacing: calc(var(--u) * 3.5); color: #fff;
    }
    .site-header--overlay .nav-links a[aria-current="page"]::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -12);
        height: calc(var(--u) * 4); background: #fff;
    }

    /* Hero : 1780 x 1198 (fond et logo : voir le bloc 600 px) — la grande feuille déborde sur la section suivante */
    .hero-leaf { display: block; left: 43.76%; top: 59.77%; width: 42.08%; }

    /* Section SPA : 1780 x 1362 */
    .section-spa { padding: 0; background: #1e1f19 url('/assets/img/brand/section-spa-bg.webp') center top / 100% 100% no-repeat; }
    .spa-frame { position: relative; max-width: none; margin: 0; height: 0; padding-bottom: 76.52%; }
    .spa-chandelier { position: absolute; left: 3.43%; top: 0; width: 36.74%; max-width: none; margin: 0; }
    .spa-title { position: absolute; left: 40.67%; top: 5.65%; margin: 0; text-align: left; font-size: calc(var(--u) * 77); line-height: 1.06; }
    .spa-chapo { position: absolute; left: 0; width: 98.8%; top: 31.6%; margin: 0; font-size: calc(var(--u) * 60); line-height: 1; }
    .spa-body { position: absolute; left: 17.7%; width: 64.6%; top: 43.2%; margin: 0; font-size: calc(var(--u) * 22.3); line-height: 1.37; }
    .spa-body p { margin: 0 0 1.37em; }
    .spa-circles { position: absolute; left: 0; right: 0; top: 69.7%; display: block; height: 0; }
    .spa-circle { position: absolute; top: 0; width: 17.92%; height: calc(var(--u) * 319); }
    .spa-circle:nth-child(1) { left: 4.33%; }
    .spa-circle:nth-child(2) { left: 28.82%; }
    .spa-circle:nth-child(3) { left: 53.26%; }
    .spa-circle:nth-child(4) { left: 77.75%; }
    .spa-circle--lg .small { font-size: calc(var(--u) * 60); }
    .spa-circle--lg .big { font-size: calc(var(--u) * 76.5); }
    .spa-circle--md .small, .spa-circle--md .big { font-size: calc(var(--u) * 62); }
    .spa-circle .small, .spa-circle .big { line-height: 1.02; }

    /* Section Soirées : 1780 x 1270 */
    .section-soirees { padding: 0 0 25.84%; background: #3d4331 url('/assets/img/brand/section-soirees-bg.webp') center top / 100% 100% no-repeat; }   /* 1780 x 1730 : la photo se prolonge sous les cartes */
    .soirees-frame { position: relative; height: 0; padding-bottom: 71.35%; }
    .soirees-eyebrow { position: absolute; left: 21%; top: 16.1%; text-align: left; font-size: calc(var(--u) * 91.5); line-height: 1; }
    .soirees-title { position: absolute; left: 30%; top: 19.2%; transform: translateY(-50%); margin: 0; text-align: left; font-size: calc(var(--u) * 179.6); }
    .soirees-chapo { position: absolute; left: 21.35%; width: 53%; top: 30%; margin: 0; max-width: none; font-size: calc(var(--u) * 35.3); line-height: 1.12; }
    .soirees-empty { position: absolute; left: 0; right: 0; top: 55%; font-size: calc(var(--u) * 30); }

    .soirees-track {
        position: absolute; left: 8.71%; top: 45.9%; width: 80.7%; height: 46.1%;
        gap: 1.95%; padding: 0;
    }
    .soiree-card { flex: 0 0 32.03%; max-width: none; height: 100%; position: relative; border-radius: calc(var(--u) * 4); }
    /* Carte (459 x 586 sur la maquette) : cercle, date, nom, 2 lignes de description, "Réservez" calé en bas */
    .soiree-card > a { position: absolute; inset: 0; padding: 6.5% 7% 7.5%; }
    .soiree-card-image { width: 68%; height: auto; aspect-ratio: 1; margin: 0; }
    .soiree-card-text { margin-top: calc(var(--u) * 26); }
    .soiree-card-date { font-size: calc(var(--u) * 23.2); margin-bottom: calc(var(--u) * 8); }
    .soiree-card-name { font-size: calc(var(--u) * 36); margin-bottom: calc(var(--u) * 12); }
    .soiree-card-desc { font-size: calc(var(--u) * 19); }
    .soiree-card-cta { padding-top: 0; font-size: calc(var(--u) * 17); letter-spacing: calc(var(--u) * 1.9); }

    .soirees-arrow {
        display: block; position: absolute; top: 69%; transform: translateY(-50%);
        width: calc(var(--u) * 22); height: calc(var(--u) * 38); padding: 0; background: none; border: 0; cursor: pointer;
    }
    .soirees-arrow svg { width: 100%; height: 100%; fill: none; stroke: #c4c7b8; stroke-width: 3; }
    .soirees-arrow-left { left: 3.82%; }
    .soirees-arrow-right { left: 92.75%; }
    .soirees-arrow:hover svg { stroke: var(--gold); }
}


.event-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.event-card {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #333;
}
.event-card--featured { border-color: #c9a55c; }

.rates-list { list-style: none; padding: 0; }
.rate-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #333;
}
.btn-buy {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    padding: 0.9rem;
    background: #c9a55c;
    color: #000;
    border-radius: 6px;
    font-weight: bold;
}


/* Plan de casiers (front-office) */
.help-text-public { font-size: 0.85rem; color: #ccc; }
.locker-legend {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}
.legend-available { background: #c9a55c; }
.legend-selected { background: #4caf50; }
.legend-unavailable { background: #555; }

.public-locker-canvas {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 420px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: auto;
    margin-bottom: 1rem;
}
.public-locker-box {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #000;
}
.public-locker-box.is-available { background: #c9a55c; cursor: pointer; }
.public-locker-box.is-selected { background: #4caf50; color: #fff; cursor: pointer; }
.public-locker-box.is-unavailable { background: #555; color: #999; cursor: not-allowed; }
.selection-summary { font-weight: bold; min-height: 1.2em; }
.btn-buy-secondary { background: transparent; border: 1px solid #c9a55c; color: #c9a55c; margin-top: 0.6rem; }

/* Tunnel d'achat */
.checkout-form label { display: block; margin-bottom: 1rem; }
.checkout-form input, .checkout-form select, .checkout-form textarea {
    display: block;
    width: 100%;
    padding: 0.7rem;
    margin-top: 0.3rem;
    border-radius: 6px;
    border: 1px solid #444;
    background: #1a1a1a;
    color: #f5f0e6;
    font-family: inherit;
    resize: vertical;
}
.form-error-public {
    background: #3a1a1a;
    color: #e88;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.flash-success-public {
    background: #1e2a20;
    color: #a8cbac;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.checkout-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
}
.checkout-form .checkbox-label input { width: auto; }
.attendee-fieldset {
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.2rem;
}
.attendee-fieldset legend { padding: 0 0.4rem; color: #c9a55c; font-size: 0.9rem; font-weight: 600; }
.attendee-fieldset .form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.attendee-fieldset .form-row label { flex: 1; min-width: 140px; }
.order-summary {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.order-total { font-weight: bold; font-size: 1.1rem; margin-top: 0.5rem; }
.locker-summary { font-size: 0.9rem; color: #c9a55c; margin-bottom: 1rem; }
.promo-applied { color: #4caf50; font-size: 0.9rem; }

.tickets-list { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.5rem 0; }
.ticket-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1.2rem;
    text-align: center;
}
.ticket-qr { background: #fff; padding: 8px; border-radius: 6px; margin: 0.8rem 0; }
.ticket-code { font-size: 0.75rem; color: #888; word-break: break-all; }
.ticket-attendee { font-size: 0.85rem; color: #ddd; margin: 0.2rem 0; }

/* Vérification publique de billet (sans connexion) */
.verif-result {
    padding: 1.25rem;
    border-radius: 8px;
    font-size: 1.15rem;
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.6;
    border: 1px solid #333;
}
.verif-result-idle { background: #1a1a1a; color: #aaa; }
.verif-result-valid { background: #1e2a20; color: #a8cbac; border-color: #6e8f72; }
.verif-result-warning { background: #2e2416; color: #c08a4a; border-color: #c08a4a; }
.verif-result-error { background: #2e1d19; color: #e0a99c; border-color: #b15d4d; }
.verif-camera-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
}
.verif-camera-wrap video { width: 100%; display: block; }
.manual-fallback-public { margin-top: 1.5rem; font-size: 0.9rem; color: #ccc; }
.manual-fallback-public summary { cursor: pointer; color: #c9a55c; }
.manual-fallback-public form { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.manual-fallback-public input { flex: 1; padding: 0.6rem; min-height: 44px; border-radius: 6px; border: 1px solid #444; background: #1a1a1a; color: #f5f0e6; }

/* Carte de résultat (vérification publique) */
.verif-card {
    max-width: 420px;
    margin: 0 auto 1.5rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.verif-banner {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.verif-banner-green { background: #2e7d46; }
.verif-banner-amber { background: #b5842e; }
.verif-banner-red { background: #a33; }
.verif-banner-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    color: #222;
    font-size: 2.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.verif-banner-green .verif-banner-icon { color: #2e7d46; }
.verif-banner-amber .verif-banner-icon { color: #b5842e; }
.verif-banner-red .verif-banner-icon { color: #a33; }
.verif-card-body {
    background: #f3eee3;
    color: #2a2418;
    padding: 1.5rem 1.25rem 1.75rem;
    margin-top: -22px;
    border-radius: 16px 16px 0 0;
    position: relative;
}
.verif-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #ddd3bd;
    font-size: 0.95rem;
}
.verif-label { color: #8a7f65; }
.verif-value { font-weight: 600; text-align: right; }
.verif-box {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: #fff;
    border-left: 4px solid #2e7d46;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin-top: 0.9rem;
}
.verif-box-label { font-size: 0.78rem; color: #8a7f65; }
.verif-box-value { font-size: 1.15rem; font-weight: 700; }
.verif-message { font-size: 1.05rem; font-weight: 600; margin: 0.2rem 0 0.8rem; }
.verif-confirm-btn { width: 100%; margin-top: 1.3rem; }
.verif-confirm-btn.verif-confirm-done { background: #2e7d46; color: #fff; }

/* À partir des écrans desktop, on peut déplier le menu et élargir la grille */
@media (min-width: 768px) {
    .nav-toggle { display: none; }
    .nav-links {
        display: flex;
        flex-direction: row;
        width: auto;
        margin-top: 0;
        gap: 1.5rem;
    }
    .event-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ====== Pages internes : fond feuillage partagé + en-tête ====== */
.page-bg {
    position: fixed; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(10,10,8,.45) 0%, rgba(10,10,8,.72) 55%, rgba(10,10,8,.88) 100%),
        #0d0d0d url('/assets/img/brand/hero-bg-m.webp') center 25% / cover no-repeat;
}
@media (min-width: 900px) {
    .page-bg { background: linear-gradient(180deg, rgba(10,10,8,.45) 0%, rgba(10,10,8,.72) 55%, rgba(10,10,8,.88) 100%), #0d0d0d url('/assets/img/brand/hero-bg.webp') center 25% / cover no-repeat; }
}
.site-content--inner {
    max-width: 700px; margin: calc(5.25rem + env(safe-area-inset-top, 0px)) auto 3rem; padding: 1.75rem 1.5rem;
    background: rgba(13,12,9,.74); border-radius: 6px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.site-content--inner.site-content--wide { max-width: 1320px; background: none; padding: 1rem; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-content--inner h1 { font-size: 2rem; line-height: 1.1; }
.page-head { margin-bottom: 1.5rem; }
.event-muted { color: var(--sage-body); }

/* --- Fiche soirée --- */
.event-page { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.event-poster img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.event-poster-empty {
    aspect-ratio: 4 / 5; border-radius: 4px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(27,22,7,.9), rgba(88,69,33,.75)); box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.event-poster-empty img { width: 42%; height: auto; box-shadow: none; border-radius: 0; opacity: .85; }
.event-info { background: rgba(13,12,9,.78); border-radius: 6px; padding: 1.75rem 1.5rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.event-eyebrow {
    display: block; font-family: var(--font-display); font-weight: 700; font-size: .78rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem;
}
.event-info h1 { font-size: 2.1rem; line-height: 1.05; margin-bottom: 1.1rem; color: var(--cream); }
.event-description { font-family: var(--font-body); font-weight: 300; line-height: 1.7; color: #d8d5c8; margin-bottom: 1.8rem; }
.event-section-title {
    font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--gold); margin: 0 0 .4rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(196,152,73,.45);
}
.rates-list { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.rate-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid rgba(245,240,230,.12); }
.rate-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.rate-label { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--cream); }
.rate-label em { font-style: normal; font-weight: 300; opacity: .75; }
.rate-options { font-family: var(--font-body); font-weight: 300; font-size: .85rem; color: var(--sage-body); }
.rate-price { font-family: var(--font-serif); font-size: 1.5rem; color: var(--gold); white-space: nowrap; }
.event-actions { display: flex; flex-direction: column; gap: .7rem; }
.event-actions .btn-buy { margin: 0; text-align: center; }

/* --- Liste des soirées --- */
.event-list { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.event-list-card { border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, rgba(27,22,7,.94), rgba(88,69,33,.88)); }
.event-list-card > a { display: block; }
.event-list-poster {
    display: block; aspect-ratio: 4 / 5; background-color: #241d0b;
    background-position: center; background-repeat: no-repeat; background-size: cover, 34%;   /* affiche, puis logo en secours */
}
.event-list-cta { display: block; font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.event-list-body { display: block; padding: 1.1rem 1.2rem 1.3rem; text-align: center; }
.event-list-title { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.1; margin: 0 0 .9rem; color: #fff; }

/* --- Boutons (charte) --- */
.btn-buy { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; }

@media (min-width: 700px) {
    .event-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .site-content--inner { margin-top: calc(var(--u) * 190); }
    .site-content--inner.site-content--wide { padding: 0 2rem; }
    .event-page { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; }
    .event-poster { position: sticky; top: 1.5rem; }
    .event-poster img { width: auto; max-width: 100%; max-height: calc(100vh - 3rem); margin: 0 auto; }
    .event-info { padding: 2.4rem 2.4rem 2.6rem; }
    .event-info h1 { font-size: clamp(2.2rem, 3.2vw, 3.3rem); }
    .event-actions { flex-direction: row; }
    .event-actions .btn-buy { flex: 1; }
    .event-list { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}


/* ====== Section Dress Code : vert sauge, titre en script, photo fournie (dress-code.png / .jpg) ====== */
.section-dresscode { position: relative; z-index: 1; background: #777E60; padding: 2.5rem 1.25rem 3rem; }
.dresscode-frame { max-width: 720px; margin: 0 auto; text-align: center; }
.dresscode-title { margin: 0 0 1.5rem; line-height: 1; color: #1E2017; }
.dresscode-le { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; }
.dresscode-script { display: block; font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: 3.3rem; margin-top: -0.25rem; }
.dresscode-photo { display: block; box-shadow: 0 18px 45px rgba(0,0,0,.35); }
.dresscode-photo img { display: block; width: 100%; height: auto; }
.dresscode-logo { display: block; width: 130px; height: auto; margin: 2rem auto 0; }

@media (min-width: 900px) {
    /* Composition bureau : 1780 x 1585 (les positions viennent du PSD) */
    .section-dresscode { padding: 0; background: #777E60 url('/assets/img/brand/section-dresscode-bg.webp') center top / 100% 100% no-repeat; }
    .dresscode-frame { position: relative; max-width: none; margin: 0; height: 0; padding-bottom: 89.04%; text-align: left; }
    .dresscode-title { position: static; margin: 0; }
    .dresscode-le { position: absolute; left: 36.97%; top: 6.56%; font-size: calc(var(--u) * 87.8); line-height: 1; }
    .dresscode-script { position: absolute; left: 0; width: 93.4%; top: 16.2%; transform: translateY(-50%); margin: 0; text-align: center; font-size: calc(var(--u) * 138.7); line-height: 1; }
    .dresscode-photo { position: absolute; left: 22.4%; top: 25.05%; width: 62.6%; }
    .dresscode-logo { display: none; }
}

/* ====== Section Newsletter (PSD N°5) ====== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.section-newsletter {
    position: relative; z-index: 1; padding: 3rem 1.25rem 3.5rem; text-align: center; color: #fff;
    background: linear-gradient(rgba(12,17,12,.62), rgba(12,17,12,.62)), #3d4636 url('/assets/img/brand/section-newsletter-bg-m.webp') center / cover no-repeat;
}
.newsletter-frame { max-width: 640px; margin: 0 auto; }
.newsletter-title { font-size: 1.5rem; line-height: 1.15; margin: 0 0 1rem; color: #fff; text-wrap: balance; }
.newsletter-chapo { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; line-height: 1.4; color: #E3E2D9; margin: 0 0 1.6rem; }
.newsletter-chapo strong { font-weight: 800; color: #fff; }
.newsletter-form { display: flex; flex-direction: column; gap: 0.8rem; }
.newsletter-input {
    width: 100%; height: 3.4rem; padding: 0 1.4rem; border: 1px solid transparent; border-radius: 4px;
    background: rgba(255,255,255,.25); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
}
.newsletter-input::placeholder { color: #fff; opacity: 1; }
.newsletter-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; background: rgba(255,255,255,.32); }
.newsletter-button {
    height: 3.4rem; padding: 0 2rem; border: 0; border-radius: 999px; cursor: pointer;
    background: #9A7A41; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; text-transform: uppercase;
    transition: background .15s;
}
.newsletter-button:hover { background: #ad8c4d; }
.newsletter-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.newsletter-message { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 4px; font-family: var(--font-display); font-weight: 700; }
.newsletter-message--success { background: rgba(20,40,22,.85); color: #cfe8d0; }
.newsletter-message--error { background: rgba(60,20,16,.85); color: #f1c3bb; }
.newsletter-legal { margin: 1rem 0 0; padding: .45rem .9rem; border-radius: 12px; background: rgba(10,14,10,.55); font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.9); }
.newsletter-legal a { text-decoration: underline; }

@media (min-width: 900px) {
    /* Composition bureau : 1780 x 672 */
    .section-newsletter { padding: 0; background: #3d4636 url('/assets/img/brand/section-newsletter-bg.webp') center top / 100% 100% no-repeat; }
    .newsletter-frame { position: relative; max-width: none; margin: 0; height: 0; padding-bottom: 37.75%; }
    .newsletter-title { position: absolute; left: 0; right: 0; top: 15.55%; margin: 0; font-size: calc(var(--u) * 54.2); line-height: 1.1; }
    .newsletter-chapo { position: absolute; left: 0; right: 0; top: 38.4%; margin: 0; font-size: calc(var(--u) * 35.7); line-height: 1.14; }
    .newsletter-message { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; font-size: calc(var(--u) * 24); padding: calc(var(--u) * 8) calc(var(--u) * 26); }
    .newsletter-form { position: absolute; left: 25.6%; top: 66.5%; width: 48.9%; display: block; height: calc(var(--u) * 70); }
    .newsletter-input { position: absolute; left: 0; top: 0; width: 68.7%; height: 100%; padding: 0 calc(var(--u) * 30); font-size: calc(var(--u) * 22.3); border-radius: calc(var(--u) * 4); }
    .newsletter-button { position: absolute; right: 0; top: 0; width: 27.3%; height: 100%; padding: 0; font-size: calc(var(--u) * 20.3); }
    .newsletter-legal { position: absolute; left: 50%; top: 82.5%; transform: translateX(-50%); width: max-content; max-width: 74%; margin: 0; padding: .3em 1.1em; border-radius: 999px; font-size: max(11px, calc(var(--u) * 15.5)); }
}

/* ====== Pied de page ====== */
.site-footer { background: #151B19; color: #fff; padding: 2rem 1.25rem 2.25rem; text-align: center; }
.footer-frame { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.footer-brand { display: flex; align-items: center; gap: 0.9rem; }
.footer-brand img { display: block; height: 54px; width: auto; }
.footer-brand span { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.38em; text-transform: uppercase; line-height: 1; }
.footer-info { font-family: var(--font-display); font-weight: 200; font-size: 0.9rem; line-height: 1.6; }
.footer-info p { margin: 0; }
.footer-info a { transition: color .15s; }
.footer-info a:hover, .footer-info a:focus-visible { color: var(--gold); }
.footer-info a { white-space: nowrap; }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 1.1rem; }
.footer-sep { display: none; margin: 0 0.5em; opacity: .7; }
.footer-legal { margin-top: 0.7rem !important; font-size: 0.8rem; opacity: .8; }
.footer-social { list-style: none; display: flex; gap: 1.1rem; padding: 0; margin: 0; }
.footer-social img { display: block; width: 46px; height: auto; transition: transform .15s; }
.footer-social a:hover img, .footer-social a:focus-visible img { transform: scale(1.08); }

@media (min-width: 1100px) {
    .site-footer { padding: 0; text-align: center; }
    .footer-frame { position: relative; display: block; height: 0; padding-bottom: 12.58%; }   /* 1780 x 224 */
    .footer-brand { position: absolute; left: 8.26%; top: 19.64%; align-items: flex-start; gap: 0; }
    .footer-brand span { margin: calc(var(--u) * 25.6) 0 0 0; font-size: calc(var(--u) * 24); letter-spacing: calc(var(--u) * 9); }
    .footer-info { position: absolute; left: 23.1%; width: 57.4%; top: 29.9%; font-size: calc(var(--u) * 19.9); line-height: 1.4; }
    .footer-legal { margin-top: 0 !important; font-size: inherit; opacity: 1; }
    .footer-contact { display: block; }
    .footer-sep { display: inline; }
    .footer-social { position: absolute; left: 83.76%; top: 24.55%; gap: calc(var(--u) * 29); }
    .footer-social img { width: calc(var(--u) * 57); }
}

/* ====== Page texte (mentions légales) ====== */
.legal-page h1 { margin-bottom: 1.2rem; }
.legal-page h2 { font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin: 1.8rem 0 .5rem; }
.legal-page p, .legal-page li { font-weight: 300; line-height: 1.7; color: #d8d5c8; }
.legal-page a { color: var(--gold); text-decoration: underline; }
.legal-todo { background: rgba(196,152,73,.18); border-radius: 3px; padding: 0 .3em; color: var(--gold); }


/* ====================================================================
   Passe mobile : ergonomie tactile
   ==================================================================== */

/* En-tête : bouton menu et liens confortables au pouce (44 px minimum) */
.nav-toggle { width: 44px; height: 44px; padding: 0; line-height: 44px; text-align: center; font-size: 1.6rem; cursor: pointer; }
.site-logo { padding: 3px 0; }
@media (max-width: 899px) {
    .nav-links li { padding: 0; border-top: 1px solid rgba(255,255,255,.1); }
    .nav-links a { display: block; padding: 0.85rem 0; font-size: 0.95rem; }
}

/* Champs : 16 px minimum (sinon iPhone zoome la page au toucher) et hauteur confortable */
.checkout-form input:not([type="checkbox"]):not([type="radio"]),
.checkout-form select,
.checkout-form textarea,
.manual-fallback-public input { font-size: 16px; min-height: 48px; }
.checkout-form textarea { min-height: 130px; }
.nl-hp input { font-size: 16px; }
.checkout-form .checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; }
.checkout-form .checkbox-label input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; flex: none; margin: 0.1rem 0 0; accent-color: var(--gold); }
.manual-fallback-public summary { padding: 0.8rem 0; min-height: 44px; }
.btn-buy { min-height: 48px; }
@media (max-width: 519px) {
    .attendee-fieldset .form-row { flex-direction: column; gap: 0; }
    .attendee-fieldset .form-row label { min-width: 100%; }
}

/* Pied de page : liens (téléphone, e-mail, mentions) assez hauts pour être touchés */
@media (max-width: 1099px) {
    .footer-info a { display: inline-block; padding: 0.7rem 0.25rem; }
    .footer-contact { gap: 0 1.1rem; }
}

/* Fiche soirée : bouton « Réserver » toujours visible en bas de l'écran sur mobile */
.event-cta-bar { display: none; }
@media (max-width: 899px) {
    .event-cta-bar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        padding: 1.4rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(10,10,8,0), rgba(10,10,8,.94) 45%);
        pointer-events: none;
    }
    .event-cta-bar .btn-buy { display: block; margin: 0; text-align: center; pointer-events: auto; box-shadow: 0 6px 24px rgba(0,0,0,.55); }
    .has-cta-bar .site-footer { padding-bottom: 6rem; }
    .event-actions .btn-buy:not(.btn-buy-secondary) { display: none; }   /* remplacé par la barre fixe */
}

/* Dress Code : lien « en grand » et visualiseur plein écran */
.dresscode-hint { display: none; margin: 1rem 0 0; text-align: center; }
.dresscode-hint a { font-family: var(--font-display); font-weight: 700; letter-spacing: .05em; color: #1E2017; text-decoration: underline; display: inline-block; padding: .7rem .5rem; }
@media (max-width: 899px) { .dresscode-hint { display: block; } }
.dc-viewer { border: 0; padding: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; background: #000; color: #fff; }
.dc-viewer::backdrop { background: rgba(0,0,0,.92); }
.dc-viewer-close { position: fixed; top: .6rem; right: .6rem; z-index: 3; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.dc-viewer-tip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: .6rem 1rem; text-align: center; font-size: .8rem; background: rgba(0,0,0,.65); pointer-events: none; }
.dc-viewer-scroll { width: 100%; height: 100%; overflow: auto; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.dc-viewer-scroll img { display: block; width: max(100vw, 1100px); max-width: none; height: auto; }
@media (min-width: 900px) {
    .dc-viewer-tip { display: none; }
    .dc-viewer-scroll img { width: 100%; margin: 0 auto; }
}

/* Choix du casier : liste par numéro (mobile) + plan ajusté à la largeur */
.lockers-page { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem; background: rgba(13,12,9,.78); border-radius: 6px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lockers-page h1 { font-size: 2rem; line-height: 1.1; margin-bottom: .3rem; }
.locker-picker { margin: 1rem 0 1.5rem; }
.picker-group { margin-bottom: 1.4rem; }
.picker-group-title { display: flex; align-items: center; gap: .55rem; margin: 0 0 .65rem; font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.picker-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.picker-price { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cream); opacity: .85; }
.picker-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: .5rem; }
.picker-chip { min-height: 48px; border: 1px solid transparent; border-radius: 8px; background: #c9a55c; color: #1a1608; font-family: var(--font-display); font-weight: 700; font-size: 1rem; cursor: pointer; }
.picker-chip.is-selected { background: #4caf50; color: #fff; }
.picker-chip.is-unavailable { background: #34342f; color: #8a8a80; text-decoration: line-through; cursor: not-allowed; }
.picker-chip:focus-visible, .public-locker-box:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.locker-plan-wrap { margin: 0 0 1.5rem; }
.locker-plan-wrap > summary { min-height: 44px; padding: .9rem 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; color: var(--gold); }
.locker-zoom { display: flex; gap: .5rem; margin: 0 0 .6rem; }
.locker-zoom button { width: 44px; height: 44px; border: 1px solid rgba(196,152,73,.6); border-radius: 8px; background: transparent; color: var(--gold); font-size: 1.4rem; cursor: pointer; }
.public-locker-viewport { overflow: auto; border: 1px solid #333; border-radius: 8px; background: #1a1a1a; -webkit-overflow-scrolling: touch; }
.public-locker-viewport .public-locker-canvas { max-width: none; overflow: visible; border: 0; border-radius: 0; margin: 0; background: transparent; }
.locker-confirm-bar {
    position: sticky; bottom: 0; z-index: 5; margin: 0 -1.25rem -1.5rem; padding: .8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom, 0px));
    background: rgba(13,12,9,.96); border-top: 1px solid rgba(196,152,73,.3);
}
.locker-confirm-bar .selection-summary { margin: 0 0 .5rem; color: var(--gold); }
.locker-confirm-bar .btn-buy { width: 100%; }
@media (min-width: 900px) {
    .lockers-page { padding: 2rem 2.4rem; margin-top: 0; }
    .locker-picker { display: none; }
    .locker-plan-wrap > summary { display: none; }
    .locker-zoom { display: none; }
    .locker-confirm-bar { position: static; margin: 0; padding: 0; background: none; border: 0; }
    .locker-confirm-bar .btn-buy { width: auto; }
}

/* Page de contrôle des billets : champ + bouton toujours dans l'écran, même à 360 px */
.manual-fallback-public form { flex-wrap: wrap; }
.manual-fallback-public input { min-width: 0; flex: 1 1 180px; }
.manual-fallback-public .btn-buy { flex: 1 1 auto; width: auto; }


/* Téléphone : « Club privé SPA » reprend la disposition de la maquette — lustre réduit en haut à gauche,
   titre dessous, la grande feuille du hero pend dans la colonne de droite. */
@media (max-width: 599px) {
    .section-spa { padding-top: 1.1rem; }
    .spa-frame { display: grid; grid-template-columns: 40% 1fr; align-items: start; }
    .spa-chandelier { grid-column: 1; width: 100%; max-width: none; margin: 0 0 0.35rem; }
    .spa-title { grid-column: 1; text-align: left; font-size: 2.15rem; margin: 0 0 1.6rem; padding-left: 0.2rem; }
    .spa-chapo, .spa-body, .spa-circles { grid-column: 1 / -1; }
}


/* ====================================================================
   Vérification d'âge — superposée à la page déjà rendue (pas de redirection
   ni de page séparée) : Google exempte ce type d'interstitiel légalement
   requis de sa pénalité anti-interstitiel, à condition que le contenu réel
   reste présent dans le HTML pour les robots. C'est le cas ici : le contenu
   de la page est déjà là, la bannière n'est qu'une couche visuelle par-dessus,
   masquée en JS une fois la confirmation enregistrée (cookie, 180 jours).
   ==================================================================== */
html.age-gate-open, html.age-gate-open body { overflow: hidden; height: 100%; }
.age-gate {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; background: rgba(10,10,8,.97);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.age-gate-box {
    max-width: 420px; width: 100%; text-align: center;
    background: var(--ink); border: 1px solid rgba(196,152,73,.35); border-radius: 8px;
    padding: 2.2rem 1.75rem 2rem;
}
.age-gate-logo { width: 110px; height: auto; margin: 0 auto 1.2rem; }
.age-gate-box h1 { font-size: 1.35rem; line-height: 1.25; color: var(--cream); margin-bottom: .9rem; }
.age-gate-box p { font-family: var(--font-body); font-weight: 300; font-size: .92rem; line-height: 1.5; color: var(--sage-body); margin: 0; }
.age-gate-actions { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.6rem; }
.age-gate-actions .btn-buy { display: block; width: 100%; text-align: center; margin: 0; }
.age-gate-leave { font-family: var(--font-display); font-weight: 400; font-size: .8rem; color: rgba(245,240,230,.55); text-decoration: underline; }
.age-gate-leave:hover, .age-gate-leave:focus-visible { color: rgba(245,240,230,.85); }


/* ====== Parallaxe : photos des dames (hero, SPA, Soirées) ======
   Chaque photo est une couche (.px-layer) un peu plus haute que sa section, déplacée au scroll (voir script de l'accueil).
   Dress Code et Newsletter gardent leur fond fixe, inchangé. */
.px-clip { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.px-layer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; will-change: transform; }

.hero { background: #000; }
.hero .px-layer { background-image: url('/assets/img/brand/hero-mobile.webp'); background-position: center top; }

.section-spa { background: #1b1b17; }
.section-spa .px-layer {
    background-image: linear-gradient(180deg, rgba(27,27,23,.72) 0%, rgba(27,27,23,.5) 55%, #1b1b17 100%), url('/assets/img/brand/section-spa-bg.webp');
    background-position: center, 72% 100%;
}

.section-soirees { background: #1b1b17; }
.section-soirees .px-layer {
    background-image: linear-gradient(180deg, rgba(27,27,23,.08) 0%, rgba(14,18,10,.55) 30%, rgba(14,18,10,.12) 100%), url('/assets/img/brand/section-soirees-bg-m.webp');
    background-position: center, center top;
}

@media (min-width: 600px) {
    .hero { background: #0d0d0d; }
    .hero .px-layer { background-image: url('/assets/img/brand/hero-bg.webp'); }
}
@media (min-width: 900px) {
    .section-spa { background: #1e1f19; }
    .section-spa .px-layer { background-image: url('/assets/img/brand/section-spa-bg.webp'); background-position: center top; }
    .section-soirees { background: #3d4331; }
    .section-soirees .px-layer { background-image: url('/assets/img/brand/section-soirees-bg.webp'); background-position: center top; }
}
@media (prefers-reduced-motion: reduce) { .px-layer { top: 0 !important; bottom: 0 !important; transform: none !important; } }


/* ====== Dress Code : la dame en parallaxe (même principe que les sections précédentes) ====== */
.section-dresscode { background: #777E60; }
.section-dresscode .px-layer { background-image: url('/assets/img/brand/section-dresscode-bg.webp'); background-position: 8% center; }
@media (min-width: 900px) {
    .section-dresscode { background: #777E60; }
    .section-dresscode .px-layer { background-position: center top; }
}

/* ====== Transition hero -> SPA : le feuillage du hero se prolonge, assombri, au lieu d'un fond uni ====== */
.section-spa .px-clip::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 240px;
    background: url('/assets/img/brand/hero-mobile.webp') center bottom / 100% auto no-repeat;
    filter: brightness(.55) saturate(.9);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.8) 35%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.8) 35%, transparent 100%);
}
@media (min-width: 600px) { .section-spa .px-clip::after { height: 46%; background-image: url('/assets/img/brand/hero-bg.webp'); background-size: cover; } }