/* =============================================================================
 * KÝDOS BELOTE · SITE VITRINE — thème « Néon Arcade »
 * Polices auto-hébergées, aucune ressource externe.
 *  1. Polices   2. Jetons   3. Base   4. Composants   5. Chargement
 *  6. Coque (HUD, menu, croupier, pied de page, transitions)
 *  7. Accueil (héros + chapitres)   8. Pages légales   9. 404   10. Réactif
 * ========================================================================== */

/* 1 · POLICES ---------------------------------------------------------------- */
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/chakra-petch-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/chakra-petch-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/chakra-petch-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/chakra-petch-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/chakra-petch-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/chakra-petch-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(../assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(../assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* 2 · JETONS ----------------------------------------------------------------- */
:root {
  --void: #07081A;
  --night: #0A0B1E;
  --night-2: #0E1030;
  --surface: #14163A;
  --surface-2: #1D2050;
  --surface-3: #101232;
  --line: #6C7BFF33;
  --line-strong: #6C7BFF66;

  --text: #EAF0FF;
  --soft: #A7B0E2;
  --mute: #8F98D2;
  --faint: #7078B0;

  --cyan: #22E1FF;
  --cyan-hi: #7DEFFF;
  --magenta: #FF3EA5;
  --coin: #FFD23F;
  --coin-hi: #FFE27A;
  --gold: #E8C36A;
  --gold-deep: #A8791F;
  --nous: #3DFFA2;
  --eux: #FF4D6D;
  --acier: #8EA2FF;
  --hybride: #FF8A3D;
  --royale: #C77DFF;
  --ivory: #F3EFE3;
  --ivory-lo: #E7E0CD;
  --card-red: #C8264A;
  --card-black: #1B1D3A;
  --ink: #04121A;

  --f-display: 'Chakra Petch', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --f-body: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --cut: 10px;
  --cut-lg: 18px;
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --e-back: cubic-bezier(.34, 1.56, .64, 1);

  --hud-h: 68px;
  --gutter: clamp(16px, 4.5vw, 64px);
  --maxw: 1240px;
  --accent: var(--cyan);
}

/* 3 · BASE ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  max-width: 100%; overflow-x: hidden;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--void); color-scheme: dark;
}
body {
  margin: 0; min-height: 100vh; max-width: 100%; overflow-x: hidden;
  font: 400 16px/1.6 var(--f-body); color: var(--text);
  background:
    radial-gradient(60vw 50vw at 88% -10%, rgba(255, 62, 165, .14), transparent 60%),
    radial-gradient(55vw 45vw at -10% 30%, rgba(34, 225, 255, .10), transparent 60%),
    radial-gradient(70vw 50vw at 50% 110%, rgba(124, 92, 255, .14), transparent 60%),
    var(--void);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body::before { /* grain + trame discrète */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(108, 123, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 123, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}
.bgfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--cyan-hi); }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(34, 225, 255, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 10px 16px; background: var(--cyan); color: var(--ink); font: 700 14px var(--f-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: top .2s; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); color: var(--ink); }
.noscript { max-width: 720px; margin: 10vh auto; padding: 24px; font: 16px/1.6 system-ui, sans-serif; color: #EAF0FF; }
.noscript h1 { font-size: 40px; margin-bottom: 12px; }
.noscript p { margin-bottom: 12px; }
.suit--red { color: var(--eux); }
.suit--cold { color: var(--acier); }

/* Apparitions au défilement */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--e-out) var(--d, 0ms), transform .8s var(--e-out) var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* 4 · COMPOSANTS ------------------------------------------------------------- */
/* Boutons biseautés (repris de l'app) */
.btn {
  --btn-bg: var(--surface-2); --btn-fg: var(--text); --btn-inner: transparent; --btn-glow: none;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border: 0; background: none; color: var(--btn-fg);
  font: 700 15px/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; filter: var(--btn-glow); transition: transform .18s var(--e-out), filter .25s;
}
.btn::before, .btn::after { content: ""; position: absolute; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.btn::before { inset: 0; z-index: -2; background: var(--btn-bg); }
.btn::after { inset: 1.5px; z-index: -1; background: var(--btn-inner); clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px)); }
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn .ico { width: 18px; height: 18px; flex: none; }
.btn--primary { --btn-bg: linear-gradient(180deg, #5BEAFF, #22E1FF); --btn-fg: var(--ink); --btn-glow: drop-shadow(0 0 10px rgba(34, 225, 255, .55)); }
.btn--primary:hover { --btn-bg: var(--cyan-hi); }
.btn--outline { --btn-bg: var(--cyan); --btn-inner: rgba(10, 11, 30, .82); --btn-fg: var(--cyan); }
.btn--outline:hover { --btn-inner: var(--surface-2); }
.btn--ghost { --btn-bg: var(--line-strong); --btn-inner: rgba(10, 11, 30, .85); --btn-fg: var(--text); }
.btn--ghost:hover { --btn-bg: var(--cyan); }
.btn--success { --btn-bg: var(--nous); --btn-fg: #03170D; --btn-glow: drop-shadow(0 0 10px rgba(61, 255, 162, .45)); }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 16px; }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 13px; --cut: 7px; }
.btn--block { width: 100%; }
.btn:disabled { cursor: default; filter: none; transform: none; opacity: .75; }

/* Pastilles-boutons */
.chip-btn {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); background: rgba(16, 18, 50, .7); color: var(--soft);
  font: 600 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: color .2s, background .2s, border-color .2s;
}
.chip-btn:hover { color: var(--text); border-color: var(--cyan); }
.chip-btn.is-on { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }

/* Panneau biseauté à bord néon */
.panel { --edge: var(--line-strong); --bg: rgba(18, 20, 54, .86); --c: var(--cut-lg); position: relative; isolation: isolate; padding: clamp(18px, 2.6vw, 30px); }
.panel::before, .panel::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.panel::before { inset: 0; z-index: -2; background: var(--edge); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.panel::after { inset: 1.5px; background: var(--bg); clip-path: polygon(calc(var(--c) - .6px) 0, 100% 0, 100% calc(100% - var(--c) + .6px), calc(100% - var(--c) + .6px) 100%, 0 100%, 0 calc(var(--c) - .6px)); }

/* Icônes */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Pastille qui pulse */
.pulse-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 10px var(--magenta); flex: none; }
.pulse-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--magenta); animation: ping 1.8s var(--e-out) infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* Carte à jouer ivoire */
.pcard {
  --w: 64px; position: relative; display: inline-block; flex: none; width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * .12);
  background: linear-gradient(160deg, #FBF8EE, var(--ivory) 40%, var(--ivory-lo)); color: var(--card-black);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 22px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .25);
  font-family: var(--f-display);
}
.pcard--red { color: var(--card-red); }
.pcard--xs { --w: 22px; }
.pcard--sm { --w: 46px; }
.pcard--md { --w: 64px; }
.pcard--lg { --w: 96px; }
.pcard__corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .9; }
.pcard__corner b { font-size: calc(var(--w) * .26); font-weight: 700; }
.pcard__corner i { font-style: normal; font-size: calc(var(--w) * .2); }
.pcard__corner--tl { left: 7%; top: 5%; }
.pcard__corner--br { right: 7%; bottom: 5%; transform: rotate(180deg); }
.pcard__pip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(var(--w) * .5); line-height: 1; }
.pcard--xs .pcard__corner--br, .pcard--xs .pcard__pip { display: none; }
.pcard--xs .pcard__corner--tl { inset: 0; justify-content: center; }
.pcard--xs .pcard__corner b { font-size: 10px; }
.pcard--xs .pcard__corner i { font-size: 9px; }
.pcard--special { display: grid; place-items: center; background: linear-gradient(160deg, #1D2050, #0E1030); color: var(--coin); box-shadow: 0 0 0 1.5px var(--coin) inset, 0 10px 22px -8px rgba(0, 0, 0, .7); }
.pcard__special { font-size: calc(var(--w) * .3); letter-spacing: -.05em; text-shadow: 0 0 10px currentColor; }
.pcard--donne { color: var(--cyan); box-shadow: 0 0 0 1.5px var(--cyan) inset, 0 10px 22px -8px rgba(0, 0, 0, .7); }
.pcard--donne .pcard__special { font-size: calc(var(--w) * .22); }
.pcard--maison { color: var(--acier); box-shadow: 0 0 0 1.5px var(--acier) inset, 0 10px 22px -8px rgba(0, 0, 0, .7); }
.pcard--capot .pcard__special { font-size: calc(var(--w) * .45); }
.pcard--ghost { pointer-events: none; }

/* Téléphone paysage */
.device { position: relative; margin: 0; }
.device__frame {
  position: relative; padding: clamp(7px, 1.1vw, 13px); border-radius: clamp(20px, 3.4vw, 40px);
  background: linear-gradient(145deg, #2A2D55, #111330 45%, #1B1E44);
  box-shadow: 0 0 0 1px #3A3E78 inset, 0 0 0 3px #0B0C20 inset, 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 60px -10px rgba(34, 225, 255, .18);
}
.device__screen { position: relative; overflow: hidden; border-radius: clamp(13px, 2.4vw, 28px); aspect-ratio: 844 / 390; background: var(--night); }
.device__screen img { width: 100%; height: 100%; object-fit: cover; }
.device__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .09), transparent 32%); }
.device__cam { position: absolute; z-index: 2; left: clamp(2px, .45vw, 5px); top: 50%; width: 4px; height: 16%; transform: translateY(-50%); border-radius: 4px; background: #05060F; }
.device__btn { position: absolute; top: -3px; right: 22%; width: 14%; height: 3px; border-radius: 3px 3px 0 0; background: #2A2D55; }
.device--tilt { transform: perspective(1400px) rotateY(-9deg) rotateX(4deg); transform-origin: 60% 50%; transition: transform 1s var(--e-out); }
.device--tilt:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.device--tilt-r { transform: perspective(1400px) rotateY(8deg) rotateX(3deg); transition: transform 1s var(--e-out); }
.device--tilt-r:hover { transform: perspective(1400px) rotateY(2deg); }

/* Jetons d'état */
.live-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; background: var(--magenta); color: #1A0512; font: 700 12px/1 var(--f-display); letter-spacing: .12em; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: #1A0512; animation: blink 1.1s steps(2) infinite; }
.live-chip.is-off { background: var(--surface-2); color: var(--mute); }
.live-chip.is-off i { animation: none; background: var(--mute); }
@keyframes blink { 50% { opacity: .2; } }

/* Progression segmentée (app) */
.progress-seg { --v: 0; --segs: 12; --col: var(--cyan); position: relative; height: 10px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--col) 16%, transparent) 0 calc(100% / var(--segs) - 3px), transparent 0 calc(100% / var(--segs))); }
.progress-seg::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 1%); background: repeating-linear-gradient(90deg, var(--col) 0 calc(100% / var(--segs) * 100 / var(--v) - 3px), transparent 0 calc(100% / var(--segs) * 100 / var(--v))); filter: drop-shadow(0 0 4px var(--col)); }

