/* ============================================================
   ACTIVE ROOM — Design System
   Univers : cyberpunk / esport arena
   Palette extraite du logo : magenta néon, cyan électrique,
   vert lime, encre bleu nuit.
   ============================================================ */

:root {
  /* Couleurs de marque */
  --bg: #08051a;
  --bg-2: #0e0926;
  --bg-3: #150e33;
  --ink: #1a1233;
  --magenta: #f02ed9;
  --magenta-soft: rgba(240, 46, 217, 0.14);
  --cyan: #22d7f5;
  --cyan-soft: rgba(34, 215, 245, 0.13);
  --lime: #c5e832;
  --lime-soft: rgba(197, 232, 50, 0.12);
  --white: #f5f3ff;
  --muted: #a59ecf;
  --stroke: rgba(165, 158, 207, 0.16);
  --glass: rgba(21, 14, 51, 0.55);

  /* Typo */
  --font-display: 'Exo 2', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;

  /* Rythme */
  --radius: 20px;
  --radius-sm: 12px;
  --section-pad: clamp(4.5rem, 9vw, 8.5rem);
  --container: 1240px;

  /* Easing signature */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Le rognage horizontal est porté par <html>, pas par <body> : sur <body> il aurait
   fallu compter sur la propagation vers le viewport, qui ne rogne pas réellement.
   1re ligne = repli iOS < 16 ; sur <html> `hidden` est sans danger, c'est déjà
   l'élément de défilement (sur <body> il forçait overflow-y à `auto`, ce qui en
   faisait un second conteneur de défilement et figeait window.scrollY à 0). */
html {
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth; scrollbar-color: var(--magenta) var(--bg-2); scrollbar-width: thin;
}
html:focus-within { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* Pas d'overflow ici : voir le commentaire sur <html>. */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
::selection { background: var(--magenta); color: #fff; }
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Fond global : grille perspective + halos ---------- */
.site-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 18% -5%, rgba(240, 46, 217, 0.13), transparent 60%),
    radial-gradient(ellipse 55% 40% at 85% 8%, rgba(34, 215, 245, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 55% at 50% 110%, rgba(240, 46, 217, 0.08), transparent 65%),
    var(--bg);
}
.site-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(165, 158, 207, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 158, 207, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 30%, transparent 75%);
}
/* Grain statique : texture sans repaint permanent (protège le 60fps). */
.noise {
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Curseur custom ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
}
.cursor-dot { width: 8px; height: 8px; background: var(--cyan); transition: background 0.2s; }
.cursor-ring {
  width: 38px; height: 38px; border: 1.5px solid rgba(34, 215, 245, 0.55);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out),
              border-color 0.25s, background 0.25s;
}
body.cursor-hover .cursor-ring {
  width: 64px; height: 64px;
  border-color: var(--magenta); background: rgba(240, 46, 217, 0.08);
}
body.cursor-hover .cursor-dot { background: var(--magenta); }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- Conteneur ---------- */
.container { width: min(var(--container), 92vw); margin-inline: auto; }

/* ---------- Icônes SVG ---------- */
.icon {
  width: 1.25em; height: 1.25em; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: -0.24em;
}

/* ---------- Transitions de pages (View Transitions API) ---------- */
@view-transition { navigation: auto; }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
::view-transition-old(root) { animation: vt-out 0.28s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 0.45s var(--ease-out) both; }

/* ---------- Barre de progression de scroll ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: var(--magenta);
  transform-origin: left; transform: scaleX(0);
  box-shadow: 0 0 12px rgba(240, 46, 217, 0.6);
  pointer-events: none;
}

/* ---------- Watermark géant ---------- */
.watermark {
  position: absolute; left: 50%; transform: translateX(-50%); top: -0.18em;
  z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(5rem, 17vw, 15rem); line-height: 1; white-space: nowrap;
  text-transform: uppercase; color: transparent;
  -webkit-text-stroke: 1.5px rgba(165, 158, 207, 0.09);
}

/* ---------- Typo display ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.h-xl { font-size: clamp(2.6rem, 8.5vw, 7.5rem); letter-spacing: -0.035em; }
.h-lg { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.h-md { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.grad-text {
  background: linear-gradient(92deg, var(--cyan) 0%, var(--magenta) 55%, var(--lime) 110%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-magenta { color: var(--magenta); }
.text-cyan { color: var(--cyan); }
.text-lime { color: var(--lime); }
.lead { color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 62ch; }

.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.78rem;
  color: var(--cyan);
}
.kicker::before {
  content: ""; width: 26px; height: 2px;
  background: var(--magenta);
}

/* ---------- Boutons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem;
  padding: 1.02rem 2.1rem; border-radius: 14px;
  transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s, background 0.3s, color 0.3s;
  overflow: hidden; isolation: isolate; white-space: nowrap;
}
.btn .arr { transition: transform 0.3s var(--ease-bounce); }
.btn:hover .arr { transform: translateX(5px); }
.btn::after { /* balayage lumineux */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn:hover::after { animation: sweep 0.7s var(--ease-out); }
@keyframes sweep { to { transform: translateX(120%); } }

.btn-primary {
  background: var(--magenta);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(240, 46, 217, 0.45), 0 8px 32px -6px rgba(240, 46, 217, 0.55);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 0 1px rgba(240, 46, 217, 0.7), 0 14px 44px -6px rgba(240, 46, 217, 0.75);
}
.btn-ghost {
  background: rgba(34, 215, 245, 0.06);
  color: var(--cyan);
  box-shadow: inset 0 0 0 1.5px rgba(34, 215, 245, 0.45);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  background: rgba(34, 215, 245, 0.13);
  box-shadow: inset 0 0 0 1.5px var(--cyan), 0 10px 36px -8px rgba(34, 215, 245, 0.45);
}
.btn-lime {
  background: var(--lime); color: #15102f;
  box-shadow: 0 8px 32px -8px rgba(197, 232, 50, 0.55);
}
.btn-lime:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 44px -8px rgba(197, 232, 50, 0.7); }
.btn-xl { font-size: 1.1rem; padding: 1.25rem 2.7rem; }

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
}
/* Le fond flouté est porté par un pseudo-élément, PAS par .header : un
   `backdrop-filter` crée un bloc conteneur pour les descendants `position: fixed`,
   ce qui enfermait le panneau du menu mobile dans la barre au lieu de l'écran. */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(8, 5, 26, 0.78);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--stroke), 0 14px 40px -20px rgba(0, 0, 0, 0.8);
  transition: opacity 0.4s;
}
.header.scrolled::before { opacity: 1; }
/* Barre logo à gauche / liens à droite. Agrandie en haut de page, elle se
   réduit à sa taille normale dès qu'on scrolle (classe .scrolled). */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 96px; gap: 1.5rem;
  transition: height 0.4s var(--ease-out);
}
.header.scrolled .nav { height: 78px; }
.nav-logo img {
  height: 68px; width: auto;
  filter: drop-shadow(0 0 18px rgba(240, 46, 217, 0.5));
  transition: height 0.4s var(--ease-out), filter 0.4s var(--ease-out), transform 0.3s var(--ease-bounce);
}
.header.scrolled .nav-logo img { height: 54px; filter: drop-shadow(0 0 14px rgba(240, 46, 217, 0.45)); }
.nav-logo:hover img { transform: scale(1.07) rotate(-2deg); }
.nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; transition: gap 0.4s var(--ease-out); }
.header.scrolled .nav-links { gap: 2rem; }
.nav-links a:not(.btn) {
  position: relative; font-weight: 500; font-size: 1.08rem; color: var(--muted);
  transition: color 0.25s, font-size 0.4s var(--ease-out); padding: 0.4rem 0;
}
.header.scrolled .nav-links a:not(.btn) { font-size: 0.98rem; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--magenta);
  transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out);
}
.nav-links a:not(.btn):hover, .nav-links a:not(.btn)[aria-current="page"] { color: var(--white); }
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn)[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}
.nav .btn { padding: 0.85rem 1.7rem; font-size: 0.92rem; transition: padding 0.4s var(--ease-out), font-size 0.4s var(--ease-out); }
.header.scrolled .nav .btn { padding: 0.72rem 1.5rem; font-size: 0.85rem; }
.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 110; }
.burger span { width: 26px; height: 2.5px; background: var(--white); border-radius: 2px; transition: 0.35s var(--ease-out); }

@media (max-width: 920px) {
  .burger { display: flex; }
  /* Pas de backdrop-filter ici : flouter tout l'écran coûte une rastérisation
     complète à chaque ouverture, d'où le délai avant que l'animation démarre.
     Le fond est de toute façon opaque à 98 %, le flou ne se voyait pas.
     `visibility` sort le panneau de la composition tant qu'il est fermé. */
  .nav-links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center;
    background: rgba(8, 5, 26, 0.98);
    gap: 2.2rem; visibility: hidden; pointer-events: none;
    /* Le panneau jaillit du burger plutôt que d'apparaître d'un bloc : un cercle
       centré sur le bouton (--ox/--oy, posés par main.js d'après sa position réelle)
       s'étend jusqu'à couvrir l'écran. La fermeture le ravale au même endroit, donc
       le geste dit toujours d'où vient et où repart le menu. */
    /* Courbe dédiée : l'--ease-out du site est un expo qui a parcouru 70 % de la
       distance au cinquième du temps — sur un balayage, ça se lit « instantané ». */
    --ease-wipe: cubic-bezier(0.4, 0.05, 0.2, 1);
    clip-path: circle(0 at var(--ox, calc(100% - 2.6rem)) var(--oy, 2.6rem));
    transition: clip-path 0.3s var(--ease-wipe), visibility 0s linear 0.3s;
  }
  .nav-links a:not(.btn) { font-size: 1.5rem; font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; }
  body.menu-open .nav-links {
    visibility: visible; pointer-events: auto;
    clip-path: circle(var(--r, 150vmax) at var(--ox, calc(100% - 2.6rem)) var(--oy, 2.6rem));
    transition: clip-path 0.44s var(--ease-wipe), visibility 0s;
  }
  /* Les entrées montent en cascade derrière le cercle. Le délai ne vit que dans
     l'état ouvert : à la fermeture tout repart d'un coup, sans traîne. */
  .nav-links li {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  }
  body.menu-open .nav-links li {
    opacity: 1; transform: none;
    transition: opacity 0.45s var(--ease-out) var(--d), transform 0.55s var(--ease-out) var(--d);
  }
  .nav-links li:nth-child(1) { --d: 0.08s; }
  .nav-links li:nth-child(2) { --d: 0.13s; }
  .nav-links li:nth-child(3) { --d: 0.19s; }
  .nav-links li:nth-child(4) { --d: 0.25s; }
  .nav-links li:nth-child(5) { --d: 0.33s; }
  body.menu-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; }
  body.menu-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  /* Le blocage du scroll est posé sur <html>, l'élément de défilement. Sur <body>
     il en aurait fait un second conteneur de défilement (cf. commentaire plus haut). */
  html.menu-open { overflow: hidden; }
}

/* Mouvement réduit : le menu se contente d'un fondu court, sans cercle ni cascade. */
@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .nav-links {
    clip-path: none; opacity: 0;
    transition: opacity 0.15s linear, visibility 0s linear 0.15s;
  }
  body.menu-open .nav-links {
    clip-path: none; opacity: 1;
    transition: opacity 0.15s linear, visibility 0s;
  }
  .nav-links li, body.menu-open .nav-links li { transform: none; transition: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-pad); position: relative; }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1.1rem; }

/* ---------- Cartes verre ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* ---------- Marquee ---------- */
/* Les bandeaux sont inclinés et légèrement agrandis (scale) pour combler les coins
   laissés vides par la rotation : ils dépassent donc de ~5px de chaque côté. `clip`
   les rogne sans créer de conteneur de défilement — la sous-nav reste `sticky`. */
main { overflow-x: clip; }

.marquee {
  --marquee-speed: 45; /* px/s — vitesse de l'auto-défilement piloté en JS */
  overflow: hidden; white-space: nowrap; user-select: none;
  border-block: 1px solid var(--stroke);
  background: rgba(14, 9, 38, 0.6);
  padding-block: 0.95rem;
  transform: rotate(-1.2deg) scale(1.02);
  /* Le bandeau se drague horizontalement (voir main.js) mais un geste vertical
     dessus doit rester un scroll de page : pan-y laisse cette part au navigateur. */
  touch-action: pan-y;
  cursor: grab;
}
.marquee.is-drag { cursor: grabbing; }
/* Pas de `gap` entre les copies : l'écart est porté par le padding de chaque copie.
   Sinon le décalage de -50 % ne vaut pas exactement une copie et le raccord saute.
   Le nombre de copies est calculé en JS (voir main.js) pour couvrir la largeur écran.
   L'animation CSS n'est qu'un secours sans JS — main.js la coupe et pilote en rAF. */
.marquee-track { display: inline-flex; animation: marquee 26s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.12em;
  display: inline-flex; align-items: center; gap: 3rem; color: var(--muted);
  padding-inline-end: 3rem; flex: none;
  transition: color 0.4s;
}
/* Le texte s'éclaire sous le curseur et pendant le drag : même signal
   d'interactivité que le bandeau clients, étendu à tous les bandeaux depuis
   qu'ils se draguent. Le survol est scopé aux vrais pointeurs pour éviter le
   :hover collant après un tap sur mobile — au doigt, c'est is-drag qui allume. */
