/* ============================================================
   TYPOGRAPHIE : POLICES AUTO-HÉBERGÉES
   Fichiers dans fonts/, à la racine du site (chemins relatifs à
   ce dossier css/). Auto-hébergées pour ne plus dépendre de
   Google Fonts (RGPD : plus d'appel à fonts.googleapis.com /
   fonts.gstatic.com, donc plus d'IP visiteur envoyée à Google
   avant tout consentement). Fichiers variables, sous-jeu latin
   uniquement (couvre FR/EN/IT, y compris les accents et le œ).
   ============================================================ */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-300-500.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-italic-latin-300.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/inter-latin-400-600.woff2') format('woff2');
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/figtree-latin-300-700.woff2') format('woff2');
}

/* ============================================================
   MÉDIAS : LE SEUL BLOC À MODIFIER
   Les fichiers sont dans le dossier img/, à la racine du site.
   Le ../ est nécessaire : cette feuille de style vit dans css/,
   les chemins sont donc relatifs à ce dossier-là.
   Repasser une ligne à none retire l'image : une ambiance
   dessinée prend le relais, sans trou dans la mise en page.
   ============================================================ */
:root{
  /* Club VI */
  --img-hero:    url('../img/accueil-fond.webp');          /* accueil, pleine page   */
  --img-golf:    url('../img/golf.webp?v=2');          /* baie TrackMan          */
  --img-golf2:   url('../img/golf-minijeux.webp'); /* mini-jeux sur la baie  */
  --img-golfkids:url('../img/golfkids.webp');     /* golf en famille        */
  --img-golfforce:url('../img/plaquedeforce.webp'); /* plaques de force pro   */
  --img-golfamateur:url('../img/amateurgolf.webp?v=2'); /* onglet Amateur, golf   */
  --img-darts:   url('../img/darts.webp');         /* cible et écran Scolia  */
  --img-darts-club:url('../img/darts-club.webp?v=2'); /* cible Club VI, carte accueil */
  --img-bar:     url('../img/bar.webp');           /* comptoir et lounge     */
  --img-croque:  url('../img/croque.webp');       /* onglet Croques-monsieur */
  --img-tartine: url('../img/tartine.webp');      /* onglet Tartines        */
  --img-cesar:   url('../img/cesar.webp');         /* onglet Salades         */
  --img-charcuterie: url('../img/charcuterie.webp'); /* onglet Charcuterie   */
  --img-corpo:   url('../img/corpo.webp');         /* entreprises et groupes */

  /* Zero Latency */
  --img-door:    url('../img/zl-door.webp');       /* ce qu'il y a derrière  */
  --img-mosaic-arene:   url('../img/mosaic-arene.webp');   /* scène d'arène en équipe */
  --img-mosaic-famille: url('../img/mosaic-famille.webp'); /* session en famille      */
  --img-mosaic-amis:    url('../img/mosaic-amis.webp');    /* session entre amis      */
  --img-jumanji: url('../img/jumanji.webp?v=2');       /* bandeau d'annonce      */
  --img-zl-pattern: url('../img/zl-pattern.webp'); /* texture back room ZL  */

  /* Key arts des expériences. Affichés en entier, jamais recadrés
     ni retouchés (règles Zero Latency et ayants droit). */
  --xp-outbreak:   url('../img/xp-outbreak.webp');
  --xp-outbreak2:  url('../img/xp-outbreak2.webp');
  --xp-solraiders: url('../img/xp-solraiders.webp');
  --xp-farcry:     url('../img/xp-farcry.webp');
  --xp-warhammer:  url('../img/xp-warhammer.webp');
  --xp-jumanji:    url('../img/xp-jumanji.webp');
  --xp-undeadarena: url('../img/xp-undeadarena.webp');
  --xp-singularity: url('../img/xp-singularity.webp');
  --xp-engineerium: url('../img/xp-engineerium.webp?v=2');
  --xp-haunted:     url('../img/xp-haunted.webp');
  --xp-warhammer-tl: url('../img/xp-warhammer-tl.webp');

  /* Logos */
  --logo-dark:  url('../img/logo-vi-dark.png');    /* fonds clairs  */
  --logo-light: url('../img/logo-vi-light.png');   /* fonds sombres */
  --zl-logo:    url('../img/zl-logo-reversed.png');/* fonds sombres */
}

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* Univers 01 : Virtual Immersion, le Club VI */
  --vi-bg:      #F7F5F2;
  --vi-stone:   #EAE4DB;
  --vi-surface: #FFFFFF;
  --vi-green:   #1F4D3A;
  --vi-green-h: #29684D;
  --vi-cognac:  #A66532;
  --vi-bronze:  #B08D57;
  --vi-ink:     #1F1F1F;
  --vi-ink-2:   #585858;
  --vi-border:  #DDD4C8;
  --vi-dark:    #1B1B1B;
  --vi-cream:   #F6F2EB;

  /* Univers 02 : Zero Latency, la back room */
  --zl-blue: #41C0F0;
  --zl-navy: #00202C;
  --zl-5:    #EFF9FE;
  --zl-red:  #E2574C; /* seul badge "Mode avancé" ; clin d'œil au rouge déjà incrusté dans le key art "THREAT:LETHAL" */

  --display:'Cormorant Garamond','Times New Roman',serif;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Police de marque Zero Latency VR (charte : Sweet Sans Pro indisponible en
     digital -> repli Figtree, puis Arial). Réservée aux blocs qui présentent
     Zero Latency VR (section .zl, transition .threshold, en-tête de la page
     zero-latency.html) -- le reste du site garde Inter. */
  --zl-ui:'Figtree',Arial,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --step--1:clamp(.84rem,.81rem + .12vw,.9rem);
  --step-0: clamp(1rem,.97rem + .15vw,1.08rem);
  --step-1: clamp(1.18rem,1.1rem + .4vw,1.4rem);
  --step-2: clamp(1.6rem,1.35rem + 1.2vw,2.4rem);
  --step-3: clamp(2.2rem,1.6rem + 3vw,4.2rem);
  --step-4: clamp(2.7rem,1.8rem + 4.6vw,6.2rem);

  --gutter:clamp(1.25rem,4vw,3.5rem);
  --measure:62ch;
  --section-y:clamp(5rem,11vh,9.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--vi-bg);color:var(--vi-ink);
  font-family:var(--ui);font-size:var(--step-0);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:300;line-height:1.06;letter-spacing:-.012em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
p{margin:0 0 1.1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--vi-cognac);outline-offset:3px;border-radius:2px}
.wrap{width:min(100% - var(--gutter)*2,1220px);margin-inline:auto}
[id]{scroll-margin-top:92px}
.measure{max-width:var(--measure)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:80;
  background:var(--vi-green);color:#fff;padding:.7rem 1.2rem;border-radius:2px;
  text-decoration:none;font-size:var(--step--1);transition:top .25s var(--ease);
}
.skip:focus{top:.7rem}

.eyebrow{
  font-size:var(--step--1);letter-spacing:.19em;text-transform:uppercase;
  font-weight:500;color:var(--vi-ink-2);margin:0 0 1.4rem;
  display:flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--vi-bronze);flex:none}
