/* ============================================================
   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 house */
  --img-hero:    url('../img/hero.webp');          /* accueil, pleine page   */
  --img-golf:    url('../img/golf.webp');          /* baie TrackMan          */
  --img-golf2:   url('../img/golf-minijeux.webp'); /* mini-jeux sur la baie  */
  --img-darts:   url('../img/darts.webp');         /* cible et écran Scolia  */
  --img-bar:     url('../img/bar.webp');           /* comptoir et lounge     */
  --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-zl:      url('../img/zl.webp');            /* joueurs dans l'arène   */
  --img-group:   url('../img/zl-group.webp');      /* le groupe au complet   */
  --img-jumanji: url('../img/jumanji.webp');       /* bandeau d'annonce      */

  /* 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');

  /* 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 house */
  --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;

  --display:'Cormorant Garamond','Times New Roman',serif;
  --ui:'Inter',-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:#1B1815;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(20,16,13,.62), rgba(20,16,13,.93) 78%),
    linear-gradient(180deg, rgba(20,16,13,.7), rgba(20,16,13,.55) 40%, rgba(20,16,13,.88));
}
.intro__in{position:relative;z-index:2;width:100%;max-width:560px}
.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}
body.at-top .nav a{color:var(--vi-cream)}
body.at-top .btn--solid{background:transparent;border-color:rgba(246,242,235,.45);color:var(--vi-cream)}
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)}
body.is-dark .nav a{color:var(--zl-5)}
body.is-dark .nav a.is-zl{color:var(--zl-blue)}
body.is-dark .btn--solid{background:var(--zl-blue);color:var(--zl-navy);border-color:transparent}
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:#1B1815;
  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(20,16,13,.92) 0%,rgba(20,16,13,.72) 38%,rgba(20,16,13,.24) 78%,rgba(20,16,13,.44) 100%),
    linear-gradient(180deg,rgba(20,16,13,.55) 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 .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 HOUSE
   ============================================================ */
.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-darts{background-image:var(--img-darts)}
.m-bar{background-image:var(--img-bar)}
.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)}
.topbar__thumb--jumanji{background-image:var(--img-jumanji)}

.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 house 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);
  will-change:transform;
}
.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);
  will-change:transform;
}
/* 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 house
   ne franchit cette frontière.
   ============================================================ */
.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}
.zl-hero__media{
  margin-top:3rem;aspect-ratio:16/9;border-radius:3px;overflow:hidden;position:relative;
  background-color:#031A24;background-image:var(--img-zl);background-size:cover;background-position:center;
  border:1px solid rgba(65,192,240,.22);
}
.zl-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(0,32,44,.7))}

.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)}

/* Le groupe au complet, en pleine largeur : la preuve visuelle du
   « jusqu'à huit joueurs » annoncé juste au-dessus. */
.zl-band{
  position:relative;margin-top:clamp(2rem,5vh,3.4rem);
  aspect-ratio:16/9;border-radius:3px;overflow:hidden;
  background-color:#031A24;background-image:var(--img-group);
  background-size:cover;background-position:center;
  border:1px solid rgba(65,192,240,.22);
  display:flex;align-items:flex-end;
}
@media(min-width:900px){.zl-band{aspect-ratio:21/9}}
.zl-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,32,44,.88));
}
.zl-band__caption{
  position:relative;z-index:2;margin:0;padding:clamp(1.2rem,3vw,2rem);
  font-family:var(--ui);font-weight:600;letter-spacing:-.015em;
  font-size:var(--step-1);color:var(--zl-5);
}
.zl-band__caption small{font-size:var(--step-0);
  display:block;font-weight:400;letter-spacing:.02em;
  color:rgba(239,249,254,.78);margin-top:.4rem;line-height:1.5;
}

.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)}}
.xp{
  display:flex;flex-direction:column;overflow:hidden;border-radius:3px;
  background:var(--zl-navy);border:1px solid rgba(65,192,240,.22);text-decoration:none;
  transition:border-color .4s var(--ease),transform .5s var(--ease);
}
.xp:hover{border-color:var(--zl-blue);transform:translateY(-4px)}
/* Le key art occupe un gabarit 3/4 fixe et n'est jamais rogné :
   les visuels sont livrés déjà normalisés sur ce format. */
.xp__frame{aspect-ratio:1456/840;background-size:cover;background-position:center;transition:transform .7s var(--ease)}
.xp:hover .xp__frame{transform:scale(1.04)}
.xp__body{padding:1.25rem 1.35rem 1.5rem;border-top:1px solid rgba(65,192,240,.14)}
.xp__tag{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--zl-blue);display:block;margin-bottom:.5rem}
.xp__title{font-family:var(--ui);font-weight:600;font-size:var(--step-1);color:var(--zl-5);letter-spacing:-.015em;display:block;line-height:1.2}
.xp__desc{font-size:var(--step-0);color:rgba(239,249,254,.8);margin:.55rem 0 0;line-height:1.55}
/* 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}
.xp--soon .xp__tag{color:var(--vi-bronze)}

/* ============================================================
   9. RETOUR AU CLUB HOUSE
   ============================================================ */
.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, Scolia et
   Zero Latency disposent chacun d'une version fond clair et d'une
   version fond sombre. */
.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:88px;height:9px;background-image:url('../img/logo-trackman-dark.png')}
.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/logo-trackman-light.png')}
body.at-top .partners .p-scolia,body.theme-zl .partners .p-scolia{background-image:url('../img/logo-scolia-light.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}
body.theme-zl .btn--solid{background:var(--zl-blue);color:var(--zl-navy)}
body.theme-zl .btn--solid:hover{background:#63cef5}
body.theme-zl .page-head{background:transparent;border-bottom-color:rgba(65,192,240,.22)}
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)}
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 house, 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}
body.at-top .langs a{color:rgba(246,242,235,.6)}
body.at-top .langs a:hover,body.at-top .langs span{color:var(--vi-cream)}
body.at-top .langs i{color:rgba(246,242,235,.3)}
body.theme-zl .langs a{color:rgba(239,249,254,.55)}
body.theme-zl .langs a:hover{color:var(--zl-blue)}
body.theme-zl .langs span{color:var(--zl-5)}
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);
}