@media (hover: hover) { .marquee:hover span { color: var(--white); } }
.marquee.is-drag span { color: var(--white); }
.marquee span i { font-style: normal; color: var(--magenta); text-shadow: 0 0 12px rgba(240,46,217,0.8); }
/* Logos en silhouette monochrome : le SVG sert de masque, rempli par
   currentColor — la silhouette suit donc la couleur du texte environnant
   (lavande tamisé, éclairage au survol/drag) sans aucune couleur de marque.
   --r = ratio largeur/hauteur du viewBox, --lh = hauteur (réglage par logo). */
.lm {
  display: inline-block; flex: none; vertical-align: middle;
  height: var(--lh, 1.1em); width: calc(var(--lh, 1.1em) * var(--r, 4));
  background: currentColor;
  -webkit-mask: var(--lm) no-repeat center / contain;
  mask: var(--lm) no-repeat center / contain;
}
/* Emblème + nom écrit : pour les marques dont le logo ne contient pas le nom */
.lm-duo { display: inline-flex; align-items: center; gap: 0.5em; font-weight: inherit; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-48px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal-r { opacity: 0; transform: translateX(48px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal-l.in, .reveal-r.in { opacity: 1; transform: none; }
/* En dessous de 920px les .split passent en une colonne : une entrée latérale n'a
   plus de sens et surtout, les 48px de translateX débordent de la largeur d'écran
   tant que l'élément n'est pas révélé. On bascule sur une entrée verticale. */
@media (max-width: 920px) {
  .reveal-l, .reveal-r { transform: translateY(36px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-l, .reveal-r { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .noise { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Hero : le sol de l'arène ---------- */
.hero {
  /* Le contenu est centré verticalement tandis que .scroll-hint est en absolu :
     sans réserve, sur un écran peu haut le bloc centré descend jusque dans le
     repère « Scroll » (les badges « 2–15 joueurs » le chevauchaient).
     --hint-space = la place occupée par le repère (offset + trait + libellé),
     mise à 0 quand il est masqué. */
  --hint-space: 0px;
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding-top: 110px; padding-bottom: calc(4.5rem + var(--hint-space));
  position: relative; overflow: clip;
}
#arena-floor {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  /* Fondu latéral : les dalles des bords, vues sous un angle rasant, sont
     fortement cisaillées (perspective réelle mais « abusée »). On les
     dissout dans le fond → il ne reste que la piste centrale, qui lit carré. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.hero::after { /* fondu vers la section suivante */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}
.hero-inner { display: grid; gap: 1.7rem; justify-items: center; text-align: center; }
.hero-inner .lead { max-width: 56ch; }
.hero-title { text-wrap: balance; line-height: 0.98; }
/* ---------- Petits écrans (iPhone SE & co) ----------
   Trois éléments gardaient une largeur minimale supérieure au conteneur et
   débordaient à droite. Ils ne se réduisaient pas d'eux-mêmes : */
@media (max-width: 420px) {
  /* 1. « Battez le record. » est en white-space: nowrap (indispensable au scramble,
        sinon le texte se recompose à chaque image) et impose sa largeur au titre.
        Le plancher du clamp de .h-xl (2.6rem) le rendait trop large. */
  .hero-title { font-size: clamp(1.9rem, 8.2vw, 2.6rem); }
  /* 2. Le kicker est un inline-flex : il prenait sa largeur max-content, letter-spacing
        compris, sans jamais se couper. */
  .kicker { max-width: 100%; flex-wrap: wrap; letter-spacing: 0.16em; }
  /* 3. Les boutons sont en white-space: nowrap : leur libellé plus 2.1rem de padding
        de chaque côté dépassait le conteneur. On resserre plutôt que d'autoriser le
        retour à la ligne, qui casserait la pastille. */
  .btn { padding-inline: 1.35rem; letter-spacing: 0.03em; font-size: 0.9rem; }
  .btn-xl { font-size: 1rem; padding: 1.1rem 1.5rem; }
}
/* clip-path (au lieu d'overflow:hidden) : masque en VERTICAL pour l'animation
   d'apparition, mais laisse déborder en HORIZONTAL → les symboles larges du
   scramble peuvent dépasser dans le vide sans être rognés ni décaler le bloc. */
.hero-title .line { display: block; overflow: visible; clip-path: inset(0 -50% 0 -50%); }
.hero-title .line > span { display: inline-block; transform: translateY(110%); animation: riseUp 1s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
/* Scramble en 2 couches empilées dans une même cellule de grille : le fantôme
   (invisible) fige la taille de la mise en page, la couche live (par-dessus,
   centrée) affiche le brouillage. Alignement pixel-perfect, zéro décalage ;
   les symboles larges débordent de la cellule et sont autorisés par le
   clip-path de .line. */
.hero-title .line [data-scramble] { display: inline-grid; position: relative; white-space: nowrap; }
.hero-title .scr-ghost { grid-area: 1 / 1; visibility: hidden; }
/* Couche live en absolu : hors du flux (ne pousse jamais la mise en page),
   largeur naturelle (donc réellement centrable), centrée sur le fantôme. */
.hero-title .scr-live {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  white-space: nowrap;
}
@keyframes riseUp { to { transform: translateY(0); } }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hero-badges { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.05rem; border-radius: 99px; font-size: 0.88rem; font-weight: 600;
  background: rgba(34, 215, 245, 0.07); color: var(--white);
  border: 1px solid rgba(34, 215, 245, 0.25);
}
.badge b { color: var(--cyan); font-family: var(--font-display); font-style: italic; }
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: 0.78rem;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.scroll-hint::after {
  content: ""; width: 1.5px; height: 42px;
  background: linear-gradient(var(--cyan), transparent);
  animation: scrollPulse 1.8s var(--ease-out) infinite;
}
@keyframes scrollPulse { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Hero : adaptation à la HAUTEUR du viewport ----------
   (déclaré après les règles de base du hero pour les surcharger à égalité
   de spécificité). Sur un écran peu haut, le contenu centré descendait
   jusque dans le repère « Scroll » : les badges « 2–15 joueurs » passaient
   sous son trait. Deux leviers : réserver la place du repère en bas du hero
   (--hint-space) et plafonner le titre à la hauteur disponible — sinon la
   réserve pousse simplement le hero sous la ligne de flottaison. */
@media (min-width: 761px) {
  .hero { --hint-space: 74px; }
  /* 3 lignes à 10,6vh + le reste (fixe) tiennent dans 100svh. */
  .hero-title { font-size: clamp(2.6rem, min(8.5vw, 10.6vh), 7.5rem); }
}
/* Portables 13–14" avec barre d'onglets (≈1440×800) : on resserre le repère et
   les interlignes plutôt que d'empiler encore de la réserve. */
@media (min-width: 761px) and (max-height: 860px) {
  .hero { --hint-space: 56px; padding-top: 92px; }
  .hero-inner { gap: 1.25rem; }
  .hero-inner .lead { font-size: 1.05rem; }
  .hero-title { font-size: clamp(2.2rem, min(8.5vw, 10.5vh), 7.5rem); }
  .scroll-hint { bottom: 16px; font-size: 0.72rem; }
  .scroll-hint::after { height: 30px; }
}
/* Lead, CTA et badges sont de hauteur fixe : sous ~780px seul le titre peut
   encore céder du terrain. */
@media (min-width: 761px) and (max-height: 780px) {
  .hero-title { font-size: clamp(2.2rem, min(8.5vw, 9.2vh), 7.5rem); }
}
/* Sous ~700px (dont les téléphones en paysage) le repère n'a plus de place. */
@media (min-width: 761px) and (max-height: 700px) {
  .hero { --hint-space: 0px; }
  .scroll-hint { display: none; }
}

/* ---------- Preuve réelle (bande full-bleed) ---------- */
.proof { padding-block: var(--section-pad) 0; }
.proof .section-head { text-align: center; justify-items: center; }
.proof-rail {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 0.8vw, 12px);
}
.proof-item {
  position: relative; overflow: hidden; margin: 0;
  height: clamp(320px, 52vh, 560px);
  border-radius: var(--radius);
}
.proof-item img {
  width: 100%; height: 100%; object-fit: cover;
  scale: 1.14; /* marge pour la parallaxe, compose avec translateY */
  filter: saturate(1.08);
  transition: scale 0.7s var(--ease-out);
}
.proof-item:hover img { scale: 1.2; }
.proof-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(200deg, rgba(34, 215, 245, 0.08), transparent 40%),
    linear-gradient(180deg, transparent 55%, rgba(8, 5, 26, 0.85));
}
.proof-item figcaption {
  position: absolute; left: 1.2rem; bottom: 1.1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.14em;
}
.proof-item figcaption::before {
  content: ""; width: 9px; height: 9px; flex-shrink: 0;
  background: var(--pc, var(--cyan)); box-shadow: 0 0 12px var(--pc, var(--cyan));
}
@media (max-width: 860px) {
  .proof-rail {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* `overflow-x: auto` fait passer overflow-y de `visible` à `auto` : le rail
       devenait scrollable verticalement et capturait le geste de scroll de la page.
       `overflow-y: hidden` suffit à rendre l'axe vertical à la page. Surtout pas de
       `touch-action: pan-x` ici : ça interdit le pan vertical AU DOIGT sur le rail,
       donc le pouce posé dessus bloquait le scroll de la page. */
    overflow-y: hidden;
    overscroll-behavior-x: contain; /* évite de déclencher le geste « retour » iOS */
  }
  .proof-rail::-webkit-scrollbar { display: none; }
  /* Sans ça, le translateY(36px) du reveal recrée le débordement vertical. */
  .proof-rail .reveal { transform: none; }
  .proof-item { flex: 0 0 76vw; height: 340px; scroll-snap-align: center; }
}

/* ---------- Cartes activité ---------- */
.game-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 980px) { .game-cards { grid-template-columns: 1fr; } }
.game-card {
  --glow: var(--cyan);
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--stroke);
  display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s, border-color 0.45s;
  transform-style: preserve-3d; will-change: transform;
}
.game-card:hover {
  transform: translateY(-10px);
  border-color: color-mix(in srgb, var(--glow) 55%, transparent);
  box-shadow: 0 24px 60px -18px color-mix(in srgb, var(--glow) 38%, transparent);
}
.game-card.is-lime { --glow: var(--lime); }
.game-card.is-cyan { --glow: var(--cyan); }
.game-card.is-magenta { --glow: var(--magenta); }
/* Coins HUD esport au survol */
.game-card::before, .game-card::after {
  content: ""; position: absolute; width: 22px; height: 22px; z-index: 3;
  opacity: 0; transition: opacity 0.4s, transform 0.4s var(--ease-out); pointer-events: none;
}
.game-card::before { top: 10px; left: 10px; border-top: 2px solid var(--glow); border-left: 2px solid var(--glow); transform: translate(8px, 8px); }
.game-card::after { bottom: 10px; right: 10px; border-bottom: 2px solid var(--glow); border-right: 2px solid var(--glow); transform: translate(-8px, -8px); }
.game-card:hover::before, .game-card:hover::after { opacity: 1; transform: translate(0, 0); }
.game-card .gc-media { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.game-card .gc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-out); filter: saturate(1.1);
}
.game-card:hover .gc-media img { transform: scale(1.07); }
.game-card .gc-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--bg-2) 100%);
}
.gc-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.4rem 0.85rem; border-radius: 8px;
  background: color-mix(in srgb, var(--glow) 18%, rgba(8,5,26,0.7));
  color: var(--glow); border: 1px solid color-mix(in srgb, var(--glow) 45%, transparent);
  backdrop-filter: blur(8px);
}
.gc-body { padding: 1.6rem 1.6rem 1.8rem; display: grid; gap: 0.8rem; flex: 1; align-content: start; }
.gc-body h3 { font-size: 1.55rem; color: var(--glow); text-shadow: 0 0 22px color-mix(in srgb, var(--glow) 45%, transparent); }
.gc-body p { color: var(--muted); font-size: 0.98rem; }
.gc-meta { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.6rem; }
.gc-meta span {
  font-size: 0.8rem; font-weight: 600; padding: 0.32rem 0.75rem; border-radius: 99px;
  background: rgba(165, 158, 207, 0.08); border: 1px solid var(--stroke); color: var(--muted);
}
.gc-link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; font-size: 0.88rem; color: var(--white);
}
.gc-link .arr { transition: transform 0.3s var(--ease-bounce); color: var(--glow); }
.game-card:hover .gc-link .arr { transform: translateX(6px); }

/* Entrée chorégraphiée des cartes — sur translate/scale (indépendants de
   transform) pour ne jamais entrer en conflit avec le hover + le tilt 3D JS.
   Remplace le .reveal générique qui, écrasé par la transition de .game-card,
   faisait "popper" les cartes d'un coup (opacité non transitionnée, stagger perdu). */