.lede{font-size:var(--step-1);line-height:1.5;color:#3a3a3a}
.dim{color:var(--vi-ink-2)}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ui);font-size:var(--step--1);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.7rem;border:1px solid transparent;border-radius:2px;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn--solid{background:var(--vi-green);color:#fff}
.btn--solid:hover{background:var(--vi-green-h)}
.btn--line{border-color:var(--vi-border);color:var(--vi-ink)}
.btn--line:hover{border-color:var(--vi-green);color:var(--vi-green)}
.btn--cream{background:var(--vi-cream);color:var(--vi-green);font-weight:600}
.btn--cream:hover{background:#fff}
.btn--ghost{border-color:rgba(246,242,235,.42);color:var(--vi-cream)}
.btn--ghost:hover{border-color:var(--vi-cream);background:rgba(246,242,235,.08)}
.btn--zl{background:var(--zl-blue);color:var(--zl-navy);font-weight:600}
.btn--zl:hover{background:#63cef5}
.btn--zl-line{border-color:rgba(65,192,240,.45);color:var(--zl-5)}
.btn--zl-line:hover{border-color:var(--zl-blue);color:var(--zl-blue)}
.btn__arrow{transition:transform .35s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ============================================================
   3. FIL DE PROGRESSION : premier indice
   ============================================================ */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.progress__bar{
  height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--vi-bronze),var(--vi-cognac));will-change:transform;
}
.progress__bar[data-near="1"]{background:linear-gradient(90deg,var(--vi-bronze),var(--zl-blue))}

/* ============================================================
   3bis. PAGE D'INTRODUCTION & COMPTE À REBOURS
   Premier écran : le logo, la date d'ouverture, le décompte.
   On entre par le bouton, par un clic, par Entrée ou Échap.
   ============================================================ */
body.intro-open{overflow:hidden}
.intro{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  text-align:center;padding:var(--gutter);overflow:hidden;background:#141009;
  transition:opacity 1.1s var(--ease),visibility 1.1s var(--ease);
}
.intro.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.intro__bg{
  position:absolute;inset:0;background-color:#2A231C;background-image:var(--img-hero);
  background-size:cover;background-position:62% 45%;
  transform:scale(1.07);transition:transform 1.6s var(--ease);
}
.intro.is-gone .intro__bg{transform:scale(1)}
.intro__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(72% 60% at 50% 42%, rgba(30,25,20,.4), rgba(30,25,20,.72) 78%),
    linear-gradient(180deg, rgba(30,25,20,.48), rgba(30,25,20,.32) 40%, rgba(30,25,20,.68));
}
.intro__in{position:relative;z-index:2;width:100%;max-width:560px;text-shadow:0 1px 5px rgba(10,8,6,.6)}
.intro__in > *{animation:rise 1s var(--ease) both}
.intro__in > *:nth-child(1){animation-delay:.15s}
.intro__in > *:nth-child(2){animation-delay:.3s}
.intro__in > *:nth-child(3){animation-delay:.45s}
.intro__in > *:nth-child(4){animation-delay:.6s}
.intro__in > *:nth-child(5){animation-delay:.8s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.intro .brand{width:clamp(190px,32vw,290px);margin:0 auto}
.intro .brand span{background-image:var(--logo-light);opacity:1}
.intro__kicker{
  margin:1.8rem 0 0;font-size:.64rem;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(246,242,235,.6);
}
.intro__line{
  font-family:var(--display);font-weight:300;font-size:var(--step-2);line-height:1.15;
  color:var(--vi-cream);margin:1.1rem 0 2.4rem;
}
.intro__line em{font-style:italic;color:var(--vi-bronze)}

.count{display:flex;justify-content:center;gap:clamp(.9rem,4vw,2.4rem);margin:0}
.count__cell{min-width:56px}
.count__n{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(2.3rem,7.5vw,3.9rem);line-height:1;color:var(--vi-cream);
  font-variant-numeric:tabular-nums;
}
.count__l{
  display:block;margin-top:.7rem;font-size:.55rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--vi-bronze);
}
.intro__actions{margin-top:2.8rem}
.intro__note{
  margin:1.6rem 0 0;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(246,242,235,.4);
}
.hero__countdown{color:var(--vi-bronze)}

@media (prefers-reduced-motion: reduce){
  .intro,.intro__bg{transition:none}
  .intro__in > *{animation:none}
}

/* ============================================================
   3ter. BANDEAU D'ANNONCE
   Placé entre l'en-tête et le hero : on le voit en arrivant, il
   défile ensuite avec la page. Le contenu se pilote depuis le
   tableau EVENEMENTS en bas de fichier (actif:false le retire),
   une entrée de plus le fait alterner avec la suivante.
   ============================================================ */
.topbar{
  position:relative;background:linear-gradient(180deg,#17130d,#221b12);
  border-bottom:1px solid rgba(176,141,87,.26);
  padding-top:clamp(6.4rem,10vw,8.4rem);
}
.topbar[hidden]{display:none}
.topbar__in{position:relative;padding-bottom:clamp(1.6rem,4vw,2.6rem)}
.topbar__link{
  display:grid;gap:clamp(1.2rem,3vw,2.8rem);align-items:center;text-decoration:none;
}
@media(min-width:820px){.topbar__link{grid-template-columns:minmax(0,40%) 1fr}}
.topbar__thumb{
  width:100%;aspect-ratio:1456/840;border-radius:3px;
  background-color:#0b0906;background-size:cover;background-position:center;
  border:1px solid rgba(176,141,87,.24);
  box-shadow:0 22px 60px -34px rgba(0,0,0,.9);
}
.topbar__text{min-width:0}
.topbar__tag{
  display:flex;align-items:center;gap:.85rem;
  font-size:var(--step--1);letter-spacing:.28em;text-transform:uppercase;
  color:var(--vi-bronze);font-weight:500;
}
.topbar__tag::before{content:"";width:26px;height:1px;background:var(--vi-bronze);flex:none}
.topbar__title{
  display:block;font-family:var(--display);font-weight:300;line-height:1.08;
  font-size:clamp(1.8rem,5vw,3.1rem);color:var(--vi-cream);margin-top:.9rem;
  letter-spacing:-.012em;
}
.topbar__detail{
  display:block;font-size:var(--step-0);line-height:1.55;
  color:rgba(246,242,235,.66);margin-top:1rem;max-width:46ch;
}
.topbar__go{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;
  padding:.85rem 1.6rem;border:1px solid rgba(246,242,235,.34);border-radius:2px;
  font-size:var(--step--1);font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--vi-cream);transition:background .35s var(--ease),border-color .35s var(--ease);
}
.topbar__link:hover .topbar__go{background:rgba(246,242,235,.09);border-color:var(--vi-cream)}
.topbar__link:hover .btn__arrow{transform:translateX(4px)}
.topbar__close{
  position:absolute;top:0;right:0;width:36px;height:36px;
  border:1px solid rgba(246,242,235,.2);background:transparent;
  color:rgba(246,242,235,.6);border-radius:50%;cursor:pointer;font-size:1.05rem;line-height:1;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.topbar__close:hover{color:var(--vi-cream);border-color:rgba(246,242,235,.5)}
.topbar__item{transition:opacity .5s var(--ease)}
.topbar__item.is-out{opacity:0}

/* ============================================================
   4. EN-TÊTE : trois états (sur le hero, défilé, back room)
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;padding:.95rem 0;
  background:rgba(247,245,242,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--vi-border);
  transition:background .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);
}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:2rem}

.brand{display:block;position:relative;width:clamp(148px,17vw,196px);aspect-ratio:900/308;flex:none}
.brand span{
  position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;
  background-position:left center;transition:opacity .5s var(--ease);
}
.brand .on-light{background-image:var(--logo-dark);opacity:1}
.brand .on-dark{background-image:var(--logo-light);opacity:0}

.nav{display:none;gap:2.1rem;align-items:center}
.nav a{
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  font-weight:500;color:var(--vi-ink);position:relative;padding-block:.3rem;
  transition:color .5s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease);
}
.nav a:hover::after{transform:scaleX(1)}
.nav a.is-zl::after{background:var(--zl-blue)}
@media(min-width:1024px){.nav{display:flex}}
.header-cta{display:none}
@media(min-width:640px){.header-cta{display:inline-flex;padding:.72rem 1.25rem}}

/* Sur le hero : en-tête transparent, logo clair */
body.at-top .site-header{background:transparent;border-bottom-color:transparent;padding:1.5rem 0}
body.at-top .brand .on-light,body.is-dark .brand .on-light{opacity:0}
body.at-top .brand .on-dark,body.is-dark .brand .on-dark{opacity:1}
@media(min-width:1024px){body.at-top .nav a{color:var(--vi-cream)}}
@media(min-width:1024px){body.at-top .btn--solid{background:transparent;border-color:rgba(246,242,235,.45);color:var(--vi-cream)}}
@media(min-width:1024px){body.at-top .btn--solid:hover{background:var(--vi-cream);color:var(--vi-green);border-color:var(--vi-cream)}}

/* Dans la back room : en-tête navy */
body.is-dark .site-header{background:rgba(0,32,44,.85);border-bottom-color:rgba(65,192,240,.22)}
@media(min-width:1024px){body.is-dark .nav a{color:var(--zl-5)}}
@media(min-width:1024px){body.is-dark .nav a.is-zl{color:var(--zl-blue)}}
@media(min-width:1024px){body.is-dark .btn--solid{background:var(--zl-blue);color:var(--zl-navy);border-color:transparent}}
@media(min-width:1024px){body.is-dark .btn--solid:hover{background:#63cef5}}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:9rem 0 clamp(3.5rem,9vh,6.5rem);overflow:hidden;isolation:isolate;
  color:var(--vi-cream);
}
.hero__bg{
  position:absolute;inset:0;z-index:-2;background-color:#2A231C;
  background-image:var(--img-hero);background-size:cover;background-position:62% 45%;
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(30,25,20,.68) 0%,rgba(30,25,20,.52) 38%,rgba(30,25,20,.16) 78%,rgba(30,25,20,.3) 100%),
    linear-gradient(180deg,rgba(30,25,20,.38) 0%,transparent 26%),
    linear-gradient(180deg,transparent 84%,var(--vi-bg) 100%);
}
/* Ambiance dessinée si aucune photo n'est déposée */
.hero__bg[data-has-img="0"]::after{
  background:
    radial-gradient(120% 90% at 78% 22%,rgba(176,141,87,.34),transparent 58%),
    radial-gradient(90% 70% at 12% 88%,rgba(31,77,58,.34),transparent 62%),
    linear-gradient(184deg,#241f19 0%,#1a1613 60%,#12100e 100%),
    linear-gradient(180deg,transparent 84%,var(--vi-bg) 100%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;opacity:.45;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
.hero .wrap{text-shadow:0 1px 5px rgba(10,8,6,.55)}
.hero .eyebrow{color:rgba(246,242,235,.74)}
.hero .eyebrow::before{background:var(--vi-bronze);width:34px}
.hero h1{max-width:15ch;color:var(--vi-cream)}
.hero h1 em{font-style:italic;color:var(--vi-bronze)}
.hero__lede{max-width:44ch;margin-top:1.6rem;color:rgba(246,242,235,.86)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.hero__meta{
  margin-top:3rem;padding-top:1.3rem;border-top:1px solid rgba(246,242,235,.2);
  display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;font-size:var(--step--1);
  letter-spacing:.09em;text-transform:uppercase;color:rgba(246,242,235,.78);
}
.hero__sentinel{position:absolute;bottom:120px;left:0;width:1px;height:1px}

/* ============================================================
   6. SECTIONS CLUB VI
   ============================================================ */
.band{padding-block:var(--section-y)}
.band--stone{background:var(--vi-stone)}
.band--tight{padding-block:clamp(3.5rem,7vh,6rem)}

.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--reverse .split__media{order:2}
}
.split__media{
  position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden;
  background-color:#1B1815;background-size:cover;background-position:center;
  box-shadow:0 24px 64px -36px rgba(27,27,27,.6);
}
.split__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(170deg,rgba(20,16,13,.04),rgba(20,16,13,.24));
}
.split__media[data-has-img="0"]::after{
  background:linear-gradient(160deg,rgba(176,141,87,.24),rgba(31,77,58,.2) 55%,rgba(27,27,27,.34));
}
/* Classes utilitaires d'image. Les variables ne sont jamais appelées
   depuis un attribut style en HTML : la résolution d'une url() portée
   par une variable CSS dépend alors du navigateur. Ici tout est
   déclaré dans la feuille, donc résolu par rapport à elle. */
.m-golf{background-image:var(--img-golf)}
.m-golf2{background-image:var(--img-golf2)}
.m-golfkids{background-image:var(--img-golfkids)}
.m-golfforce{background-image:var(--img-golfforce)}
.m-golfamateur{background-image:var(--img-golfamateur)}
.m-darts{background-image:var(--img-darts)}
.m-darts-club{background-image:var(--img-darts-club)}
.m-bar{background-image:var(--img-bar)}
.m-croque{background-image:var(--img-croque)}
.m-tartine{background-image:var(--img-tartine)}
.m-cesar{background-image:var(--img-cesar)}
.m-charcuterie{background-image:var(--img-charcuterie)}
.m-corpo{background-image:var(--img-corpo)}


.xp-outbreak{background-image:var(--xp-outbreak)}
.xp-outbreak2{background-image:var(--xp-outbreak2)}
.xp-solraiders{background-image:var(--xp-solraiders)}
.xp-farcry{background-image:var(--xp-farcry)}
.xp-warhammer{background-image:var(--xp-warhammer)}
.xp-jumanji{background-image:var(--xp-jumanji)}
.xp-undeadarena{background-image:var(--xp-undeadarena)}
.xp-singularity{background-image:var(--xp-singularity)}
.xp-engineerium{background-image:var(--xp-engineerium)}
.xp-haunted{background-image:var(--xp-haunted)}
.xp-warhammer-tl{background-image:var(--xp-warhammer-tl)}
.topbar__thumb--jumanji{background-image:var(--img-jumanji);background-position:center 88%}  /* visuel complet en bureau ; sur mobile, cadrage sur le titre et la date */

.detail-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.9rem}
.detail-list{gap:1rem}
.detail-list li{
  display:flex;gap:1rem;align-items:baseline;padding-bottom:1rem;
  border-bottom:1px solid var(--vi-border);
  font-size:var(--step-0);line-height:1.5;color:var(--vi-ink);
}
.detail-list li::before{content:"";width:6px;height:6px;flex:none;background:var(--vi-cognac);border-radius:50%;transform:translateY(-4px)}

/* ============================================================
   7. LE SEUIL : la porte, signature de la page
   Le scroll pilote trois variables : --p brut, --q le temps de la
   porte (elle ne bouge pas tant que le texte se lit), et --pe la
   même courbe adoucie. Uniquement transform et opacity : tout est
   composité par le GPU.
   ============================================================ */
.threshold{position:relative;height:440vh;background:var(--zl-navy)}
.threshold__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;isolation:isolate}

/* Ce qu'il y a derrière la porte : l'arène, qui s'éclaire à mesure. */
.threshold__reveal{
  position:absolute;inset:0;z-index:1;background-color:#02151d;
  background-image:var(--img-door);background-size:cover;background-position:center;
  opacity:calc(.14 + var(--pe,0) * .86);
  transform:scale(calc(1.24 - var(--pe,0) * .24));
}
/* Le voile bleu s'amincit à mesure que la porte s'ouvre : au début on
   devine, à la fin on voit. */
.threshold__reveal::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,32,44,.5),rgba(0,32,44,.78));
  opacity:calc(1 - var(--pe,0) * .5);
}
.threshold__glow{
  position:absolute;inset:0;z-index:2;
  background:radial-gradient(46% 62% at 50% 50%,rgba(65,192,240,.5),transparent 70%);
  opacity:calc(.12 + var(--pe,0) * .88);
}

