/* Direction B — Studio de verre. Regle : aucune opacite < 1 sur un element ; le verre = backdrop-filter + fond translucide (couleur rgba). */
:root {
  --fs: 1;
  --bg: #f1f4fb; --ink: #14203a; --muted: #46526b; --line: rgba(20, 32, 58, .14);
  --glass: rgba(255, 255, 255, .56); --glass-2: rgba(255, 255, 255, .78); --edge: rgba(255, 255, 255, .9); --edge-low: rgba(120, 130, 170, .22);
  --surface: #ffffff; --surface-2: #eef1f9;
  --m1: #ffd7c6; --m2: #c4e9ff; --m3: #ddd0ff; --m4: #cff5dc;
  --coral: #e5483a; --aqua: #0e8f9c; --violet: #5a3ff0; --lemon: #f2b705; --lime: #1f9d5b; --magenta: #c02e8f;
  --accent: #5a3ff0; --on-accent: #ffffff;
  --up: #0b7a3e; --down: #b3261e; --warn-bg: #fff1d6; --warn: #7a4b00;
  --odd-bg: #ffffff; --odd-ink: #101a30; --odd-sel-bg: #4b32d6; --odd-sel-ink: #ffffff;
  --shadow: 28 38 80; --r: 22px;
  --gut: max(16px, calc((100vw - 1360px) / 2));
  --font: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", "Carlito", "FreeSans", Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1c2438; --ink: #eef1fb; --muted: #b0bad3; --line: rgba(220, 228, 255, .16);
  --glass: rgba(44, 56, 92, .52); --glass-2: rgba(52, 66, 108, .74); --edge: rgba(255, 255, 255, .22); --edge-low: rgba(255, 255, 255, .08);
  --surface: #232c44; --surface-2: #1d2539;
  --m1: #7a4466; --m2: #25668c; --m3: #5646b0; --m4: #1f7266;
  --coral: #ff8372; --aqua: #4fd6e4; --violet: #a897ff; --lemon: #ffd04a; --lime: #5fd68f; --magenta: #ff7cc8;
  --accent: #a897ff; --on-accent: #12102e;
  --up: #6fe0a0; --down: #ff9a8f; --warn-bg: #4a3a16; --warn: #ffd98a;
  --odd-bg: #2b3654; --odd-ink: #f4f6ff; --odd-sel-bg: #b3a6ff; --odd-sel-ink: #12102e;
  --shadow: 4 8 24; color-scheme: dark;
}
* { box-sizing: border-box; }
html { font-size: calc(16px * var(--fs)); scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { position: relative; margin: 0; min-height: 100vh; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; overflow-x: hidden; padding-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.skip { position: fixed; left: 8px; top: 8px; z-index: 200; background: var(--surface); padding: 8px 14px; border-radius: 10px; transform: translateY(-200%); }
.skip:focus { transform: none; }
[hidden] { display: none !important; }

/* ---------- fond multi-teintes ---------- */
.bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.bg i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(60px); animation: drift 38s ease-in-out infinite alternate; }
.bg .b1 { background: var(--m1); left: -18vmax; top: -22vmax; }
.bg .b2 { background: var(--m2); right: -20vmax; top: -12vmax; animation-duration: 46s; animation-delay: -12s; }
.bg .b3 { background: var(--m3); right: -10vmax; bottom: -30vmax; animation-duration: 52s; animation-delay: -5s; }
.bg .b5 { background: var(--m2); left: -26vmax; top: 42%; animation-duration: 48s; animation-delay: -8s; }
.bg .b6 { background: var(--m1); right: -26vmax; top: 62%; animation-duration: 56s; animation-delay: -30s; }
.bg .b4 { background: var(--m4); left: -22vmax; bottom: -26vmax; animation-duration: 44s; animation-delay: -20s; }
@keyframes drift { to { transform: translate3d(5vmax, 4vmax, 0) scale(1.08); } }

/* ---------- transition liquide ---------- */
.wipe { position: fixed; inset: 0; z-index: 150; pointer-events: none; clip-path: circle(0px at 50% 50%);
  background: radial-gradient(60vmax 50vmax at 15% 20%, #ff9d80, transparent 60%), radial-gradient(60vmax 50vmax at 85% 30%, #6fd3ff, transparent 60%), radial-gradient(60vmax 50vmax at 60% 90%, #a28bff, transparent 60%), radial-gradient(40vmax 40vmax at 10% 90%, #8fe8b5, transparent 60%), #f3f0ff; }
:root[data-theme="dark"] .wipe { background: radial-gradient(60vmax 50vmax at 15% 20%, #8a4a5e, transparent 60%), radial-gradient(60vmax 50vmax at 85% 30%, #2a6e96, transparent 60%), radial-gradient(60vmax 50vmax at 60% 90%, #5a4cb0, transparent 60%), #1d2540; }

/* ---------- verre ---------- */
.glass { background: var(--glass); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--edge-low); border-radius: var(--r);
  box-shadow: inset 0 1px 0 var(--edge), inset 0 -1px 0 var(--edge-low), 0 1px 2px rgb(var(--shadow) / .08), 0 18px 40px -18px rgb(var(--shadow) / .30); }

/* ---------- barre ---------- */
.top { position: sticky; top: 12px; z-index: 50; display: flex; align-items: center; gap: 18px; margin: 12px var(--gut) 0; padding: 10px 14px 10px 18px; min-height: 62px;
  background: var(--glass-2); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--edge-low); border-radius: 22px;
  box-shadow: inset 0 1px 0 var(--edge), 0 14px 34px -16px rgb(var(--shadow) / .35); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.gem { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; position: relative;
  background: conic-gradient(from 210deg, #ff6a55, #ffc83d, #28d0a0, #16b8c7, #7a5cff, #ff6a55); box-shadow: inset 0 2px 3px rgb(255 255 255 / .7), inset 0 -4px 8px rgb(0 0 0 / .18), 0 6px 14px -4px rgb(90 63 240 / .55); }
.gem b { text-shadow: 0 1px 2px rgb(0 0 0 / .35); font-size: 1.05rem; }
.wordmark { font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; }
.nav { display: flex; gap: 4px; margin-left: 10px; }
.nav a { text-decoration: none; padding: 8px 14px; border-radius: 12px; font-weight: 650; color: var(--muted); position: relative; }
.nav a:hover { color: var(--ink); background: var(--glass); }
.nav a[aria-current] { color: var(--ink); }
.nav a[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--coral), var(--violet), var(--aqua)); }
.search { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 42px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); min-width: 240px; color: var(--muted); }
.search input { background: none; border: 0; outline: 0; width: 100%; color: var(--ink); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.search input::placeholder { color: var(--muted); }
.top-right { display: flex; align-items: center; gap: 10px; }
#wallet { display: flex; align-items: center; gap: 8px; }
.rg-badge { display: grid; place-items: center; height: 34px; padding: 0 10px; border-radius: 10px; font-weight: 800; font-size: .8rem; text-decoration: none; border: 2px solid var(--ink); }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass-2); display: inline-grid; place-items: center; cursor: pointer; font-weight: 700; font-size: 1.1rem; transition: transform .15s; }
.icon-btn:hover { transform: translateY(-1px); background: var(--surface); }
.wallet { display: flex; align-items: center; gap: 9px; text-decoration: none; padding: 5px 14px 5px 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); line-height: 1.1; }
.wallet small { display: block; color: var(--muted); font-size: .72rem; }
.wallet b { font-variant-numeric: tabular-nums; font-size: .98rem; }
.wallet i { font-style: normal; font-weight: 600; color: var(--muted); font-size: .72rem; }
.coin { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 12%, transparent 13%), conic-gradient(from 0deg, #c9d2ff, #ffd2c4, #bff0f4, #e0d0ff, #c9d2ff); box-shadow: inset 0 -3px 5px rgb(60 40 160 / .3), 0 2px 6px rgb(60 40 160 / .3); border: 2px solid #fff; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .18s, box-shadow .18s; white-space: nowrap; }
.btn.mini { height: 38px; padding: 0 14px; border-radius: 12px; font-size: .9rem; }
.btn.big { height: 56px; padding: 0 30px; font-size: 1.05rem; border-radius: 18px; }
.btn.full { width: 100%; }
.btn.primary { color: #fff; background: linear-gradient(135deg, #5a3ff0 0%, #7a38d8 55%, #c02e8f 120%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -3px 6px rgb(30 10 120 / .3), 0 12px 24px -10px rgb(90 63 240 / .7); }
:root[data-theme="dark"] .btn.primary { color: #12102e; background: linear-gradient(135deg, #b9acff, #ff9ad5); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 12px 24px -10px rgb(0 0 0 / .6); }
.btn.glass-btn { background: var(--glass-2); border-color: var(--edge-low); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 var(--edge), 0 8px 18px -10px rgb(var(--shadow) / .3); }
.btn.danger { background: var(--surface); border: 2px solid var(--down); color: var(--down); }
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled { background: var(--surface-2); color: var(--muted); box-shadow: none; cursor: not-allowed; border: 1px dashed var(--line); }
.link-arrow { font-weight: 700; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid var(--line); }
.link-arrow::after { content: " →"; }
.link-arrow.back::after { content: none; } .link-arrow.back::before { content: "← "; }
.link-arrow:hover { border-color: var(--accent); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }

/* ---------- typographie ---------- */
main { outline: 0 !important; display: block; min-width: 0; padding: 0 var(--gut) 40px; outline: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 25%, transparent); }
.dot.violet { background: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 25%, transparent); }
.display { font-size: clamp(3.4rem, 6.6vw, 6.6rem); line-height: .92; letter-spacing: -.055em; font-weight: 850; margin: 14px 0 18px; }
.display.sm { font-size: clamp(2.6rem, 5.5vw, 5rem); }
.display em, h1 em { font-style: normal; background: linear-gradient(100deg, #ff5a45, #c02e8f 40%, #5a3ff0 75%, #0e8fa8); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
:root[data-theme="dark"] .display em, :root[data-theme="dark"] h1 em { background-image: linear-gradient(100deg, #ff9a8a, #ff8ad0 40%, #b3a6ff 75%, #5fe3ee); }
.h1 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 820; margin: 10px 0; }
.h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.03em; font-weight: 800; }
.lede { font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: var(--muted); max-width: 34ch; line-height: 1.45; }
.lede-s { color: var(--muted); font-size: 1.1rem; max-width: 52ch; }
.note { color: var(--muted); font-size: .88rem; margin-top: 10px; }
.rv { transform: translateY(26px); }
.rv.in { transform: none; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }

/* ---------- vedette ---------- */
.v-copy { min-width: 0; position: relative; z-index: 2; }
.vedette { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(22px, 4vw, 54px) 0 clamp(26px, 4vw, 56px); }
.facts { list-style: none; display: flex; gap: 14px; padding: 0; margin: 34px 0 0; flex-wrap: wrap; }
.facts li { padding: 12px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--edge-low); box-shadow: inset 0 1px 0 var(--edge); backdrop-filter: blur(12px); display: grid; }
.facts b { font-size: 1.3rem; letter-spacing: -.02em; } .facts span { font-size: .8rem; color: var(--muted); }
.v-stage { position: relative; padding: 0 0 70px; }
.vitrine { position: relative; aspect-ratio: 1 / .92; border-radius: 44px; overflow: hidden; border: 1px solid var(--edge); background: linear-gradient(145deg, #ffe7da, #d8efff 50%, #e6dcff);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .9), inset 0 -14px 40px rgb(120 100 220 / .18), 0 40px 70px -30px rgb(var(--shadow) / .55), 0 0 0 10px var(--glass); }
.vitrine.small { aspect-ratio: 1 / 1; max-width: 420px; justify-self: end; width: 100%; }
.hero3d { position: absolute; inset: 0; }
.hero3d canvas { width: 100% !important; height: 100% !important; display: block; }
.v-label { position: absolute; left: 18px; bottom: 14px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3a3f66; background: rgba(255, 255, 255, .6); padding: 5px 10px; border-radius: 99px; backdrop-filter: blur(8px); }
.die-fallback, .coin-fallback { display: none; position: absolute; inset: 0; margin: auto; }
.hero-fallback .die-fallback { display: block; width: 38%; aspect-ratio: 1; border-radius: 22%; background: linear-gradient(135deg, rgb(255 255 255 / .8), rgb(160 220 255 / .45)); border: 2px solid #fff; box-shadow: inset 0 0 30px rgb(255 255 255 / .8), 0 30px 40px -16px rgb(60 40 160 / .4); transform: rotate(14deg); }
.hero-fallback .coin-fallback { display: block; width: 46%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#c9d2ff, #ffd2c4, #bff0f4, #e0d0ff, #c9d2ff); border: 6px solid #fff; box-shadow: 0 30px 40px -16px rgb(60 40 160 / .4); }
.v-card { position: absolute; left: -4%; bottom: 0; width: 56%; text-decoration: none; border-radius: 22px; padding: 8px; background: var(--glass-2); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--edge), 0 30px 50px -22px rgb(var(--shadow) / .6); transform: rotate(-3deg); transition: transform .35s; }
.v-card:hover { transform: rotate(-1deg) translateY(-6px); }
.v-card img { border-radius: 15px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.gcap { display: grid; padding: 9px 8px 4px; line-height: 1.2; }
.gcap strong { font-size: 1rem; letter-spacing: -.01em; } .gcap small { color: var(--muted); font-size: .82rem; }

/* ---------- rangees et cartes ---------- */
.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.5vw, 46px); }
.row-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.row-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.035em; font-weight: 820; }
.row-head p { color: var(--muted); font-size: .95rem; }
.arrows { display: flex; gap: 8px; }
.row-scroll { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px 4px 34px; margin: 0 -4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior-x: contain; }
.row-scroll > div { flex: 0 0 clamp(236px, 21vw, 300px); scroll-snap-align: start; }
.gcard { --h: var(--violet); display: block; text-decoration: none; padding: 8px; border-radius: 24px; position: relative; isolation: isolate;
  background: linear-gradient(160deg, var(--glass-2), var(--glass)); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--edge-low);
  box-shadow: inset 0 1px 0 var(--edge), 0 2px 4px rgb(var(--shadow) / .08), 0 22px 30px -20px color-mix(in srgb, var(--h) 70%, rgb(var(--shadow))); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.gcard.hue-coral { --h: var(--coral); } .gcard.hue-aqua { --h: var(--aqua); } .gcard.hue-lemon { --h: var(--lemon); } .gcard.hue-lime { --h: var(--lime); } .gcard.hue-violet { --h: var(--violet); }
.gcard:hover { transform: translateY(-8px) rotateX(2deg); box-shadow: inset 0 1px 0 var(--edge), 0 2px 4px rgb(var(--shadow) / .1), 0 34px 40px -20px color-mix(in srgb, var(--h) 85%, rgb(var(--shadow))); }
.gimg { display: block; position: relative; overflow: hidden; border-radius: 17px; aspect-ratio: 16 / 9; }
.gimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.gcard:hover .gimg img { transform: scale(1.06); }
.gimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .38) 48%, transparent 60%); transform: translateX(-120%); transition: transform .8s; pointer-events: none; }
.gcard:hover .gimg::after { transform: translateX(120%); }
.gcard .gcap strong { display: block; } 
.tag-new, .tag-soon { position: absolute; top: 9px; left: 9px; z-index: 2; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.tag-new { background: #ffd23f; color: #3b2a00; box-shadow: 0 4px 10px rgb(0 0 0 / .25); }
.tag-soon { background: #1b2340; color: #fff; border: 1px solid rgb(255 255 255 / .4); }
.tag-soon.big { top: 18px; left: 18px; font-size: .9rem; padding: 7px 14px; }
.gcard.soon .gimg img, img.gray { filter: grayscale(.9) saturate(.5) contrast(.95); }
.gcard.soon:hover { transform: none; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; padding: 12px 0 30px; }
.page-head { padding: clamp(24px, 4vw, 48px) 0 10px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 99px; text-decoration: none; font-weight: 650; background: var(--glass-2); border: 1px solid var(--edge-low); box-shadow: inset 0 1px 0 var(--edge); }
.chip[aria-pressed="true"], .seg [aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 750; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 14px -6px var(--accent); }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--edge-low); box-shadow: inset 0 1px 0 var(--edge); flex-wrap: wrap; }
.seg a, .seg button { border: 0; background: none; padding: 0 14px; height: 36px; border-radius: 10px; font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.seg small { font-size: .75em; color: inherit; }
.seg.small button { height: 30px; padding: 0 10px; font-size: .85rem; }
.empty, .gate { padding: clamp(28px, 5vw, 56px); margin: 30px auto; max-width: 720px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.gate .cta-row, .empty .cta-row { justify-content: center; }

/* ---------- fiche ---------- */
.crumbs { display: flex; gap: 10px; padding: 26px 0 6px; color: var(--muted); font-size: .92rem; }
.crumbs a { text-decoration: none; font-weight: 650; } .crumbs a:hover { text-decoration: underline; } .crumbs [aria-current] { color: var(--ink); font-weight: 700; }
.fiche { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: start; padding: 18px 0 20px; }
.f-media { --h: var(--violet); position: relative; padding: 12px; border-radius: 34px; background: linear-gradient(150deg, var(--glass-2), var(--glass)); backdrop-filter: blur(16px); border: 1px solid var(--edge); box-shadow: inset 0 2px 0 var(--edge), 0 40px 60px -30px color-mix(in srgb, var(--h) 70%, rgb(var(--shadow))); }
.f-media.hue-coral { --h: var(--coral); } .f-media.hue-aqua { --h: var(--aqua); } .f-media.hue-lime { --h: var(--lime); } .f-media.hue-lemon { --h: var(--lemon); }
.f-media img { border-radius: 24px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 0 0; }
.specs div { padding: 14px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--edge-low); box-shadow: inset 0 1px 0 var(--edge); }
.specs dt { font-size: .8rem; color: var(--muted); font-weight: 650; } .specs dd { margin: 2px 0 0; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.rules { margin-top: 22px; padding: 16px 20px; border-radius: 18px; background: var(--glass); border: 1px solid var(--edge-low); }
.rules summary { font-weight: 750; cursor: pointer; } .rules ol { margin: 10px 0 0; padding-left: 22px; color: var(--muted); display: grid; gap: 6px; }

/* ---------- fiche enrichie : relief par la lumiere, multi-teintes ---------- */
.fiche { position: relative; }
.f-media { isolation: isolate; }
.f-media::before { content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 48px; background: radial-gradient(60% 60% at 20% 15%, color-mix(in srgb, var(--h) 45%, transparent), transparent 70%), radial-gradient(50% 50% at 90% 90%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 70%); filter: blur(22px); }
.f-hook { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--ink); margin-top: 6px; }
.f-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.f-tags li { padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--ink); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 var(--edge), 0 6px 14px -8px rgb(var(--shadow) / .35); background: linear-gradient(160deg, var(--glass-2), color-mix(in srgb, var(--t, var(--violet)) 22%, var(--glass))); }
.ft-coral, .sp-coral, .st-coral { --t: var(--coral); } .ft-aqua, .sp-aqua, .st-aqua { --t: var(--aqua); } .ft-violet, .sp-violet, .st-violet { --t: var(--violet); } .ft-lime, .sp-lime, .st-lime { --t: var(--lime); } .ft-lemon, .sp-lemon, .st-lemon { --t: var(--lemon); }
.f-info .cta-row { margin-top: 22px; } .link-arrow.back { display: inline-block; margin-top: 16px; }
.f-facts { padding: 6px 0 10px; }
.f-facts .specs { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 8px; }
.f-facts .specs div { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--glass-2), color-mix(in srgb, var(--t, var(--violet)) 16%, var(--glass))); border-top: 3px solid var(--t, var(--violet)); min-width: 0; }
.f-facts .specs dd { overflow-wrap: anywhere; } .f-facts .specs small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; }
.f-how, .f-prof { padding: 26px 0 6px; display: grid; gap: 16px; }
.steps, .profs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.steps li, .profs li { position: relative; min-width: 0; padding: 20px 20px 20px 20px; border-radius: 22px; border: 1px solid var(--edge-low); background: linear-gradient(155deg, var(--glass-2), color-mix(in srgb, var(--t, var(--violet)) 14%, var(--glass))); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 var(--edge), inset 0 -1px 0 var(--edge-low), 0 18px 34px -22px color-mix(in srgb, var(--t, var(--violet)) 60%, rgb(var(--shadow))); }
.steps .n { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 14px; font-weight: 850; color: var(--on-accent); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--t, var(--violet)) 55%, #fff), var(--t, var(--violet)) 70%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 8px 16px -8px var(--t, var(--violet)); }
.steps p { overflow-wrap: anywhere; }
.profs li { display: grid; gap: 4px; } .profs b { font-size: 1.15rem; letter-spacing: -.02em; } .profs span { color: var(--muted); }
/* ---------- jeu ---------- */
.play { display: grid; gap: 18px; padding: 26px 0 10px; }
.play-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.play-head .chip-static { margin-left: auto; padding: 8px 16px; border-radius: 99px; background: var(--glass-2); border: 1px solid var(--edge-low); font-variant-numeric: tabular-nums; }
.frame { padding: 12px; border-radius: 34px; }
.frame-inner { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 8; min-height: 280px; display: grid; place-items: center; background: linear-gradient(135deg, #2a2f55, #4c3b8f 55%, #2b5c78); }
.frame-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.3); transform: scale(1.15); }
.frame-msg { position: relative; padding: 26px 34px; text-align: center; display: grid; gap: 8px; justify-items: center; max-width: min(520px, 90%); color: #fff; background: rgba(30, 28, 70, .55); border-color: rgb(255 255 255 / .25); }
.frame-msg p { color: #dfe3ff; }
.ring { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgb(255 255 255 / .28); border-top-color: #ffd23f; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.res { min-height: 1.6em; font-weight: 800; font-size: 1.15rem; color: #fff; display: inline-flex; gap: 8px; align-items: center; }
.betbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; }
.stepper { display: flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; }
.invite { padding: 14px 18px; }

/* ---------- bandeau paris (accueil) ---------- */
.paris-banner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; padding: clamp(24px, 4vw, 52px); margin: clamp(30px, 4vw, 60px) 0; border-radius: 36px; overflow: hidden; position: relative; }
.paris-banner h2 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); letter-spacing: -.04em; line-height: 1.05; margin: 12px 0; max-width: 18ch; font-weight: 830; }
.paris-banner p { color: var(--muted); max-width: 46ch; }
.pb-visual { position: relative; min-height: 200px; display: grid; place-items: center; }
.ball { width: 170px; aspect-ratio: 1; border-radius: 50%; position: relative; background: radial-gradient(circle at 30% 25%, #fff 0 8%, transparent 20%), conic-gradient(from 20deg, #e8ecff, #cfe9ff, #ffe0d6, #e1d6ff, #e8ecff); border: 3px solid #fff; box-shadow: inset -14px -18px 30px rgb(80 60 190 / .3), 0 30px 40px -18px rgb(var(--shadow) / .5); }
.ball::before, .ball::after { content: ""; position: absolute; width: 34%; aspect-ratio: 1; background: #26305a; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.ball::before { left: 33%; top: 30%; } .ball::after { left: 6%; top: 8%; width: 20%; background: #5a3ff0; transform: rotate(24deg); }
.mini-odds { position: absolute; right: 0; bottom: 0; display: flex; gap: 8px; }
.mini-odds span { display: grid; text-align: center; padding: 8px 12px; border-radius: 12px; background: var(--odd-bg); color: var(--odd-ink); border: 1px solid var(--line); box-shadow: 0 10px 20px -10px rgb(var(--shadow) / .5); }
.mini-odds i { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--muted); } .mini-odds b { font-variant-numeric: tabular-nums; font-size: 1.1rem; }

/* ---------- PARIS ---------- */
.paris { padding-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; font-size: 1rem; }
.p-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 18px; position: sticky; top: 86px; z-index: 20; }
.p-ctl { display: flex; gap: 10px; flex-wrap: wrap; }
.p-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.p-rail { padding: 16px; position: sticky; top: 160px; border-radius: 20px; }
.p-rail h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.p-rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.p-rail a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .92rem; }
.p-rail a:hover { background: var(--surface-2); } .p-rail a[aria-current] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); font-weight: 800; }
.p-rail small { color: var(--muted); font-variant-numeric: tabular-nums; }
.rail-sep { margin-top: 10px; padding: 8px 10px 2px; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.p-main { display: grid; gap: 14px; min-width: 0; }
.p-tabs { justify-self: start; }
.league { padding: 0; overflow: hidden; border-radius: 20px; background: var(--glass-2); }
.league > header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%); }
.league h2 { font-size: .98rem; letter-spacing: -.01em; }
.cols { display: grid; grid-template-columns: repeat(3, 86px); gap: 8px; margin-right: 56px; text-align: center; font-weight: 800; color: var(--muted); font-size: .85rem; }
.match { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 48px; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.match:last-child { border-bottom: 0; }
.match:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.m-time { display: grid; gap: 2px; font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--muted); } .m-time b { color: var(--ink); font-size: 1rem; }
.badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 7px; }
.badge.live { background: var(--ink); color: var(--bg); }
.badge.live::before { content: ""; width: 7px; height: 7px; background: var(--coral); border-radius: 2px; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); margin-top: 4px; }
.m-teams { display: grid; gap: 4px; min-width: 0; }
.m-teams > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 650; }
.tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score { font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: center; padding: 0 6px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); }
.m-odds { display: grid; grid-template-columns: repeat(3, 86px); gap: 8px; }
.odd { position: relative; height: 54px; border-radius: 12px; cursor: pointer; background: var(--odd-bg); color: var(--odd-ink); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--edge), 0 1px 2px rgb(var(--shadow) / .12); display: grid; place-items: center; align-content: center; transition: transform .12s, box-shadow .15s, background-color .2s; }
.odd:hover { transform: translateY(-1px); box-shadow: 0 6px 12px -6px rgb(var(--shadow) / .45); border-color: var(--accent); }
.o-l { position: absolute; left: 8px; top: 5px; font-size: .74rem; font-weight: 800; color: var(--muted); }
.o-v { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; }
.o-s { position: absolute; right: 6px; top: 4px; display: flex; align-items: center; gap: 3px; font-size: .62rem; font-weight: 900; }
.chk { display: none; font-style: normal; }
.mv { font-style: normal; } .mvu { color: var(--up); } .mvd { color: var(--down); }
.odd[aria-pressed="true"] { background: var(--odd-sel-bg); color: var(--odd-sel-ink); border-color: var(--odd-sel-bg); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 16px -8px var(--odd-sel-bg); }
.odd[aria-pressed="true"] .o-l { color: inherit; } .odd[aria-pressed="true"] .chk { display: inline-flex; } .odd[aria-pressed="true"] .mv { color: inherit; }
.odd[data-susp] { cursor: not-allowed; background: repeating-linear-gradient(135deg, var(--surface-2) 0 7px, var(--surface) 7px 14px); border-style: dashed; border-color: var(--warn); }
.odd[data-susp]:hover { transform: none; box-shadow: none; }
.odd[data-susp] .o-s { color: var(--warn); }
.m-more { text-align: center; font-weight: 700; font-size: .85rem; text-decoration: none; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.lg { display: inline-flex; align-items: center; gap: 4px; }
.ticket { padding: 18px; position: sticky; top: 160px; border-radius: 22px; display: grid; gap: 12px; background: var(--glass-2); }
.t-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.t-head h2 { font-size: 1.1rem; } .count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: .8rem; padding: 0 6px; margin-left: 4px; }
.t-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.t-list li { display: grid; grid-template-columns: 1fr auto 30px; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.t-list small { display: block; color: var(--muted); font-size: .8rem; } .t-odd { font-weight: 800; font-variant-numeric: tabular-nums; }
.x { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.stake { display: grid; gap: 4px; font-weight: 650; font-size: .9rem; }
.stake input, .su-form input:not([type=checkbox]), .lim-grid input, .lim-grid select { height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 14px; font-weight: 700; width: 100%; font-variant-numeric: tabular-nums; }
.stake input:focus, .su-form input:focus, .lim-grid input:focus, .lim-grid select:focus { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.quick { display: flex; gap: 8px; } .quick button { flex: 1; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; }
.quick button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.sum { margin: 0; display: grid; gap: 6px; } .sum div { display: flex; justify-content: space-between; gap: 10px; } .sum dt { color: var(--muted); } .sum dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.sum .big { padding-top: 8px; border-top: 1px solid var(--line); font-size: 1.1rem; } .sum .big dt { color: var(--ink); font-weight: 700; } .sum i { font-style: normal; font-size: .75rem; color: var(--muted); }
.t-empty { text-align: center; color: var(--muted); display: grid; gap: 4px; justify-items: center; padding: 18px 6px; } .t-empty b { color: var(--ink); }
.ticket-ico { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, #ffd2c4, #d3e8ff 50%, #dccfff); border: 2px solid #fff; box-shadow: 0 10px 18px -8px rgb(90 63 240 / .5); position: relative; }
.ticket-ico::after { content: ""; position: absolute; inset: 14px 12px; border-top: 3px solid #4b3fb0; border-bottom: 3px solid #4b3fb0; }
.ticket-fab { display: none; }

/* ---------- compte ---------- */
.acc-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px) 0 20px; }
.acc-card { padding: clamp(22px, 3vw, 40px); }
.bal { margin: 20px 0 6px; display: grid; } .bal small { color: var(--muted); font-weight: 650; }
.bal b { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -.05em; font-variant-numeric: tabular-nums; line-height: 1; } .bal i { font-size: 1rem; font-style: normal; color: var(--muted); letter-spacing: 0; }
.subnav { display: flex; gap: 8px; padding: 8px 0 16px; flex-wrap: wrap; }
.subnav a { text-decoration: none; padding: 9px 18px; border-radius: 99px; background: var(--glass-2); border: 1px solid var(--edge-low); font-weight: 650; }
.hist, .limits { padding: clamp(18px, 3vw, 34px); margin-bottom: 22px; scroll-margin-top: 90px; }
.hist h2, .limits h2 { font-size: 1.5rem; letter-spacing: -.03em; margin-bottom: 14px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--line); }
td { padding: 12px 10px; border-bottom: 1px solid var(--line); } .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; } .pos { color: var(--up); } .neg { color: var(--down); }
.lim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; margin-top: 18px; }
.lim-grid label, .su-form label { display: grid; gap: 6px; font-weight: 650; }
.inp { position: relative; display: block; } .inp i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); font-size: .8rem; font-weight: 700; pointer-events: none; }
.lim-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- inscription ---------- */
.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 5vw, 80px); align-items: center; padding: clamp(24px, 5vw, 70px) 0; }
.ticks { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; font-weight: 650; } .ticks li { display: flex; align-items: center; gap: 12px; } .ticks svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: var(--lime); color: #fff; }
:root[data-theme="dark"] .ticks svg { color: #0f2a1a; }
.orb { width: min(260px, 60%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff 0 6%, transparent 22%), conic-gradient(from 0deg, #ff9d80, #ffd66a, #7be0b0, #6fd3ff, #a28bff, #ff9d80); border: 3px solid rgb(255 255 255 / .9); box-shadow: inset -20px -26px 40px rgb(60 40 160 / .25), 0 40px 50px -24px rgb(var(--shadow) / .5); }
.su-form { padding: clamp(22px, 3vw, 40px); display: grid; gap: 16px; } .su-form h2 { font-size: 1.6rem; letter-spacing: -.03em; }
.check { grid-template-columns: 24px 1fr; align-items: start; font-weight: 500 !important; } .check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.err { color: var(--down); font-weight: 700; font-size: .9rem; }

/* ---------- pied ---------- */
.foot { padding: 20px var(--gut) 120px; display: grid; gap: 18px; scroll-margin-top: 80px; }
.rg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 28px; border-left: 6px solid var(--lime); }
.rg h2 { font-size: 1.3rem; letter-spacing: -.02em; } .rg p { color: var(--muted); max-width: 60ch; }
.rg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; } .rg a { font-weight: 700; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; }
.name-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.name-pick span { margin-right: 6px; }
.name-pick button { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass-2); cursor: pointer; font-weight: 650; }
.name-pick button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: transparent; }
.legal { color: var(--muted); font-size: .85rem; }
.tabbar { display: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; padding: 12px 20px; font-weight: 650; max-width: min(92vw, 520px); background: var(--glass-2); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .p-grid { grid-template-columns: minmax(0, 1fr) 320px; } .p-rail { display: none; }
  .nav { margin-left: 0; } .search { min-width: 180px; }
}
@media (max-width: 900px) {
  .nav, .hide-sm { display: none !important; } .search { display: none; }
  .top { margin: 8px 12px 0; padding: 8px 10px 8px 12px; gap: 8px; justify-content: space-between; top: 8px; }
  .top-right { margin-left: auto; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; padding: 6px; border-radius: 22px; background: var(--glass-2); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--edge-low); box-shadow: inset 0 1px 0 var(--edge), 0 16px 34px -12px rgb(var(--shadow) / .55); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 7px 0 6px; text-decoration: none; font-size: .72rem; font-weight: 700; color: var(--muted); border-radius: 16px; }
  .tabbar svg { width: 22px; height: 22px; } .tabbar a[aria-current] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--accent); }
  .vedette, .fiche, .acc-head, .signup, .paris-banner { grid-template-columns: minmax(0, 1fr); }
  .vedette { gap: 18px; padding-top: 18px; } .display { font-size: clamp(3rem, 15vw, 5.4rem); } .lede { max-width: none; }
  .vitrine { aspect-ratio: 1 / .72; border-radius: 34px; box-shadow: inset 0 2px 0 rgb(255 255 255 / .9), 0 26px 44px -26px rgb(var(--shadow) / .55), 0 0 0 6px var(--glass); }
  .v-stage { padding-bottom: 0; margin: 6px 6px 0; } .v-card { position: relative; left: 0; width: 78%; margin: -46px 0 0 auto; transform: rotate(-2deg); }
  .row-scroll > div { flex-basis: min(66vw, 260px); } .row-scroll { gap: 14px; } .arrows { display: none; }
  .p-grid { grid-template-columns: minmax(0, 1fr); }
  .ticket { position: fixed; left: 12px; right: 12px; bottom: 150px; top: auto; z-index: 70; max-height: 62vh; overflow: auto; transform: translateY(130%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .ticket.open { transform: none; }
  .ticket-fab { display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 71; left: 12px; right: 12px; bottom: 88px; height: 52px; padding: 0 20px; border-radius: 18px; font-weight: 800; cursor: pointer; background: var(--accent); color: var(--on-accent); border-color: transparent; }
  .p-bar { top: 70px; padding: 8px; } .p-bar > .seg { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; } .p-bar .seg button { white-space: nowrap; }
  .match { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "t m" "o o"; row-gap: 10px; padding: 12px; }
  .m-time { grid-column: 1 / -1; grid-row: 1; display: flex; gap: 8px; align-items: center; } .m-teams { grid-column: 1; grid-row: 2; } .m-more { grid-column: 2; grid-row: 2; align-self: center; }
  .m-odds { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(3, 1fr); } .cols { display: none; } .odd { height: 56px; }
  .acc-head { padding-top: 18px; } .vitrine.small { max-width: 280px; justify-self: center; }
  .foot { padding-bottom: 170px; } .lim-grid { grid-template-columns: minmax(0, 1fr); } .signup { padding-top: 14px; }
  .paris-banner { border-radius: 28px; } .pb-visual { min-height: 190px; }
  .toast { bottom: 100px; }
  table, thead, tbody, tr, td { display: block; } thead { position: absolute; transform: translateX(-9999px); }
  tr { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 0 10px; } td { border: 0; padding: 2px 4px; } td:nth-child(1) { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; } td.num { grid-row: 2 / 4; grid-column: 2; align-self: center; }
}
@media (max-width: 520px) { .btn.big { height: 52px; padding: 0 22px; } .cta-row { gap: 10px; } .facts li { padding: 10px 14px; } .specs { grid-template-columns: 1fr 1fr; } .wordmark { font-size: 1.2rem; } .rg-badge { height: 30px; } #wallet .wallet small { display: none; } .wallet { padding-right: 10px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { transform: none; } .gcard:hover, .gcard:hover .gimg img, .btn:hover:not(:disabled), .v-card:hover { transform: none; }
}
@media (max-width: 900px) { .facts { margin-top: 20px; gap: 8px; flex-wrap: nowrap; } .facts li:nth-child(3) { display: none; } .facts li { padding: 8px 12px; } .facts b { font-size: 1.05rem; } .cta-row { margin-top: 18px; } .lede { font-size: 1.05rem; } }
@media (max-width: 900px) { .ticket { visibility: hidden; } .ticket.open { visibility: visible; } }

/* ---------- lobby v2 : branchement API ---------- */
.su-wrap { display: grid; gap: 16px; min-width: 0; }
.tag-soon.inline { position: static; display: inline-block; vertical-align: middle; margin-left: 8px; }
.soon-banner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; margin-bottom: 18px; border-radius: 16px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--edge-low); }
.soon-banner .tag-soon { flex: none; }
.soon-note { color: var(--violet); }
.lim-grid input:disabled, .lim-grid select:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; border-style: dashed; }
.cta-row .btn[disabled] { cursor: progress; }
#playMsg { color: var(--down); font-weight: 700; }
.hist td.pos { color: var(--up); } .hist td.neg { color: var(--down); }