.game-card.reveal { opacity: 0; transform: none; translate: 0 52px; scale: 0.96; }
.game-card.reveal.in {
  animation: cardRise 0.9s var(--ease-out) both;
  animation-delay: var(--d, 0s);
}
@keyframes cardRise {
  0%   { opacity: 0; translate: 0 52px; scale: 0.96; filter: blur(7px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; translate: 0 0;    scale: 1;    filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .game-card.reveal { opacity: 1; translate: none; scale: 1; }
  .game-card.reveal.in { animation: none; }
}

/* ---------- Étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 2rem 1.8rem; display: grid; gap: 0.7rem; align-content: start; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 3.2rem;
  line-height: 1; background: linear-gradient(180deg, var(--cyan), transparent 130%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: 0.9;
}
.step h3 { font-size: 1.25rem; }
.step p { color: var(--muted); font-size: 0.97rem; }

/* ---------- Stats compteurs (page Réserver : capacités des salles) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; text-align: center; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: 2rem 1rem; display: grid; gap: 0.4rem; }
.stat .num {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 1;
}
.stat:nth-child(1) .num { color: var(--magenta); text-shadow: 0 0 30px rgba(240,46,217,0.5); }
.stat:nth-child(2) .num { color: var(--cyan); text-shadow: 0 0 30px rgba(34,215,245,0.5); }
.stat:nth-child(3) .num { color: var(--lime); text-shadow: 0 0 30px rgba(197,232,50,0.5); }
.stat:nth-child(4) .num { color: var(--white); text-shadow: 0 0 30px rgba(245,243,255,0.4); }
.stat .lbl { color: var(--muted); font-size: 0.92rem; }

/* ---------- Avis Google ---------- */
/* Le panneau de note reste collé pendant que la colonne d'avis défile : c'est ce
   décalage de vitesse entre les deux colonnes qui casse le rythme « grille de
   cartes » utilisé par les autres sections. */
.avis-section { overflow: clip; }

.avis-layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.6fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 1040px) { .avis-layout { grid-template-columns: 1fr; } }

.avis-score { position: sticky; top: 7rem; display: grid; gap: 1.1rem; }
@media (max-width: 1040px) { .avis-score { position: static; } }

.score-board { padding: 1.9rem 1.7rem; display: grid; gap: 0.9rem; justify-items: start; margin-top: 0.6rem; }
.score-figure { display: flex; align-items: baseline; gap: 0.45rem; }
.score-num {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(3.6rem, 7vw, 5.4rem); line-height: 0.85;
  background: linear-gradient(120deg, var(--lime), var(--cyan) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(197, 232, 50, 0.35));
}
.score-max { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 1.25rem; color: var(--muted); }
.score-stars { display: flex; gap: 0.28rem; color: var(--lime); }
.score-stars .icon { width: 1.35rem; height: 1.35rem; filter: drop-shadow(0 0 9px rgba(197, 232, 50, 0.55)); }
.score-count { color: var(--muted); font-size: 0.95rem; }
.score-count b { color: var(--white); font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }

.avis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (max-width: 620px) { .avis-grid { grid-template-columns: 1fr; } }
/* Décalage vertical d'une colonne sur deux : la grille perd son alignement
   « tableau » sans recourir à du masonry (mal supporté). Il passe par `--offset`
   et non par `transform`, qui sert déjà à l'apparition et au survol. */
@media (min-width: 621px) { .avis-grid > :nth-child(even) { --offset: 2.2rem; } }
@media (min-width: 621px) and (max-width: 1040px) { .avis-grid { margin-bottom: 2.2rem; } }

/* Repli mobile : seules les 3 premières cartes restent affichées, les autres
   sont dépliées par le bouton. `js-clamp` est posée par main.js pour que la
   liste reste entière si le JS ne tourne pas. */
.avis-more { display: none; justify-self: center; margin-top: 0.4rem; }
.btn:hover .arr-down { transform: translateY(4px); }
@media (max-width: 620px) {
  .avis-grid.js-clamp > .avis-card:nth-child(n+4) { display: none; }
  .avis-more:not([hidden]) { display: inline-flex; }
}

.avis-card {
  --acc: var(--cyan);
  --offset: 0rem;
  --lift: 0px;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 1.5rem 1.4rem 1.2rem; display: grid; gap: 0.9rem;
  /* Les cartes d'une même rangée sont étirées à la plus haute : c'est la ligne du
     texte qui absorbe le surplus (1fr), pour que le pied — date et lien de
     vérification — reste ancré au bas de la carte plutôt que de flotter. */
  grid-template-rows: auto 1fr auto;
  transform: translateY(calc(var(--offset) + var(--lift)));
  transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s;
}
.avis-card.is-cyan { --acc: var(--cyan); }
.avis-card.is-magenta { --acc: var(--magenta); }
.avis-card.is-lime { --acc: var(--lime); }
/* Filet néon en tête de carte : dessiné du centre vers les bords à l'apparition,
   puis porté à pleine intensité au survol. */
.avis-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity: 0.5; transform: scaleX(0); transform-origin: 50% 50%;
  transition: opacity 0.4s, transform 0.9s var(--ease-out) calc(var(--d, 0s) + 0.22s);
}
.avis-card:hover { --lift: -6px; border-color: color-mix(in oklab, var(--acc) 45%, transparent); box-shadow: 0 26px 60px -30px color-mix(in oklab, var(--acc) 70%, transparent); }
.avis-card:hover::before { opacity: 1; }

/* ---- Apparition en cascade (délai `--d` calculé en JS selon la position) ---- */
/* La carte monte en se défloutant ; l'avatar et le guillemet suivent en léger
   décalage pour que le mouvement se lise en profondeur plutôt qu'en bloc. */
.avis-card {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(calc(var(--offset) + 42px)) scale(0.955);
  transition:
    opacity 0.75s var(--ease-out) var(--d, 0s),
    filter 0.85s var(--ease-out) var(--d, 0s),
    transform 0.95s var(--ease-out) var(--d, 0s),
    border-color 0.4s, box-shadow 0.5s;
}
.avis-card.is-in {
  opacity: 1; filter: blur(0);
  transform: translateY(calc(var(--offset) + var(--lift)));
}
.avis-card.is-in::before { transform: scaleX(1); }

.avis-card .avis-pic,
.avis-card .avis-quote {
  opacity: 0; transform: scale(0.72);
  transition: opacity 0.6s var(--ease-out) calc(var(--d, 0s) + 0.18s),
              transform 0.8s var(--ease-bounce) calc(var(--d, 0s) + 0.18s);
}
.avis-card .avis-quote { transform: translateY(14px) scale(0.9); }
.avis-card.is-in .avis-pic { opacity: 1; transform: scale(1); }
.avis-card.is-in .avis-quote { opacity: 0.14; transform: none; }

/* Les étoiles s'allument une à une, de gauche à droite. */
.avis-card .avis-rating .icon {
  opacity: 0; transform: scale(0.4) rotate(-25deg);
  transition: opacity 0.4s var(--ease-out) calc(var(--d, 0s) + 0.3s + var(--s) * 0.06s),
              transform 0.5s var(--ease-bounce) calc(var(--d, 0s) + 0.3s + var(--s) * 0.06s);
}
.avis-card .avis-rating .icon:nth-child(1) { --s: 0; }
.avis-card .avis-rating .icon:nth-child(2) { --s: 1; }
.avis-card .avis-rating .icon:nth-child(3) { --s: 2; }
.avis-card .avis-rating .icon:nth-child(4) { --s: 3; }
.avis-card .avis-rating .icon:nth-child(5) { --s: 4; }
.avis-card.is-in .avis-rating .icon { opacity: 1; transform: none; }

/* Le guillemet vit dans le contexte d'empilement de la carte (isolation: isolate) :
   z-index 0 le pose au-dessus du fond, les blocs de contenu passent en z-index 1. */
.avis-quote {
  /* `overflow: hidden` sur la carte rogne tout ce qui dépasse : l'encre du glyphe
     « ” » occupant le haut de sa boîte, le décalage vers le haut reste minime. */
  position: absolute; z-index: 0; top: -0.06em; right: 0.16em;
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 9rem; line-height: 1; color: var(--acc); opacity: 0.14; pointer-events: none;
}
.avis-head, .avis-text, .avis-foot { position: relative; z-index: 1; }

.avis-head { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.85rem; align-items: center; }
.avis-pic {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid color-mix(in oklab, var(--acc) 55%, transparent);
  box-shadow: 0 0 0 3px rgba(8, 5, 26, 0.9), 0 0 18px -4px var(--acc);
}
.avis-id { display: grid; }
.avis-id b { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 1.02rem; letter-spacing: 0.01em; }
.avis-id small { color: var(--muted); font-size: 0.78rem; }
.avis-rating { grid-column: 2; display: flex; gap: 0.12rem; color: var(--lime); }
.avis-rating .icon { width: 0.92rem; height: 0.92rem; }

.avis-text { color: var(--muted); font-size: 0.95rem; line-height: 1.65; }

.avis-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem;
  border-top: 1px solid var(--stroke); padding-top: 0.85rem; margin-top: 0.15rem;
  font-size: 0.78rem; color: var(--muted);
}
.avis-foot time { text-transform: lowercase; letter-spacing: 0.04em; }
.avis-foot a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--white); text-decoration: none; opacity: 0.75; transition: opacity 0.3s, color 0.3s; }
.avis-foot a:hover { opacity: 1; color: var(--acc); }
.avis-g { width: 0.92rem; height: 0.92rem; fill: currentColor; stroke: none; opacity: 0.7; }
.avis-foot .ext { transition: transform 0.3s var(--ease-out); }
.avis-foot a:hover .ext { transform: translate(2px, -2px); }

/* Mouvement réduit : les cartes sont posées à leur état final, sans cascade. */
@media (prefers-reduced-motion: reduce) {
  .avis-card, .avis-card::before, .avis-foot .ext,
  .avis-card .avis-pic, .avis-card .avis-quote, .avis-card .avis-rating .icon { transition: none; }
  .avis-card { opacity: 1; filter: none; transform: translateY(var(--offset)); }
  .avis-card::before { transform: scaleX(1); }
  .avis-card .avis-pic, .avis-card .avis-rating .icon { opacity: 1; transform: none; }
  .avis-card .avis-quote { opacity: 0.14; transform: none; }
}

/* ---------- Split média/texte ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } }
.split-copy { display: grid; gap: 1.2rem; justify-items: start; }
.media-stack { position: relative; padding-bottom: 9%; }
.media-stack img {
  border-radius: var(--radius); border: 1px solid var(--stroke);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  object-fit: cover; height: auto; /* neutralise l'attribut height d'<Image>, laisse aspect-ratio gouverner */
}
.media-stack .img-back { width: 78%; aspect-ratio: 4 / 3; }
.media-stack .img-front {
  position: absolute; right: 0; bottom: -5%; width: 52%; aspect-ratio: 1 / 1;
  box-shadow: 0 24px 60px -20px rgba(240, 46, 217, 0.35);
}
@media (max-width: 920px) {
  .media-stack { padding-bottom: 0; }
  .media-stack .img-back { width: 100%; aspect-ratio: 16 / 10; }
  .media-stack .img-front { display: none; }
}
.media-stack::after {
  content: ""; position: absolute; inset: -8% -6%; z-index: -1; border-radius: 30px;
  background: radial-gradient(ellipse at 70% 80%, rgba(240, 46, 217, 0.16), transparent 65%);
}

/* ---------- Tuiles événements ---------- */
.event-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
@media (max-width: 980px) { .event-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .event-tiles { grid-template-columns: 1fr; } }
.event-tile {
  --glow: var(--cyan);
  position: relative; isolation: isolate;
  padding: 1.7rem 1.5rem 1.75rem; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--stroke); overflow: hidden;
  display: grid; gap: 0.5rem; align-content: start;
  transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}
.event-tile:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--glow) 50%, transparent);
  box-shadow: 0 20px 50px -18px color-mix(in srgb, var(--glow) 35%, transparent);
}
/* Nappe d'accent diffuse depuis le coin de l'icône — remplace l'ancien liseré
   de 3px collé en haut, que l'arrondi rognait et qui flottait au-dessus de la
   bordure. L'accent naît maintenant de l'icône et se réveille au survol. */
.event-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(115% 85% at 0% 0%, color-mix(in srgb, var(--glow) 15%, transparent), transparent 62%);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.event-tile:hover::before { opacity: 1; }
/* Coin HUD au survol : même vocabulaire que les cartes de jeu */
.event-tile::after {
  content: ""; position: absolute; right: 13px; bottom: 13px; width: 18px; height: 18px;
  border-right: 2px solid var(--glow); border-bottom: 2px solid var(--glow);
  opacity: 0; transform: translate(-6px, -6px); pointer-events: none;
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}
.event-tile:hover::after { opacity: 1; transform: translate(0, 0); }
/* Pastille : l'accent porte l'icône plutôt qu'un ruban décoratif */
.event-tile .icon {
  width: 42px; height: 42px; padding: 9px; border-radius: 12px;
  color: var(--glow); vertical-align: middle;
  background: color-mix(in srgb, var(--glow) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--glow) 26%, transparent);
  margin-bottom: 0.5rem;
  transition: background-color 0.4s, border-color 0.4s, transform 0.4s var(--ease-bounce);
}
.event-tile:hover .icon {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--glow) 20%, transparent);
  border-color: color-mix(in srgb, var(--glow) 52%, transparent);
}
.event-tile h3 { font-size: 1.18rem; display: flex; align-items: baseline; gap: 0.4rem; }
.event-tile h3::after {
  content: "→"; font-style: normal; color: var(--glow); opacity: 0.5;
  transition: opacity 0.35s, transform 0.35s var(--ease-bounce);
}
.event-tile:hover h3::after { opacity: 1; transform: translateX(5px); }
.event-tile p { color: var(--muted); font-size: 0.92rem; }
@media (prefers-reduced-motion: reduce) {
  .event-tile, .event-tile::before, .event-tile::after,
  .event-tile .icon, .event-tile h3::after { transition: none; }
  .event-tile:hover { transform: none; }
  .event-tile:hover .icon, .event-tile:hover h3::after { transform: none; }
}