/* 5 · ÉCRAN DE CHARGEMENT ----------------------------------------------------- */
.boot { position: fixed; inset: 0; z-index: 300; overflow: hidden; background: #07081A; color: var(--text); font-family: var(--f-body); }
.boot__sky { position: absolute; inset: 0 0 42% 0; background: radial-gradient(60% 90% at 50% 100%, rgba(255, 62, 165, .32), transparent 70%), linear-gradient(#05061A, #150A38); }
.boot__stars { position: absolute; inset: 0; opacity: .7; background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 64%, #9fe8ff, transparent), radial-gradient(1.5px 1.5px at 44% 18%, #fff, transparent), radial-gradient(1px 1px at 63% 42%, #ffc2e4, transparent), radial-gradient(1.5px 1.5px at 78% 16%, #fff, transparent), radial-gradient(1px 1px at 88% 58%, #9fe8ff, transparent), radial-gradient(1px 1px at 6% 72%, #fff, transparent), radial-gradient(1px 1px at 55% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 94% 30%, #ffd9a0, transparent); animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .35; } }
.boot__sun { position: absolute; left: 50%; bottom: 42%; width: min(56vw, 440px); aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 999px 999px 0 0; opacity: .75; background: linear-gradient(var(--coin), #FF8A3D 40%, var(--magenta) 80%); -webkit-mask: repeating-linear-gradient(0deg, #000 0 11px, transparent 11px 16px); mask: repeating-linear-gradient(0deg, #000 0 11px, transparent 11px 16px); filter: drop-shadow(0 0 40px rgba(255, 62, 165, .5)); }
.boot__floor { position: absolute; left: -40%; right: -40%; top: 58%; bottom: -10%; perspective: 280px; overflow: hidden; }
.boot__grid { position: absolute; inset: -120% 0 0 0; transform-origin: 50% 100%; transform: rotateX(64deg); }
.boot__grid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(34, 225, 255, .6) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(34, 225, 255, .6) 1.5px, transparent 1.5px); background-size: 56px 56px; animation: grid-run 1.2s linear infinite; }
.boot__floor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#07081A 0%, transparent 35%); }
@keyframes grid-run { to { transform: translateY(56px); } }
.boot__horizon { position: absolute; left: 0; right: 0; top: 58%; height: 2px; background: var(--magenta); box-shadow: 0 0 16px var(--magenta), 0 0 60px rgba(255, 62, 165, .6); }
.boot__brand { position: absolute; left: 0; right: 0; top: max(8vh, 40px); text-align: center; }
.boot__brand b { display: block; font: 700 clamp(46px, 9vw, 104px)/1 var(--f-display); letter-spacing: .14em; padding-left: .14em; color: #F4F8FF; text-shadow: 0 0 18px rgba(34, 225, 255, .9), 0 0 60px rgba(34, 225, 255, .45); animation: flicker 5s infinite; }
.boot__brand small { display: block; margin-top: 12px; font: 600 clamp(11px, 1.5vw, 15px)/1 var(--f-mono); letter-spacing: .6em; padding-left: .6em; color: var(--magenta); text-shadow: 0 0 10px rgba(255, 62, 165, .7); }
@keyframes flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
.boot__crew { position: absolute; left: 50%; bottom: calc(42% - 6px); transform: translateX(-50%); display: flex; align-items: flex-end; gap: clamp(8px, 2.6vw, 30px); }
.boot__bot { --bc: var(--cyan); width: clamp(64px, 10vw, 118px); height: auto; opacity: .1; filter: drop-shadow(0 0 8px var(--bc)) grayscale(1) brightness(.5); animation: bot-on .6s steps(2, end) var(--d) forwards, bot-dance 1.6s var(--e-inout) calc(var(--d) + .6s) infinite; }
.boot__bot:nth-child(2n) { animation-name: bot-on, bot-dance-b; }
@keyframes bot-on { 0% { opacity: .1; } 40% { opacity: .9; filter: drop-shadow(0 0 8px var(--bc)) grayscale(0) brightness(1.6); } 60% { opacity: .3; } 100% { opacity: 1; filter: drop-shadow(0 0 10px var(--bc)); } }
@keyframes bot-dance { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-12px) rotate(-5deg); } 50% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-6px) rotate(4deg); } }
@keyframes bot-dance-b { 0%, 100% { transform: translateY(-6px) rotate(3deg); } 50% { transform: translateY(-14px) rotate(-4deg); } }
.boot__status { position: absolute; left: 0; right: 0; bottom: max(6vh, 26px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 20px; text-align: center; }
.boot__label { font: 700 clamp(13px, 1.6vw, 17px)/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 10px rgba(34, 225, 255, .6); }
.boot__pct { font-family: var(--f-mono); color: var(--text); }
.boot__bar { position: relative; width: min(340px, 78vw); height: 12px; background: repeating-linear-gradient(90deg, rgba(34, 225, 255, .16) 0 calc(5% - 3px), transparent 0 5%); }
.boot__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(90deg, var(--cyan) 0 calc(17px - 3px), transparent 0 17px); background-size: 17px 100%; filter: drop-shadow(0 0 6px var(--cyan)); }
.boot__log { font: 500 12px/1.4 var(--f-mono); color: var(--mute); letter-spacing: .02em; min-height: 1.4em; }
.boot__error { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: rgba(7, 8, 26, .82); }
.boot__error[hidden] { display: none; }
.boot__error-title { font: 700 clamp(26px, 4vw, 40px)/1.1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--hybride); text-shadow: 0 0 18px rgba(255, 138, 61, .6); }
.boot__error-text { max-width: 46ch; color: var(--soft); }
.boot__error-detail { max-width: 60ch; font: 500 12px/1.5 var(--f-mono); color: var(--faint); word-break: break-word; }
.boot.is-error .boot__label { color: var(--hybride); }
.boot.is-error .boot__bot { animation-play-state: paused; filter: grayscale(1) brightness(.6); }
.boot.is-error .boot__grid::before { animation-play-state: paused; }
.boot.is-leaving { pointer-events: none; animation: boot-out .9s var(--e-inout) forwards; }
.boot.is-leaving .boot__grid::before { animation-duration: .25s; }
.boot.is-leaving .boot__bot { animation: bot-leave .5s var(--e-out) forwards; }
.boot.is-leaving .boot__bot:nth-child(2) { animation-delay: .05s; }
.boot.is-leaving .boot__bot:nth-child(3) { animation-delay: .1s; }
.boot.is-leaving .boot__bot:nth-child(4) { animation-delay: .15s; }
.boot.is-leaving .boot__sun { transition: transform .9s var(--e-inout); transform: translateX(-50%) scale(2.2); }
.boot.is-leaving .boot__brand, .boot.is-leaving .boot__status { transition: opacity .4s, transform .6s var(--e-out); opacity: 0; transform: translateY(-20px); }
@keyframes bot-leave { 0% { opacity: 1; transform: none; } 40% { transform: translateY(-40px) scale(1.05); } 100% { opacity: 0; transform: translateY(-110px) scale(.8); } }
@keyframes boot-out { 0%, 35% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 100% 0); } }
html:not(.is-ready) body { overflow: hidden; }

