/* Menu du haut : sous-menu « Informations » (Horaires / Tarifs, FAQ) */
.nav-links .nav-sub { list-style: none; margin: 0; padding: 0; }

/* Mobile : le sous-menu est toujours déplié, légèrement en retrait */
@media (max-width: 899px) {
    .nav-links .nav-sub li { border-top: 1px solid rgba(255,255,255,.06); }
    .nav-links .nav-sub a { padding: 0.75rem 0 0.75rem 1.2rem; font-size: 0.85rem; opacity: .85; }
    .nav-links .nav-sub a.is-current { color: var(--gold, #C49849); opacity: 1; }
}

/* Ordinateur : menu déroulant au survol (ou au clavier) */
@media (min-width: 900px) {
    .nav-links .has-sub { position: relative; }
    .nav-links .nav-sub {
        display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
        min-width: 100%; width: max-content; padding: 1.1rem 0 0; z-index: 50;
    }
    .nav-links .nav-sub::before { /* zone de survol continue entre le lien et le panneau */
        content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.1rem;
    }
    .nav-links .has-sub:hover > .nav-sub,
    .nav-links .has-sub:focus-within > .nav-sub { display: block; }
    .nav-links .nav-sub li {
        padding: 0; background: rgba(12,12,10,.92); border: 1px solid rgba(196,152,73,.35); border-top: 0;
    }
    .nav-links .nav-sub li:first-child { border-top: 1px solid rgba(196,152,73,.35); }
    .nav-links .nav-sub a, .site-header--overlay .nav-links .nav-sub a {
        display: block; padding: 0.85rem 1.4rem; font-size: 0.78rem; letter-spacing: 0.16em; line-height: 1.2;
        white-space: nowrap; text-align: center; color: #fff;
    }
    .nav-links .nav-sub a:hover, .nav-links .nav-sub a.is-current { color: var(--gold, #C49849); }
    .site-header--overlay .nav-links .nav-sub a::after { display: none; }
}

/* Menu à droite (ordinateur et mobile) */
@media (min-width: 900px) {
    .site-header--overlay .site-nav { grid-template-columns: auto 1fr; }
    .site-header--overlay .nav-links { grid-column: 2; justify-self: end; justify-content: flex-end; }
}
@media (max-width: 899px) {
    .site-nav.is-open .nav-links {
        left: auto; right: -1rem; width: min(82vw, 340px); text-align: right;
        border-left: 1px solid rgba(196,152,73,.3);
    }
    .nav-links .nav-sub a { padding-left: 0; padding-right: 1.2rem; }
}

/* « Informations » : simple déclencheur du sous-menu (pas de page) */
.nav-links .nav-parent { cursor: pointer; }
@media (min-width: 900px) {
    .nav-links .has-sub.is-open > .nav-sub { display: block; }
}

/* Menu mobile v2 : panneau pleine largeur, alignement à gauche, sans majuscules, croix à l'ouverture ;
   « Informations » n'est plus affiché : Horaires / Tarifs et FAQ sont des entrées à part entière. */
@media (max-width: 899px) {
    .site-header:has(.site-nav.is-open) { background: rgba(7,24,29,.96); }
    .site-nav.is-open .nav-links {
        left: -1rem; right: -1rem; width: auto; text-align: left; border-left: 0;
        background: rgba(7,24,29,.97); padding: .25rem 1.25rem .75rem;
        border-top: 1px solid rgba(241,230,210,.12);
    }
    .nav-links li, .nav-links .nav-sub li { border-top: 0; border-bottom: 1px solid rgba(241,230,210,.12); }
    .nav-links li:last-child { border-bottom: 0; }
    .nav-links .has-sub { border-bottom: 0; }
    .nav-links .nav-parent { display: none; }
    .nav-links a, .nav-links .nav-sub a {
        font-family: var(--font-body, 'Work Sans', sans-serif); font-weight: 400; font-size: 1.05rem; letter-spacing: .02em;
        text-transform: none; padding: 1rem 0; opacity: 1; color: #f1e6d2;
    }
    .nav-links a[aria-current="page"], .nav-links .nav-sub a.is-current { color: var(--gold, #C49849); }

    /* Bouton : trois traits, puis croix */
    .nav-toggle { font-size: 0; position: relative; width: 44px; height: 44px; }
    .nav-toggle::before, .nav-toggle::after { content: ""; position: absolute; left: 9px; right: 9px; height: 2px; background: #f1e6d2; border-radius: 2px; }
    .nav-toggle::before { top: 14px; box-shadow: 0 8px 0 #f1e6d2; }
    .nav-toggle::after { top: 30px; }
    .nav-toggle[aria-expanded="true"]::before { top: 21px; box-shadow: none; transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }
}

/* Menu ordinateur v2 : logo image à gauche, liens à plat (Accueil, Soirées, Horaires & Tarifs, FAQ, Contact) à droite */
.site-logo-img { display: none; }
@media (min-width: 900px) {
    .site-header { position: fixed; transition: background .25s ease, box-shadow .25s ease; }
    .site-header--overlay { background: linear-gradient(rgba(7,24,29,.85), rgba(7,24,29,0)); }
    .site-header--overlay.is-scrolled { background: rgba(7,24,29,.96); box-shadow: 0 2px 14px rgba(0,0,0,.45); }
    .site-header--overlay .site-nav { height: 76px; padding: 0 clamp(1.5rem, 3vw, 2.75rem); }
    .site-header--overlay .nav-links { gap: 1.7rem; }
    .site-header--overlay .nav-links a {
        font-family: var(--font-body, 'Work Sans', sans-serif); font-weight: 500; font-size: 1.02rem; letter-spacing: .01em;
        text-transform: none; color: #f1e6d2; line-height: 1.2;
    }
    .site-header--overlay .nav-links a:hover, .site-header--overlay .nav-links a[aria-current="page"] { color: var(--gold, #C49849); }
    .site-header--overlay .nav-links a[aria-current="page"]::after { display: none; }
}

/* Mobile : l'en-tête (logo + burger) suit le défilement */
@media (max-width: 899px) {
    html { scroll-padding-top: 4rem; }
    .site-header { position: fixed; transition: background .25s ease, box-shadow .25s ease; }
    .site-header.is-scrolled { background: rgba(7,24,29,.96); box-shadow: 0 2px 14px rgba(0,0,0,.45); }
}

/* ---- Habillage commun v3 : titres de page, pied de page, bouton retour ---- */
/* Titres de page : centrés, dorés, Bodoni Moda italique (comme l'accueil) */
.site-content--inner h1, .page-head h1 {
    font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0;
    color: var(--gold, #C49849); text-align: center; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.12;
    margin: 0 0 1.4rem; text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.site-content--inner .page-head { text-align: center; }

/* Pied de page : tout en doré, mention alcool plus petite */
.site-footer, .site-footer a, .site-footer .footer-brand span, .site-footer .footer-info, .site-footer .footer-sep { color: var(--gold, #C49849); }
.site-footer a:hover, .site-footer a:focus-visible { color: #e3c47d; }
.site-footer .footer-legal { font-size: .68rem; opacity: .85; line-height: 1.4; }
@media (min-width: 900px) { .site-footer .footer-legal { font-size: calc(var(--u) * 14); min-height: 0; } }

/* Bouton retour (fiche soirée, ordinateur) */
.back-btn { display: none; }
@media (min-width: 900px) {
    .back-btn {
        display: inline-block; margin: 0 0 1.2rem; padding: .6rem 1.3rem; border: 1px solid var(--gold, #C49849); border-radius: 999px;
        color: var(--gold, #C49849); background: rgba(14,18,10,.6); text-decoration: none; font-family: var(--font-display, 'Raleway', sans-serif);
        font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; transition: background .2s, color .2s;
    }
    .back-btn:hover, .back-btn:focus-visible { background: var(--gold, #C49849); color: #1E2017; }
}

/* Pied de page : le nom « LA PLAGE » reste blanc comme dans l'en-tête */
.site-footer .footer-brand, .site-footer .footer-brand span { color: #fff; }

/* Boutons de commande centrés (Continuer, Passer au paiement, Confirmer, retours…) */
.checkout-form .btn-buy, .checkout-form button[type="submit"], .checkout-form .btn-buy-secondary,
.site-content--inner > .btn-buy, .site-content--inner > p > .btn-buy, .site-content--inner > a.btn-buy {
    display: block; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: center;
}
.locker-confirm-bar { justify-content: center; text-align: center; }
.locker-confirm-bar .btn-buy { margin-left: auto; margin-right: auto; }

/* Pied de page : 5 icônes (Instagram, Wyylde, Facebook, SpicyMatch, Gleese) */
@media (min-width: 900px) {
    .site-footer .footer-social { left: 78.5%; gap: calc(var(--u) * 17); }
    .site-footer .footer-social img { width: calc(var(--u) * 50); }
}
.footer-social { flex-wrap: wrap; justify-content: center; }