/* ---------- FAQ accordion ---------- */
.faq-list { display: grid; gap: 0.9rem; max-width: 860px; margin-inline: auto; align-content: start; }
.faq-split { align-items: start; }
.faq-split .faq-list { margin-inline: 0; }
.faq-item { border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.3s; }
.faq-item summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem; cursor: pointer; font-weight: 600; font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  /* Plus tracé en CSS (2 barres) plutôt qu'un glyphe « + » : centrage optique exact */
  content: ""; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(34, 215, 245, 0.35); background-color: transparent;
  background-image: linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan));
  background-size: 12px 2px, 2px 12px;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.35s var(--ease-bounce), background-color 0.3s, border-color 0.3s;
}
.faq-item[open] summary::after {
  transform: rotate(45deg); background-color: var(--magenta); border-color: var(--magenta);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
}
.faq-item[open] { border-color: rgba(240, 46, 217, 0.35); }
.faq-body { padding: 0 1.5rem 1.4rem; color: var(--muted); font-size: 0.98rem; overflow: hidden; }
.faq-body ul { padding-left: 1.2rem; display: grid; gap: 0.3rem; margin-top: 0.4rem; }

/* ---------- Bandeau CTA final ---------- */
.cta-band {
  position: relative; text-align: center; padding: clamp(3.5rem, 7vw, 6rem) 1.5rem;
  border-radius: calc(var(--radius) + 8px); overflow: hidden;
  background:
    radial-gradient(ellipse 70% 120% at 50% 130%, rgba(240, 46, 217, 0.28), transparent 60%),
    radial-gradient(ellipse 50% 90% at 12% -10%, rgba(34, 215, 245, 0.2), transparent 60%),
    var(--bg-3);
  border: 1px solid rgba(240, 46, 217, 0.25);
  display: grid; gap: 1.6rem; justify-items: center;
}
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 18ch; }
.cta-band p { color: var(--muted); max-width: 52ch; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--stroke); background: rgba(8, 5, 26, 0.85); margin-top: var(--section-pad); }
.footer-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-block: 4rem 3rem;
}
@media (max-width: 920px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.18em;
  color: var(--cyan); margin-bottom: 1.1rem;
}
.footer ul { list-style: none; display: grid; gap: 0.6rem; }
.footer a, .footer li { color: var(--muted); font-size: 0.95rem; transition: color 0.25s; }
.footer a:hover { color: var(--white); }
.footer-brand img { height: 74px; margin-bottom: 1rem; filter: drop-shadow(0 0 16px rgba(240, 46, 217, 0.4)); }
.footer-brand p { color: var(--muted); font-size: 0.92rem; max-width: 30ch; }
.footer-socials { display: flex; gap: 0.8rem; margin-top: 1.2rem; }
.footer-socials a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--stroke); transition: 0.3s;
}
.footer-socials a:hover { border-color: var(--magenta); box-shadow: 0 0 22px -4px var(--magenta); transform: translateY(-3px); }
.footer-socials svg { width: 19px; height: 19px; fill: var(--muted); transition: fill 0.3s; }
.footer-socials a:hover svg { fill: var(--white); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.4rem; border-top: 1px solid var(--stroke);
  color: var(--muted); font-size: 0.85rem;
}
.footer-bottom .legal { display: flex; gap: 1.4rem; }

/* ---------- Page hero (pages internes) ---------- */
.page-hero { padding-top: clamp(9rem, 16vw, 12rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); position: relative; }
.page-hero .container { display: grid; gap: 1.3rem; justify-items: start; }

/* ---------- Sous-nav sticky activités ---------- */
.subnav {
  /* --header-h suit la hauteur réelle du header (96px en haut, 78px réduit),
     mise à jour par main.js — la barre se cale dessous sans jamais le chevaucher. */
  position: sticky; top: var(--header-h, 78px); z-index: 50;
  background: rgba(8, 5, 26, 0.82); backdrop-filter: blur(16px);
  border-block: 1px solid var(--stroke);
}
.subnav .container {
  display: flex; gap: 0.4rem; overflow-x: auto; padding-block: 0.7rem;
  scrollbar-width: none;
  /* Même raison que .proof-rail : pas de `touch-action: pan-x`, sinon le doigt posé
     sur la sous-nav empêche de scroller la page. */
  overflow-y: hidden; overscroll-behavior-x: contain;
}
.subnav .container::-webkit-scrollbar { display: none; }
/* Fondu sur le bord vers lequel il reste des liens à faire défiler : sans lui,
   rien n'indique qu'il y a trois jeux quand le troisième est hors écran. */
.subnav .container.can-scroll-end { mask-image: linear-gradient(to right, #000 82%, transparent); }
.subnav .container.can-scroll-start { mask-image: linear-gradient(to left, #000 82%, transparent); }
.subnav .container.can-scroll-start.can-scroll-end {
  mask-image: linear-gradient(to right, transparent, #000 8% 92%, transparent);
}
.subnav a {
  flex-shrink: 0; padding: 0.55rem 1.3rem; border-radius: 99px; font-size: 0.9rem; font-weight: 600;
  color: var(--muted); border: 1px solid transparent; transition: 0.3s;
  font-family: var(--font-display); font-style: italic; text-transform: uppercase; letter-spacing: 0.05em;
}
.subnav a:hover, .subnav a.active { color: var(--white); border-color: var(--stroke); background: rgba(165, 158, 207, 0.07); }
.subnav a.active { border-color: var(--magenta); box-shadow: 0 0 18px -6px var(--magenta); }

/* Mobile : plutôt que de mieux signaler un rail scrollable, on supprime le scroll.
   Trois liens seulement — on coupe le sous-titre (« — le sol ») et on répartit les
   pastilles sur trois colonnes égales. Bénéfice principal : la pastille active du
   scrollspy reste toujours visible, alors qu'elle sortait de l'écran sur RIVAL QUIZ. */
@media (max-width: 620px) {
  .subnav .container {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem;
    overflow: hidden;
  }
  /* Le fondu n'a plus lieu d'être — et il faut la même spécificité pour l'annuler. */
  .subnav .container,
  .subnav .container.can-scroll-start,
  .subnav .container.can-scroll-end { mask-image: none; }
  .subnav .sn-sub { display: none; }
  .subnav a {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.55rem 0.4rem; font-size: 0.82rem; letter-spacing: 0.03em;
    border-color: var(--stroke); background: rgba(165, 158, 207, 0.05);
  }
  .subnav a .icon { flex-shrink: 0; }
}

/* ---------- Sections jeu (page activités) ---------- */
.game-section { padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; }
/* Anciennes ancres (#grid, #push) conservées après le renommage des salles :
   calées sur le haut de la section, comme l'ancre principale. */
.anchor-alias { position: absolute; top: 0; left: 0; }
.game-section .split-copy h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.specs { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.spec {
  display: grid; gap: 0.1rem; padding: 0.8rem 1.2rem; border-radius: var(--radius-sm);
  background: rgba(165, 158, 207, 0.06); border: 1px solid var(--stroke); min-width: 110px;
}
.spec b { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }
.spec small { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-top: 2.2rem; }
.mode {
  --glow: var(--cyan);
  padding: 1.3rem 1.25rem; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--stroke);
  display: grid; gap: 0.45rem; align-content: start;
  transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s;
}
.mode:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--glow) 50%, transparent);
  box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--glow) 40%, transparent);
}
.mode h4 {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; font-size: 1rem; color: var(--glow);
}
.mode p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

/* Badges officiels des mini-jeux (assets du jeu : fond hexagonal + pictogramme fusionnés).
   Le cadre fait partie de l'image, donc pas de tuile — le badge se pose sur la carte.
   L'accent suit le thème de la salle : PIXEL ROOM cyan, PUSH ARENA lime. */
.modes-badge { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.modes-badge.glow-cyan .mode { --glow: var(--cyan); }
.modes-badge.glow-lime .mode { --glow: var(--lime); }
.mode-badge {
  width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 0.4rem;
  transition: transform 0.45s var(--ease-bounce);
}
.mode-badge img {
  width: 76px; height: 76px; object-fit: contain; display: block;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--glow) 40%, transparent));
  transition: filter 0.35s, transform 0.45s var(--ease-out);
}
.mode:hover .mode-badge { transform: translateY(-2px); }
.mode:hover .mode-badge img { transform: scale(1.06); filter: drop-shadow(0 0 20px color-mix(in srgb, var(--glow) 70%, transparent)); }

@media (prefers-reduced-motion: reduce) {
  .mode-badge, .mode-badge img { transition: none; }
  .mode:hover .mode-badge, .mode:hover .mode-badge img { transform: none; }
}

/* Sur desktop le rail n'est qu'un conteneur transparent : la grille garde la main. */
.rail-progress { display: none; }

/* Mobile : 7 modes empilés = un scroll interminable. On les couche en rail
   horizontal à snap, pleine largeur (les cartes dépassent des gouttières pour
   signaler qu'on peut glisser). Mêmes précautions que .proof-rail. */