/* Les deux battants. Ils partent joints au centre et s'écartent.
   Chacun garde son épaisseur visible sur le chant intérieur. */
/* Une paroi sombre et muette, éclairée seulement par la lumière chaude
   du Club VI qui tombe d'en haut. Aucune essence de bois, aucun
   décor : la porte ne doit rien annoncer de ce qu'il y a derrière. */
.leaf{
  position:absolute;top:0;bottom:0;width:50.4%;z-index:3;overflow:hidden;
  background:
    radial-gradient(130% 80% at 50% -18%, rgba(176,141,87,.13), transparent 60%),
    linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 26%),
    linear-gradient(180deg,#16130f,#0d0b09 58%,#060505);
}
.leaf--l{left:0;transform:translate3d(calc(var(--pe,0) * -100%),0,0);box-shadow:inset -1px 0 0 rgba(176,141,87,.22)}
.leaf--r{right:0;transform:translate3d(calc(var(--pe,0) * 100%),0,0);box-shadow:inset 1px 0 0 rgba(176,141,87,.22)}
/* La lumière froide de l'autre côté déborde sur le chant du battant. */
.leaf::before{
  content:"";position:absolute;top:0;bottom:0;width:clamp(70px,14vw,170px);
  opacity:calc(var(--q,0) * 1.5);
}
.leaf--l::before{right:0;background:linear-gradient(270deg,rgba(65,192,240,.5),rgba(65,192,240,.1) 38%,transparent 78%)}
.leaf--r::before{left:0;background:linear-gradient(90deg,rgba(65,192,240,.5),rgba(65,192,240,.1) 38%,transparent 78%)}
/* Un montant à peine visible, juste assez pour lire « porte ». */
.leaf::after{
  content:"";position:absolute;top:9%;bottom:9%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(176,141,87,.3),transparent);
}
.leaf--l::after{right:5%}
.leaf--r::after{left:5%}

/* Un cadre d'ombre : on regarde la porte depuis le fond d'une salle. */
.threshold__vignette{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(78% 72% at 50% 50%,transparent 30%,rgba(0,0,0,.62));
  opacity:calc(1 - var(--pe,0) * .6);
}

/* Le rai de lumière au joint : vif à la première fente, il se dissout
   quand l'ouverture devient assez large pour se passer de lui. */
.threshold__beam{
  position:absolute;top:0;bottom:0;left:50%;z-index:5;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,transparent,var(--zl-blue) 14%,#eafaff 50%,var(--zl-blue) 86%,transparent);
  box-shadow:0 0 26px 7px rgba(65,192,240,.62),0 0 90px 30px rgba(65,192,240,.24);
  transform:scaleX(calc(1 + var(--pe,0) * 6));
  opacity:calc(.16 + min(var(--q,0) * 7, 1) * .84 - max(var(--q,0) - .42, 0) * 1.9);
}
/* Tant que la porte est fermée, la lumière respire. Quelque chose vit
   de l'autre côté. */
.threshold__beam::after{
  content:"";position:absolute;inset:-2px;background:inherit;filter:blur(4px);
  animation:breathe 5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.3}50%{opacity:1}}

.threshold__content{position:relative;z-index:6;text-align:center;padding-inline:var(--gutter)}
/* Premier temps : la porte est fermée et c'est elle qu'on présente.
   Le texte se lit, puis s'efface juste avant que les battants bougent. */
.threshold__lead{
  max-width:44ch;margin-inline:auto;
  opacity:calc(min(1, (.30 - var(--p,0)) * 6));
}
.threshold__lead .eyebrow{justify-content:center;color:rgba(237,233,227,.62)}
.threshold__lead .eyebrow::before{background:var(--zl-blue);width:32px}
.threshold__lead h2{font-size:var(--step-3);color:#F4F1EC;line-height:1.1}
.threshold__lead p{color:rgba(237,233,227,.76);margin:1.5rem 0 0;font-size:var(--step-1);line-height:1.5}
.threshold__lead .cue{
  margin-top:2.4rem;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(237,233,227,.5);display:inline-flex;align-items:center;gap:.7rem;
}
.threshold__lead .cue::after{content:"↓";animation:bob 2.1s var(--ease) infinite}
.threshold__in{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(320px,80vw);
  opacity:calc((var(--q,0) - .52) * 3.4);
}
.threshold__in .kicker{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--zl-blue);margin-bottom:1.4rem}
/* Le logo officiel arrive un cran après l'ouverture : la porte finit de
   s'écarter, puis la marque se pose. Il reste masqué tant que le fichier
   n'est pas déposé, c'est alors l'intitulé texte qui prend le relais. */