/* ---------- Paris : bookmaker a cote fixe (API /v1/betting) : endurance, aucune pulsation, aucun clignotement ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.p-grid.two { grid-template-columns: minmax(0, 1fr) 390px; }
.p-bal { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.p-bal small { color: var(--muted); font-weight: 650; } .p-bal b { font-size: 1.15rem; font-variant-numeric: tabular-nums; } .p-bal i { font-style: normal; font-size: .75rem; color: var(--muted); }
.btn.mini { min-height: 38px; }
.badge.fin { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.empty-l { padding: 22px 18px; display: grid; gap: 4px; }
.err-l { color: var(--down); }
.paris.bk .league { border-radius: 18px; }
.paris.bk .league > header { padding: 10px 16px; }
.paris.bk .match.bk { grid-template-columns: 104px minmax(0, 1fr) minmax(240px, 320px) 92px; gap: 8px 14px; align-items: center; padding: 12px 16px; }
.paris.bk .m-time { display: grid; gap: 1px; } .paris.bk .m-time small { color: var(--muted); font-size: .78rem; }
.paris.bk .m-odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.paris.bk .m-closed { grid-column: 3 / 5; margin: 0; }
.paris.bk .m-more { cursor: pointer; color: var(--ink); min-height: 44px; }
.paris.bk .m-more:hover { border-color: var(--accent); }
.paris.bk .m-all { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; padding-top: 12px; border-top: 1px dashed var(--line); }
.mk h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mk-sels { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-sels.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paris.bk .odd { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: auto; min-height: 48px; padding: 6px 10px; text-align: left; cursor: pointer; }
.paris.bk .odd .o-l { position: static; font-size: .82rem; font-weight: 700; color: var(--muted); line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
.paris.bk .odd .o-v { font-size: 1.1rem; margin-left: auto; }
.paris.bk .odd .o-s { position: static; display: flex; align-items: center; gap: 3px; font-size: .7rem; }
.paris.bk .odd[aria-pressed="true"] .o-l { color: inherit; }
.paris.bk .odd[data-susp] { color: var(--warn); }
.paris.bk .odd:focus-visible { outline-offset: 2px; }
.paris.bk .mvu, .paris.bk .mvd { font-style: normal; font-weight: 900; }
.paris.bk .odd[aria-pressed="true"] .mvu, .paris.bk .odd[aria-pressed="true"] .mvd { color: inherit; }
.paris.bk .badge.warn { margin-top: 0; }

/* coupon */
.paris.bk .ticket { gap: 10px; }
.legs, .tk-list, .bl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.leg { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.leg.changed { background: var(--warn-bg); border-left: 6px double var(--warn); }
.leg.stale { border-style: dashed; border-left-style: dashed; border-left-color: var(--warn); }
.lg-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .lg-m { font-size: .8rem; color: var(--muted); font-weight: 650; }
.lg-s { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: .95rem; }
.t-odd { font-weight: 800; font-variant-numeric: tabular-nums; }
.chg { color: var(--warn); font-size: .86rem; } .chg b { font-weight: 800; } .chg s { opacity: 1; text-decoration-thickness: 2px; }
.lstake { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: .88rem; }
.lstake input { height: 40px; width: 110px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.paris.bk .stake input { height: 46px; }
.paris.bk .quick button { height: 40px; }
.sum { margin: 0; display: grid; gap: 6px; } .sum div { display: flex; justify-content: space-between; gap: 10px; } .sum dt { color: var(--muted); } .sum dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.sum .big { padding-top: 8px; border-top: 1px solid var(--line); font-size: 1.12rem; } .sum .big dt { color: var(--ink); font-weight: 700; } .sum i { font-style: normal; font-size: .75rem; color: var(--muted); }
.hint { color: var(--muted); font-size: .86rem; margin: 0; } .hint::before { content: "ⓘ "; }
.notice { margin: 0; padding: 10px 12px; border-radius: 12px; font-weight: 650; font-size: .92rem; border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notice::before { content: "!"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; font-weight: 900; border: 2px solid currentColor; flex: none; }
.notice.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.notice.err { background: var(--surface-2); color: var(--down); border-color: var(--down); }
.okmsg { margin: 0; color: var(--up); font-weight: 700; } .okmsg::before { content: "✓ "; }
.slip-foot { position: sticky; bottom: -18px; margin: 4px -18px -18px; padding: 12px 18px 12px; display: grid; gap: 8px; background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 22px 22px; }
.link-btn { border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; justify-self: center; min-height: 36px; }
.err { color: var(--down); font-weight: 700; }
.x { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; flex: none; }

/* mes paris */
.bet { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.bet small { color: var(--muted); font-size: .84rem; }
.bet.won { border-left-color: var(--up); } .bet.lost { border-left-color: var(--down); } .bet.void { border-left-style: dashed; border-left-color: var(--muted); }
.bl li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.bl-h { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; color: var(--muted); font-weight: 650; }
.bl-s { font-size: .92rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.res { font-size: .78rem; font-weight: 800; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); }
.res.won { color: var(--up); border-color: var(--up); } .res.lost { color: var(--down); border-color: var(--down); } .res.void { border-style: dashed; }
.tk-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tk-st { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: .95rem; } .tk-st .st { font-weight: 800; }
.bet.won .tk-st span { color: var(--up); font-weight: 700; } .bet.lost .tk-st span { color: var(--down); font-weight: 700; }
.gate.access { display: grid; gap: 14px; justify-items: start; }
.ticket { max-height: calc(100vh - 190px); overflow: auto; }

@media (max-width: 1180px) {
  .p-grid.two { grid-template-columns: minmax(0, 1fr) 340px; }
  .paris.bk .match.bk { grid-template-columns: 92px minmax(0, 1fr) minmax(210px, 260px) 84px; }
}
@media (max-width: 900px) {
  .p-grid.two { grid-template-columns: minmax(0, 1fr); }
  .paris.bk .match.bk { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "n n" "o o" "mo mo"; row-gap: 10px; padding: 12px; }
  .paris.bk .match.bk .m-time { grid-area: t; display: flex; gap: 8px; align-items: center; }
  .paris.bk .match.bk .m-teams { grid-area: n; }
  .paris.bk .match.bk .m-odds, .paris.bk .match.bk .m-closed { grid-area: o; }
  .paris.bk .match.bk .m-more { grid-area: mo; justify-self: stretch; }
  .paris.bk .match.bk .m-all { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .paris.bk .odd { min-height: 52px; }
  .paris.bk .ticket { max-height: 72vh; background: var(--surface); }
  .paris.bk .slip-note { display: none; }
  .paris.bk .quick button { height: 36px; }
  .paris.bk .stake input { height: 42px; }
  .paris.bk .slip-foot { gap: 6px; padding-block: 8px; }
  .paris.bk .link-btn { min-height: 28px; }
  .p-ctl { width: 100%; } .p-bal { order: -1; }
  .paris.real .p-bar { position: static; }
  .paris.real .p-bar > .seg { flex-wrap: wrap; overflow: visible; }
  .paris.real .p-bar .seg button { padding-inline: 12px; }
  .paris.real .p-ctl { gap: 8px; }
}
.steps .st-lemon .n, .steps li.st-lemon .n { color: #14203a; }
@media (max-width: 900px) { .f-media::before { inset: -6px; filter: blur(14px); } }

/* ---------- habillage par operateur (marque blanche) ----------
   Reglage du Studio de verre, jamais un autre theme : js/brand.js ne pose QUE des variables (--accent, --accent-2, --on-accent, --violet, --aqua,
   --odd-sel-*, --m1..m4) sur :root[data-wl]. Les regles ci-dessous suivent ces variables ; sans data-wl, rien ne change. Les teintes sont
   verifiees cote serveur (contraste >= 4,5:1 sur les fonds clair et sombre). */
.gem .brand-logo { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
:root[data-wl] .gem { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 3px var(--accent-2), 0 6px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
:root[data-wl] .gem b { text-shadow: none; }
:root[data-wl] .gem:has(.brand-logo) { background: transparent; box-shadow: none; }
:root[data-wl] .nav a[aria-current]::after { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
:root[data-wl] .btn.primary, :root[data-wl][data-theme="dark"] .btn.primary { color: var(--on-accent); background: var(--accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -3px 0 var(--accent-2), 0 12px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
:root[data-wl] .wordmark { white-space: nowrap; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   VITRINE DE L'ACCUEIL (2026-10-10) — scene video en tete de page (js/vitrine.js).
   Une teinte par affiche : --vt-deep (voile, en triplet rgb), --vt-shade (ombre portee nette, coloree, jamais noire),
   --vt-acc (pastille), --vt-x1..3 (extrusion du titre). Aucune opacite d'element : voiles et verre = couleurs translucides.
   ========================================================================== */
[data-hue="mirage"] { --vt-deep: 52 18 98; --vt-shade: #8a4fe0; --vt-acc: #ffb02e; --vt-x1: #ffd166; --vt-x2: #f28c28; --vt-x3: #c4421f; }
[data-hue="veilleuses"] { --vt-deep: 24 26 104; --vt-shade: #4b55e6; --vt-acc: #ff4fb3; --vt-x1: #ff9ad6; --vt-x2: #e0479f; --vt-x3: #8f2c9a; }
[data-hue="copper"] { --vt-deep: 86 32 12; --vt-shade: #e0662a; --vt-acc: #ffa53a; --vt-x1: #ffc06a; --vt-x2: #ee7a2c; --vt-x3: #a83e1a; }
[data-hue="classics"] { --vt-deep: 8 72 58; --vt-shade: #12a07c; --vt-acc: #ff4f9a; --vt-x1: #ff9ccd; --vt-x2: #e8458e; --vt-x3: #9b2468; }
[data-hue="grid"] { --vt-deep: 16 34 96; --vt-shade: #3a6fe0; --vt-acc: #ffc83d; --vt-x1: #ffe07a; --vt-x2: #f0a32a; --vt-x3: #b46a14; }
.vt { --vt-rim: #ffffff; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 21vw, 316px); gap: clamp(20px, 2.2vw, 34px); align-items: center; padding: clamp(26px, 3vw, 42px) 0 clamp(34px, 4vw, 60px); }
:root[data-theme="dark"] .vt { --vt-rim: #e8ebff; }
.vt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* ---------- scene ---------- */
.vt-scene { position: relative; perspective: 1700px; min-width: 0; }
.vt-ambi { position: absolute; z-index: -1; left: -5%; top: -4%; width: 110%; height: 110%; border-radius: 80px; filter: blur(56px) saturate(2); transform: translateZ(0); pointer-events: none; }
.vt-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100svh - 160px); min-height: 320px; border-radius: 30px; isolation: isolate;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .7s ease;
  box-shadow: 0 0 0 5px var(--vt-rim), 0 15px 0 5px var(--vt-shade), 0 46px 64px -20px color-mix(in srgb, var(--vt-shade) 75%, #1b1240); }
.vt.is-hover .vt-stage { transition: transform .12s linear, box-shadow .7s ease; }
.vt-slides { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: rgb(var(--vt-deep)); transform: translateZ(0); }
.vt-slide { position: absolute; inset: 0; visibility: hidden; }
.vt-slide.is-on { visibility: visible; }
.vt-slide.is-entering { z-index: 2; }
.vt-media { position: absolute; inset: 0; overflow: hidden; }
.vt-media img, .vt-media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 50%); }
.vt-media video { visibility: hidden; }
.vt-slide.is-playing video { visibility: visible; }
.vt-slide.is-on .kb { animation: vt-kb 9s cubic-bezier(.2, .6, .3, 1) both; }
.vt.is-paused .kb, .vt.is-hover .kb { animation-play-state: paused; }
@keyframes vt-kb { from { transform: scale(1.12) translate(-1.6%, 1.2%); } to { transform: scale(1.02); } }
.vt-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--vt-deep) / .88) 0%, rgb(var(--vt-deep) / .62) 30%, rgb(var(--vt-deep) / 0) 60%),
              linear-gradient(0deg, rgb(var(--vt-deep) / .55) 0%, rgb(var(--vt-deep) / 0) 45%); }
.vt-glare { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(42% 60% at var(--gx, 22%) var(--gy, 12%), rgb(255 255 255 / .55), rgb(255 255 255 / 0) 70%);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .5), inset 0 -3px 0 rgb(0 0 0 / .18); }

/* ---------- textes de l'affiche ---------- */
.vt-copy { position: absolute; z-index: 3; left: clamp(26px, 3.4vw, 58px); bottom: clamp(26px, 3.4vw, 54px); max-width: min(560px, 50%); color: #fff; }
.vt-eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vt-eyebrow span { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 0 rgb(var(--vt-deep) / .7); }
.vt-sticker { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 10px; font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: #3b2200; background: linear-gradient(180deg, #ffe680, #ffc93a); border: 2px solid #fff; transform: rotate(-4deg);
  box-shadow: inset 0 -2px 0 rgb(170 100 0 / .35), 0 4px 0 #c98a00, 0 9px 14px -6px rgb(var(--vt-deep) / .8); }
.vt-sticker.live { color: #053a22; background: linear-gradient(180deg, #8ff5b8, #2fd27f); box-shadow: inset 0 -2px 0 rgb(0 90 40 / .3), 0 4px 0 #11904f, 0 9px 14px -6px rgb(var(--vt-deep) / .8); }
.vt-title { margin: 14px 0 18px; font-size: clamp(2.6rem, 5vw, 5.4rem); line-height: .92; letter-spacing: -.045em; font-weight: 900; color: #fff;
  text-shadow: 0 1px 0 var(--vt-x1), 0 2px 0 var(--vt-x1), 0 3px 0 var(--vt-x2), 0 4px 0 var(--vt-x2), 0 5px 0 var(--vt-x3), 0 6px 0 var(--vt-x3), 0 7px 0 var(--vt-x3), 0 14px 18px rgb(var(--vt-deep) / .65); }
.vt-title.vt-sr + .vt-lede { margin-top: 14px; }
.vt-title b { font-weight: 900; color: var(--vt-acc); }
.vt-title small { display: block; font-size: .5em; letter-spacing: -.02em; margin-top: .22em; }
.vt-lede { font-size: clamp(1rem, 1.18vw, 1.2rem); line-height: 1.45; max-width: 40ch; font-weight: 550; text-shadow: 0 2px 0 rgb(var(--vt-deep) / .55), 0 0 18px rgb(var(--vt-deep) / .6); }
.vt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.vt-btn { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 10px 0 8px; border: 0; border-radius: 20px; cursor: pointer; font-weight: 800; font-size: 1.05rem; color: rgb(var(--vt-deep));
  background: linear-gradient(180deg, #ffffff, #efeaff); box-shadow: inset 0 -3px 0 rgb(var(--vt-deep) / .12), 0 6px 0 var(--vt-shade), 0 16px 22px -10px rgb(var(--vt-deep) / .9); transition: transform .15s, box-shadow .15s; }
.vt-btn:hover { transform: translateY(-2px); box-shadow: inset 0 -3px 0 rgb(var(--vt-deep) / .12), 0 8px 0 var(--vt-shade), 0 20px 24px -10px rgb(var(--vt-deep) / .9); }
.vt-btn:active { transform: translateY(5px); box-shadow: inset 0 2px 4px rgb(var(--vt-deep) / .25), 0 1px 0 var(--vt-shade); }
.vt-btn-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: linear-gradient(160deg, var(--vt-x1), var(--vt-x2) 55%, var(--vt-x3)); box-shadow: inset 0 2px 0 rgb(255 255 255 / .55), inset 0 -3px 0 rgb(0 0 0 / .18); }
.vt-btn small { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 11px; font-size: .82rem; font-weight: 800; color: rgb(var(--vt-deep)); background: rgb(var(--vt-deep) / .1); font-variant-numeric: tabular-nums; }
.vt-more { color: #fff; font-weight: 800; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid rgb(255 255 255 / .55); text-shadow: 0 2px 0 rgb(var(--vt-deep) / .6); }
.vt-more::after { content: " →"; }
.vt-more:hover { border-color: #fff; }
.vt-copy .btn.primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -3px 6px rgb(30 10 120 / .3), 0 6px 0 #3a22b8, 0 16px 22px -10px rgb(var(--vt-deep) / .9); }
:root[data-theme="dark"] .vt-copy .btn.primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 6px 0 #7a63e0, 0 16px 22px -10px rgb(0 0 0 / .7); }

/* ---------- pause et barres de progression ---------- */
.vt-pause { position: absolute; z-index: 5; right: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: rgb(var(--vt-deep));
  background: rgb(255 255 255 / .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 -2px 0 rgb(var(--vt-deep) / .15), 0 4px 0 rgb(var(--vt-deep) / .45); }
.vt-pause .i-play, .vt.is-paused .vt-pause .i-pause { display: none; }
.vt.is-paused .vt-pause .i-play { display: block; }
.vt-bars { display: none; }

/* ---------- rail des affiches ---------- */
.vt-rail { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; align-self: stretch; padding: 2px 0 17px; }
.vt-tab { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: center; padding: 9px 12px 11px 9px; border-radius: 18px; cursor: pointer; text-align: left;
  background: var(--glass-2); border: 1px solid var(--edge-low); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--edge), 0 4px 0 rgb(var(--shadow) / .12), 0 12px 20px -14px rgb(var(--shadow) / .4); transition: transform .3s cubic-bezier(.2, .8, .2, 1.2), box-shadow .3s, background .3s; }
.vt-tab:hover { transform: translateX(-4px); }
.vt-tab[aria-selected="true"] { background: var(--surface); transform: translateX(-10px); border-color: var(--surface);
  box-shadow: 0 0 0 2px var(--vt-shade), 0 6px 0 2px var(--vt-shade), 0 20px 26px -14px var(--vt-shade); }
.vt-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: rgb(var(--vt-deep)); box-shadow: 0 3px 0 rgb(var(--vt-deep) / .35); }
.vt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vt-tab-txt { display: grid; gap: 3px; min-width: 0; }
.vt-tab-txt strong { font-size: 1rem; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.vt-tab-txt small { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vt-tab-txt small::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: #ffc93a; box-shadow: 0 2px 0 #c98a00; }
.vt-tab-txt small.live::before { background: #2fd27f; box-shadow: 0 2px 0 #11904f; }
.vt-prog { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 4px; border-radius: 4px; overflow: hidden; background: rgb(var(--vt-deep) / .12); visibility: hidden; }
.vt-prog b { display: block; height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--vt-x2), var(--vt-shade)); }
.vt-tab[aria-selected="true"] .vt-prog { visibility: visible; }

/* ---------- salle de projection ---------- */
.vt-theatre { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: #fff;
  background: radial-gradient(70% 60% at 50% 40%, rgb(var(--vt-deep) / .55), rgb(var(--vt-deep) / .9)); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.vt-theatre[open] { display: grid; place-items: center; }
.vt-theatre::backdrop { background: transparent; }
.vt-th-box { width: min(94vw, calc((100dvh - 150px) * 16 / 9), 1480px); padding: 10px; border-radius: 26px; background: var(--vt-rim, #fff); color: rgb(var(--vt-deep));
  box-shadow: 0 16px 0 var(--vt-shade), 0 50px 80px -24px rgb(0 0 0 / .55); }
.vt-th-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 10px 8px; }
.vt-th-head p { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.vt-th-head strong { font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em; }
.vt-th-head span { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vt-shade); }
.vt-th-head .vt-sticker { height: 26px; font-size: .72rem; }
.vt-close { flex: none; width: 44px; height: 44px; border-radius: 14px; border: 0; cursor: pointer; display: grid; place-items: center; color: rgb(var(--vt-deep));
  background: linear-gradient(180deg, #fff, #efeaff); box-shadow: inset 0 -2px 0 rgb(var(--vt-deep) / .12), 0 4px 0 var(--vt-shade); }
.vt-close:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--vt-shade); }
.vt-th-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; background: rgb(var(--vt-deep)); }

/* ---------- tablette et telephone ---------- */
@media (max-width: 1180px) and (min-width: 901px) { .vt { grid-template-columns: minmax(0, 1fr) 236px; } .vt-tab { grid-template-columns: 84px minmax(0, 1fr); } .vt-copy { max-width: 58%; } }
@media (max-width: 900px) {
  .vt { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px 0 30px; }
  .vt-stage { aspect-ratio: 4 / 5; max-height: calc(100svh - 250px); min-height: 400px; border-radius: 26px; box-shadow: 0 0 0 4px var(--vt-rim), 0 11px 0 4px var(--vt-shade), 0 30px 44px -18px color-mix(in srgb, var(--vt-shade) 75%, #1b1240); }
  .vt-scrim { background: linear-gradient(0deg, rgb(var(--vt-deep) / .94) 0%, rgb(var(--vt-deep) / .78) 34%, rgb(var(--vt-deep) / 0) 64%), linear-gradient(180deg, rgb(var(--vt-deep) / .45) 0%, rgb(var(--vt-deep) / 0) 18%); }
  .vt-copy { left: 18px; right: 18px; bottom: 20px; max-width: none; }
  .vt-title { font-size: clamp(2.3rem, 11vw, 3.4rem); margin: 12px 0 10px; }
  .vt-lede { font-size: .98rem; }
  .vt-actions { margin-top: 16px; }
  .vt-btn { height: 54px; font-size: 1rem; }
  .vt-pause { top: 22px; bottom: auto; right: 12px; width: 38px; height: 38px; }
  .vt-bars { display: flex; gap: 5px; position: absolute; z-index: 5; left: 16px; right: 62px; top: 16px; }
  .vt-bars i { flex: 1; height: 5px; border-radius: 5px; overflow: hidden; background: rgb(255 255 255 / .38); box-shadow: 0 1px 0 rgb(var(--vt-deep) / .4); }
  .vt-bars b { display: block; height: 100%; background: #fff; transform-origin: left center; transform: scaleX(var(--p, 0)); }
  .vt-bars i.done b { transform: scaleX(1); }
  .vt-rail { flex-direction: row; overflow-x: auto; scroll-snap-type: x proximity; gap: 10px; margin: 0 calc(-1 * var(--gut)); padding: 4px var(--gut) 14px; scrollbar-width: none; }
  .vt-rail::-webkit-scrollbar { display: none; }
  .vt-tab { flex: 0 0 auto; width: 214px; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 7px 10px 9px 7px; scroll-snap-align: center; }
  .vt-tab:hover, .vt-tab[aria-selected="true"] { transform: translateY(-3px); }
  .vt-tab-txt strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vt-tab-txt small { font-size: .66rem; letter-spacing: .04em; }
  .vt-th-box { width: calc(100vw - 16px); padding: 8px; border-radius: 22px; }
  .vt-th-head { padding: 2px 2px 8px 6px; } .vt-th-head p { gap: 8px; flex-wrap: nowrap; } .vt-th-head span { display: none; }
  .vt-th-head strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vt-th-head .vt-sticker { flex: none; }
}
/* telephone en paysage : la scene tient dans la hauteur, le rail devient une liste compacte a droite */
@media (max-height: 520px) and (orientation: landscape) {
  .vt { grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; padding: 8px 0 24px; align-items: start; }
  .vt-stage { aspect-ratio: auto; height: max(200px, calc(100svh - 170px)); min-height: 0; max-height: none; border-radius: 22px; box-shadow: 0 0 0 4px var(--vt-rim), 0 9px 0 4px var(--vt-shade), 0 24px 36px -16px color-mix(in srgb, var(--vt-shade) 75%, #1b1240); }
  .vt-scrim { background: linear-gradient(90deg, rgb(var(--vt-deep) / .9) 0%, rgb(var(--vt-deep) / .6) 40%, rgb(var(--vt-deep) / 0) 70%); }
  .vt-copy { left: 18px; right: auto; bottom: 16px; max-width: 62%; }
  .vt-title { font-size: clamp(1.7rem, 7.4vh, 2.4rem); margin: 8px 0 8px; }
  .vt-lede { display: none; }
  .vt-actions { margin-top: 8px; }
  .vt-btn { height: 46px; font-size: .92rem; } .vt-btn-ic { width: 34px; height: 34px; border-radius: 11px; } .vt-btn small { height: 26px; }
  .vt-copy .btn.big { height: 46px; padding: 0 18px; font-size: .95rem; }
  .vt-bars { display: none; }
  .vt-pause { top: auto; bottom: 12px; right: 12px; }
  .vt-rail { flex-direction: column; justify-content: flex-start; overflow: visible; margin: 0; padding: 0; gap: 6px; }
  .vt-tab { width: auto; grid-template-columns: minmax(0, 1fr); padding: 7px 12px 10px; }
  .vt-tab-txt { grid-auto-flow: column; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .vt-tab-txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vt-tab-txt small { font-size: 0; gap: 0; }
  .vt-prog { bottom: 4px; height: 3px; }
  .vt-thumb { display: none; }
  .vt-tab-txt strong { font-size: .86rem; }
  .vt-tab:hover, .vt-tab[aria-selected="true"] { transform: translateX(-6px); }
  .vt-th-box { width: min(94vw, calc((100dvh - 80px) * 16 / 9)); padding: 6px; } .vt-th-head { padding: 0 2px 6px 6px; } .vt-close { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .vt-stage, .vt-tab { transition: none; } .vt-slide.is-on .kb { animation: none; } }