@media (max-width: 760px) {
  .modes-rail { --gutter: 4vw; }
  .modes-rail .modes {
    display: flex; gap: 0.9rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* `overflow-x: auto` bascule overflow-y de `visible` à `auto` : sans ça le rail
       devient scrollable verticalement et capture le geste de scroll de la page.
       Surtout pas de `touch-action: pan-x` : le pouce posé sur le rail bloquerait
       le scroll vertical de la page. */
    overflow-y: hidden;
    overscroll-behavior-x: contain; /* évite le geste « retour » iOS */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .modes-rail .modes::-webkit-scrollbar { display: none; }
  /* Le translateY(36px) du reveal recréerait le débordement vertical. */
  .modes-rail .mode.reveal { transform: none; }

  .modes-rail .mode {
    flex: 0 0 min(74vw, 300px); scroll-snap-align: start;
    /* Badge et titre côte à côte : la carte perd ~40 % de hauteur. */
    grid-template-columns: 58px 1fr; align-items: center;
    column-gap: 0.9rem; row-gap: 0.55rem;
    padding: 1.1rem 1.15rem;
  }
  .modes-rail .mode-badge { width: 58px; height: 58px; margin-bottom: 0; }
  .modes-rail .mode-badge img { width: 58px; height: 58px; }
  .modes-rail .mode h4 { grid-column: 2; }
  .modes-rail .mode p { grid-column: 1 / -1; }
  /* Le :hover reste collé après un tap sur iOS et ferait sortir la carte du rail. */
  .modes-rail .mode:hover { transform: none; }

  /* Indicateur de progression : `--p` (0 → 1) est écrit par main.js au scroll du rail.
     La pastille occupe --thumb % de la piste et parcourt le reste. */
  .rail-progress {
    display: block; height: 2px; margin-top: 1.1rem; overflow: hidden;
    background: var(--stroke); border-radius: 2px;
  }
  .rail-progress i {
    display: block; width: 26%; height: 100%; border-radius: 2px;
    background: var(--glow, var(--cyan));
    box-shadow: 0 0 10px color-mix(in srgb, var(--glow, var(--cyan)) 60%, transparent);
    /* 284.6% = (100 - 26) / 26 : la pastille traverse la piste pile-poil. */
    transform: translateX(calc(var(--p, 0) * 284.6%));
  }
  .modes-rail.glow-cyan { --glow: var(--cyan); }
  .modes-rail.glow-lime { --glow: var(--lime); }
}

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.2rem; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }
.gallery img {
  border-radius: var(--radius-sm); border: 1px solid var(--stroke);
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; /* aspect-ratio gouverne, pas l'attribut height d'<Image> */
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.gallery img:hover { transform: scale(1.03) rotate(0.5deg); box-shadow: 0 18px 50px -16px rgba(34, 215, 245, 0.35); }
.note { font-size: 0.85rem; color: var(--muted); font-style: italic; }

/* ---------- Chips thèmes / pouvoirs (Rival Quiz) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chip {
  padding: 0.55rem 1.2rem; border-radius: 99px; font-weight: 600; font-size: 0.9rem;
  border: 1px solid var(--stroke); background: rgba(165, 158, 207, 0.06);
  transition: 0.3s;
}
.chip:hover { border-color: var(--magenta); color: var(--white); box-shadow: 0 0 18px -6px var(--magenta); transform: translateY(-3px); }

/* ---------- Les manches (Rival Quiz) ----------
   3 actes de la partie, une couleur par manche (magenta/cyan/lime via --acc).
   Cartes typographiques : liseré néon en tête + numéro fantôme en contour. */
.manches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; }
.manche {
  --acc: var(--magenta);
  position: relative; overflow: hidden;
  padding: 1.5rem 1.4rem 1.35rem; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--stroke);
  display: grid; gap: 0.45rem; align-content: start;
  transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s;
}
.manche::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent 4%, var(--acc), transparent 96%);
}
.manche:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--acc) 50%, transparent);
  box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--acc) 45%, transparent);
}
.manche-num {
  position: absolute; top: 0.55rem; right: 0.95rem;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 3.4rem; line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--acc) 45%, transparent);
  transition: -webkit-text-stroke-color 0.35s;
}
.manche:hover .manche-num { -webkit-text-stroke-color: color-mix(in srgb, var(--acc) 80%, transparent); }
.manche-kicker {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
}
.manche h4 {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; font-size: 1.35rem;
  color: var(--acc); text-shadow: 0 0 18px color-mix(in srgb, var(--acc) 40%, transparent);
}
.manche p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; max-width: 34ch; }
.manche p b { color: var(--white); font-weight: 600; }
@media (max-width: 860px) { .manches { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .manche, .manche-num { transition: none; }
  .manche:hover { transform: none; }
}

/* ---------- Module de réservation 4escape ----------
   Thème sombre via l'API de variables des widgets. Leurs défauts sont
   posés sur `.forescape` (0,0,1) : on gagne avec `.forescape.forescape`
   (0,0,2), qui couvre aussi les portails (modales, panier volant). */
.booking {
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(21, 14, 51, 0.4);
  padding: clamp(1rem, 2.5vw, 2rem);
}
.forescape.forescape {
  font-family: var(--font-body);

  /* Base */
  --f-primary: var(--magenta);
  --f-primary-hover: #d81fc2;
  --f-secondary: rgba(34, 215, 245, 0.12);
  --f-secondary-hover: rgba(34, 215, 245, 0.22);
  --f-link-color: var(--cyan);
  --f-link-color-hover: #7ce6f8;
  --f-text-base-color: var(--white);
  --f-text-secondary-color: var(--muted);
  --f-scrollbar-thumb-color: rgba(165, 158, 207, 0.35);

  /* Panneaux & cartes */
  --f-panel-bg-color: #140e30;
  --f-panel-border-color: rgba(165, 158, 207, 0.16);
  --f-panel-border-radius: 16px;
  --f-card-bg-color: #1a1340;
  --f-card-text-color: var(--white);
  --f-card-border-color: rgba(165, 158, 207, 0.18);
  --f-card-border-radius: 14px;

  /* Boutons */
  --f-button-primary-border-radius: 12px;
  --f-button-primary-shadow: 0 8px 28px -10px rgba(240, 46, 217, 0.55);
  --f-button-secondary-text-color: var(--cyan);
  --f-button-alt-bg-color: rgba(165, 158, 207, 0.06);
  --f-button-alt-bg-color-hover: rgba(165, 158, 207, 0.14);
  --f-button-alt-border-color: rgba(165, 158, 207, 0.3);
  --f-button-alt-border-color-hover: rgba(165, 158, 207, 0.55);
  --f-button-alt-text-color: var(--white);

  /* Champs, sélecteurs, listes (les listbox/select héritent des inputs) */
  --f-input-bg-color: #1a1340;
  --f-input-border-color: rgba(165, 158, 207, 0.3);
  --f-input-text-color: var(--white);
  --f-input-placeholder-color: var(--muted);
  --f-input-border-radius: 8px;
  --f-listbox-option-bg-color-hover: rgba(165, 158, 207, 0.14);

  /* Formulaire carte bancaire (SDK Adyen, namespace propre --adyen-sdk-*).
     Sans ça, Adyen retombe sur son thème clair par défaut (texte #00112c sur
     blanc) : sur notre fond sombre, les libellés et champs sont illisibles
     (bleu foncé sur bleu foncé). Ces tokens sont des custom properties, donc
     ils traversent le shadow DOM du composant Adyen par héritage. */
  --adyen-sdk-color-label-primary: var(--white);
  --adyen-sdk-color-label-secondary: var(--muted);
  --adyen-sdk-color-label-tertiary: var(--muted);
  --adyen-sdk-color-label-disabled: rgba(165, 158, 207, 0.45);
  --adyen-sdk-color-label-on-color: #ffffff;
  --adyen-sdk-color-label-highlight: var(--cyan);
  --adyen-sdk-color-label-critical: #ff8298;
  --adyen-sdk-color-label-success: #3ddc84;
  --adyen-sdk-color-background-primary: #1a1340;
  --adyen-sdk-color-background-primary-hover: #211852;
  --adyen-sdk-color-background-secondary: #140e30;
  --adyen-sdk-color-background-secondary-hover: #1a1340;
  --adyen-sdk-color-background-secondary-active: #211852;
  --adyen-sdk-color-background-tertiary: #211852;
  --adyen-sdk-color-background-quaternary: #2a2052;
  --adyen-sdk-color-background-disabled: rgba(165, 158, 207, 0.08);
  --adyen-sdk-color-outline-primary: rgba(165, 158, 207, 0.3);
  --adyen-sdk-color-outline-primary-hover: rgba(165, 158, 207, 0.5);
  --adyen-sdk-color-outline-primary-active: var(--cyan);
  --adyen-sdk-color-outline-secondary: rgba(165, 158, 207, 0.22);
  --adyen-sdk-color-outline-tertiary: var(--muted);
  --adyen-sdk-color-outline-critical: #ff5c74;
  --adyen-sdk-color-outline-disabled: rgba(165, 158, 207, 0.15);
  --adyen-sdk-color-separator-primary: rgba(165, 158, 207, 0.18);
  --adyen-sdk-color-separator-secondary: rgba(165, 158, 207, 0.12);

  /* Créneaux (layout « hero ») */
  --f-availability-hero-room-slot-border-radius: 10px;
  --f-availability-hero-room-slot-available-bg-color: rgba(34, 215, 245, 0.08);
  --f-availability-hero-room-slot-available-bg-color-hover: rgba(34, 215, 245, 0.18);
  --f-availability-hero-room-slot-available-text-color: var(--cyan);
  --f-availability-hero-room-slot-available-text-color-hover: var(--cyan);
  --f-availability-hero-room-slot-available-border-color: rgba(34, 215, 245, 0.4);
  --f-availability-hero-room-slot-available-border-color-hover: var(--cyan);
  --f-availability-hero-room-slot-selected-bg-color: var(--magenta);
  --f-availability-hero-room-slot-selected-bg-color-hover: #d81fc2;
  --f-availability-hero-room-slot-selected-text-color: #fff;
  --f-availability-hero-room-slot-selected-text-color-hover: #fff;
  --f-availability-hero-room-slot-selected-border-color: var(--magenta);
  --f-availability-hero-room-slot-selected-border-color-hover: #d81fc2;
  --f-availability-hero-room-slot-unavailable-bg-color: rgba(165, 158, 207, 0.05);
  --f-availability-hero-room-slot-unavailable-bg-color-hover: rgba(165, 158, 207, 0.05);
  --f-availability-hero-room-slot-unavailable-text-color: rgba(165, 158, 207, 0.55);
  --f-availability-hero-room-slot-unavailable-text-color-hover: rgba(165, 158, 207, 0.55);
  --f-availability-hero-room-slot-unavailable-border-color: rgba(165, 158, 207, 0.12);
  --f-availability-hero-room-slot-unavailable-border-color-hover: rgba(165, 158, 207, 0.12);

  /* Datepicker (champ + calendrier) */
  /* Flèches ‹ › : héritent du bouton primaire (magenta plein) par défaut → ghost */
  --f-datepicker-button-bg-color: rgba(165, 158, 207, 0.06);
  --f-datepicker-button-bg-color-hover: rgba(34, 215, 245, 0.14);
  --f-datepicker-button-border-color: rgba(165, 158, 207, 0.3);
  --f-datepicker-button-border-color-hover: var(--cyan);
  --f-datepicker-button-text-color: var(--cyan);
  --f-datepicker-button-text-color-hover: var(--cyan);
  --f-datepicker-input-bg-color: #1a1340;
  --f-datepicker-input-text-color: var(--white);
  --f-datepicker-input-border-color: rgba(165, 158, 207, 0.3);
  --f-datepicker-calendar-bg-color: #1a1340;
  --f-datepicker-calendar-text-color: var(--white);
  --f-datepicker-calendar-border-color: rgba(165, 158, 207, 0.25);
  --f-datepicker-calendar-border-radius: 12px;
  --f-datepicker-calendar-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  --f-datepicker-calendar-day-bg-color: transparent;
  --f-datepicker-calendar-day-text-color: var(--white);
  --f-datepicker-calendar-day-bg-color-hover: rgba(34, 215, 245, 0.15);
  --f-datepicker-calendar-day-text-color-hover: var(--cyan);
  --f-datepicker-calendar-disabled-bg-color: transparent;
  --f-datepicker-calendar-disabled-text-color: rgba(165, 158, 207, 0.35);
  --f-datepicker-calendar-selected-bg-color: var(--magenta);
  --f-datepicker-calendar-selected-text-color: #fff;
  --f-datepicker-calendar-today-bg-color: transparent;
  --f-datepicker-calendar-today-border-color: var(--cyan);
  --f-datepicker-calendar-today-text-color: var(--cyan);

  /* Panier */
  --f-cart-panel-bg-color: #140e30;
  --f-cart-panel-border-color: rgba(165, 158, 207, 0.2);

  /* Cartes radio du checkout (mode & moyens de paiement) — défaut #fff illisible */
  --f-radiogroup-bg-color: #1a1340;
  --f-radiogroup-border-color: rgba(165, 158, 207, 0.28);
  --f-radiogroup-border-radius: 12px;
  --f-radiogroup-text-color: var(--white);
  --f-radiogroup-selected-color: var(--magenta);

  /* Interrupteurs (« au nom d'une société », « commentaire ») — rail gris clair par défaut */
  --f-switch-bg-color: rgba(165, 158, 207, 0.3);
  --f-switch-border-color: rgba(165, 158, 207, 0.4);

  /* Modales (récap d'ajout, CGV) : le bouton secondaire est #fff par défaut */
  --f-modal-backdrop-color: rgba(8, 5, 26, 0.85);
  --f-modal-button-secondary-bg-color: rgba(165, 158, 207, 0.08);
  --f-modal-button-secondary-bg-color-hover: rgba(165, 158, 207, 0.16);
  --f-modal-button-secondary-border-color: rgba(165, 158, 207, 0.35);
  --f-modal-button-secondary-border-color-hover: rgba(165, 158, 207, 0.55);
  --f-modal-button-secondary-text-color: var(--white);
  --f-modal-button-secondary-text-color-hover: var(--white);

  /* Divider « Autres moyens de paiement » + liste déroulante de l'indicatif tél. */
  --f-divider-line-color: rgba(165, 158, 207, 0.45);
  --f-select-bg-color: #1a1340;
  --f-select-border-color: rgba(165, 158, 207, 0.3);
}

/* Sélecteur de date : segments collés (‹|date|›) par défaut → flèches rondes
   détachées + champ arrondi, comme le reste du site. */
.forescape.forescape .f-datepicker { gap: 0.6rem; box-shadow: none; }
.forescape.forescape .f-datepicker-btn {
  margin-left: 0;
  width: 2.7rem; height: 2.7rem; padding: 0;
  justify-content: center; flex: none;
  border-radius: 50%;
  border: 1px solid var(--f-datepicker-button-border-color);
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.forescape.forescape .f-datepicker-btn:hover { box-shadow: 0 0 18px rgba(34, 215, 245, 0.25); }
.forescape.forescape .f-datepicker-input {
  min-height: 2.7rem;
  border-radius: 12px;
  border: 1px solid var(--f-datepicker-input-border-color);
}

/* Modales du widget : coins carrés en dur (aucune variable border-radius) et
   dialogues tassés (padding 16 px, boutons 6×10 px). L'overflow:auto natif du
   panneau assure le rognage des coins, on ne touche qu'au reste. */
.forescape.forescape .f-modal-panel {
  border-radius: var(--radius);
  border-color: rgba(165, 158, 207, 0.22);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85), 0 0 44px -18px rgba(240, 46, 217, 0.3);
}
/* Variante dialogue (Ajout réussi, Attention, panier vide…) : plus d'air */
.forescape.forescape .f-modal-panel.f-px-4 { padding: 2.1rem 1.9rem 1.8rem; }
.forescape.forescape .f-modal-panel [id^="headlessui-dialog-title"] {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.3rem; line-height: 1.25;
}
.forescape.forescape .f-modal-panel .f-paragraph { color: var(--muted); }
.forescape.forescape .f-modal-panel .f-btn { padding: 0.68rem 1.15rem; }
/* Icônes d'état des dialogues : halo assorti au site */
.forescape.forescape .f-modal-panel .f-text-amber-400 { color: #ffc24b; filter: drop-shadow(0 0 14px rgba(255, 194, 75, 0.45)); }
.forescape.forescape .f-modal-panel [class*="f-text-green"] { color: var(--lime); filter: drop-shadow(0 0 14px rgba(197, 232, 50, 0.5)); }

/* Ce que l'API de variables ne couvre pas : utilitaires Tailwind figés dans le widget. */
/* Séparateurs du récap de commande (Total H.T. / Taxes / T.T.C.) : gris clair sur fond nuit */
.forescape.forescape .f-border-gray-200 { border-color: rgba(165, 158, 207, 0.18); }
/* Case à cocher newsletter : fond et bordure clairs */
.forescape.forescape input.f-bg-gray-100 { background-color: #1a1340; }
.forescape.forescape input.f-border-gray-300 { border-color: rgba(165, 158, 207, 0.5); }
/* Le <select> et le <textarea> n'ont pas de background dans la CSS du widget */
.forescape.forescape .f-select,
.forescape.forescape .f-textarea { background-color: var(--f-select-bg-color); }
/* Erreurs de champ et compte à rebours : rouges sombres illisibles sur fond nuit */
.forescape.forescape .f-text-red-500,
.forescape.forescape .f-text-red-700 { color: #ff8298; }
.forescape.forescape .f-timeout-countdown {
  padding: 0.75rem 1.1rem; border-radius: 10px;
  background: rgba(255, 92, 116, 0.09);
  border: 1px solid rgba(255, 92, 116, 0.32);
  color: #ffa4b3; font-weight: 600;
}

/* En-têtes de bloc du widget (« Informations clients », « Produits complémentaires »,
   « Choisissez un nombre de joueurs »…) : bandeau magenta plein par défaut →
   réalignés sur le langage kicker du site. */
.forescape.forescape .f-highlight {
  background: linear-gradient(90deg, rgba(240, 46, 217, 0.15), rgba(240, 46, 217, 0.04) 55%, transparent);
  border: 1px solid rgba(240, 46, 217, 0.3);
  border-radius: 12px;
  color: var(--white);
}
.forescape.forescape .f-highlight .f-h3 {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.82rem; line-height: 1.5;
  color: #ff9df1;
}
.forescape.forescape .f-highlight .f-h3::before {
  content: ""; width: 26px; height: 2px; background: var(--magenta); flex: none;
}

/* ---------- Mode paiement (routes #/checkout du widget) ----------
   Le widget route par hash sans changer de page : quand on entre dans le tunnel,
   on masque le décor de /reserver et on affiche notre fil d'Ariane. */
body.is-checkout .page-hero,
body.is-checkout .hide-on-checkout,
body.is-checkout section[aria-label="Réserver"] { display: none; }

.checkout-head { display: none; }
body.is-checkout .checkout-head {
  display: grid; gap: 1.1rem; justify-items: start;
  padding-top: clamp(7.5rem, 13vw, 10rem);
}
.checkout-title { font-size: clamp(2rem, 4.5vw, 3.2rem); max-width: 16ch; }

.checkout-steps { display: flex; align-items: center; gap: clamp(0.55rem, 2vw, 1rem); margin-top: 0.3rem; }
.cs-step { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--muted); text-decoration: none; transition: color 0.25s ease; }
.cs-num {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 0.85rem;
  border: 1px solid rgba(165, 158, 207, 0.35); background: rgba(165, 158, 207, 0.06);
  transition: all 0.25s ease;
}
.cs-lbl { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.cs-line { width: clamp(1.4rem, 4vw, 2.8rem); height: 2px; background: linear-gradient(90deg, rgba(165, 158, 207, 0.4), rgba(165, 158, 207, 0.12)); }
.cs-step.current { color: var(--white); }
.cs-step.current .cs-num { background: var(--magenta); border-color: var(--magenta); color: #fff; box-shadow: 0 0 22px rgba(240, 46, 217, 0.5); }
.cs-step.done { color: var(--cyan); }
.cs-step.done .cs-num { border-color: rgba(34, 215, 245, 0.55); background: rgba(34, 215, 245, 0.08); color: var(--cyan); }
a.cs-step:hover { color: var(--cyan); }
a.cs-step:hover .cs-num { border-color: var(--cyan); }
@media (max-width: 560px) {
  .cs-lbl { display: none; }
  .cs-step.current .cs-lbl { display: inline; }
}

/* ---------- Panier flottant (widget 4escape) ----------
   Capsule à droite sur desktop, barre en bas sur mobile. Alimenté en JS par
   le store du widget (CartFloat.astro) ; masqué en mode checkout. */
.cart-float {
  position: fixed; z-index: 60;
  right: clamp(0.8rem, 2vw, 1.6rem); top: 50%; translate: 0 -50%;
  display: grid; gap: 0.7rem; justify-items: stretch;
  width: 11.5rem; padding: 1rem;
  border-radius: 18px; border: 1px solid rgba(240, 46, 217, 0.35);
  background: rgba(21, 14, 51, 0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.8), 0 0 34px -12px rgba(240, 46, 217, 0.4);
  animation: cf-in 0.5s var(--ease-out);
}
.cart-float[hidden] { display: none; }
@keyframes cf-in { from { opacity: 0; translate: 24px -50%; } to { opacity: 1; translate: 0 -50%; } }
.cf-info { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cf-icon { position: relative; display: inline-flex; color: var(--white); }
.cf-icon svg { width: 1.5rem; height: 1.5rem; }
.cf-count {
  position: absolute; top: -0.55rem; right: -0.7rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem;
  display: grid; place-items: center;
  border-radius: 99px; background: var(--magenta); color: #fff;
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 0.68rem;
  box-shadow: 0 0 14px rgba(240, 46, 217, 0.6);
}
.cf-total { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 1.05rem; color: var(--white); }
.cf-timer {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.85rem;
  padding: 0.18rem 0.55rem; border-radius: 99px;
  color: var(--cyan); background: rgba(34, 215, 245, 0.1); border: 1px solid rgba(34, 215, 245, 0.3);
}
.cf-timer.is-urgent {
  color: #ffa4b3; background: rgba(255, 92, 116, 0.12); border-color: rgba(255, 92, 116, 0.4);
  animation: cf-pulse 1s ease-in-out infinite;
}
@keyframes cf-pulse { 50% { opacity: 0.55; } }
.cf-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.62rem 1rem; border-radius: 12px;
  background: var(--magenta); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 0.88rem;
  box-shadow: 0 8px 24px -10px rgba(240, 46, 217, 0.6);
  transition: background 0.25s ease, box-shadow 0.25s ease, translate 0.25s ease;
}
.cf-cta:hover { background: #d81fc2; translate: 0 -2px; box-shadow: 0 12px 30px -10px rgba(240, 46, 217, 0.75); }
.cf-cta .arr { transition: translate 0.25s ease; }
.cf-cta:hover .arr { translate: 3px 0; }
@media (max-width: 760px) {
  .cart-float {
    top: auto; bottom: calc(0.8rem + env(safe-area-inset-bottom)); translate: none;
    left: 0.8rem; right: 0.8rem; width: auto;
    grid-template-columns: 1fr auto; align-items: center; gap: 0.9rem;
    padding: 0.75rem 0.95rem; border-radius: 16px;
  }
  @keyframes cf-in { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: none; } }
  .cf-info { justify-content: flex-start; gap: 0.9rem; }
  .cf-cta { padding: 0.6rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-float { animation: none; }
  .cf-timer.is-urgent { animation: none; }
  .cf-cta:hover { translate: none; }
}

.promo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 760px) { .promo-cards { grid-template-columns: 1fr; } }
.promo {
  position: relative; padding: 2rem 1.8rem; border-radius: var(--radius); overflow: hidden;
  display: grid; gap: 0.5rem; border: 1px solid var(--stroke);
}
.promo.p-magenta { background: linear-gradient(135deg, rgba(240, 46, 217, 0.16), transparent 60%), var(--bg-2); border-color: rgba(240, 46, 217, 0.35); }
.promo.p-lime { background: linear-gradient(135deg, rgba(197, 232, 50, 0.14), transparent 60%), var(--bg-2); border-color: rgba(197, 232, 50, 0.3); }
.promo .code {
  font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 2rem;
  letter-spacing: 0.05em;
}
.promo.p-magenta .code { color: var(--magenta); text-shadow: 0 0 26px rgba(240, 46, 217, 0.55); }
.promo.p-lime .code { color: var(--lime); text-shadow: 0 0 26px rgba(197, 232, 50, 0.5); }
.promo p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Infos pratiques ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 920px) { .info-grid { grid-template-columns: 1fr; } }
.info-card { padding: 2rem 1.8rem; display: grid; gap: 0.9rem; align-content: start; }
.info-card > .icon { width: 2rem; height: 2rem; color: var(--cyan); }
.icon-li { list-style: none; display: grid; gap: 0.5rem; color: var(--muted); font-size: 0.95rem; }
.icon-li li { display: flex; align-items: baseline; gap: 0.6rem; }
.icon-li .icon { color: var(--cyan); width: 1.1em; height: 1.1em; }
.hours { display: grid; gap: 0.45rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; padding-bottom: 0.45rem; border-bottom: 1px dashed var(--stroke); }
.hours div span:first-child { color: var(--muted); }
.hours div span:last-child { font-weight: 600; }

/* ---------- Bandeau clients (marquee infini de wordmarks) ---------- */
/* Padding bas explicite : la section suivante (« En images ») démarre à
   `padding-block: 0`, et la bande étant inclinée son coin venait mordre le rail. */
.clients-band { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem); display: grid; gap: 1.5rem; }
.marquee-clients { --marquee-speed: 28; transform: none; padding-block: 1.5rem; }
/* L'éclairage au survol/drag est porté par les règles génériques `.marquee`. */
.marquee-clients span {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  letter-spacing: 0.06em;
  color: rgba(165, 158, 207, 0.72);
}
.marquee-clients span i { color: var(--magenta); opacity: 0.65; text-shadow: none; font-size: 0.6em; }

/* ---------- Presse ---------- */
.press-list { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.press-list a {
  /* inline-flex : centre verticalement les logos en silhouette dans la capsule */
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.6rem 1.3rem; border-radius: 99px; font-size: 0.9rem; font-weight: 600;
  border: 1px solid var(--stroke); color: var(--muted); transition: 0.3s;
}
.press-list a:hover { color: var(--white); border-color: var(--cyan); box-shadow: 0 0 20px -6px var(--cyan); transform: translateY(-3px); }

/* ---------- Prose (pages légales) ---------- */
.prose { max-width: 760px; display: grid; gap: 1.1rem; color: var(--muted); }
.prose h2 { font-size: 1.4rem; color: var(--white); margin-top: 1.2rem; }

/* ---------- Ajustements mobile ---------- */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .hero { padding-top: 96px; min-height: 92svh; }
  .stat { padding: 1.3rem 0.6rem; }
  .stats { gap: 0.8rem; }
  .step { padding: 1.6rem 1.4rem; }
  .cta-band { padding: 3rem 1.4rem; }
  .gc-body { padding: 1.3rem 1.3rem 1.5rem; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery img { aspect-ratio: 1; }
  .watermark { -webkit-text-stroke-width: 1px; }
  .scroll-hint { display: none; }
  .promo { padding: 1.6rem 1.4rem; }
  .footer-grid { padding-block: 3rem 2rem; gap: 1.8rem; }
}

/* ---------- Événements : sélecteur d'occasion + formulaire ---------- */
.picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 980px) { .picker { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .picker { grid-template-columns: 1fr; } }
.pick {
  --acc: var(--cyan);
  position: relative; text-align: left; padding: 1.7rem 1.5rem; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--stroke);
  display: grid; gap: 0.6rem; align-content: start; cursor: pointer;
  transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s, opacity 0.4s, filter 0.4s;
}
.pick .icon { width: 2.1rem; height: 2.1rem; color: var(--acc); transition: transform 0.4s var(--ease-bounce); }
.pick h3 { font-size: 1.16rem; }
.pick p { color: var(--muted); font-size: 0.9rem; }
.pick-fact {
  justify-self: start; margin-top: 0.3rem;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--acc);
}
.pick::after { /* coin HUD */
  content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px;
  border-top: 2px solid var(--acc); border-right: 2px solid var(--acc);
  opacity: 0; transform: translate(-6px, 6px); transition: 0.35s var(--ease-out);
}
.pick:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--acc) 35%, transparent);
}
.pick:hover .icon { transform: scale(1.15) rotate(-4deg); }
.pick:hover::after, .pick.selected::after { opacity: 1; transform: translate(0, 0); }
.pick.selected {
  transform: translateY(-6px);
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc), 0 18px 50px -18px color-mix(in srgb, var(--acc) 55%, transparent);
}
.pick.dimmed:not(.selected):not(:hover) { opacity: 0.5; filter: saturate(0.5); transform: none; }