.threshold__in .zl-mark{
  width:clamp(250px,42vw,460px);margin:0 auto;
  opacity:calc((var(--q,0) - .58) * 4.5);
  transform:translateY(calc((1 - var(--q,0)) * 16px));
}
.threshold__in .zl-mark[data-has-logo="1"] + .title{display:none}
.threshold__in .title{font-family:var(--ui);font-weight:600;font-size:var(--step-2);color:var(--zl-5);letter-spacing:-.025em;margin:0}
.threshold__in .enter{margin-top:2rem;font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--zl-5);display:inline-flex;align-items:center;gap:.8rem}
.threshold__in .enter::after{content:"↓";animation:bob 1.9s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ============================================================
   8. BACK ROOM : ZERO LATENCY
   Identité officielle uniquement. Rien de l'univers Club VI
   ne franchit cette frontière.
   ============================================================ */
.zl,.threshold,body.theme-zl .page-head{--ui:var(--zl-ui)}
.zl{background:var(--zl-navy);color:var(--zl-5)}
.zl h2,.zl h3{color:var(--zl-5)}
.zl p{color:rgba(239,249,254,.76)}
.zl .eyebrow{color:var(--zl-blue)}
.zl .eyebrow::before{background:var(--zl-blue);width:34px}
.zl .lede{color:rgba(239,249,254,.88)}

/* Le logo posé directement sur le Dark Navy. Sa marge de protection
   vient de l'espacement du bloc, jamais d'un cadre ou d'une plaque. */
.zl-mark{
  display:none;width:clamp(250px,42vw,460px);aspect-ratio:4.32/1;margin-inline:auto;
  background-image:var(--zl-logo);background-size:contain;background-repeat:no-repeat;
  background-position:center;
}
.zl-mark[data-has-logo="1"]{display:block}
/* Filet Energy Blue. Le Brand Bar Device officiel, dont la
   géométrie vient du symbole ZL, prendra sa place. */
.zl-rule{height:3px;width:100%;margin-bottom:2.4rem;background:linear-gradient(90deg,var(--zl-blue) 0 22%,rgba(65,192,240,.18) 22% 100%)}

/* Mention de service sous les boutons de la back room. */
.zl-note{
  margin:1.4rem 0 0;font-size:var(--step--1);letter-spacing:.04em;
  color:rgba(239,249,254,.55);
}

.zl-hero{padding-block:clamp(5rem,12vh,9rem) var(--section-y);position:relative;overflow:hidden}
.zl-hero::before{
  content:"";position:absolute;top:-25%;left:50%;width:130%;aspect-ratio:1;transform:translateX(-50%);
  pointer-events:none;background:radial-gradient(closest-side,rgba(65,192,240,.16),transparent 70%);
}
.zl-hero .wrap{position:relative}
.zl-hero h2{font-family:var(--ui);font-weight:600;letter-spacing:-.025em;font-size:var(--step-3);line-height:1.02;max-width:17ch}


.freeroam{display:grid;gap:1px;background:rgba(65,192,240,.18);border:1px solid rgba(65,192,240,.18)}
@media(min-width:760px){.freeroam{grid-template-columns:repeat(4,1fr)}}
.freeroam__cell{background:var(--zl-navy);padding:2rem 1.5rem}
.freeroam__cell strong{display:block;font-family:var(--ui);font-weight:600;font-size:var(--step-1);color:var(--zl-5);margin-bottom:.6rem;letter-spacing:-.015em}
.freeroam__cell p{margin:0;font-size:var(--step-0);line-height:1.6;color:rgba(239,249,254,.82)}

/* Mosaïque : remplace les deux bandeaux photo par trois publics réels
   (arène en équipe, famille, amis) au lieu d'une scène répétée deux fois. */
.zl-mosaic{
  display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;
  gap:.5rem;margin-top:clamp(2rem,5vh,3.4rem);height:clamp(360px,52vw,520px);
}
.zl-mosaic__tile{
  position:relative;border-radius:3px;overflow:hidden;
  background-color:#031A24;background-size:cover;background-position:center;
  border:1px solid rgba(65,192,240,.22);
  display:flex;align-items:flex-end;
  transition:transform .5s var(--ease);
}
.zl-mosaic__tile:hover{transform:scale(1.012)}
.zl-mosaic__tile--big{grid-row:1/3}
.zl-mosaic__tile--arene{background-image:var(--img-mosaic-arene)}
.zl-mosaic__tile--famille{background-image:var(--img-mosaic-famille)}
.zl-mosaic__tile--amis{background-image:var(--img-mosaic-amis)}
.zl-mosaic__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(0,32,44,.85));
}
.zl-mosaic__cap{
  position:relative;z-index:2;margin:0;padding:clamp(1rem,2.6vw,1.6rem);
  font-family:var(--ui);font-weight:600;letter-spacing:-.015em;
  font-size:var(--step-0);color:var(--zl-5);
}
.zl-mosaic__tile--big .zl-mosaic__cap{font-size:var(--step-1)}
.zl-mosaic__cap small{
  font-size:.86em;display:block;font-weight:400;letter-spacing:.02em;
  color:rgba(239,249,254,.78);margin-top:.35rem;line-height:1.5;
}
@media(max-width:760px){
  .zl-mosaic{grid-template-columns:1fr;grid-template-rows:auto;height:auto;gap:.6rem}
  .zl-mosaic__tile{aspect-ratio:4/3}
  .zl-mosaic__tile--big{grid-row:auto;aspect-ratio:16/9}
}

/* Filtres par catégorie, au-dessus de la grille. */
.xp-filters{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem;padding:0}
.xp-filters button{
  font-family:var(--zl-ui);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(239,249,254,.72);background:transparent;border:1px solid rgba(65,192,240,.3);
  border-radius:999px;padding:.5em 1.1em;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.xp-filters button:hover{border-color:var(--zl-blue);color:var(--zl-5)}
.xp-filters button[aria-pressed="true"]{background:var(--zl-blue);border-color:var(--zl-blue);color:var(--zl-navy);font-weight:600}
.xp-count{font-family:var(--zl-ui);font-size:.72rem;color:rgba(239,249,254,.55);margin:-1rem 0 1.6rem;letter-spacing:.02em}
.xp-count strong{color:var(--zl-5);font-weight:600}

.xp-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:620px){.xp-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.xp-grid{grid-template-columns:repeat(3,1fr)}}
/* Fiche cliquable : le key art occupe tout le cadre (jamais retouché,
   seul le fond est recadré au format ci-dessous -- voir note sur les
   variables --xp-*). Badges et repères se lisent en incrustation, pas
   de titre affiché en double : chaque visuel officiel porte déjà le
   sien. Le titre reste dispo pour les lecteurs d'écran (.sr). */
.xp{
  display:block;width:100%;position:relative;overflow:hidden;border-radius:3px;
  background:var(--zl-navy);border:1px solid rgba(65,192,240,.22);
  font:inherit;text-align:left;padding:0;cursor:pointer;color:inherit;
  transition:border-color .4s var(--ease),transform .5s var(--ease);
}
.xp:hover,.xp:focus-visible{border-color:var(--zl-blue);transform:translateY(-4px)}
.xp:focus-visible{outline:2px solid var(--zl-blue);outline-offset:2px}
.xp__frame{display:block;position:relative;aspect-ratio:1456/840;background-size:cover;background-position:center;transition:transform .7s var(--ease)}
.xp:hover .xp__frame,.xp:focus-visible .xp__frame{transform:scale(1.04)}
.xp--soon .xp__frame{filter:grayscale(.3) brightness(.6)}
.xp__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,32,44,0) 42%,rgba(0,26,36,.78) 76%,rgba(0,20,28,.94) 100%)}
.xp__hud{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem;z-index:1;transition:opacity .18s var(--ease)}
/* Fenêtre d'info au survol/focus (demande Joffrey 01/10, à l'exemple du
   Zero Latency de Speed Park Angers) : au repos, le visuel + badges ;
   au survol souris ou au focus clavier, le texte "desc" du jeu remplace
   les badges. Jamais sur tactile (pas de survol) : le tap garde le même
   comportement qu'avant, ouverture directe de la fiche complète. */
.xp__peek{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.9rem 1rem 1rem;
  opacity:0;transform:translateY(6px);transition:opacity .22s var(--ease),transform .22s var(--ease);pointer-events:none}
.xp__peek-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.82rem;line-height:1.45;color:rgba(239,249,254,.92)}
.xp:hover .xp__hud,.xp:focus-visible .xp__hud{opacity:0}
.xp:hover .xp__peek,.xp:focus-visible .xp__peek{opacity:1;transform:translateY(0)}
@media(hover:none){.xp__peek{display:none}}
.xp__badges{display:flex;flex-wrap:wrap;gap:.4rem}
.xp__badge{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--zl-5);
  background:rgba(0,20,28,.82);border:1px solid rgba(65,192,240,.35);border-radius:2px;padding:.32rem .55rem;line-height:1}