/* 6 · COQUE ------------------------------------------------------------------ */
/* HUD */
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding-top: env(safe-area-inset-top, 0px); background: linear-gradient(rgba(7, 8, 26, .92), rgba(7, 8, 26, .72)); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hud::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent); opacity: .5; }
.hud__inner { display: flex; align-items: center; gap: 16px; height: var(--hud-h); max-width: calc(var(--maxw) + 2 * var(--gutter) + 80px); margin: 0 auto; padding-inline: var(--gutter); }
.hud__brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; flex: none; }
.hud__brand img { width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(34, 225, 255, .35)); transition: transform .6s var(--e-back); }
.hud__brand:hover img { transform: rotate(-12deg) scale(1.08); }
.hud__word { display: flex; flex-direction: column; font: 700 20px/1 var(--f-display); letter-spacing: .12em; color: var(--text); }
.hud__word small { margin-top: 3px; font: 600 9px/1 var(--f-mono); letter-spacing: .5em; color: var(--magenta); }
.hud__brand:hover .hud__word { color: var(--text); }
.hud__back { display: none; align-items: center; gap: 8px; margin: 0 auto; color: var(--soft); font: 600 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.hud__back .ico { width: 18px; height: 18px; }
.hud__back:hover { color: var(--cyan); }
html:not([data-route="home"]) .hud__back { display: inline-flex; }
html:not([data-route="home"]) .tracker { display: none; }
.hud__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
html[data-route="home"] .hud__actions { margin-left: 0; }

.tracker { display: flex; align-items: center; gap: 14px; margin: 0 auto; padding: 6px 14px; border: 1px solid var(--line); background: rgba(16, 18, 50, .6); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.tracker__label { font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.tracker__label b { color: var(--text); }
.tracker__slots { display: flex; gap: 5px; }
.slot { position: relative; display: block; width: 24px; height: 34px; text-decoration: none; }
.slot__empty { position: absolute; inset: 0; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: 4px; font: 600 10px var(--f-mono); color: var(--faint); transition: border-color .2s, color .2s; }
.slot:hover .slot__empty { border-color: var(--cyan); color: var(--cyan); }
.slot__card { position: absolute; inset: 0; --w: 24px; opacity: 0; transform: translateY(-10px) rotate(-12deg) scale(.6); transition: opacity .35s, transform .5s var(--e-back); }
.slot.is-won .slot__card { opacity: 1; transform: none; }
.slot.is-won .slot__empty { opacity: 0; }
.tracker__score { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-mono); }
.tracker__score small { font: 700 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--nous); }
.tracker__score b { min-width: 3ch; font: 700 20px/1 var(--f-mono); color: var(--text); text-shadow: 0 0 10px rgba(61, 255, 162, .45); }
.tracker.is-bump .tracker__score b { animation: bump .5s var(--e-back); }
@keyframes bump { 40% { transform: scale(1.3); color: var(--nous); } }
.hud.is-capot .tracker { border-color: var(--coin); box-shadow: 0 0 24px -6px var(--coin); }
.hud.is-capot .tracker__score b { color: var(--coin); text-shadow: 0 0 12px rgba(255, 210, 63, .7); }
.score-pop { position: fixed; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translateX(-50%); pointer-events: none; animation: pop-up 1.9s var(--e-out) forwards; }
.score-pop__pts { font: 700 16px/1 var(--f-mono); color: var(--nous); text-shadow: 0 0 10px rgba(61, 255, 162, .7); }
.score-pop__bonus { padding: 4px 8px; background: var(--coin); color: #1A1400; font: 700 12px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
@keyframes pop-up { 0% { opacity: 0; transform: translate(-50%, -6px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, 6px); } 100% { opacity: 0; transform: translate(-50%, 16px); } }

.lang { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 10px 0 8px; border: 1px solid var(--line-strong); background: rgba(16, 18, 50, .7); color: var(--soft); cursor: pointer; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: border-color .2s; }
.lang:hover { border-color: var(--cyan); }
.lang .ico { width: 17px; height: 17px; margin-right: 4px; color: var(--cyan); }
.lang__opt { padding: 4px 6px; font: 700 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--faint); }
.lang__opt.is-on { background: var(--cyan); color: var(--ink); }
.hud__menu { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; background: var(--magenta); color: #1A0512; cursor: pointer; font: 700 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); filter: drop-shadow(0 0 8px rgba(255, 62, 165, .5)); transition: transform .2s; }
.hud__menu:hover { transform: translateY(-1px); }
.hud__menu .ico { width: 20px; height: 20px; }

/* Menu : une main de cartes */
.menu { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.menu__backdrop { position: absolute; inset: 0; background: rgba(5, 6, 20, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; }
.menu.is-open .menu__backdrop { opacity: 1; }
.menu__panel { position: relative; width: min(1160px, 100%); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.menu__head { position: relative; width: 100%; text-align: center; opacity: 0; transform: translateY(-10px); transition: opacity .35s .1s, transform .45s var(--e-out) .1s; }
.menu.is-open .menu__head, .menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu__title { font: 700 clamp(30px, 5vw, 52px)/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.menu__hint { margin-top: 8px; color: var(--soft); }
.menu__close { position: absolute; right: 0; top: 0; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: rgba(16, 18, 50, .8); color: var(--text); cursor: pointer; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.menu__close:hover { border-color: var(--magenta); color: var(--magenta); }
.menu__hand { --n: 11; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: 100%; }
.menu__slot { position: relative; min-width: 0; opacity: 1; transform: none; transition: opacity .35s, transform .5s var(--e-out); }
.menu:not(.is-open) .menu__slot { opacity: 0; transform: translateY(34px) scale(.94); }
.menu.is-open .menu__slot { transition-delay: calc(var(--i) * 34ms); }
.menu__card { position: relative; min-height: 146px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 11px 8px 12px; text-decoration: none; color: var(--text); background: linear-gradient(170deg, #1D2050, #0E1030); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .8); transition: transform .3s var(--e-back), border-color .2s, box-shadow .2s, background .2s; }
.menu__card .pcard { --w: 68px; }
.menu__card:hover, .menu__card:focus-visible { transform: translateY(-6px) scale(1.025); border-color: var(--cyan); background: linear-gradient(170deg, #242866, #111438); box-shadow: 0 0 0 1px var(--cyan), 0 18px 34px -10px rgba(34, 225, 255, .45); color: var(--text); outline: none; z-index: 2; }
.menu__card.is-won::after { content: "✓"; position: absolute; top: 6px; right: 8px; font: 700 12px var(--f-mono); color: var(--nous); }
.menu__label { width: 100%; min-height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 700 12px/1.15 var(--f-display); letter-spacing: .045em; text-transform: uppercase; text-align: center; text-wrap: balance; }
.menu__label small { font: 600 9px/1 var(--f-mono); letter-spacing: .12em; color: var(--cyan); }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; opacity: 0; transform: translateY(10px); transition: opacity .35s .2s, transform .45s var(--e-out) .2s; }
.menu__foot a { color: var(--soft); font-size: 14px; }
.menu__foot a:hover { color: var(--cyan); }
.menu.is-closing .menu__backdrop { opacity: 0; }
.menu.is-closing .menu__slot { transform: translateY(-60vh) rotate(calc(var(--off) * 20deg)); opacity: 0; transition: transform .35s var(--e-inout), opacity .3s; }
.menu.is-closing .menu__head, .menu.is-closing .menu__foot { opacity: 0; }
html.menu-open body { overflow: hidden; }

/* Croupier */
.croupier { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; align-items: flex-end; gap: 10px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.croupier__avatar { position: relative; flex: none; width: 60px; height: 60px; padding: 5px; border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #232766, #0E1030); cursor: pointer; pointer-events: auto; box-shadow: 0 0 0 1.5px var(--cyan), 0 0 20px rgba(34, 225, 255, .45), 0 10px 20px rgba(0, 0, 0, .5); animation: bob 3.2s ease-in-out infinite; }
.croupier__avatar img { width: 100%; height: 100%; object-fit: contain; }
.croupier__ring { position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(34, 225, 255, .45); animation: spin 14s linear infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.croupier__bubble { position: relative; min-width: 0; padding: 10px 14px 11px; background: rgba(12, 14, 40, .94); border: 1px solid rgba(34, 225, 255, .35); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); pointer-events: auto; transform-origin: 0 100%; transition: opacity .35s, transform .45s var(--e-out); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.croupier__name { display: block; margin-bottom: 4px; font: 700 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--magenta); }
.croupier__text { font: 500 13.5px/1.45 var(--f-mono); color: var(--text); }
.croupier__caret { color: var(--cyan); animation: blink 1s steps(2) infinite; }
.croupier.is-pop .croupier__bubble { animation: bubble-in .45s var(--e-back); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.croupier.is-collapsed .croupier__bubble, .croupier.is-quiet .croupier__bubble { opacity: 0; transform: translateX(-10px) scale(.9); pointer-events: none; }
.croupier.is-collapsed .croupier__avatar { box-shadow: 0 0 0 1.5px var(--line-strong), 0 10px 20px rgba(0, 0, 0, .5); filter: saturate(.6); }
html:not(.is-ready) .croupier { opacity: 0; }
.croupier { transition: opacity .5s .6s; }
html.menu-open .croupier { opacity: 0; }

/* Transition de page : un rideau de cartes */
.veil { position: fixed; inset: 0; z-index: 250; display: flex; pointer-events: none; perspective: 1400px; visibility: hidden; }
.veil.is-in, .veil.is-out { visibility: visible; pointer-events: auto; }
.veil__card { flex: 1; position: relative; transform: rotateY(90deg); transform-origin: 50% 50%; background: #10123A; box-shadow: 0 0 0 1px rgba(34, 225, 255, .25) inset; }
.veil__card i { position: absolute; inset: 10px; border: 1.5px solid rgba(34, 225, 255, .45); border-radius: 10px; background: repeating-linear-gradient(-45deg, rgba(34, 225, 255, .10) 0 6px, transparent 6px 14px), radial-gradient(circle at 50% 50%, rgba(255, 62, 165, .25), transparent 60%); }
.veil__card i::after { content: "K"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 clamp(30px, 5vw, 60px)/1 var(--f-display); color: var(--cyan); text-shadow: 0 0 20px var(--cyan); }
.veil.is-in .veil__card { animation: veil-in .5s var(--e-out) calc(var(--i) * 45ms) both; }
.veil.is-out .veil__card { animation: veil-out .5s var(--e-inout) calc(var(--i) * 45ms) both; }
@keyframes veil-in { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
@keyframes veil-out { from { transform: rotateY(0); } to { transform: rotateY(-90deg); } }

/* Pied de page */
.footer { position: relative; overflow: hidden; margin-top: 40px; padding: 70px 0 0; border-top: 1px solid var(--line); background: linear-gradient(rgba(10, 11, 30, 0), rgba(10, 11, 30, .9) 30%); }
.footer__glow { position: absolute; left: 50%; top: 0; width: 70%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent); box-shadow: 0 0 30px 4px rgba(34, 225, 255, .3); }
.footer__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 40px; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.footer__brand { display: flex; gap: 18px; align-items: flex-start; }
.footer__brand img { width: 84px; height: 84px; flex: none; }
.footer__name { font: 700 26px/1 var(--f-display); letter-spacing: .12em; }
.footer__name span { margin-left: 10px; font: 600 11px/1 var(--f-mono); letter-spacing: .5em; color: var(--magenta); vertical-align: middle; }
.footer__tagline { margin-top: 10px; color: var(--soft); max-width: 34ch; }
.footer__made { margin-top: 8px; font: 500 12px/1.4 var(--f-mono); color: var(--mute); }
.footer__title { margin-bottom: 14px; font: 600 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.footer__col ul { display: grid; gap: 8px; }
.footer__explore { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.footer__col a { color: var(--soft); text-decoration: none; font-size: 15px; }
.footer__col a:hover { color: var(--cyan); }
.lang--footer { margin-top: 18px; }
.footer__bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 44px auto 0; padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font: 500 12px/1.5 var(--f-mono); color: var(--mute); }
.footer__note { color: var(--faint); }
.footer__giant { position: absolute; left: 50%; bottom: -0.2em; z-index: 0; transform: translateX(-50%); font: 700 clamp(120px, 26vw, 380px)/1 var(--f-display); letter-spacing: .08em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(108, 123, 255, .16); pointer-events: none; user-select: none; }

/* 7 · ACCUEIL ---------------------------------------------------------------- */
.view { position: relative; display: block; outline: none; }

/* ---- Héros ---- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding-top: calc(var(--hud-h) + env(safe-area-inset-top, 0px) + clamp(20px, 5vh, 56px)); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__sun { position: absolute; right: 8%; bottom: 30%; width: min(46vw, 620px); aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; opacity: .5; background: linear-gradient(var(--coin), #FF8A3D 45%, var(--magenta) 85%); -webkit-mask: repeating-linear-gradient(0deg, #000 0 12px, transparent 12px 18px); mask: repeating-linear-gradient(0deg, #000 0 12px, transparent 12px 18px); filter: blur(.3px) drop-shadow(0 0 50px rgba(255, 62, 165, .45)); }
.hero__floor { position: absolute; left: -30%; right: -30%; bottom: 0; height: 30%; perspective: 300px; overflow: hidden; }
.hero__grid { position: absolute; inset: -140% 0 0 0; transform-origin: 50% 100%; transform: rotateX(66deg); }
.hero__grid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(34, 225, 255, .5) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(34, 225, 255, .5) 1.5px, transparent 1.5px); background-size: 60px 60px; animation: grid-run 2.4s linear infinite; }
.hero__floor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--void), transparent 45%, rgba(7, 8, 26, .2) 70%, var(--void)); }
.hero__horizon { position: absolute; left: 0; right: 0; bottom: 30%; height: 2px; background: linear-gradient(90deg, transparent, var(--magenta) 20%, var(--magenta) 80%, transparent); box-shadow: 0 0 18px var(--magenta), 0 0 70px rgba(255, 62, 165, .5); }
.hero__inner { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(20px, 4vw, 60px); width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.hero__copy { position: relative; z-index: 2; }
.hero__kicker { display: inline-flex; align-items: center; gap: 12px; padding: 7px 14px; border: 1px solid rgba(255, 62, 165, .45); background: rgba(255, 62, 165, .08); font: 600 12px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: #FF8FCB; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.hero__title { margin: 22px 0 6px; display: flex; flex-direction: column; line-height: .86; }
.hero__word { position: relative; font: 700 clamp(84px, 13.5vw, 200px)/.86 var(--f-display); letter-spacing: .04em; color: #F4F8FF; text-shadow: 0 0 24px rgba(34, 225, 255, .75), 0 0 80px rgba(34, 225, 255, .35); }
.hero__word::before, .hero__word::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.hero__word::before { color: transparent; -webkit-text-stroke: 1px rgba(255, 62, 165, .7); transform: translate(6px, 6px); z-index: -1; text-shadow: none; }
.hero__word::after { color: var(--cyan); opacity: 0; mix-blend-mode: screen; text-shadow: none; animation: glitch 7s steps(1) infinite 3s; }
@keyframes glitch { 0%, 92%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); } 93% { opacity: .8; transform: translate(-4px, 0); clip-path: inset(10% 0 55% 0); } 95% { opacity: .8; transform: translate(4px, 0); clip-path: inset(60% 0 8% 0); } 97% { opacity: .6; transform: translate(-2px, 0); clip-path: inset(35% 0 35% 0); } }
.hero__sub { margin-top: 14px; font: 600 clamp(14px, 1.8vw, 22px)/1 var(--f-mono); letter-spacing: .9em; color: var(--magenta); text-shadow: 0 0 14px rgba(255, 62, 165, .6); }
.hero__tagline { margin: 30px 0 18px; display: grid; gap: 4px; }
.hero__tagline li { display: flex; align-items: center; gap: 14px; font: 600 clamp(22px, 2.6vw, 34px)/1.15 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.hero__tagline .suit { font-style: normal; font-size: .8em; width: 1.1em; text-align: center; text-shadow: 0 0 12px currentColor; }
.hero__lead { max-width: 52ch; color: var(--soft); font-size: clamp(15px, 1.25vw, 17px); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; }
.hero__chips li { display: flex; align-items: baseline; gap: 8px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.hero__chips b { font: 700 22px/1 var(--f-mono); color: var(--coin); text-shadow: 0 0 10px rgba(255, 210, 63, .45); letter-spacing: 0; }

.hero__visual { position: relative; z-index: 1; display: grid; place-items: center; }
.ring { position: relative; width: min(100%, 540px); aspect-ratio: 1; display: grid; place-items: center; container-type: inline-size; }
.ring__glow { position: absolute; inset: 6%; border-radius: 50%; background: conic-gradient(from 0deg, var(--cyan), var(--magenta), var(--royale), var(--coin), var(--cyan)); filter: blur(46px); opacity: .5; animation: spin 16s linear infinite; }
.ring__dial { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(234, 240, 255, .35) 0 .6deg, transparent .6deg 6deg); -webkit-mask: radial-gradient(circle, transparent 64%, #000 64.4%, #000 67%, transparent 67.4%); mask: radial-gradient(circle, transparent 64%, #000 64.4%, #000 67%, transparent 67.4%); animation: spin 60s linear infinite reverse; }
@property --orbit { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.ring__orbit { position: absolute; inset: -2%; border-radius: 50%; border: 1px dashed rgba(108, 123, 255, .35); animation: orbit 40s linear infinite; }
@keyframes orbit { to { --orbit: 360deg; } }
.ring__suit { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px; display: grid; place-items: center; border-radius: 50%; background: var(--night); border: 1px solid var(--line-strong); font-size: 20px; transform: rotate(calc(var(--k) * 90deg + 45deg + var(--orbit))) translate(calc(52cqw)) rotate(calc(var(--k) * -90deg - 45deg - var(--orbit))); }
.ring__suit--heart { color: var(--eux); box-shadow: 0 0 16px rgba(255, 77, 109, .4); }
.ring__suit--diamond { color: var(--magenta); box-shadow: 0 0 16px rgba(255, 62, 165, .4); }
.ring__suit--club { color: var(--royale); box-shadow: 0 0 16px rgba(199, 125, 255, .4); }
.ring__suit--spade { color: var(--coin); box-shadow: 0 0 16px rgba(255, 210, 63, .4); }
.ring__logo { position: relative; width: 86%; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .55)); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-1.5deg); } }

.hand { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; padding-bottom: 8px; }
.hand__title { font: 600 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.hand__fan { --n: 8; position: relative; display: flex; justify-content: center; height: 132px; width: 100%; }
.hand__fan li { --mid: calc((var(--n) - 1) / 2); --off: calc(var(--i) - var(--mid)); position: absolute; left: 50%; bottom: 0; width: 76px; margin-left: -38px; transform-origin: 50% 230%; transform: rotate(calc(var(--off) * 6deg)) translateX(calc(var(--off) * 6px)); }
.hand__card { position: relative; display: block; text-decoration: none; transition: transform .35s var(--e-back); }
.hand__card .pcard { --w: 76px; transition: box-shadow .3s; }
.hand__label { position: absolute; left: 50%; top: -30px; transform: translate(-50%, 6px); padding: 4px 8px; background: var(--cyan); color: var(--ink); font: 700 11px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--e-out); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.hand__card:hover, .hand__card:focus-visible { transform: translateY(-26px); outline: none; }
.hand__card:hover .pcard, .hand__card:focus-visible .pcard { box-shadow: 0 0 0 2px var(--cyan), 0 0 26px rgba(34, 225, 255, .55), 0 16px 30px -10px rgba(0, 0, 0, .8); }
.hand__card:hover .hand__label, .hand__card:focus-visible .hand__label { opacity: 1; transform: translate(-50%, 0); }
html:not(.is-ready) .hand__fan li { opacity: 0; }
html.is-ready .hand__fan li { animation: deal .8s var(--e-out) calc(.25s + var(--i) * 70ms) backwards; }
@keyframes deal { from { opacity: 0; transform: translate(calc(30vw - var(--off) * 40px), -50vh) rotate(200deg); } }

.ticker { position: relative; z-index: 2; overflow: hidden; contain: paint; border-top: 1px solid rgba(255, 62, 165, .45); border-bottom: 1px solid rgba(255, 62, 165, .25); background: rgba(10, 11, 30, .85); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.tick { display: flex; align-items: center; gap: 12px; padding: 12px 34px 12px 0; font: 500 13px/1 var(--f-mono); color: var(--soft); white-space: nowrap; }
.tick__tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font: 700 11px/1 var(--f-display); letter-spacing: .12em; color: var(--ink); background: var(--cyan); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.tick__tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.1s steps(2) infinite; }
.tick--live .tick__tag { background: var(--magenta); color: #1A0512; }
.tick--acier .tick__tag { background: var(--acier); }
.tick--royal .tick__tag { background: var(--royale); }
.tick--nous .tick__tag { background: var(--nous); }
.tick--coin .tick__tag { background: var(--coin); }
.tick--xp .tick__tag { background: var(--cyan); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Entrée du héros après le chargement */
html:not(.is-ready) .hero__copy > *, html:not(.is-ready) .ring { opacity: 0; }
html.is-ready .hero__copy > * { animation: rise .9s var(--e-out) backwards; }
html.is-ready .hero__copy > :nth-child(2) { animation-delay: .08s; }
html.is-ready .hero__copy > :nth-child(3) { animation-delay: .16s; }
html.is-ready .hero__copy > :nth-child(4) { animation-delay: .24s; }
html.is-ready .hero__copy > :nth-child(5) { animation-delay: .32s; }
html.is-ready .hero__copy > :nth-child(6) { animation-delay: .4s; }
html.is-ready .ring { animation: ring-in 1.3s var(--e-out) backwards .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
@keyframes ring-in { from { opacity: 0; transform: scale(.7) rotate(-30deg); filter: blur(10px); } }

/* ---- Chapitres ---- */
.chapter { position: relative; padding: clamp(90px, 13vh, 160px) 0 clamp(60px, 9vh, 110px); isolation: isolate; scroll-margin-top: calc(var(--hud-h) - 20px); }
.chapter__water { position: absolute; right: -4vw; top: 40px; z-index: -1; font: 700 clamp(240px, 38vw, 560px)/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; user-select: none; opacity: .7; }
.chapter--annonces { --accent: var(--coin); }
.chapter--jeu { --accent: var(--cyan); }
.chapter--ecurie { --accent: var(--nous); }
.chapter--cerveau { --accent: var(--royale); }
.chapter--formats { --accent: var(--hybride); }
.chapter--arene { --accent: var(--magenta); }
.chapter--cagnotte { --accent: var(--coin); }
.chapter--vitrine { --accent: var(--cyan); }
.chapter--maison { --accent: var(--acier); }
.chapter--annonces .chapter__water::before { content: "♥"; }
.chapter--jeu .chapter__water::before { content: "♠"; }
.chapter--ecurie .chapter__water::before { content: "♥"; }
.chapter--cerveau .chapter__water::before { content: "♦"; }
.chapter--formats .chapter__water::before { content: "♦"; }
.chapter--arene .chapter__water::before { content: "♣"; }
.chapter--cagnotte .chapter__water::before { content: "◆"; }
.chapter--vitrine .chapter__water::before { content: "♥"; }
.chapter--maison .chapter__water::before { content: "♠"; }
.chapter:nth-of-type(odd) .chapter__water { right: auto; left: -4vw; }
.chapter::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent); }

.ch-head { position: relative; max-width: 860px; margin-bottom: clamp(36px, 5vw, 64px); }
.ch-head__meta { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.ch-flip { position: relative; flex: none; width: 46px; aspect-ratio: 5 / 7; perspective: 600px; }
.ch-flip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .8s var(--e-back); }
.ch-flip.is-flipped .ch-flip__inner { transform: rotateY(0); }
.ch-flip__back, .ch-flip .pcard { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ch-flip .pcard { --w: 46px; }
.ch-flip__back { border-radius: 6px; transform: rotateY(180deg); background: repeating-linear-gradient(-45deg, rgba(34, 225, 255, .35) 0 3px, #14163A 3px 7px); box-shadow: 0 0 0 1.5px var(--cyan) inset, 0 8px 18px -6px rgba(0, 0, 0, .7); }
.ch-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 600 12px/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.ch-num { padding: 5px 8px; background: var(--accent); color: var(--ink); font-weight: 700; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.ch-title { display: flex; flex-direction: column; font: 700 clamp(40px, 6.4vw, 88px)/.95 var(--f-display); letter-spacing: .01em; text-transform: uppercase; }
.ch-title__alt { color: var(--accent); text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent); }
.ch-lead { margin-top: 22px; max-width: 62ch; font-size: clamp(16px, 1.35vw, 19px); color: var(--soft); }

/* ---- 01 · Annonces ---- */
.bids { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.bids__aside { position: sticky; top: calc(var(--hud-h) + 40px); }
.bids__board { position: relative; padding: 24px; background: linear-gradient(170deg, rgba(29, 32, 80, .92), rgba(12, 13, 38, .95)); border: 1px solid rgba(255, 210, 63, .35); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.bids__current { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.bids__current small { font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.bids__value { font: 700 76px/1 var(--f-mono); color: var(--coin); text-shadow: 0 0 22px rgba(255, 210, 63, .55); }
.bids__suit { font-size: 48px; line-height: 1; text-shadow: 0 0 16px currentColor; }
.bids__ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bid { display: grid; place-items: center; height: 42px; border: 1px solid var(--line); background: rgba(16, 18, 50, .7); font: 600 16px/1 var(--f-mono); color: var(--faint); transition: all .35s var(--e-out); }
.bid.is-passed { color: var(--soft); border-color: var(--line-strong); background: rgba(255, 210, 63, .06); }
.bid.is-on { color: var(--ink); background: var(--coin); border-color: var(--coin); box-shadow: 0 0 18px rgba(255, 210, 63, .55); transform: scale(1.06); }
.bids__calls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.call { display: grid; place-items: center; height: 42px; border: 1px dashed var(--line-strong); font: 700 12px/1 var(--f-display); letter-spacing: .08em; color: var(--faint); transition: all .4s var(--e-out); }
.bids__board.is-called .call--contre { border-style: solid; border-color: var(--eux); background: var(--eux); color: #1C0309; box-shadow: 0 0 18px rgba(255, 77, 109, .5); }
.bids__board.is-called .call--surcontre { border-style: solid; border-color: var(--coin); background: var(--coin); color: #1A1400; box-shadow: 0 0 18px rgba(255, 210, 63, .5); transition-delay: .5s; }
.bids__list { display: grid; gap: clamp(22px, 4vh, 40px); }
.bidcard { position: relative; padding: 28px 30px 30px 110px; min-height: 150px; background: rgba(16, 18, 50, .72); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); transition: border-color .4s, background .4s, transform .5s var(--e-out); }
.bidcard.is-active { border-color: rgba(255, 210, 63, .6); background: linear-gradient(100deg, rgba(255, 210, 63, .1), rgba(16, 18, 50, .8) 45%); }
.bidcard__call { position: absolute; left: 26px; top: 26px; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; }
.bidcard__call b { font: 700 30px/1 var(--f-mono); color: var(--coin); }
.bidcard__call i { font-style: normal; font-size: 26px; line-height: 1; }
.bidcard h3 { font: 700 clamp(22px, 2.2vw, 28px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.bidcard p { color: var(--soft); }
.stamps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 10px; }
.stamp { padding: 22px 24px; text-align: center; border: 3px double currentColor; }
.stamp b { display: block; font: 700 clamp(26px, 3vw, 40px)/1 var(--f-display); letter-spacing: .06em; text-shadow: 0 0 18px currentColor; }
.stamp p { margin-top: 10px; color: var(--soft); font-size: 15px; }
.stamp--contre { color: var(--eux); transform: rotate(-3deg); }
.stamp--surcontre { color: var(--coin); transform: rotate(2.5deg); }
.stamp[data-reveal] { transform: scale(1.8) rotate(-14deg); }
.stamp--contre.is-in { transform: rotate(-3deg); transition-timing-function: var(--e-back); }
.stamp--surcontre.is-in { transform: rotate(2.5deg); transition-delay: .35s; transition-timing-function: var(--e-back); }

/* ---- 02 · Table ---- */
.jeu { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.jeu__stage { position: relative; padding-bottom: 150px; }
.jeu__console { position: absolute; right: -4%; bottom: 0; width: min(78%, 480px); z-index: 2; }
.jeu__console-cap { margin-top: 8px; font: 500 12px/1.4 var(--f-mono); color: var(--mute); text-align: right; }
.jeu__proof { position: absolute; left: -3%; bottom: 20px; width: 34%; transform: rotate(-5deg); z-index: 1; border: 6px solid #F3EFE3; border-bottom-width: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); transition: transform .5s var(--e-out); }
.jeu__proof:hover { transform: rotate(-2deg) scale(1.04); z-index: 3; }
.jeu__proof img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 25% 30%; }
.console { background: rgba(6, 7, 20, .96); border: 1px solid rgba(34, 225, 255, .35); box-shadow: 0 24px 50px rgba(0, 0, 0, .6), 0 0 40px -10px rgba(34, 225, 255, .35); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.console__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.console__dots { display: flex; gap: 5px; }
.console__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--eux); }
.console__dots i:nth-child(2) { background: var(--coin); }
.console__dots i:nth-child(3) { background: var(--nous); }
.console__title { font: 700 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.console__levels { display: flex; gap: 4px; margin-left: auto; }
.lvl { display: inline-block; padding: 2px 5px; border: 1px solid currentColor; font: 700 9.5px/1.2 var(--f-mono); font-style: normal; letter-spacing: .04em; }
.lvl--ERR { color: var(--eux); }
.lvl--WRN { color: var(--coin); }
.lvl--INF { color: var(--cyan); }
.lvl--DBG { color: var(--mute); }
.console__body { height: 196px; overflow: hidden; padding: 10px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.console__line { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; font: 500 12px/1.45 var(--f-mono); color: var(--text); animation: line-in .3s var(--e-out); }
.console__time { color: var(--faint); }
.console__line .lvl { border: 0; padding: 0; }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feature { position: relative; padding: 20px 18px; background: rgba(16, 18, 50, .66); border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--e-out), background .3s; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.feature:hover { border-color: var(--cyan); background: rgba(34, 225, 255, .06); transform: translateY(-3px); }
.feature__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; color: var(--cyan); background: rgba(34, 225, 255, .1); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.feature h3 { font: 700 16px/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.feature p { font-size: 14.5px; color: var(--soft); }

/* ---- 03 · Écurie ---- */
.lab { --a: .6; --f: .5; --s: .5; --glow: var(--nous); --edge: color-mix(in srgb, var(--glow) 55%, transparent); }
.lab__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 20px; }
.lab__title { display: flex; align-items: center; gap: 10px; font: 700 20px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--glow); transition: color .4s; }
.lab__subtitle { color: var(--soft); }
.lab__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.lab__left { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lab__stage { position: relative; height: clamp(300px, 34vw, 400px); display: grid; place-items: end center; padding-bottom: 36px; }
.lab__halo { position: absolute; left: 50%; bottom: 40px; width: 70%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) calc(20% + var(--f) * 30%), transparent), transparent 65%); transition: background .5s; }
.lab__bob { position: relative; z-index: 1; animation: lab-bob calc(3.2s - 2.3s * var(--s)) ease-in-out infinite; }
.lab__bot { width: clamp(140px, 15vw, 190px); height: auto; transform: rotate(calc((var(--a) - .5) * 14deg)); transform-origin: 50% 90%; filter: drop-shadow(0 0 calc(4px + 20px * var(--f)) var(--glow)); transition: transform .5s var(--e-out), filter .5s; }
.lab__stage.is-swap .lab__bot { animation: swap .55s var(--e-back); }
@keyframes lab-bob { 50% { transform: translateY(-14px); } }
@keyframes swap { 0% { transform: scale(1); } 35% { transform: scale(.7) rotate(-8deg); opacity: .2; filter: brightness(3) drop-shadow(0 0 30px var(--glow)); } 100% { transform: scale(1); } }
.lab__pedestal { position: absolute; left: 50%; bottom: 16px; width: 64%; height: 38px; transform: translateX(-50%); }
.lab__pedestal i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px solid var(--glow); transition: border-color .5s; }
.lab__pedestal i:nth-child(1) { width: 100%; height: 100%; box-shadow: 0 0 20px var(--glow), inset 0 0 20px color-mix(in srgb, var(--glow) 40%, transparent); }
.lab__pedestal i:nth-child(2) { width: 70%; height: 66%; opacity: .6; animation: ped 2.4s ease-out infinite; }
.lab__pedestal i:nth-child(3) { width: 40%; height: 36%; opacity: .4; animation: ped 2.4s ease-out .8s infinite; }
@keyframes ped { from { transform: translate(-50%, -50%) scale(.5); opacity: .8; } to { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } }
.lab__readout { text-align: center; min-height: 92px; }
.lab__style { display: block; font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.lab__name { margin-top: 8px; font: 700 clamp(24px, 2.6vw, 32px)/1.05 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--glow); text-shadow: 0 0 20px color-mix(in srgb, var(--glow) 50%, transparent); transition: color .4s; }
.lab__text { margin-top: 6px; color: var(--soft); }
.lab__right { display: grid; gap: 22px; }
.lab__radar { width: min(220px, 60%); margin: 0 auto; overflow: visible; }
.lab__radar-grid { fill: none; stroke: var(--line-strong); stroke-width: .8; }
.lab__radar-axis { stroke: var(--line); stroke-width: .8; }
.lab__radar-shape { fill: color-mix(in srgb, var(--glow) 25%, transparent); stroke: var(--glow); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--glow)); transition: all .3s; }
.lab__sliders { display: grid; gap: 16px; }
.lab__slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.lab__slider-head label { font: 700 15px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.lab__val { font: 700 16px/1 var(--f-mono); color: var(--glow); }
.lab__hint { margin-top: 6px; font-size: 13px; color: var(--mute); }
.lab__range { --v: 50; --c: var(--cyan); width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.lab__slider--aggression .lab__range { --c: var(--eux); }
.lab__slider--focus .lab__range { --c: var(--cyan); }
.lab__slider--speed .lab__range { --c: var(--coin); }
.lab__range::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--c) calc(var(--v) * 1%), rgba(108, 123, 255, .2) calc(var(--v) * 1%)); box-shadow: 0 0 10px -2px var(--c); }
.lab__range::-moz-range-track { height: 8px; background: rgba(108, 123, 255, .2); }
.lab__range::-moz-range-progress { height: 8px; background: var(--c); }
.lab__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -7px; border: 3px solid var(--c); background: var(--night); transform: rotate(45deg); box-shadow: 0 0 12px var(--c); }
.lab__range::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--c); border-radius: 0; background: var(--night); transform: rotate(45deg); box-shadow: 0 0 12px var(--c); }
.lab__range:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
.lab__random { justify-self: start; }
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(30px, 5vw, 60px); }
.role { position: relative; aspect-ratio: 5 / 7; padding: 26% 12% 12%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 14px; color: var(--card-black); background: linear-gradient(165deg, #FDFBF4, var(--ivory) 45%, var(--ivory-lo)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 24px 40px -18px rgba(0, 0, 0, .9); transform: rotate(var(--r)); transition: transform .5s var(--e-back), box-shadow .3s; }
.role[data-reveal] { transform: translateY(40px) rotate(0); }
.role.is-in { transform: rotate(var(--r)); }
.role:hover { transform: translateY(-12px) rotate(0) scale(1.03); box-shadow: 0 0 0 2px var(--nous), 0 0 34px rgba(61, 255, 162, .35), 0 24px 40px -18px rgba(0, 0, 0, .9); }
.role--red { color: var(--card-red); }
.role__corner { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; align-items: center; font: 700 22px/.9 var(--f-display); }
.role__corner i { font-style: normal; font-size: 18px; }
.role__corner--br { left: auto; top: auto; right: 10px; bottom: 10px; transform: rotate(180deg); }
.role__pip { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-size: clamp(44px, 6vw, 74px); line-height: 1; opacity: .9; }
.role h3 { font: 700 clamp(17px, 1.7vw, 21px)/1.05 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--card-black); }
.role p { margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: #3A3D5C; }
.ecurie__shot, .cerveau__shot, .formats__shot, .cagnotte__shot { max-width: 860px; margin: clamp(40px, 6vw, 80px) auto 0; }

/* ---- 04 · Cerveau ---- */
.brain { --edge: color-mix(in srgb, var(--royale) 50%, transparent); }
.brain__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; }
.brain__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lg { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.lg i { width: 10px; height: 10px; background: var(--k); box-shadow: 0 0 8px var(--k); transform: rotate(45deg); }
.lg--trigger { --k: var(--cyan); }
.lg--condition { --k: var(--royale); }
.lg--compute { --k: var(--coin); }
.lg--action { --k: var(--nous); }
.brain__canvas { position: relative; padding: 26px 18px; background-color: rgba(7, 8, 26, .7); background-image: radial-gradient(rgba(108, 123, 255, .25) 1px, transparent 1.2px); background-size: 22px 22px; border: 1px solid var(--line); }
.brain__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wire { fill: none; stroke: rgba(108, 123, 255, .35); stroke-width: 2; }
.wire--flow { stroke: var(--royale); stroke-width: 2.5; opacity: 0; filter: drop-shadow(0 0 5px var(--royale)); }
.wire--flow.is-on { opacity: 1; }
.brain__nodes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 22px clamp(28px, 5vw, 70px); align-items: center; }
.bnode { --k: var(--royale); position: relative; padding: 12px 14px 13px; background: rgba(20, 22, 58, .95); border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: border-color .3s, box-shadow .3s, background .3s; }
.bnode--trigger { --k: var(--cyan); grid-column: 1; grid-row: 1 / 4; }
.bnode--jack { grid-column: 2; grid-row: 1; }
.bnode--trumps { grid-column: 2; grid-row: 2; }
.bnode--partner { grid-column: 2; grid-row: 3; }
.bnode--score { --k: var(--coin); grid-column: 3; grid-row: 1 / 3; }
.bnode--bid { --k: var(--nous); grid-column: 4; grid-row: 1 / 4; }
.bnode__kind { display: block; font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--k); }
.bnode__title { display: block; margin-top: 6px; font: 700 15px/1.15 var(--f-display); letter-spacing: .02em; }
.bnode__detail { display: block; margin-top: 4px; font: 500 12px/1.3 var(--f-mono); color: var(--mute); }
.bnode__ok { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 20px; height: 20px; color: var(--ink); background: var(--k); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s var(--e-back); }
.bnode__ok .ico { width: 14px; height: 14px; stroke-width: 3; }
.bnode__port { display: none; }
.bnode.is-on { border-color: var(--k); background: color-mix(in srgb, var(--k) 12%, #14163A); box-shadow: 0 0 0 1px var(--k) inset; }
.bnode.is-on .bnode__ok { opacity: 1; transform: none; }
.brain__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-top: 20px; }
.brain__presets p { margin-bottom: 8px; font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.brain__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.brain__chips .chip-btn.is-on { background: var(--royale); border-color: var(--royale); color: #1A0730; }
.brain__output { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; background: rgba(61, 255, 162, .08); border: 1px solid rgba(61, 255, 162, .5); opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--e-back); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.brain__output img { width: 40px; height: 44px; }
.brain__output p { font: 700 18px/1 var(--f-display); letter-spacing: .04em; color: var(--nous); }
.brain.is-done .brain__output { opacity: 1; transform: none; }
.brain.is-stacked .brain__canvas { padding-left: 44px; }
.brain.is-stacked .brain__nodes { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 12px; }
.brain.is-stacked .bnode { grid-column: 1 !important; grid-row: auto !important; }

/* ---- 05 · Formats ---- */
.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.format { --fc: var(--hybride); position: relative; padding: 24px 24px 28px; background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 14%, rgba(16, 18, 50, .9)), rgba(12, 13, 38, .92) 55%); border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); transition: transform .45s var(--e-out), border-color .3s; }
.format:hover { transform: translateY(-6px); border-color: var(--fc); }
.format__table { position: relative; width: 100%; aspect-ratio: 16 / 11; margin-bottom: 20px; }
.format__felt { position: absolute; inset: 20% 22%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--fc) 38%, #0E1030), #0B0C24 75%); border: 2px solid var(--fc); box-shadow: 0 0 30px -4px var(--fc), inset 0 0 30px rgba(0, 0, 0, .6); }
.format__felt span { font-size: clamp(30px, 3.4vw, 46px); color: var(--fc); text-shadow: 0 0 16px var(--fc); opacity: .9; }
.seat { position: absolute; width: 23%; aspect-ratio: 1; padding: 4%; overflow: hidden; border-radius: 50%; background: #0E1030; transition: transform .5s var(--e-back); }
.seat img { width: 100%; height: auto; max-width: none; transform: translateY(-2%); }
.seat--nous { box-shadow: 0 0 0 2px var(--nous), 0 0 14px rgba(61, 255, 162, .45); }
.seat--eux { box-shadow: 0 0 0 2px var(--eux), 0 0 14px rgba(255, 77, 109, .45); }
.seat--n { left: 50%; top: 0; transform: translateX(-50%); }
.seat--s { left: 50%; bottom: 0; transform: translateX(-50%); }
.seat--e { right: 3%; top: 50%; transform: translateY(-50%); }
.seat--w { left: 3%; top: 50%; transform: translateY(-50%); }
.format:hover .seat--n { transform: translate(-50%, -6px); }
.format:hover .seat--s { transform: translate(-50%, 6px); }
.format:hover .seat--e { transform: translate(6px, -50%); }
.format:hover .seat--w { transform: translate(-6px, -50%); }
.format__compo { font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fc); }
.format__name { display: flex; align-items: center; gap: 10px; margin-top: 10px; font: 700 clamp(24px, 2.4vw, 30px)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.format__name i { font-style: normal; color: var(--fc); text-shadow: 0 0 12px var(--fc); }
.format__tag { display: inline-block; margin-top: 12px; padding: 4px 10px; background: var(--fc); color: var(--ink); font: 700 12px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.format__text { margin-top: 14px; color: var(--soft); font-size: 15px; }

/* ---- 06 · Arène ---- */
.arene { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.bracket { --edge: color-mix(in srgb, var(--magenta) 55%, transparent); }
.bracket__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.bracket__title { font: 700 16px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.bracket__spect { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 500 12px/1 var(--f-mono); color: var(--mute); }
.bracket__spect .ico { width: 16px; height: 16px; color: var(--magenta); }
.bracket__spect b { color: var(--text); }
.br__scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.br__board { position: relative; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 30px; min-width: 700px; }
.br__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.br__wire { fill: none; stroke: rgba(108, 123, 255, .35); stroke-width: 1.5; transition: stroke .4s; }
.br__wire.is-on { stroke: var(--magenta); filter: drop-shadow(0 0 4px var(--magenta)); }
.br__col { position: relative; display: flex; flex-direction: column; }
.br__round { margin-bottom: 10px; font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.br__matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.bm { position: relative; z-index: 1; background: rgba(20, 22, 58, .96); border: 1px solid var(--line-strong); transition: border-color .3s, box-shadow .3s; }
.bm__row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; font: 500 13px/1.2 var(--f-body); transition: color .3s, opacity .3s; }
.bm__row + .bm__row { border-top: 1px solid var(--line); }
.bm__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm__score { font: 700 13px/1.2 var(--f-mono); color: var(--mute); }
.bm__row.is-win { color: var(--text); box-shadow: 3px 0 0 var(--nous) inset; }
.bm__row.is-win .bm__score { color: var(--nous); }
.bm__row.is-lose { opacity: .45; }
.bm.is-live { border-color: var(--magenta); box-shadow: 0 0 18px -4px var(--magenta); animation: live-pulse 1s ease-in-out infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 4px -4px var(--magenta); } }
.br__champ { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; text-align: center; border: 1px dashed var(--line-strong); background: rgba(20, 22, 58, .9); color: var(--faint); transition: all .6s var(--e-back); }
.br__champ .ico { width: 34px; height: 34px; }
.br__champ-name { font: 700 15px/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.br__champ.is-on { border: 1px solid var(--coin); color: var(--coin); background: radial-gradient(circle at 50% 30%, rgba(255, 210, 63, .22), rgba(20, 22, 58, .95) 70%); box-shadow: 0 0 30px -6px var(--coin); transform: scale(1.06); }
.br__champ.is-on .ico { filter: drop-shadow(0 0 8px var(--coin)); animation: float 3s ease-in-out infinite; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: stretch; }
.stat { display: flex; flex-direction: column; justify-content: center; padding: 20px 18px; background: rgba(16, 18, 50, .66); border: 1px solid var(--line); border-left: 3px solid var(--magenta); }
.stat b { font: 700 clamp(40px, 4.4vw, 58px)/1 var(--f-mono); color: var(--text); text-shadow: 0 0 20px rgba(255, 62, 165, .45); }
.stat span { margin-top: 8px; font-size: 14px; color: var(--soft); line-height: 1.35; }
.arene__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: clamp(30px, 4vw, 50px); }
.community { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.comm { padding: 18px; background: rgba(16, 18, 50, .66); border: 1px solid var(--line); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: border-color .3s; }
.comm:hover { border-color: var(--magenta); }
.comm__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; color: var(--magenta); background: rgba(255, 62, 165, .1); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.comm h3 { font: 700 16px/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.comm p { font-size: 14px; color: var(--soft); }

/* ---- 07 · Cagnotte ---- */
.cagnotte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "coin coin coin" "daily vip level"; gap: 18px; }
.coin3d { grid-area: coin; justify-self: center; width: clamp(120px, 14vw, 170px); aspect-ratio: 1; margin-bottom: 10px; perspective: 800px; }
.coin3d__spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: coin-spin 5s linear infinite; }
.coin3d__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; font: 700 calc(clamp(120px, 14vw, 170px) * .46)/1 var(--f-display); color: #7A5A00; background: radial-gradient(circle at 35% 30%, #FFF1B0, var(--coin) 40%, #D9A400 72%, #9C7400); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25), inset 0 0 0 10px rgba(156, 116, 0, .5), 0 0 50px rgba(255, 210, 63, .45); }
.coin3d__face--back { transform: rotateY(180deg); }
@keyframes coin-spin { to { transform: rotateY(360deg); } }
.wallet-card { --wc: var(--coin); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 10%, rgba(16, 18, 50, .92)), rgba(12, 13, 38, .94)); border: 1px solid color-mix(in srgb, var(--wc) 55%, transparent); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.wallet-card--daily { grid-area: daily; }
.wallet-card--vip { grid-area: vip; --wc: var(--gold); }
.wallet-card--level { grid-area: level; --wc: var(--cyan); }
.wallet-card__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--wc); }
.wallet-card__label .ico { width: 20px; height: 20px; }
.daily__value { display: flex; align-items: center; gap: 12px; }
.daily__amount { font: 700 clamp(48px, 5vw, 64px)/1 var(--f-mono); color: var(--coin); text-shadow: 0 0 22px rgba(255, 210, 63, .55); }
.coin-glyph { font-size: 34px; color: var(--coin); text-shadow: 0 0 14px var(--coin); }
.daily__streak { display: flex; align-items: center; gap: 10px; font: 500 13px/1 var(--f-body); color: var(--soft); }
.daily__streak b { font: 700 13px/1 var(--f-mono); color: var(--text); }
.gauge { flex: 1; display: flex; gap: 3px; height: 8px; }
.gauge i { flex: 1; background: rgba(34, 225, 255, .14); transition: background .4s, box-shadow .4s; }
.gauge i.is-on { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.daily__claim { margin-top: auto; }
.wallet-card--daily.is-claimed .daily__amount { animation: bump .6s var(--e-back); }
.coin-burst { position: fixed; z-index: 95; font: 700 22px/1 var(--f-display); color: var(--coin); text-shadow: 0 0 10px var(--coin); pointer-events: none; }
.vip__avatar { position: relative; width: 84px; height: 84px; padding: 8px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #3A2F10, #14163A); box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(232, 195, 106, .25), 0 0 26px rgba(232, 195, 106, .5); }
.vip__avatar img { width: 100%; height: 100%; object-fit: contain; }
.vip__crown { position: absolute; left: 50%; top: -18px; transform: translateX(-50%) rotate(-8deg); color: var(--gold); filter: drop-shadow(0 0 6px var(--gold)); }
.vip__crown .ico { width: 30px; height: 30px; fill: rgba(232, 195, 106, .35); }
.wallet-card h3 { font: 700 24px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.vip__perks { display: grid; gap: 8px; }
.vip__perks li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.vip__perks .ico { width: 18px; height: 18px; color: var(--gold); flex: none; }
.vip__note { margin-top: auto; font: 500 12px/1.4 var(--f-mono); color: var(--mute); }
.level__pts { font: 700 13px/1 var(--f-mono); letter-spacing: 0; color: var(--cyan); }
.level__ring { --p: 64; position: relative; width: 120px; aspect-ratio: 1; margin: 6px auto; display: grid; place-items: center; }
.level__ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--cyan) calc(var(--p) * 1%), rgba(34, 225, 255, .14) 0); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%); filter: drop-shadow(0 0 8px rgba(34, 225, 255, .5)); }
.level__ring b { font: 700 44px/1 var(--f-mono); color: var(--text); text-shadow: 0 0 16px rgba(34, 225, 255, .6); }
.level__reward { font-size: 14px; color: var(--soft); }
.disclaimer { display: flex; align-items: flex-start; gap: 12px; max-width: 900px; margin: 26px auto 0; padding: 14px 18px; border: 1px solid rgba(255, 210, 63, .35); background: rgba(255, 210, 63, .06); font-size: 14.5px; color: var(--text); }
.disclaimer .ico { flex: none; color: var(--coin); }

/* ---- 08 · Vitrine ---- */
.specs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: clamp(30px, 5vw, 56px); }
.spec { padding: 16px 12px; text-align: center; background: rgba(16, 18, 50, .66); border: 1px solid var(--line); border-top: 2px solid var(--cyan); }
.spec b { display: block; font: 700 clamp(22px, 2.4vw, 32px)/1 var(--f-mono); color: var(--cyan); text-shadow: 0 0 14px rgba(34, 225, 255, .45); }
.spec span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: var(--soft); }
.gallery__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; }
.gallery__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery__stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 2vw, 26px); outline: none; }
.gallery__stage:focus-visible .gdevice__frame { box-shadow: 0 0 0 2px var(--cyan), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.gallery__nav { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); background: rgba(16, 18, 50, .85); color: var(--text); cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: border-color .2s, color .2s, background .2s; }
.gallery__nav:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(34, 225, 255, .08); }
.gdevice { position: relative; margin: 0; }
.gdevice__frame { position: relative; padding: clamp(8px, 1.3vw, 16px); border-radius: clamp(24px, 3.8vw, 48px); background: linear-gradient(145deg, #2E3260, #111330 45%, #1D2048); box-shadow: 0 0 0 1px #3A3E78 inset, 0 0 0 3px #0B0C20 inset, 0 40px 80px -24px rgba(0, 0, 0, .9), 0 0 90px -20px rgba(34, 225, 255, .35); }
.gdevice__screen { position: relative; overflow: hidden; aspect-ratio: 844 / 390; border-radius: clamp(16px, 2.8vw, 34px); background: var(--night); touch-action: pan-y; cursor: grab; }
.gdevice__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--e-out), opacity .5s; user-select: none; -webkit-user-drag: none; }
.gdevice__img.is-entering.from-right { transform: translateX(40%) rotate(4deg) scale(.9); opacity: 0; }
.gdevice__img.is-entering.from-left { transform: translateX(-40%) rotate(-4deg) scale(.9); opacity: 0; }
.gdevice__img.is-leaving.to-left { transform: translateX(-60%) rotate(-8deg) scale(.85); opacity: 0; }
.gdevice__img.is-leaving.to-right { transform: translateX(60%) rotate(8deg) scale(.85); opacity: 0; }
.gdevice__cam { position: absolute; z-index: 2; left: clamp(3px, .5vw, 6px); top: 50%; width: 5px; height: 18%; transform: translateY(-50%); border-radius: 5px; background: #05060F; }
.gdevice__btn { position: absolute; top: -3px; right: 20%; width: 12%; height: 3px; border-radius: 3px 3px 0 0; background: #2E3260; }
.gdevice__zoom { position: absolute; right: clamp(18px, 2.4vw, 30px); bottom: clamp(18px, 2.4vw, 30px); z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); background: rgba(7, 8, 26, .8); color: var(--text); cursor: pointer; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); opacity: .85; transition: opacity .2s, color .2s; }
.gdevice__zoom:hover { opacity: 1; color: var(--cyan); }
.gallery__caption { max-width: 760px; margin: 26px auto 0; text-align: center; min-height: 104px; }
.gallery__meta { display: flex; justify-content: center; align-items: center; gap: 12px; }
.gallery__counter { font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.gallery__group { padding: 4px 8px; font: 700 11px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; background: var(--cyan); color: var(--ink); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.gallery__group[data-group="competition"] { background: var(--magenta); color: #1A0512; }
.gallery__group[data-group="ecurie"] { background: var(--nous); }
.gallery__group[data-group="communaute"] { background: var(--acier); }
.gallery__group[data-group="boutique"] { background: var(--coin); }
.gallery__group[data-group="profil"] { background: var(--royale); color: #1A0730; }
.gallery__title { margin-top: 10px; font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.gallery__text { margin-top: 6px; color: var(--soft); }
.gallery__deck { margin-top: 18px; }
.gallery__hand { display: flex; gap: 14px; overflow-x: auto; padding: 26px 6px 18px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.gallery__hand li { flex: none; scroll-snap-align: center; }
.gthumb { position: relative; display: block; width: clamp(130px, 13vw, 168px); padding: 5px; border: 0; border-radius: 10px; background: var(--ivory); cursor: pointer; transform: rotate(var(--r)); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .8); transition: transform .35s var(--e-back), box-shadow .3s; }
.gthumb img { width: 100%; aspect-ratio: 844 / 390; object-fit: cover; border-radius: 6px; }
.gthumb__n { position: absolute; left: 8px; top: -18px; font: 700 11px/1 var(--f-mono); color: var(--mute); }
.gthumb:hover { transform: translateY(-8px) rotate(0); }
.gthumb.is-on { transform: translateY(-14px) rotate(0) scale(1.04); box-shadow: 0 0 0 2px var(--cyan), 0 0 24px rgba(34, 225, 255, .5), 0 16px 30px -10px rgba(0, 0, 0, .8); }
.gthumb.is-on .gthumb__n { color: var(--cyan); }
.gallery__hand.is-shuffling li { animation: riffle .6s var(--e-inout); animation-delay: calc(var(--i) * 12ms); }
@keyframes riffle { 30% { transform: translate(calc((var(--i) - 6) * -20px), -30px) rotate(calc(var(--r) * 4)); } 60% { transform: translate(calc((var(--i) - 6) * 12px), 10px) rotate(calc(var(--r) * -3)); } }
.lightbox { width: min(96vw, 1500px); max-width: none; max-height: 96vh; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.lightbox::backdrop { background: rgba(5, 6, 20, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox__img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-strong), 0 30px 80px rgba(0, 0, 0, .8); }
.lightbox__cap { margin-top: 12px; text-align: center; color: var(--soft); }
.lightbox__close { position: absolute; right: 0; top: -54px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: rgba(16, 18, 50, .9); color: var(--text); cursor: pointer; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

/* ---- La maison ---- */
.studios { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 80px); }
.studios__amp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--night); border: 1px solid var(--line-strong); color: var(--eux); font-size: 28px; text-shadow: 0 0 14px var(--eux); z-index: 1; }
.studio { position: relative; padding: clamp(26px, 3.4vw, 44px); background: linear-gradient(160deg, rgba(29, 32, 80, .85), rgba(12, 13, 38, .92)); border: 1px solid var(--line-strong); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.studio--cephalosophie { border-color: rgba(34, 225, 255, .45); }
.studio--kantoaplo { border-color: rgba(255, 62, 165, .45); }
.studio__seat { position: absolute; right: 22px; top: 18px; font: 700 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--nous); }
.studio__seat::before { content: "SIÈGE "; color: var(--mute); }
html[lang="en"] .studio__seat::before { content: "SEAT "; }
.studio__name { font: 700 clamp(30px, 3.6vw, 48px)/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.studio--cephalosophie .studio__name { color: var(--cyan); text-shadow: 0 0 20px rgba(34, 225, 255, .4); }
.studio--kantoaplo .studio__name { color: var(--magenta); text-shadow: 0 0 20px rgba(255, 62, 165, .4); }
.studio__motto { margin-top: 12px; font: 500 italic 17px/1.4 var(--f-body); color: var(--text); }
.studio__text { margin-top: 14px; color: var(--soft); }
.studio__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font: 600 14px/1 var(--f-mono); text-decoration: none; }
.studio__link .ico { width: 16px; height: 16px; transition: transform .3s; }
.studio__link:hover .ico { transform: translateX(4px); }
.stack { margin-top: clamp(40px, 6vw, 80px); }
.stack__title { margin-bottom: 18px; font: 600 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acier); }
.stack__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stack__list li { position: relative; display: grid; gap: 6px; padding: 22px 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; }
.stack__list li:hover { background: rgba(142, 162, 255, .06); }
.stack__n { font: 700 12px/1 var(--f-mono); color: var(--acier); }
.stack__list b { font: 700 19px/1.1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.stack__list span:last-child { color: var(--soft); font-size: 14.5px; }

/* ---- Capot ---- */
.capot { overflow: hidden; text-align: center; padding-bottom: clamp(80px, 12vh, 140px); }
.capot__rays { position: absolute; left: 50%; top: 40%; z-index: -1; width: 180vmax; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 210, 63, .07) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 45%); mask: radial-gradient(circle, #000 0, transparent 45%); animation: spin 90s linear infinite; }
.capot__inner { display: flex; flex-direction: column; align-items: center; }
.capot .ch-kicker { --accent: var(--coin); justify-content: center; }
.capot__fan { position: relative; height: 150px; width: 100%; margin: 26px 0 0; }
.capot__card { --mid: calc((var(--n) - 1) / 2); --off: calc(var(--i) - var(--mid)); position: absolute; left: 50%; bottom: 0; margin-left: -38px; transform-origin: 50% 220%; transform: rotate(calc(var(--off) * 8deg)); }
.capot__card .pcard { --w: 76px; }
.chapter--capot:not(.is-current) .capot__card { transform: rotate(0) translateY(20px); transition: transform .6s var(--e-out); }
.chapter--capot.is-current .capot__card { transition: transform .8s var(--e-back) calc(var(--i) * 60ms); }
.capot__title { position: relative; margin-top: 10px; font: 700 clamp(84px, 15vw, 220px)/.9 var(--f-display); letter-spacing: .03em; color: var(--coin); text-shadow: 0 0 30px rgba(255, 210, 63, .7), 0 0 100px rgba(255, 62, 165, .45); animation: flicker 6s infinite; }
.capot__title::before { content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1.5px var(--magenta); transform: translate(8px, 8px); z-index: -1; text-shadow: none; }
.capot__lead { max-width: 46ch; margin-top: 14px; font-size: clamp(17px, 1.6vw, 21px); color: var(--text); }
.capot__avail { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font: 600 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #FF8FCB; }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 22px; }
.store { position: relative; display: inline-flex; align-items: center; gap: 12px; min-width: 210px; padding: 12px 18px 12px 14px; background: #000; border: 1px solid #50557F; border-radius: 12px; color: #fff; text-decoration: none; text-align: left; }
a.store:hover { border-color: var(--cyan); color: #fff; }
.store--soon { opacity: .92; }
.store__txt { display: flex; flex-direction: column; }
.store__txt small { font: 500 11px/1.2 var(--f-body); color: #C9CCE0; }
.store__txt b { font: 600 20px/1.1 var(--f-body); letter-spacing: -.01em; }
.store__logo { width: 30px; height: 30px; flex: none; background: currentColor; }
.store__logo--android { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 1.8 13.2 11.9 3.6 22a1.6 1.6 0 0 1-.6-1.3V3.1c0-.5.2-1 .6-1.3zm10.5 11 2.6 2.7-11 6.3c-.4.2-.8.3-1.2.2l9.6-9.2zm4-2.2 3 1.7c.9.5.9 1.8 0 2.3l-3 1.7-2.9-2.9 2.9-2.8zM4.9 1.2c.4-.1.8 0 1.2.2l11 6.3-2.6 2.7-9.6-9.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 1.8 13.2 11.9 3.6 22a1.6 1.6 0 0 1-.6-1.3V3.1c0-.5.2-1 .6-1.3zm10.5 11 2.6 2.7-11 6.3c-.4.2-.8.3-1.2.2l9.6-9.2zm4-2.2 3 1.7c.9.5.9 1.8 0 2.3l-3 1.7-2.9-2.9 2.9-2.8zM4.9 1.2c.4-.1.8 0 1.2.2l11 6.3-2.6 2.7-9.6-9.2z'/%3E%3C/svg%3E") center / contain no-repeat; background: linear-gradient(135deg, var(--cyan), var(--nous) 40%, var(--coin) 70%, var(--eux)); }
.store__logo--ios { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.8-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.4-.9-1.7 0-3.3 1-4.2 2.6-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8 1.6 0 2 .8 3.4.8 1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9-.1 0-2.7-1-2.6-4.1zM13.9 5c.7-.9 1.2-2 1-3.2-1 0-2.3.7-3 1.6-.7.8-1.2 2-1.1 3.1 1.2.1 2.3-.6 3.1-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.8-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.4-.9-1.7 0-3.3 1-4.2 2.6-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8 1.6 0 2 .8 3.4.8 1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9-.1 0-2.7-1-2.6-4.1zM13.9 5c.7-.9 1.2-2 1-3.2-1 0-2.3.7-3 1.6-.7.8-1.2 2-1.1 3.1 1.2.1 2.3-.6 3.1-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; background: #fff; }
.store__soon { position: absolute; right: -10px; top: -10px; padding: 4px 8px; background: var(--magenta); color: #1A0512; font: 700 10px/1 var(--f-display); font-style: normal; letter-spacing: .12em; text-transform: uppercase; transform: rotate(6deg); box-shadow: 0 0 14px rgba(255, 62, 165, .6); }
.capot__contact { margin-top: clamp(40px, 6vw, 70px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.capot__contact > p:first-child { font: 700 clamp(20px, 2vw, 26px)/1.2 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.capot__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.capot__mail { font: 500 14px/1 var(--f-mono); }

/* 8 · PAGES LÉGALES ---------------------------------------------------------- */
.legal__hero { position: relative; overflow: hidden; padding: calc(var(--hud-h) + env(safe-area-inset-top, 0px) + clamp(40px, 8vh, 90px)) 0 clamp(40px, 6vh, 70px); border-bottom: 1px solid var(--line); background: radial-gradient(80% 120% at 85% 0%, rgba(199, 125, 255, .16), transparent 60%), radial-gradient(60% 100% at 0% 100%, rgba(34, 225, 255, .08), transparent 60%); }
.legal__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; font: 600 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--soft); }
.legal__back .ico { width: 18px; height: 18px; transition: transform .3s; }
.legal__back:hover .ico { transform: translateX(-4px); }
.legal__kicker { font: 600 12px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--royale); }
.legal__title { max-width: 16ch; margin-top: 14px; font: 700 clamp(40px, 6vw, 84px)/.95 var(--f-display); letter-spacing: .01em; text-transform: uppercase; }
.legal__updated { margin-top: 18px; font: 500 13px/1 var(--f-mono); color: var(--mute); }
.legal__updated time { color: var(--text); }
.legal__intro { max-width: 64ch; margin-top: 20px; font-size: clamp(16px, 1.3vw, 18px); color: var(--soft); }
.legal__seal { position: absolute; right: max(var(--gutter), calc(50% - 620px)); top: calc(var(--hud-h) + 50px); display: grid; place-items: center; width: clamp(110px, 14vw, 180px); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(199, 125, 255, .5); transform: rotate(-12deg); }
.legal__seal::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed rgba(199, 125, 255, .5); animation: spin 40s linear infinite; }
.legal__seal span { font-size: clamp(44px, 6vw, 72px); color: var(--royale); text-shadow: 0 0 24px var(--royale); }
.legal__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); padding-top: clamp(40px, 6vh, 70px); padding-bottom: 40px; }
.legal__toc { position: sticky; top: calc(var(--hud-h) + 24px); align-self: start; max-height: calc(100vh - var(--hud-h) - 48px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.legal__toc-title { margin-bottom: 12px; font: 600 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.legal__toc-list { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.legal__toc-list a { display: flex; gap: 10px; padding: 6px 10px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--soft); text-decoration: none; transition: color .2s, border-color .2s, background .2s; }
.legal__toc-list a:hover { color: var(--text); background: rgba(108, 123, 255, .06); }
.legal__toc-list a.is-on { color: var(--text); border-left-color: var(--royale); background: rgba(199, 125, 255, .08); }
.legal__toc-n { flex: none; font: 600 12px/1.6 var(--f-mono); color: var(--faint); }
.legal__toc-list a.is-on .legal__toc-n { color: var(--royale); }
.legal__other { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font: 600 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.legal__other .ico { width: 16px; height: 16px; }
.legal__body { max-width: 760px; }
.legal__sec { padding: 26px 0 30px; border-bottom: 1px dashed var(--line); scroll-margin-top: calc(var(--hud-h) + 20px); outline: none; }
.legal__sec:first-child { padding-top: 0; }
.legal__sec h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; font: 700 clamp(22px, 2.2vw, 28px)/1.15 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.legal__n { flex: none; font: 700 14px/1 var(--f-mono); color: var(--royale); padding: 5px 7px; border: 1px solid rgba(199, 125, 255, .5); }
.legal__sec h3 { margin: 18px 0 8px; font: 700 15px/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.legal__sec p { margin: 0 0 12px; color: #D5DBF5; line-height: 1.7; }
.legal__sec ul { display: grid; gap: 8px; margin: 0 0 14px; }
.legal__sec li { position: relative; padding-left: 22px; color: #D5DBF5; line-height: 1.65; }
.legal__sec li::before { content: "◆"; position: absolute; left: 0; top: .1em; font-size: 10px; color: var(--royale); }
.legal__sec strong { color: var(--text); font-weight: 650; }
.idcard { display: grid; gap: 0; margin: 6px 0 16px; border: 1px solid var(--line-strong); background: rgba(16, 18, 50, .6); }
.idcard__row { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 14px; padding: 10px 14px; }
.idcard__row + .idcard__row { border-top: 1px solid var(--line); }
.idcard dt { font: 600 11px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.idcard dd { color: var(--text); word-break: break-word; }

/* 9 · 404 -------------------------------------------------------------------- */
.notfound { position: relative; min-height: 88vh; display: grid; place-items: center; padding: calc(var(--hud-h) + 40px) var(--gutter) 60px; overflow: hidden; text-align: center; }
.notfound__grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 62, 165, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 62, 165, .12) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 10%, transparent 60%); mask-image: radial-gradient(circle at 50% 45%, #000 10%, transparent 60%); }
.notfound__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.notfound__code { display: flex; align-items: center; gap: clamp(8px, 2vw, 24px); }
.notfound__code span { font: 700 clamp(120px, 20vw, 240px)/1 var(--f-display); color: var(--magenta); text-shadow: 0 0 30px rgba(255, 62, 165, .75), 0 0 90px rgba(255, 62, 165, .4); animation: flicker 4s infinite; }
.notfound__code span:last-child { animation-delay: 1.3s; }
.notfound__code img { width: clamp(80px, 12vw, 140px); filter: drop-shadow(0 0 16px rgba(255, 77, 109, .6)); animation: lost 3.4s ease-in-out infinite; }
@keyframes lost { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-12px); } }
.notfound__title { font: 700 clamp(28px, 4vw, 44px)/1.1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.notfound__text { max-width: 46ch; color: var(--soft); margin-bottom: 10px; }

/* 10 · RÉACTIF --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .tracker__label { display: none; }
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jeu { grid-template-columns: minmax(0, 1fr); }
  .jeu__stage { max-width: 820px; margin: 0 auto; width: 100%; }
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arene { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .hud__word { display: none; }
  .tracker__slots { gap: 3px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .hero__visual { order: -1; margin-top: -10px; }
  .ring { width: min(64vw, 420px); }
  .hero__sun { right: 50%; transform: translateX(50%); bottom: auto; top: 20%; width: 80vw; }
  .hero__horizon, .hero__floor { display: none; }
  .bids { grid-template-columns: minmax(0, 1fr); }
  .bids__aside { position: sticky; top: calc(var(--hud-h) + 8px); z-index: 3; }
  .bids__board { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 16px; padding: 12px 16px; }
  .bids__current { margin: 0; grid-row: span 2; }
  .bids__value { font-size: 44px; }
  .bids__suit { font-size: 30px; }
  .bids__current small { display: none; }
  .bids__ladder { grid-template-columns: repeat(9, 1fr); gap: 3px; }
  .bid { height: 26px; font-size: 11px; }
  .bids__calls { margin-top: 0; }
  .call { height: 26px; font-size: 10px; }
  .lab__grid { grid-template-columns: minmax(0, 1fr); }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; margin-inline: auto; }
  .formats { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .cagnotte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "coin coin" "daily vip" "level level"; }
  .arene__bottom { grid-template-columns: minmax(0, 1fr); }
  .studios { grid-template-columns: minmax(0, 1fr); }
  .studios__amp { position: relative; left: auto; top: auto; transform: none; margin: -38px auto; }
  .stack__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .legal__layout { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { position: static; max-height: none; padding: 18px; border: 1px solid var(--line); background: rgba(16, 18, 50, .6); }
  .legal__seal { display: none; }
  .menu__hand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --hud-h: 60px; }
  body { font-size: 15.5px; }
  .hud__inner { gap: 10px; }
  .hud__brand img { width: 38px; height: 38px; }
  .tracker { gap: 8px; padding: 5px 10px; }
  .tracker__slots { display: none; }
  .tracker__label { display: inline; }
  .tracker__score b { font-size: 17px; }
  .hud__menu span { display: none; }
  .hud__menu { padding: 0 11px; }
  .lang .ico { display: none; }
  .lang { padding: 0 6px; }
  .hud__back span { display: none; }
  .hero__word::before { transform: translate(4px, 4px); }
  .hero__tagline { margin-top: 22px; }
  .hero__ctas .btn { width: 100%; }
  .hand__fan { height: 104px; }
  .hand__fan li { width: 52px; margin-left: -26px; transform: rotate(calc(var(--off) * 7deg)) translateX(calc(var(--off) * 3px)); }
  .hand__card .pcard { --w: 52px; }
  .ch-title { font-size: clamp(36px, 10.5vw, 56px); }
  .bidcard { padding: 22px 20px 24px 84px; }
  .bidcard__call { left: 16px; top: 22px; width: 54px; }
  .bidcard__call b { font-size: 24px; }
  .stamps { grid-template-columns: minmax(0, 1fr); }
  .jeu__stage { padding-bottom: 0; display: grid; gap: 16px; }
  .jeu__console { position: relative; right: auto; width: 100%; }
  .jeu__proof { display: none; }
  .device--tilt, .device--tilt-r { transform: none; }
  .features { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature { padding: 16px 14px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .community { grid-template-columns: minmax(0, 1fr); }
  .cagnotte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "coin" "daily" "vip" "level"; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__stage { grid-template-columns: minmax(0, 1fr); }
  .gallery__nav { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(7, 8, 26, .8); }
  .gallery__nav--prev { left: -6px; }
  .gallery__nav--next { right: -6px; }
  .gallery__top { flex-direction: column; align-items: stretch; }
  .gallery__filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .gallery__filters .chip-btn { flex: none; }
  .gallery__shuffle { align-self: flex-start; }
  .gdevice__zoom { width: 36px; height: 36px; }
  .stack__list { grid-template-columns: minmax(0, 1fr); }
  .capot__fan { height: 112px; }
  .capot__card { margin-left: -26px; }
  .capot__card .pcard { --w: 52px; }
  .footer__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .footer__brand img { width: 64px; height: 64px; }
  .idcard__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .croupier__avatar { width: 52px; height: 52px; }
  .croupier__text { font-size: 12.5px; }
  .menu { align-items: start; overflow-y: auto; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  .menu__hand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu:not(.is-open) .menu__slot { transform: translateY(30px); opacity: 0; }
  .menu.is-open .menu__slot { transition: transform .45s var(--e-out) calc(var(--i) * 25ms), opacity .3s calc(var(--i) * 25ms); }
  .menu__card:hover, .menu__card:focus-visible { transform: translateY(-4px); }
  .menu__close { top: -6px; }
  .menu__title { font-size: 28px; }
}
@media (max-width: 420px) {
  .hero__word { font-size: clamp(72px, 24vw, 100px); }
  .hero__sub { letter-spacing: .6em; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .roles { gap: 12px; }
  .role p { font-size: 12.5px; }
  .menu__hand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu__card { min-height: 138px; }
  .menu__card .pcard { --w: 62px; }
}
@media (max-width: 340px) {
  .croupier { display: none; }
}
@media (max-height: 700px) {
  .menu { align-items: start; overflow-y: auto; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
}

/* Mouvement réduit : tout est lisible, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  .ticker { overflow-x: auto; }
  .boot__bot { opacity: 1; filter: drop-shadow(0 0 10px var(--bc)); }
  .device--tilt, .device--tilt-r { transform: none; }
}