/* Le formulaire se déploie sous les tuiles */
.brief {
  --acc: var(--cyan);
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.65s var(--ease-out);
  margin-top: 1.6rem;
}
.brief.open { grid-template-rows: 1fr; }
.brief-inner { overflow: hidden; visibility: hidden; transition: visibility 0s 0.45s; min-height: 0; }
.brief.open .brief-inner { visibility: visible; transition: visibility 0s; }
/* Fiche d'infos propre au type sélectionné (Team Building pour l'instant) */
.brief-detail {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--stroke));
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 7%, var(--bg-2)), var(--bg-2));
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid; gap: clamp(1.3rem, 2.5vw, 1.9rem);
  margin-bottom: 1.2rem;
}
.brief-detail[hidden] { display: none; }
.brief-detail::before { /* liseré d'accent : anneau complet (épaisseur constante dans l'arrondi),
                           masqué pour ne garder que le bord gauche + le coin, puis fondu */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; border: 2px solid var(--acc);
  -webkit-mask-image: linear-gradient(90deg, #000 0 46px, transparent 104px),
                      linear-gradient(180deg, #000 0 38%, transparent 88%);
  mask-image: linear-gradient(90deg, #000 0 46px, transparent 104px),
              linear-gradient(180deg, #000 0 38%, transparent 88%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.bd-head { display: grid; gap: 0.7rem; max-width: 62ch; }
.bd-head .kicker { color: var(--acc); }
.bd-head .kicker::before { background: var(--acc); }
.bd-lead { color: var(--muted); font-size: clamp(0.98rem, 1.4vw, 1.08rem); line-height: 1.55; }
.bd-lead strong { color: var(--white); font-weight: 600; }
.bd-specs { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.bd-item { display: grid; gap: 0.35rem; align-content: start; padding-left: 1.2rem; border-left: 1px solid var(--stroke); }
.bd-stat {
  font-family: var(--font-display); font-style: italic; font-weight: 800; line-height: 1;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem); color: var(--acc);
  text-shadow: 0 0 26px color-mix(in srgb, var(--acc) 40%, transparent);
}
.bd-stat i { font-size: 0.42em; font-style: italic; letter-spacing: 0.02em; margin-left: 0.12em; }
.bd-item h4, .bd-col h4 {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--white);
  margin-top: 0.25rem;
}
.bd-item p { color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
@media (max-width: 900px) { .bd-specs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bd-specs { grid-template-columns: 1fr; gap: 1.1rem; } }

/* Variante « pack + options » (anniversaire) */
.bd-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.4rem, 3vw, 2.4rem); }
.bd-col { display: grid; gap: 0.9rem; align-content: start; }
.bd-col + .bd-col { padding-left: clamp(1.4rem, 3vw, 2.4rem); border-left: 1px solid var(--stroke); }
@media (max-width: 820px) {
  .bd-cols { grid-template-columns: 1fr; gap: 1.5rem; }
  .bd-col + .bd-col { padding-left: 0; padding-top: 1.5rem; border-left: 0; border-top: 1px solid var(--stroke); }
}
.bd-price {
  display: flex; align-items: baseline; gap: 0.1rem;
  font-family: var(--font-display); font-style: italic; font-weight: 800; line-height: 1;
  font-size: clamp(2.1rem, 4.2vw, 2.9rem); color: var(--acc);
  text-shadow: 0 0 26px color-mix(in srgb, var(--acc) 40%, transparent);
}
.bd-price i {
  font-size: 0.26em; font-style: italic; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-left: 0.6em; text-shadow: none;
}
.bd-list { list-style: none; display: grid; gap: 0.7rem; }
.bd-list li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.bd-list strong { color: var(--white); font-weight: 600; }
.bd-rows { list-style: none; display: grid; }
.bd-rows li {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.62rem 0;
  border-bottom: 1px dashed var(--stroke); font-size: 0.88rem; color: var(--muted);
}
.bd-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.bd-rows b {
  margin-left: auto; white-space: nowrap; color: var(--acc);
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 0.86rem; letter-spacing: 0.04em;
}

/* Icônes néon : halo qui respire, allumage façon tube au néon à l'ouverture */
.bd-ico {
  position: relative; flex-shrink: 0; display: inline-grid; place-items: center;
  width: 1.7rem; height: 1.7rem; color: var(--acc);
}
.bd-list .bd-ico { margin-top: -0.15rem; }
.bd-ico::before { /* halo */
  content: ""; position: absolute; inset: -22%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc) 50%, transparent), transparent 68%);
  opacity: 0.3; transform: scale(0.85);
  animation: neonBreathe 3.6s ease-in-out infinite; animation-delay: var(--nd, 0s);
}
.bd-ico .icon {
  position: relative; width: 1.15rem; height: 1.15rem; stroke-width: 1.7;
  transition: transform 0.4s var(--ease-bounce);
}
@keyframes neonBreathe {
  0%, 100% { opacity: 0.26; transform: scale(0.84); }
  50% { opacity: 0.58; transform: scale(1.05); }
}
/* Allumage : l'icône se pose avec un rebond pendant qu'une onde s'échappe du halo */
.bd-ico::after {
  content: ""; position: absolute; inset: -10%; border-radius: 50%;
  border: 1.5px solid var(--acc); opacity: 0; pointer-events: none;
}
.brief-detail.cascade .bd-ico .icon { animation: icoPop 0.62s var(--ease-bounce) both; animation-delay: var(--nd, 0s); }
.brief-detail.cascade .bd-ico::after { animation: icoWave 0.85s var(--ease-out) both; animation-delay: var(--nd, 0s); }
@keyframes icoPop {
  from { opacity: 0; transform: scale(0.45) rotate(-14deg); }
  to { opacity: 1; transform: none; }
}
@keyframes icoWave {
  0% { opacity: 0; transform: scale(0.5); }
  25% { opacity: 0.65; }
  100% { opacity: 0; transform: scale(1.85); }
}
/* Cascade régulière, de haut en bas */
.bd-list li:nth-child(1) .bd-ico { --nd: 0.12s; }
.bd-list li:nth-child(2) .bd-ico { --nd: 0.2s; }
.bd-list li:nth-child(3) .bd-ico { --nd: 0.28s; }
.bd-rows li:nth-child(1) .bd-ico { --nd: 0.36s; }
.bd-rows li:nth-child(2) .bd-ico { --nd: 0.44s; }
.bd-rows li:nth-child(3) .bd-ico { --nd: 0.52s; }
.bd-rows li:nth-child(4) .bd-ico { --nd: 0.6s; }
.bd-list li:hover .bd-ico .icon, .bd-rows li:hover .bd-ico .icon { transform: scale(1.18) rotate(-6deg); }
.bd-list li:hover .bd-ico::before, .bd-rows li:hover .bd-ico::before { opacity: 0.7; transform: scale(1.12); }
/* Apparition en cascade, relancée à chaque sélection */
.brief-detail.cascade .bd-head,
.brief-detail.cascade .bd-item,
.brief-detail.cascade .bd-col { animation: fieldIn 0.55s var(--ease-out) both; }
.brief-detail.cascade .bd-item:nth-child(1), .brief-detail.cascade .bd-col:nth-child(1) { animation-delay: 0.1s; }
.brief-detail.cascade .bd-item:nth-child(2), .brief-detail.cascade .bd-col:nth-child(2) { animation-delay: 0.17s; }
.brief-detail.cascade .bd-item:nth-child(3) { animation-delay: 0.24s; }
.brief-detail.cascade .bd-item:nth-child(4) { animation-delay: 0.31s; }