.xp__badge--status{color:var(--zl-navy);background:var(--zl-blue);border-color:var(--zl-blue);font-weight:600}
.xp--soon .xp__badge--status{color:var(--vi-bronze);background:transparent;border-color:var(--vi-bronze)}
.xp__badge--mode{color:var(--zl-5);background:var(--zl-red);border-color:var(--zl-red);font-weight:600}
/* Ligne d'icônes joueurs / durée / âge, à l'exemple de la fiche jeu de
   Virtualia (venue Zero Latency de La Rochelle) : mêmes informations que
   l'ancien libellé "tag", juste réparties en repères visuels distincts. */
.xp__meta{list-style:none;display:flex;flex-wrap:wrap;gap:.75rem;margin:0;padding:0}
.xp__meta li{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:rgba(239,249,254,.85);letter-spacing:.01em}
.xp__meta-icon{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;color:var(--zl-blue)}
/* Expérience annoncée mais pas encore ouverte : même gabarit que les
   autres, bordure pointillée pour la distinguer. */
.xp--soon{border-style:dashed}

/* Fiche détaillée au clic. */
.xp-modal-veil{
  position:fixed;inset:0;z-index:80;background:rgba(0,16,22,.82);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
}
@media(min-width:720px){.xp-modal-veil{align-items:center;padding:1.5rem}}
.xp-modal{
  width:100%;max-width:640px;max-height:92vh;overflow:auto;background:var(--zl-navy);
  border:1px solid rgba(65,192,240,.3);border-bottom:0;border-radius:10px 10px 0 0;
}
@media(min-width:720px){.xp-modal{border-radius:6px;border-bottom:1px solid rgba(65,192,240,.3)}}
.xp-modal__figure{position:relative;aspect-ratio:1456/840;background-size:cover;background-position:center}
.xp-modal__close{
  position:absolute;top:.8rem;right:.8rem;width:34px;height:34px;border-radius:50%;
  background:rgba(0,16,22,.7);border:1px solid rgba(255,255,255,.2);color:var(--zl-5);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;cursor:pointer;
}
.xp-modal__close:hover{background:rgba(0,16,22,.92)}
.xp-modal__body{padding:1.5rem 1.5rem 1.75rem}
.xp-modal__body .xp__badges{margin-bottom:.9rem}
.xp-modal__body h3{font-family:var(--zl-ui);font-weight:600;font-size:var(--step-2);color:var(--zl-5);letter-spacing:-.02em;margin:0 0 .9rem}
.xp-modal__body .xp__meta{margin-bottom:1.1rem}
.xp-modal__body p{font-size:var(--step-0);color:rgba(239,249,254,.82);line-height:1.6;margin:0 0 1.4rem;max-width:56ch}
.xp-modal__body .btn{width:fit-content}

/* ============================================================
   9. RETOUR AU CLUB VI
   ============================================================ */
.reentry{
  height:52svh;position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;
  padding-inline:var(--gutter);
  background:linear-gradient(180deg,var(--zl-navy) 0%,#0d1a1c 42%,#241f19 74%,var(--vi-bg) 100%);
}
.reentry p{font-family:var(--display);font-size:var(--step-2);color:#CFC7BA;max-width:20ch;margin:0}

/* ============================================================
   10. ENTREPRISES / GROUPES / INFOS
   ============================================================ */
.offers{display:grid;gap:1.5rem;margin-top:3rem}
@media(min-width:760px){.offers{grid-template-columns:repeat(3,1fr)}}
.offer{background:var(--vi-surface);border:1px solid var(--vi-border);border-radius:3px;padding:2rem 1.7rem;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.offer:hover{border-color:var(--vi-green);transform:translateY(-3px)}
.offer h3{font-size:1.6rem;margin-bottom:.7rem}
.offer p{font-size:var(--step-0);line-height:1.55;color:var(--vi-ink-2);margin:0}

.infos-grid{display:grid;gap:2.5rem}
@media(min-width:900px){.infos-grid{grid-template-columns:1fr 1fr}}
.infos-grid dl{margin:0}
.infos-grid dt{font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--vi-ink-2);padding-top:1.1rem}
.infos-grid dd{margin:.4rem 0 1.2rem;border-bottom:1px solid var(--vi-border);padding-bottom:1.2rem;font-size:var(--step-1);line-height:1.45}
.infos-grid a{color:var(--vi-green);text-underline-offset:3px}

/* Carte : un bouton tant qu'on n'a rien demandé, l'iframe ensuite. */
.map{
  margin-top:clamp(2.5rem,6vh,4rem);position:relative;aspect-ratio:16/9;
  border:1px solid var(--vi-border);border-radius:3px;overflow:hidden;background:var(--vi-stone);
}
@media(min-width:900px){.map{aspect-ratio:21/9}}
.map iframe{display:block;width:100%;height:100%;border:0}
.map__load{
  position:absolute;inset:0;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;cursor:pointer;
  background:
    repeating-linear-gradient(90deg,rgba(31,77,58,.05) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(0deg,rgba(31,77,58,.05) 0 1px,transparent 1px 42px),
    var(--vi-stone);
  border:0;font-family:var(--ui);transition:background-color .4s var(--ease);
}
.map__load:hover{background-color:#e3dcd1}
.map__pin{
  width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--vi-green);box-shadow:0 6px 14px -6px rgba(31,77,58,.9);margin-bottom:.6rem;
}
.map__label{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--vi-green)}
.map__note{font-size:.68rem;letter-spacing:.06em;color:var(--vi-ink-2)}
.map__actions{margin:1.4rem 0 0}

/* ============================================================
   FAQ
   Accordéon natif, sans JavaScript : balises details et summary.
   Accessible au clavier et aux lecteurs d'écran par défaut.
   Toute question ajoutée ici doit l'être aussi dans le bloc
   de données structurées, juste sous la section.
   ============================================================ */
/* ============================================================
   TARIFS & HORAIRES
   Les prix sont écrits en clair dans le HTML : aucune donnée à
   aller chercher ailleurs. Une carte par activité, une ligne
   par formule, deux colonnes heures creuses / heures pleines.
   ============================================================ */
.tarifs{display:grid;gap:1.5rem;margin-top:2.8rem}
@media(min-width:900px){.tarifs{grid-template-columns:repeat(3,1fr);align-items:start}}
.tarif{
  background:var(--vi-surface);border:1px solid var(--vi-border);border-radius:3px;
  padding:2rem 1.7rem;display:flex;flex-direction:column;height:100%;
}
.tarif h3{font-size:1.55rem;margin-bottom:.4rem}
.tarif__unit{
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--vi-bronze);font-weight:500;margin:0;
}
.tarif__rows{margin:1.6rem 0 0;padding:0;list-style:none}
.tarif__row{
  display:grid;grid-template-columns:1fr auto auto;gap:.9rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--vi-border);font-size:var(--step--1);
}
.tarif__row:last-child{border-bottom:0}
.tarif__row--head{
  border-bottom:1px solid var(--vi-ink);padding-bottom:.5rem;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vi-ink-2);
}
.tarif__price{
  font-family:var(--display);font-size:1.35rem;line-height:1;color:var(--vi-ink);
  text-align:right;min-width:3.4rem;
}
.tarif__price--full{color:var(--vi-green)}
.tarif__note{margin:1.4rem 0 0;font-size:var(--step--1);color:var(--vi-ink-2);line-height:1.5}

.horaires{
  margin-top:clamp(2.5rem,6vh,4rem);border:1px solid var(--vi-border);border-radius:3px;
  background:var(--vi-surface);padding:clamp(1.6rem,3vw,2.2rem);
}
.horaires__grid{display:grid}
@media(min-width:700px){.horaires__grid{grid-template-columns:repeat(2,1fr);column-gap:3rem}}
.horaires__row{
  display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  padding:.75rem 0;border-bottom:1px solid var(--vi-border);font-size:var(--step-0);
}
.horaires__row span:first-child{color:var(--vi-ink-2)}
.horaires__row--closed span:last-child{color:var(--vi-ink-2)}
.horaires__note{margin:1.4rem 0 0;font-size:var(--step--1);color:var(--vi-ink-2)}

.faq{max-width:900px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--vi-border)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--display);font-size:var(--step-1);line-height:1.25;
  color:var(--vi-ink);transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--vi-green)}