.event-form, .form-success {
  border-radius: var(--radius); border: 1px solid var(--stroke);
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  display: grid; gap: 1.6rem;
}
.event-form[hidden], .form-success[hidden], .field[hidden] { display: none; }
.brief-head { display: grid; gap: 0.9rem; }
.brief-head .kicker { color: var(--acc); }
.brief-head .kicker::before { background: var(--acc); }
/* Chips purement informatifs (pas des boutons) : on coupe les interactions
   pour qu'ils n'aient plus l'air cliquables. */
.brief-facts .chip { font-size: 0.82rem; cursor: default; pointer-events: none; }
/* `align-items: start` : sans lui, un champ s'étire à la hauteur de son voisin
   de rangée — le sélecteur « Moment » sautillait quand « Horaire » apparaissait. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.3rem; position: relative; align-items: start; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
/* `min-width: 0` : sans ça la piste de grille prend la taille min-content du champ.
   `input[type=date]` a une largeur intrinsèque incompressible (les 3 segments + le
   bouton calendrier) et débordait à droite sur mobile malgré son `width: 100%`. */
.field { display: grid; gap: 0.45rem; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field > span {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.field input, .field textarea, .field select {
  font: inherit; color: var(--white); width: 100%; min-width: 0; max-width: 100%;
  background: rgba(8, 5, 26, 0.55); border: 1px solid var(--stroke); border-radius: 10px;
  padding: 0.85rem 1rem; resize: vertical;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
/* Contrôles monolignes : hauteur IMPOSÉE, identique pour tous (input texte,
   date, select, capsule checkbox). Sans ça chacun calcule la sienne à partir
   de son contenu et les pilules d'une même rangée diffèrent de quelques px. */
.field input, .field select { height: 3.25rem; padding-block: 0; }
.field select { color-scheme: dark; cursor: pointer; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
  background: rgba(8, 5, 26, 0.8);
}
/* Case à cocher inline (ex. « Ma date est flexible ») : rangée alignée sur la
   grille du formulaire, libellé en casse normale contrairement aux labels champs.
   Case dessinée sur mesure (l'apparence native détonnait) : coche qui pousse en
   ressort, halo accent, et libellé qui s'allume en blanc néon quand c'est coché. */
.field-check {
  display: flex; flex-direction: row; align-items: center; gap: 0.75rem;
  cursor: pointer; align-self: end;
  height: 3.25rem; padding-block: 0; padding-inline: 1rem;
  background: rgba(8, 5, 26, 0.55); border: 1px solid var(--stroke); border-radius: 10px;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.field-check:has(input:checked) {
  border-color: var(--acc, var(--cyan));
  background: rgba(8, 5, 26, 0.8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, var(--cyan)) 20%, transparent), 0 0 20px -4px var(--acc, var(--cyan));
}
.field-check input {
  appearance: none; -webkit-appearance: none;
  width: 1.4rem; height: 1.4rem; flex: none; cursor: pointer; margin: 0; padding: 0;
  border: 1px solid var(--stroke); border-radius: 7px;
  background: rgba(8, 5, 26, 0.55);
  display: grid; place-items: center;
  transition: border-color 0.25s, background 0.25s;
}
.field-check input::after {
  content: ""; width: 0.38rem; height: 0.72rem; margin-top: -0.12rem;
  border: solid var(--acc, var(--cyan)); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transform-origin: 60% 60%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.field-check:focus-within {
  border-color: var(--acc, var(--cyan));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, var(--cyan)) 22%, transparent);
}
.field-check input:checked { border-color: var(--acc, var(--cyan)); }
.field-check input:checked::after { transform: rotate(45deg) scale(1); }
.field-check > span {
  font: inherit; font-size: 0.95rem; color: var(--muted);
  text-transform: none; letter-spacing: normal; font-style: normal;
  transition: color 0.3s, text-shadow 0.3s;
}
.field-check input:checked + span {
  color: var(--white);
  text-shadow: 0 0 10px color-mix(in srgb, var(--acc, var(--cyan)) 85%, transparent), 0 0 24px color-mix(in srgb, var(--acc, var(--cyan)) 45%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(165, 158, 207, 0.4); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #ff5470; }
/* Safari/iOS applique une apparence native au champ date qui ignore la largeur
   demandée ; on la neutralise pour qu'il se comporte comme les autres champs.
   La valeur choisie, elle, vit dans un shadow DOM (::-webkit-date-and-time-value)
   qui ignore la hauteur imposée aux champs (la date se collait en haut du champ
   sur iPhone) et retombe sur la police système au lieu d'hériter. Flex pour
   centrer le bloc valeur dans la hauteur, police et marge ré-affirmées. */
.field input[type="date"] {
  color-scheme: dark; -webkit-appearance: none; appearance: none;
  display: flex; align-items: center;
}
.field input[type="date"]::-webkit-date-and-time-value {
  text-align: left; font: inherit; margin: 0;
}
.gotcha { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-foot { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.form-foot .note a { color: var(--cyan); }
@keyframes fieldIn { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Wizard du devis : fil d'ariane en dalles + volets ----------
   Le brief se remplit comme une partie : 4 dalles façon sol PIXEL ROOM (l'occasion
   choisie au picker compte pour la 1ʳᵉ), la dalle courante pulse, les dalles
   franchies restent allumées et cliquables pour revenir en arrière. */
.wiz-nav { display: flex; align-items: flex-start; gap: clamp(0.5rem, 2vw, 1rem); }
.wiz-tile {
  background: none; border: 0; padding: 0; font: inherit;
  display: grid; justify-items: center; gap: 0.5rem;
  color: var(--muted); cursor: pointer;
}
.wiz-tile:disabled { cursor: default; }
.wiz-tile:not(.done):not(.current) { opacity: 0.55; }
.wiz-tile i { /* la dalle numérotée — même langage que le mini sol du succès */
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
  background: color-mix(in srgb, var(--acc) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--stroke);
  transition: background 0.35s, box-shadow 0.35s, transform 0.35s var(--ease-bounce), color 0.3s;
}
.wiz-tile:not(:disabled):hover i { transform: translateY(-2px); }
.wiz-tile.done i, .wiz-tile.current i {
  color: var(--white);
  background: color-mix(in srgb, var(--acc) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 80%, transparent), 0 0 16px -3px var(--acc);
}
/* Étape franchie : le numéro laisse place à une coche */
.wiz-tile.done i { position: relative; color: transparent; }
.wiz-tile.done i::after {
  content: "✓"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--acc); font-size: 0.95rem; font-style: normal;
}
.wiz-tile.current i { animation: wizPulse 1.9s ease-in-out infinite; }
@keyframes wizPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 80%, transparent), 0 0 10px -4px var(--acc); }
  50% { box-shadow: inset 0 0 0 1px var(--acc), 0 0 22px -2px var(--acc); }
}
.wiz-tile span {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.3s, text-shadow 0.3s;
}
.wiz-tile.current span { color: var(--white); text-shadow: 0 0 10px color-mix(in srgb, var(--acc) 70%, transparent); }
/* Ligne de liaison entre les dalles : elle s'allume quand l'étape de droite est atteinte */
.wiz-link {
  flex: 1 1 1.25rem; min-width: 10px; height: 2px; margin-top: 15px; border-radius: 2px;
  background: var(--stroke);
  transition: background 0.4s, box-shadow 0.4s;
}
.wiz-link.lit { background: var(--acc); box-shadow: 0 0 10px -2px var(--acc); }

.wiz-step { display: grid; gap: 1.4rem; }
.wiz-step[hidden] { display: none; }
.wiz-q {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.45rem); text-transform: uppercase; letter-spacing: 0.02em;
}
.wiz-q b { color: var(--acc); }
.wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wiz-foot .note { width: 100%; }
.wiz-foot .note a { color: var(--cyan); }

/* Entrée en cascade du volet courant : la question, puis les champs, puis les boutons */
.wiz-step.wiz-in .wiz-q { animation: fieldIn 0.45s var(--ease-out) both; }
.wiz-step.wiz-in .field { animation: fieldIn 0.45s var(--ease-out) both; }
.wiz-step.wiz-in .field:nth-child(1) { animation-delay: 0.07s; }
.wiz-step.wiz-in .field:nth-child(2) { animation-delay: 0.13s; }
.wiz-step.wiz-in .field:nth-child(3) { animation-delay: 0.19s; }
.wiz-step.wiz-in .field:nth-child(4) { animation-delay: 0.25s; }
.wiz-step.wiz-in .wiz-foot { animation: fieldIn 0.45s var(--ease-out) both; animation-delay: 0.3s; }

/* Rappel à l'ordre : le volet tremble si un champ requis manque */
.wiz-step.shake { animation: wizShake 0.4s both; }
@keyframes wizShake {
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .wiz-tile.current i, .wiz-step.shake,
  .wiz-step.wiz-in .wiz-q, .wiz-step.wiz-in .field, .wiz-step.wiz-in .wiz-foot,
  .fs-grid span, .form-success h3, .form-success p { animation: none; }
  .fs-grid span.fs-on::after { animation: none; opacity: 1; }
  .fs-grid span.fs-wake::before { animation: none; opacity: 1; }
}

/* Succès : mini sol PIXEL ROOM qui s'allume */
/* `align-content: center` : pendant que la hauteur du tiroir est figée (voir
   done() dans main.js), le message reste centré dans l'espace au lieu de
   flotter en haut d'un grand vide. */
.form-success { text-align: center; justify-items: center; align-content: center; gap: 1rem; }
.form-success h3 { font-size: 1.6rem; }
.form-success p { color: var(--muted); max-width: 48ch; }
/* Rangées EXPLICITES : la grille fait sa taille finale même vide, la mesure
   FLIP du tiroir (done() dans main.js) tombe donc juste quel que soit l'ordre
   des mutations. 9×5 doit rester synchronisé avec main.js.
   `touch-action: none` : le doigt qui balaye la grille joue avec les dalles
   (traînée .fs-hot posée par main.js) au lieu de faire défiler la page. */
.fs-grid {
  display: grid; grid-template-columns: repeat(9, 20px); grid-template-rows: repeat(5, 20px); gap: 5px; margin-bottom: 0.5rem;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
/* Base : dalle ÉTEINTE (la grille se matérialise dans le noir).
   Trois couches, seuls transform et opacity sont animés (composité GPU) :
   la dalle sombre, ::before = couleur tamisée réveillée par l'onde radiale,
   ::after = pleine intensité (survol + dalles de la coche). */
.fs-grid span {
  width: 20px; height: 20px; border-radius: 4px;
  background: rgba(8, 5, 26, 0.7);
  box-shadow: inset 0 0 0 1px rgba(165, 158, 207, 0.22);
  /* `backwards` et non `forwards` : une fois l'entrée jouée, l'animation lâche
     la main — sinon son dernier état écraserait le transform du hover. */
  animation: fsIn 0.4s var(--ease-bounce) backwards; animation-delay: var(--d, 0s);
  position: relative;
  /* Traînée du survol : retour lent à l'état d'avant */
  transition: transform 0.9s var(--ease-out);
}
.fs-grid span::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--c, var(--cyan)) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--cyan)) 70%, transparent),
              0 0 14px -2px color-mix(in srgb, var(--c, var(--cyan)) 55%, transparent);
  opacity: 0;
}
.fs-grid span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--c, var(--cyan)) 48%, transparent);
  box-shadow: inset 0 0 0 1px var(--c, var(--cyan)), 0 0 20px -2px var(--c, var(--cyan));
  opacity: 0;
  transition: opacity 0.9s ease;
}
/* Allumage quasi instantané à l'entrée du pointeur, extinction lente à la
   sortie — la traînée. .fs-hot = équivalent tactile de :hover, posé par
   main.js sur la dalle sous le doigt (le survol n'existe pas au toucher). */
.fs-grid span:hover, .fs-grid span.fs-hot { transform: scale(1.15); transition-duration: 0.15s; }
.fs-grid span:hover::after, .fs-grid span.fs-hot::after { opacity: 1; transition-duration: 0.15s; }
@keyframes fsIn { from { opacity: 0; transform: scale(0.4); } }

/* Acte 1 — la coche se dessine seule dans le noir : les dalles du tracé
   s'allument une à une (délai --don) dans la couleur de l'occasion, avec un pop. */
.fs-grid span.fs-on { --c: var(--acc, var(--lime)); }
/* Animation et non transition : une transition ne joue pas sur un élément qui
   naît déjà avec sa valeur finale — les dalles apparaissaient allumées. */
.fs-grid span.fs-on::after { animation: fsFade 0.3s ease var(--don, 0s) forwards; }
.fs-grid span.fs-on {
  animation: fsIn 0.4s var(--ease-bounce) backwards, fsTilePop 0.45s var(--ease-bounce) backwards;
  animation-delay: var(--d, 0s), var(--don, 0s);
}
@keyframes fsTilePop { 45% { transform: scale(1.3); } }

/* Acte 2 — l'onde radiale : depuis le centre, les autres dalles se réveillent
   dans leur couleur tamisée (délai --dw ∝ distance au centre) avec un mini pop. */
.fs-grid span.fs-wake::before { animation: fsFade 0.45s ease var(--dw, 0s) forwards; }
.fs-grid span.fs-wake {
  animation: fsIn 0.4s var(--ease-bounce) backwards, fsWavePop 0.4s var(--ease-out) backwards;
  animation-delay: var(--d, 0s), var(--dw, 0s);
}
@keyframes fsFade { to { opacity: 1; } }
@keyframes fsWavePop { 45% { transform: scale(1.14); } }

/* Acte 3 — le sol reste vivant (fs-live posé par main.js après l'onde) : la
   coche respire en « marche pavé » — la pulsation parcourt le tracé dalle par
   dalle (--k = rang sur le tracé, posé par main.js). Opacité seulement : la
   coche ne bouge jamais. `backwards` : pendant son délai, une dalle tient le
   0 % (opacité 1) — sans fill, l'opacité sous-jacente du ::after est 0 et les
   dalles en attente s'éteindraient. Les dalles tamisées, elles, sont animées
   par main.js (phrases chorégraphiées via fs-glint, plus bas). */
.fs-grid.fs-live span.fs-on::after {
  animation: fsBreath 2.6s ease-in-out calc(var(--k, 0) * 0.22s) infinite backwards;
}
@keyframes fsBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.fs-grid span.fs-glint { transform: scale(1.12); transition-duration: 0.18s; }
.fs-grid span.fs-glint::after { opacity: 0.85; transition-duration: 0.18s; }
.form-success h3 { animation: fieldIn 0.5s var(--ease-out) 1.6s backwards; }
.form-success p { animation: fieldIn 0.5s var(--ease-out) 1.72s backwards; }
@media (prefers-reduced-motion: reduce) {
  .brief { transition: none; }
  .brief-inner { transition: none; }
  .event-form.cascade .field { animation: none; }
  .brief-detail.cascade .bd-head, .brief-detail.cascade .bd-item, .brief-detail.cascade .bd-col { animation: none; }
  .bd-ico::before, .brief-detail.cascade .bd-ico .icon, .brief-detail.cascade .bd-ico::after { animation: none; }
  .bd-ico .icon { transition: none; }
  .fs-grid span { animation: none; opacity: 1; }
  .pick, .pick .icon { transition: none; }
}

/* ---------- Utilitaires ---------- */
.center { text-align: center; justify-items: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--magenta); color: #fff; padding: 0.8rem 1.4rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* ============================================================
   CONSENTEMENT COOKIES — bannière maison (voir consent.js)
   ============================================================ */
.consent {
  position: fixed; z-index: 700;
  left: clamp(0.8rem, 2.5vw, 2rem); bottom: clamp(0.8rem, 2.5vw, 2rem);
  width: min(440px, calc(100vw - 1.6rem));
  display: grid; gap: 0.85rem; justify-items: start;
  padding: 1.5rem 1.5rem 1.3rem;
  border-radius: var(--radius); border: 1px solid var(--stroke);
  background: rgba(14, 9, 38, 0.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.85), 0 0 44px -16px rgba(240, 46, 217, 0.35);
  opacity: 0; translate: 0 26px;
  transition: opacity 0.55s var(--ease-out), translate 0.55s var(--ease-out);
}
.consent.is-in { opacity: 1; translate: 0 0; }
.consent[hidden] { display: none; }
.consent-close {
  position: absolute; top: 0.7rem; right: 0.7rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--muted); font-size: 0.9rem;
  transition: color 0.25s ease, background 0.25s ease;
}
.consent-close:hover { color: var(--white); background: rgba(165, 158, 207, 0.12); }
.consent-title {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.01em;
  color: var(--white);
}
.consent-text { font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.consent-text a { color: var(--cyan); text-underline-offset: 3px; }
.consent-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem;
  width: 100%; margin-top: 0.2rem;
}
/* Refuser doit être aussi simple qu'accepter (CNIL) : deux boutons jumeaux. */
.consent-actions .btn, .consent-save { justify-content: center; padding: 0.88rem 1rem; font-size: 0.9rem; }
.consent-link {
  background: none; border: 0; padding: 0.2rem 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.25s ease;
}
.consent-link:hover { color: var(--white); }
.consent-panel {
  display: grid; gap: 0; width: 100%;
  border-top: 1px solid var(--stroke);
  animation: consent-panel-in 0.4s var(--ease-out);
}
.consent-panel[hidden] { display: none; }
@keyframes consent-panel-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.consent-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--stroke);
  cursor: pointer;
}
.consent-cat-info { display: grid; gap: 0.15rem; }
.consent-cat strong { font-size: 0.9rem; color: var(--white); }
.consent-cat p { font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.consent-always {
  flex: none; padding: 0.22rem 0.6rem; border-radius: 99px;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--lime); background: var(--lime-soft); border: 1px solid rgba(197, 232, 50, 0.35);
}
.consent-switch {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 46px; height: 25px; border-radius: 99px; margin: 0;
  background: rgba(165, 158, 207, 0.22); border: 1px solid var(--stroke);
  position: relative; cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.consent-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--muted);
  transition: translate 0.35s var(--ease-bounce), background 0.3s ease;
}
.consent-switch:checked { background: var(--cyan-soft); border-color: var(--cyan); }
.consent-switch:checked::after { translate: 21px 0; background: var(--cyan); box-shadow: 0 0 12px rgba(34, 215, 245, 0.55); }
.consent-switch:focus-visible, .consent-close:focus-visible, .consent-link:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
.consent-save { width: 100%; margin-top: 0.9rem; }
@media (max-width: 560px) {
  .consent {
    left: 0.6rem; right: 0.6rem; width: auto;
    bottom: calc(0.6rem + env(safe-area-inset-bottom));
    padding: 1.25rem 1.15rem 1.1rem;
  }
  .consent-title { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { translate: 0 0; transition: opacity 0.3s ease; }
  .consent-panel { animation: none; }
  .consent-switch::after { transition: background 0.3s ease; }
}

/* ---------- Page politique de cookies ---------- */
.cookie-table-wrap { overflow-x: auto; margin-block: 0.4rem; border: 1px solid var(--stroke); border-radius: var(--radius-sm); }
.cookie-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.88rem; }
.cookie-table th {
  padding: 0.75rem 0.9rem; text-align: left;
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--cyan); background: rgba(21, 14, 51, 0.6);
}
.cookie-table td { padding: 0.7rem 0.9rem; border-top: 1px solid var(--stroke); color: var(--muted); vertical-align: top; }
.cookie-table td:first-child {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8rem;
  color: var(--white); white-space: nowrap;
}

/* ---------- Récap de commande sur mobile (correctif widget) ----------
   La CSS du widget 4escape masque le panneau « Votre commande »
   (.f-checkout-view-side) sous 768 px : impossible de voir ou retirer un
   article du panier sur téléphone. On le réaffiche, placé AVANT le formulaire
   (le container passe en colonne flex pour permettre l'ordre). */
@media (max-width: 767.98px) {
  .forescape.forescape .f-checkout-view--resumeSide {
    display: flex; flex-direction: column; gap: 24px;
  }
  .forescape.forescape .f-checkout-view-side { display: block; order: -1; }
}

/* ---------- Lignes du récap de commande : tactile & lisible ----------
   Le « Supprimer » du widget est un lien texte de 60×16 px en 12 px —
   intouchable au doigt. On en fait une pastille tactile (≥ 40 px) dans la DA,
   et on aère la ligne d'article sur mobile. */
.forescape.forescape .f-checkout-side-cart-item .f-btn-link {
  padding: 0.55rem 1.05rem; min-height: 40px;
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255, 92, 116, 0.45); border-radius: 10px;
  background: rgba(255, 92, 116, 0.09); color: #ff8298;
  font-size: 0.8rem; font-weight: 700; text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.forescape.forescape .f-checkout-side-cart-item .f-btn-link:hover {
  background: rgba(255, 92, 116, 0.18); border-color: #ff5c74;
}
@media (max-width: 767.98px) {
  .forescape.forescape .f-checkout-side-cart-item {
    padding-top: 18px; padding-bottom: 18px;
  }
  .forescape.forescape .f-checkout-side-cart-item-content { margin-left: 14px; }
  /* Rangée « participants + Supprimer » : bouton à droite, bien séparé */
  .forescape.forescape .f-checkout-side-cart-item .f-items-end {
    align-items: center; justify-content: space-between;
    margin-top: 10px; gap: 12px;
  }
  .forescape.forescape .f-checkout-side-cart-participants { font-size: 0.8rem; }
  .forescape.forescape .f-checkout-side-cart-item .f-mt-1.f-text-xs {
    font-size: 0.82rem; opacity: 0.85;
  }
}

/* Photo de l'article dans le récap : le widget la masque sous 1024 px —
   on la réaffiche partout, un peu plus grande et cadrée dans la DA. */
.forescape.forescape .f-checkout-side-cart-item-icon { display: block; }
.forescape.forescape .f-checkout-side-cart-item-icon img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--stroke);
}
@media (max-width: 767.98px) {
  .forescape.forescape .f-checkout-side-cart-item-content { margin-left: 14px; }
}