.faq__item summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:13px;height:1px;
  background:var(--vi-cognac);
}
.faq__item summary::before{
  content:"";position:absolute;right:.4rem;top:50%;width:13px;height:1px;
  background:var(--vi-cognac);transform:rotate(90deg);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.faq__item[open] summary::before{transform:rotate(0);opacity:0}
.faq__item[open] summary{color:var(--vi-green)}
.faq__a{padding:0 3rem 1.7rem 0;max-width:70ch}
.faq__a p{margin:0 0 .9em;color:var(--vi-ink-2);font-size:var(--step-0);line-height:1.6}
.faq__a p:last-child{margin-bottom:0}
.faq__a strong{color:var(--vi-ink);font-weight:500}
.faq__group{
  margin:2.8rem 0 .4rem;font-size:var(--step--1);letter-spacing:.22em;
  text-transform:uppercase;color:var(--vi-bronze);font-weight:500;
}
.faq__group:first-of-type{margin-top:2rem}
@media (prefers-reduced-motion: reduce){
  .faq__item summary,.faq__item summary::before{transition:none}
}

.final{background:var(--vi-green);color:#F3F0EA;text-align:center}
.final h2{color:#fff;max-width:18ch;margin-inline:auto}
.final .eyebrow{color:rgba(243,240,234,.72);justify-content:center}
.final .eyebrow::before{background:rgba(243,240,234,.5)}
.final p{color:rgba(243,240,234,.86);margin-inline:auto;max-width:52ch}
.final .btn--solid{background:#fff;color:var(--vi-green)}
.final .btn--solid:hover{background:var(--vi-stone)}
.final .btn--line{border-color:rgba(255,255,255,.42);color:#fff}
.final .btn--line:hover{border-color:#fff;color:#fff}
.final__actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.4rem}

.site-footer{background:var(--vi-dark);color:rgba(237,233,227,.74);padding-block:3.5rem 2.5rem;font-size:var(--step-0);line-height:1.6}
.site-footer a{color:rgba(237,233,227,.82);text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer__top{display:grid;gap:2rem;margin-bottom:2.5rem}
@media(min-width:760px){.site-footer__top{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer .brand span{background-image:var(--logo-light);opacity:1}
.site-footer h4{margin:0 0 .9rem;font-family:var(--ui);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,233,227,.45);font-weight:500}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.site-footer__bottom{border-top:1px solid rgba(237,233,227,.13);padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;font-size:.72rem}
.credits{margin-top:1rem;margin-bottom:0;font-size:.68rem;color:rgba(237,233,227,.4);max-width:60ch}

/* ============================================================
   11. RÉVÉLATIONS AU SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
.zl .reveal{transition-duration:.5s;transform:translateY(14px)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .threshold{height:auto}
  .threshold__stage{position:static;height:auto;min-height:60svh;padding-block:5rem}
  .leaf,.threshold__beam,.threshold__vignette{display:none}
  .threshold__in .zl-mark{opacity:1;transform:none}
  .threshold__lead{opacity:1;position:static;margin-bottom:3rem}
  .threshold__reveal{opacity:.4;transform:none}
  .threshold__glow{opacity:.55}
  .threshold__in{position:static;transform:none;opacity:1;width:auto}
  .threshold__in .enter::after{animation:none}
  .xp__art,.btn__arrow,.brand span,.topbar__item{transition:none}
}

/* ============================================================
   MULTIPAGE : ajouts
   ============================================================ */

/* Logos des équipements, à droite de l'en-tête. Aucun n'est recoloré
   arbitrairement : TrackMan est un mot-symbole monochrome. Zero Latency
   dispose d'une version fond clair et d'une version fond sombre. Scolia
   garde ses couleurs d'origine sur tous les fonds (demande client). */
.partners{
  display:none;align-items:center;gap:clamp(.9rem,1.6vw,1.5rem);
  padding-right:clamp(.9rem,1.6vw,1.5rem);margin-left:auto;
  border-right:1px solid var(--vi-border);transition:border-color .5s var(--ease);
}
@media(min-width:1180px){.partners{display:flex}}
.partners > *{
  display:block;background-repeat:no-repeat;background-position:center;
  background-size:contain;opacity:.9;transition:opacity .35s var(--ease);
}
.partners a:hover{opacity:1}
.partners .p-zl{width:76px;height:21px;background-image:url('../img/logo-zl-outline.png')}
.partners .p-trackman{width:120px;height:15px;background-image:url('../img/Logotrackman.webp')}
.partners .p-scolia{width:74px;height:25px;background-image:url('../img/logo-scolia.png')}
body.at-top .partners,body.theme-zl .partners{border-right-color:rgba(246,242,235,.24)}
body.at-top .partners .p-zl,body.theme-zl .partners .p-zl{background-image:url('../img/zl-logo-reversed.png')}
body.at-top .partners .p-trackman,body.theme-zl .partners .p-trackman{background-image:url('../img/Logotrackmanwhite.webp')}
body.at-top .partners .p-scolia{background-image:url('../img/logo-scolia-white.png')}
body.theme-zl .partners .p-scolia{background-image:url('../img/logo-scolia-white.png')}

/* Bandeau de titre des pages intérieures */
.page-head{
  position:relative;padding:calc(6.6rem + 2vw) 0 clamp(2.5rem,6vh,4rem);
  border-bottom:1px solid var(--vi-border);background:var(--vi-stone);
}
.page-head h1{font-size:var(--step-3);max-width:18ch}
.page-head p{margin:1.2rem 0 0;max-width:56ch}
.page-head .eyebrow{margin-bottom:1.1rem}

/* Les trois activités de l'accueil */
.cards{display:grid;gap:1.4rem;margin-top:clamp(2.5rem,6vh,3.6rem)}
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  display:flex;flex-direction:column;text-decoration:none;background:var(--vi-surface);
  border:1px solid var(--vi-border);border-radius:3px;overflow:hidden;
  transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card:hover{border-color:var(--vi-green);transform:translateY(-4px);box-shadow:0 26px 60px -40px rgba(27,27,27,.6)}
.card__media{aspect-ratio:16/10;background-color:#1B1815;background-size:cover;background-position:center}
.card__body{padding:1.7rem 1.6rem 1.9rem;display:flex;flex-direction:column;flex:1}
.card__tag{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--vi-bronze);font-weight:500}
.card h3{font-size:1.7rem;margin:.7rem 0 .6rem}
.card p{font-size:var(--step--1);color:var(--vi-ink-2);margin:0 0 1.2rem}
.card__go{margin-top:auto;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--vi-green);display:inline-flex;align-items:center;gap:.55rem}
.card:hover .btn__arrow{transform:translateX(4px)}

/* Page Zero Latency : le thème sombre s'applique à toute la page */
body.theme-zl{background:var(--zl-navy);color:var(--zl-5)}
body.theme-zl .site-header{background:rgba(0,32,44,.85);border-bottom-color:rgba(65,192,240,.22)}
body.theme-zl .nav a{color:var(--zl-5)}
body.theme-zl .nav a.is-zl{color:var(--zl-blue)}
body.theme-zl .brand .on-light{opacity:0}
body.theme-zl .brand .on-dark{opacity:1}
@media(min-width:1024px){body.theme-zl .btn--solid{background:var(--zl-blue);color:var(--zl-navy)}}
@media(min-width:1024px){body.theme-zl .btn--solid:hover{background:#63cef5}}
body.theme-zl .page-head{
  background-color:var(--zl-navy);background-image:var(--img-zl-pattern);
  background-size:cover;background-position:center;
  border-bottom-color:rgba(65,192,240,.22);
  overflow:hidden;
  /* Bandeau nettement plus haut que sur les autres pages : la video de
     fond doit se voir, pas juste dépasser derrière trois lignes de texte. */
  min-height:88svh;display:flex;align-items:center;
  padding-top:calc(6.6rem + 2vw);padding-bottom:clamp(3rem,8vh,5rem);
}
/* Video de fond en boucle (silencieuse), a l'exemple d'Oxmoz : le
   motif statique ci-dessus reste le poster/repli (JS coupe, reduced
   motion, connexion lente). object-fit cover, jamais au-dessus du texte. */
body.theme-zl .page-head__bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;
}
body.theme-zl .page-head__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,32,44,.55) 0%,rgba(0,32,44,.72) 60%,var(--zl-navy) 100%);
}
body.theme-zl .page-head .wrap{position:relative;z-index:2}
@media (prefers-reduced-motion: reduce){
  body.theme-zl .page-head__bg-video{display:none}
}
body.theme-zl .page-head h1{color:var(--zl-5);font-family:var(--ui);font-weight:600;letter-spacing:-.025em}
body.theme-zl .page-head p{color:rgba(239,249,254,.78)}
body.theme-zl .eyebrow{color:var(--zl-blue)}
body.theme-zl .eyebrow::before{background:var(--zl-blue)}

/* Fin de page : rappel de navigation */
.next{border-top:1px solid var(--vi-border);background:var(--vi-stone)}
.next__grid{display:grid;gap:1.2rem}
@media(min-width:760px){.next__grid{grid-template-columns:repeat(3,1fr)}}
.next a{
  display:flex;flex-direction:column;gap:.4rem;text-decoration:none;padding:1.6rem 1.5rem;
  background:var(--vi-surface);border:1px solid var(--vi-border);border-radius:3px;
  transition:border-color .4s var(--ease)}
.next a:hover{border-color:var(--vi-green)}
.next strong{font-family:var(--display);font-weight:300;font-size:1.45rem}
.next span{font-size:var(--step--1);color:var(--vi-ink-2)}
body.theme-zl .next{background:transparent;border-top-color:rgba(65,192,240,.22)}
body.theme-zl .next a{background:rgba(65,192,240,.06);border-color:rgba(65,192,240,.22)}
body.theme-zl .next a:hover{border-color:var(--zl-blue)}
body.theme-zl .next strong{color:var(--zl-5);font-family:var(--ui);font-weight:600;font-size:1.15rem}
body.theme-zl .next span{color:rgba(239,249,254,.7)}

/* Onglet actif dans la navigation */
.nav a.is-current{color:var(--vi-green)}
.nav a.is-current::after{transform:scaleX(1)}
body.theme-zl .nav a.is-current{color:var(--zl-blue)}
@media(min-width:1024px){body.at-top .nav a.is-current{color:var(--vi-cream)}}

/* Mention sanitaire obligatoire dès qu'une boisson alcoolisée est
   montrée ou décrite (art. L3323-4 du code de la santé publique).
   Présente dans le pied de page de toutes les pages, et rappelée
   sous la section bar. */
.evin{
  margin:0 0 .9rem;font-size:.68rem;letter-spacing:.06em;
  color:rgba(237,233,227,.5);
}
.evin--inline{
  margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid var(--vi-border);
  color:var(--vi-ink-2);font-size:var(--step--1);letter-spacing:.02em;
}
body.theme-zl .evin--inline{border-top-color:rgba(65,192,240,.22);color:rgba(239,249,254,.6)}

/* ============================================================
   PAGES LÉGALES
   Texte long, une seule colonne, mesure de lecture confortable.
   ============================================================ */
.legal{max-width:74ch;margin-inline:auto}
.legal h2{font-size:var(--step-2);margin:3rem 0 1rem}
.legal h2:first-of-type{margin-top:1rem}
.legal h3{font-size:1.3rem;margin:2rem 0 .6rem}
.legal p,.legal li{color:#3a3a3a;line-height:1.7}
.legal ul{padding-left:1.2rem;margin:0 0 1.1em}
.legal li{margin-bottom:.5rem}
.legal strong{font-weight:600;color:var(--vi-ink)}
.legal .maj{
  display:block;margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--vi-border);
  font-size:var(--step--1);color:var(--vi-ink-2);
}
.legal .todo{
  background:#FBF3E8;border:1px solid var(--vi-bronze);border-radius:3px;
  padding:1rem 1.2rem;font-size:var(--step--1);color:#6b4a1e;
}

/* Expérience dont le key art n'est pas encore déposé : le gabarit est
   conservé pour ne pas casser l'alignement de la grille. */
.xp__frame--vide{
  aspect-ratio:1456/840;display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,rgba(65,192,240,.05) 0 8px,transparent 8px 16px),
    linear-gradient(180deg,#04222E,#02171f);
}
.xp__frame--vide span{
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(65,192,240,.6);
}

/* ============================================================
   LA QUATRIÈME ACTIVITÉ
   Bloc de bascule en fin de page Activités : la porte du fond,
   posée dans l'univers Club VI, qui mène à la back room.
   ============================================================ */
.teaser{position:relative;background:var(--vi-dark);color:#EDE9E3;overflow:hidden}
.teaser__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:900px){.teaser__grid{grid-template-columns:1.1fr .9fr}}
.teaser .eyebrow{color:rgba(237,233,227,.6)}
.teaser .eyebrow::before{background:var(--zl-blue);width:32px}
.teaser h2{color:#F4F1EC}
.teaser p{color:rgba(237,233,227,.74)}
.teaser .btn--ghost{border-color:rgba(246,242,235,.4);color:#F4F1EC;margin-top:1.8rem}
.teaser .btn--ghost:hover{border-color:var(--zl-blue);color:var(--zl-blue);background:transparent}

/* La porte : un rai de lumière froide dans un mur chaud. Il s'élargit
   au survol et au focus clavier. */
.door{
  position:relative;aspect-ratio:3/4;max-width:320px;margin-inline:auto;display:block;
  background:linear-gradient(150deg,#2a2724,#141312);
  border:1px solid rgba(176,141,87,.28);border-radius:2px;overflow:hidden;
}
.door__seam{
  position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);
  background:var(--zl-blue);
  box-shadow:0 0 22px 6px rgba(65,192,240,.55),0 0 70px 22px rgba(65,192,240,.22);
  transition:width .9s var(--ease),box-shadow .9s var(--ease);
}
.door:hover .door__seam,.door:focus-visible .door__seam{
  width:16px;box-shadow:0 0 40px 12px rgba(65,192,240,.6),0 0 120px 40px rgba(65,192,240,.3);
}
.door__label{
  position:absolute;left:0;right:0;bottom:1.3rem;text-align:center;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(239,249,254,.6);
}
@media (prefers-reduced-motion: reduce){.door__seam{transition:none}}

/* Quand le bandeau précède un titre de page, ce dernier n'a plus à
   dégager la hauteur de l'en-tête fixe : le bandeau s'en charge. */
.topbar + .page-head{padding-top:clamp(2.4rem,5vh,3.6rem)}

/* Page sans bandeau de titre : le premier bloc porte le h1 et doit
   dégager lui-même la hauteur de l'en-tête fixe quand l'annonce du
   haut est masquée. */
.band h1{font-size:var(--step-3);line-height:1.06}
.topbar[hidden] + .band{padding-top:clamp(7rem,11vw,9rem)}

/* ============================================================
   SÉLECTEUR DE LANGUE
   Trois codes séparés par des filets, dans l'en-tête. La langue
   courante est marquée, les autres sont des liens vers la page
   équivalente, jamais vers l'accueil.
   ============================================================ */
.langs{display:flex;align-items:center;gap:.55rem;flex:none;margin-left:.4rem}
.langs a,.langs span{
  font-size:.66rem;letter-spacing:.14em;font-weight:500;text-decoration:none;
  padding:.3rem .1rem;transition:color .35s var(--ease),opacity .35s var(--ease);
}
.langs a{color:var(--vi-ink-2)}
.langs a:hover{color:var(--vi-green)}
.langs span{color:var(--vi-ink)}
.langs i{font-style:normal;color:var(--vi-border);font-size:.6rem}
@media(min-width:1024px){body.at-top .langs a{color:rgba(246,242,235,.6)}}
@media(min-width:1024px){body.at-top .langs a:hover,body.at-top .langs span{color:var(--vi-cream)}}
@media(min-width:1024px){body.at-top .langs i{color:rgba(246,242,235,.3)}}
@media(min-width:1024px){body.theme-zl .langs a{color:rgba(239,249,254,.55)}}
@media(min-width:1024px){body.theme-zl .langs a:hover{color:var(--zl-blue)}}
@media(min-width:1024px){body.theme-zl .langs span{color:var(--zl-5)}}
@media(min-width:1024px){body.theme-zl .langs i{color:rgba(65,192,240,.3)}}

/* Renvoi vers les pages légales françaises depuis les versions
   étrangères : elles ne sont pas traduites, et c'est volontaire. */
.legal-note{
  margin:1rem 0 0;font-size:.68rem;letter-spacing:.04em;
  color:rgba(237,233,227,.45);
}

/* ============================================================
   PERFORMANCE
   ============================================================ */

/* Images allégées pour les petits écrans. Une seule redéfinition
   des variables : aucune classe ni aucun HTML à modifier. Un
   téléphone télécharge environ 390 Ko de moins. */
@media (max-width: 760px){
  :root{
    --img-hero:    url('../img/accueil-fond-sm.webp');
    --img-golf:    url('../img/golf-sm.webp?v=2');
    --img-golf2:   url('../img/golf-minijeux-sm.webp');
    --img-golfkids:url('../img/golfkids-sm.webp');
    --img-golfforce:url('../img/plaquedeforce-sm.webp');
    --img-golfamateur:url('../img/amateurgolf-sm.webp?v=2');
    --img-darts:   url('../img/darts-sm.webp');
    --img-darts-club:url('../img/darts-club-sm.webp?v=2');
    --img-bar:     url('../img/bar-sm.webp');
    --img-croque:  url('../img/croque-sm.webp');
    --img-tartine: url('../img/tartine-sm.webp');
    --img-cesar:   url('../img/cesar-sm.webp');
    --img-charcuterie: url('../img/charcuterie-sm.webp');
    --img-corpo:   url('../img/corpo-sm.webp');
    --img-door:    url('../img/zl-door-sm.webp');
    --img-mosaic-arene:   url('../img/mosaic-arene-sm.webp');
    --img-mosaic-famille: url('../img/mosaic-famille-sm.webp');
    --img-mosaic-amis:    url('../img/mosaic-amis-sm.webp');
    --img-jumanji: url('../img/jumanji-sm.webp?v=2');
    --img-zl-pattern: url('../img/zl-pattern-sm.webp');
    --xp-outbreak:   url('../img/xp-outbreak-sm.webp');
    --xp-outbreak2:  url('../img/xp-outbreak2-sm.webp');
    --xp-solraiders: url('../img/xp-solraiders-sm.webp');
    --xp-farcry:     url('../img/xp-farcry-sm.webp');
    --xp-warhammer:  url('../img/xp-warhammer-sm.webp');
    --xp-jumanji:    url('../img/xp-jumanji-sm.webp');
    --xp-undeadarena: url('../img/xp-undeadarena-sm.webp');
    --xp-singularity: url('../img/xp-singularity-sm.webp');
    --xp-engineerium: url('../img/xp-engineerium-sm.webp?v=2');
    --xp-haunted:     url('../img/xp-haunted-sm.webp');
    --xp-warhammer-tl: url('../img/xp-warhammer-tl-sm.webp');
  }
}

/* Le navigateur saute la mise en page et le dessin des sections
   hors écran, et reprend à l'approche. contain-intrinsic-size
   réserve la hauteur pour que la barre de défilement ne saute pas.
   Le seuil et l'en-tête en sont exclus : ils doivent rester
   calculés en permanence. */
.band:not(.teaser),.next,.horaires{
  content-visibility:auto;
  contain-intrinsic-size:auto 600px;
}

/* will-change réserve une couche GPU : coûteux s'il reste actif en
   permanence. Il n'est posé que pendant la phase collante. */
.leaf,.threshold__beam{will-change:auto}
.threshold__stage:has(.leaf){contain:paint}

/* Couche GPU allouée uniquement pendant la traversée du seuil. */
.threshold.is-live .leaf,
.threshold.is-live .threshold__beam{will-change:transform}

/* ============================================================
   MOBILE
   Sous 1024 px la navigation devient un panneau déroulant.
   Au-dessus, rien ne change : le bouton disparaît et la barre
   reprend sa disposition en ligne.
   ============================================================ */

/* Encoche et barre système des téléphones */
.site-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.wrap{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
body{-webkit-tap-highlight-color:rgba(31,77,58,.12);overscroll-behavior-y:none}

/* Bouton d'ouverture : trois filets, 44 px de zone tactile */
.burger{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  height:40px;padding:0 1.1rem;margin-right:0;cursor:pointer;
  background:rgba(23,23,23,.04);color:var(--vi-ink);
  border:1.5px solid currentColor;border-radius:999px;
  font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:color .5s var(--ease),background .3s var(--ease);
}
body.at-top .burger,body.theme-zl .burger{color:var(--vi-cream);background:rgba(246,242,235,.14)}
.burger__txt--close{display:none}
body.menu-open .burger__txt--open{display:none}
body.menu-open .burger__txt--close{display:inline}
/* Le panneau mobile ouvert a un fond clair : logo et bouton repassent
   en version sombre par-dessus, meme si la page etait transparente
   (haut de page ou zone sombre). Exclu du theme Zero Latency, dont le
   panneau reste sombre. */
body.menu-open:not(.theme-zl) .burger{color:var(--vi-ink);background:rgba(23,23,23,.04)}
body.menu-open:not(.theme-zl) .brand .on-light{opacity:1}
body.menu-open:not(.theme-zl) .brand .on-dark{opacity:0}
@media(min-width:1024px){.burger{display:none}}

.nav__foot{display:none}
.langs--panel{display:none}

@media(max-width:1023px){
  /* Le panneau occupe la largeur, sous l'en-tête, et se déroule. */
  .nav{
    display:block;position:fixed;left:0;right:0;top:0;
    padding:calc(4.6rem + env(safe-area-inset-top)) var(--gutter) 2rem;
    background:var(--vi-bg);border-bottom:1px solid var(--vi-border);
    transform:translateY(-100%);visibility:hidden;
    transition:transform .45s var(--ease),visibility .45s var(--ease);
    max-height:100svh;overflow-y:auto;z-index:-1;
  }
  body.menu-open .nav{transform:none;visibility:visible}
  .nav a{
    display:block;font-size:1.05rem;letter-spacing:.02em;text-transform:none;
    font-family:var(--display);font-weight:300;
    padding:.95rem 0;border-bottom:1px solid var(--vi-border);color:var(--vi-ink);
  }
  .nav a::after{display:none}
  .nav a.is-current{color:var(--vi-green)}
  .nav__foot{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    margin-top:1.6rem;
  }
  .langs--panel{display:flex}
  .langs--bar{display:none}
  .nav__cta{padding:.9rem 1.5rem}
  /* Le texte du bouton Reserver du panneau reste blanc sur le fond vert,
     quel que soit le theme de la page. */
  .nav a.nav__cta,body.theme-zl .nav a.nav__cta{color:#fff;border-bottom:0}
  .header-cta{display:none}

  /* Le panneau reste lisible quel que soit le thème de la page. */
  body.theme-zl .nav{background:var(--zl-navy);border-bottom-color:rgba(65,192,240,.22)}
  body.theme-zl .nav a{color:var(--zl-5);border-bottom-color:rgba(65,192,240,.18)}
  body.menu-open{overflow:hidden}
}

@media(max-width:760px){
  /* Zones tactiles : 44 px minimum sur les codes de langue. */
  .langs a,.langs span{padding:.7rem .35rem}

  /* Le hero démarre plus haut : l'en-tête est plus compact ici. */
  .hero{padding-top:7rem}

  /* La traversée du seuil est raccourcie : à 440 vh elle demandait
     une dizaine de gestes sur un téléphone. */
  .threshold{height:300vh}

  /* Deux colonnes de mondes dès 520 px : dix cartes en file unique
     faisaient une page interminable. */
  .topbar__in{padding-bottom:1.4rem}
  .topbar__title{font-size:clamp(1.4rem,6vw,1.9rem)}
}
@media(min-width:520px) and (max-width:619px){
  .xp-grid{grid-template-columns:repeat(2,1fr)}
}

/* Sans survol possible, la porte respire d'elle-même pour signaler
   qu'elle est vivante. */
@media (hover:none){
  .door__seam{animation:seam 4.5s ease-in-out infinite}
  @keyframes seam{0%,100%{width:3px;opacity:.75}50%{width:9px;opacity:1}}
}
@media (hover:none) and (prefers-reduced-motion:reduce){
  .door__seam{animation:none}
}

.btn--bronze{background:var(--vi-bronze);color:#fff}
.btn--bronze:hover{background:var(--vi-cognac)}
/* ===== GOLF -- bandeau immersif à onglets (débutant / confirmé / pro) ===== */
.golf-hero{
  position:relative;border-radius:3px;overflow:hidden;aspect-ratio:16/10;
  background-color:#1B1815;background-size:cover;background-position:center;
  box-shadow:0 24px 64px -36px rgba(27,27,27,.6);
  margin-top:clamp(2.2rem,5vh,3.5rem);
}
.golf-hero[data-has-img="0"]::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(176,141,87,.24),rgba(31,77,58,.2) 55%,rgba(27,27,27,.34));
}
.golf-hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,13,.05) 32%,rgba(20,16,13,.88));
}
.golf-hero__panel{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1.4rem,4vw,2.6rem);
}
.golf-tabs{display:flex;gap:.5rem;margin-bottom:1.1rem;flex-wrap:wrap}
.golf-tab{
  font-family:var(--ui);font-size:var(--step--1);font-weight:600;letter-spacing:.01em;
  padding:.6rem 1.1rem;border-radius:999px;border:1px solid rgba(246,242,235,.42);
  background:rgba(20,16,13,.35);color:rgba(246,242,235,.86);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.golf-tab:hover{border-color:rgba(246,242,235,.7)}
.golf-tab.is-active{background:var(--vi-cream);color:var(--vi-cognac);border-color:var(--vi-cream)}
.golf-panel__text{max-width:52ch}
.golf-panel__text h3{
  font-family:var(--display);font-weight:600;color:#fff;font-size:var(--step-2);
  margin:0 0 .5rem;
}
.golf-panel__text p{color:rgba(246,242,235,.86);font-size:var(--step-0);line-height:1.55;margin:0}

.golf-facts{
  display:grid;gap:1px;background:var(--vi-border);border:1px solid var(--vi-border);
  margin-top:clamp(2rem,5vh,3rem);
}
@media(min-width:760px){.golf-facts{grid-template-columns:repeat(4,1fr)}}
.golf-fact{background:var(--vi-cream);padding:1.5rem 1.4rem}
.golf-fact strong{display:block;font-family:var(--ui);font-weight:600;font-size:var(--step-0);color:var(--vi-ink);margin-bottom:.4rem}
.golf-fact p{margin:0;font-size:var(--step--1);line-height:1.5;color:var(--vi-ink-2)}

/* Golf : sous 640 px, le bandeau immersif repasse en flux normal --
   éviter le panneau en position absolute sur une image devenue trop
   basse, même défaut de conflit d'ordre déjà rencontré et corrigé sur
   la maquette (la media query doit suivre la règle de base, jamais la
   précéder, sinon elle perd la cascade). */
@media(max-width:640px){
  .golf-hero{
    aspect-ratio:auto;
    display:flex;flex-direction:column;justify-content:flex-end;
    min-height:clamp(420px,128vw,560px);
  }
  .golf-hero__panel{position:relative}
  .golf-hero__scrim{background:linear-gradient(180deg,rgba(20,16,13,.05) 24%,rgba(20,16,13,.90) 58%,rgba(20,16,13,.97))}
}

@media(max-width:640px){
  .topbar__thumb{aspect-ratio:1456/480}
  .topbar__detail{display:none}
  .topbar__link{gap:1rem}
  .topbar__go{margin-top:1rem}
}

/* Bouton Reserver du hero : mobile uniquement (le bouton de l'en-tete
   apparait a partir de 640 px). */
@media(min-width:640px){.hero__reserve-m{display:none}}