/* Site de Clone XVI (vitruvia.tv), dans la langue visuelle des menus du jeu : étiquettes en Frontline (blanc sur violet, ou noires),
   entrées numérotées dans des carrés comme l'écran titre, capitales fines espacées (Poppins), coins droits, contours noirs, lignes
   alternées et rangs en carrés comme le classement du jeu, zéros de tête estompés dans les temps, trame de points blancs. */

@font-face { font-family: 'Frontline'; src: url('/fonts/Frontline-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 300; src: url('/fonts/Poppins-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-weight: 100; src: url('/fonts/Poppins-Thin.ttf') format('truetype'); font-display: swap; }

:root {
  --violet: #7446f2;
  --violet-dark: #5d33d6;
  --violet-soft: #f1edff;
  --ink: #000;
  --text: #2e2d35;     /* phrases (Poppins Light) */
  --mist: #707070;     /* légendes, comme le gris des menus */
  --hair: #d9d8de;     /* filets et cadres fins */
  --stripe: #f6f7fb;   /* une ligne sur deux du classement */
  --lilac: #f2f2f2;    /* fond des champs et cases vides */
  --green: #27f494;
  --red: #ff2e43;
  --gold: #f3c728;
  --silver: #c9cad3;
  --bronze: #b0866e;
  --night: #0d0e13;
  --night-line: #2b2c35;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --hdr: 98px;         /* hauteur de l'en-tête collant (barre + bande des records) */
  --display: 'Frontline', 'Arial Narrow', sans-serif;
  --sans: 'Poppins', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); }
body { margin: 0; background: #fff; color: var(--ink); font: 300 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* « hidden » l'emporte sur les display des blocs (grille du record, médailles…). */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ Éléments du jeu */

/* Étiquette : Frontline blanc sur violet ; <b> passe une partie en noir (« SEGMENT · THE BEGINNING »). Les capitales de Frontline
   sont hautes dans leur boîte : un peu plus de marge en haut qu'en bas pour les centrer. */
.tag { display: inline-flex; align-items: center; gap: .3em; font: 400 var(--t, 28px)/1 var(--display); text-transform: uppercase; color: #fff;
  background: var(--violet); padding: .17em .22em .07em; white-space: nowrap; letter-spacing: .01em; }
.tag b { font-weight: 400; color: #000; }
.tag.black { background: #000; }
.tag.black b { color: #b9a3ff; }
.tag.white { background: #fff; color: #000; }
.tag.white b { color: var(--violet); }
.tag-xl { --t: clamp(46px, 6.2vw, 84px); }
.tag-l { --t: clamp(30px, 3.4vw, 44px); }
.tag-m { --t: 24px; }
.tag-s { --t: 18px; }
.tag-xs { --t: 14px; }

/* Légende : capitales fines et espacées, en gris (« SEGMENT 3 OF 9 · CLEAR », « SEGMENTS »). */
.caption { font: 300 12.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.status { display: inline-flex; align-items: center; gap: 9px; font: 400 17px/1 var(--display); text-transform: uppercase; padding-top: .12em; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #000; flex: none; }
.dot.green { background: var(--green); }
.dot.red { background: var(--red); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* Grand titre : Poppins Thin en capitales espacées, comme « PURPLE CORRIDOR » sur l'écran de fin de segment. */
.thin { font: 100 clamp(30px, 3.6vw, 50px)/1.12 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* Entrée numérotée (écran titre) : carré au trait, nom en capitales espacées ; au survol le carré se remplit. */
.item { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: #000; background: none; border: 0; padding: 0;
  cursor: pointer; font: 300 15px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-align: left; }
.item .sq { width: 34px; height: 34px; border: 1px solid rgba(0,0,0,.45); display: grid; place-items: center; flex: none;
  font: 300 12px/1 var(--sans); letter-spacing: 0; color: #000; transition: background .15s, color .15s, border-color .15s; }
.item:hover .sq, .item.on .sq, .item:focus-visible .sq { background: var(--c, var(--violet)); border-color: var(--c, var(--violet)); color: #fff; }
.item:focus-visible { outline: none; }
.item[aria-disabled="true"] { color: var(--mist); cursor: default; }
.item[aria-disabled="true"] .sq { background: none !important; border-color: var(--hair) !important; color: var(--mist) !important; }

/* Bouton principal (« WISHLIST ON STEAM → » de l'écran titre) et ses variantes. */
.cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 60px; padding: 12px 18px 6px 20px;
  background: var(--violet); color: #fff; text-decoration: none; font: 400 27px/1 var(--display); text-transform: uppercase; border: 0; cursor: pointer;
  transition: background .15s; white-space: nowrap; }
.cta::after { content: '→'; font: 300 1em/1 var(--sans); margin-top: -.2em; }
.cta:hover { background: var(--violet-dark); }
.cta.black { background: #000; }
.cta.black:hover { background: var(--violet); }
.cta.small { min-height: 40px; font-size: 19px; padding: 9px 12px 4px 14px; gap: 14px; }

/* WATCH : contour violet, comme dans le classement du jeu. */
.watch { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; height: 30px; padding: 4px 10px 0; border: 1.5px solid var(--violet);
  background: #fff; color: var(--violet); font: 400 15px/1 var(--display); text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .12s, color .12s; }
.watch:hover { background: var(--violet); color: #fff; }

/* Temps : chiffres de Frontline dans des cases fixes (BTHud.Mono : 0,356 em), zéros de tête estompés (DimLead). */
.clock { font-family: var(--display); white-space: nowrap; }
.clock .d { display: inline-block; width: .356em; text-align: center; }
.clock .z { opacity: .32; }
.clock .u { font-size: .62em; margin-left: .06em; }

/* Rang : carré, or / argent / bronze sur le podium. */
.rank { width: 32px; height: 32px; display: grid; place-items: center; font: 400 18px/1 var(--display); padding-top: .12em; border: 1px solid rgba(0,0,0,.4); background: #fff; flex: none; }
.rank.r1 { background: var(--gold); border-color: var(--gold); }
.rank.r2 { background: var(--silver); border-color: var(--silver); }
.rank.r3 { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.medal-ico { width: 24px; height: 24px; flex: none; }
.medal-none { width: 18px; height: 18px; border: 1.5px solid var(--hair); border-radius: 50%; flex: none; margin: 0 3px; }

/* Trame : points blancs en quinconce qui rapetissent en s'éloignant du papier (img/halftone-edge*.png, tracées à 2×). */
.halftone { position: absolute; pointer-events: none; z-index: 1; }
.halftone.h { top: 0; bottom: 0; left: -1px; width: 300px; background: url('/img/halftone-edge.png') 0 0 / 300px 26px repeat-y; }
.halftone.v { left: 0; right: 0; bottom: -1px; height: 110px; background: url('/img/halftone-edge-v.png') 0 0 / 26px 110px repeat-x; transform: scaleY(-1); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ En-tête */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; }
.hdr { max-width: var(--max); margin: 0 auto; height: 66px; display: flex; align-items: center; gap: 30px; padding: 0 var(--gutter); }
.hdr-brand { display: flex; align-items: center; flex: none; margin-left: -6px; }
.hdr-brand img { height: 40px; width: auto; }
.hdr-nav { display: flex; gap: 28px; margin-left: auto; }
.hdr-nav .item { font-size: 12.5px; letter-spacing: .18em; gap: 11px; }
.hdr-nav .item .sq { width: 28px; height: 28px; font-size: 10.5px; }
.hdr-nav .item .dot { width: 7px; height: 7px; margin-left: -4px; }
.hdr-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.hdr-menu { display: none; width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.45); background: #fff; cursor: pointer; position: relative; padding: 0; }
.hdr-menu span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: #000; transition: transform .2s, top .2s; }
.hdr-menu span:first-child { top: 14px; } .hdr-menu span:last-child { top: 24px; }
.site-header.menu-open .hdr-menu span:first-child { top: 19px; transform: rotate(45deg); }
.site-header.menu-open .hdr-menu span:last-child { top: 19px; transform: rotate(-45deg); }

/* Bande des records : noire, au bas de l'en-tête ; chaque record mène à son classement. */
.hdr-records { height: 32px; display: flex; align-items: stretch; background: #000; color: #fff; overflow: hidden; }
.hdr-records-label { flex: none; display: flex; align-items: center; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-right: 14px; }
.hdr-records-label .tag { --t: 15px; }
.hdr-records-track { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent); }
.hdr-records-move { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; animation: tick 60s linear infinite; padding-left: 10px; }
.hdr-records-track:hover .hdr-records-move { animation-play-state: paused; }
.hdr-records-move a { display: inline-flex; align-items: center; gap: 9px; height: 100%; color: #fff; text-decoration: none; padding: 3px 8px 0; font: 400 16px/1 var(--display); text-transform: uppercase; }
.hdr-records-move a:hover { background: var(--violet); }
.hdr-records-move a .n { color: #9a98a6; }
.hdr-records-move a .clock { color: #fff; }
.hdr-records-move .sep { display: inline-block; width: 5px; height: 5px; background: #55535f; margin: 0 16px; flex: none; }
.hdr-records-move .wait { font: 300 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #9a98a6; }
@keyframes tick { to { transform: translateX(-50%); } }

@media (max-width: 960px) {
  :root { --hdr: 84px; }
  .hdr { height: 56px; gap: 12px; }
  .hdr-brand img { height: 32px; }
  .hdr-menu { display: block; }
  .hdr-nav { position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 6px var(--gutter) 18px; background: #fff;
    border-bottom: 2px solid #000; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s; z-index: 2; }
  .site-header.menu-open .hdr-nav { opacity: 1; transform: none; pointer-events: auto; }
  .hdr-nav .item { padding: 11px 0; font-size: 14px; }
  .hdr-nav .item .sq { width: 34px; height: 34px; font-size: 12px; }
  .hdr-actions { margin-left: auto; }
  .hdr-records { height: 28px; }
  .hdr-records-move a { font-size: 14.5px; }
}
@media (max-width: 420px) { .hdr-actions .cta { font-size: 16px; padding: 8px 9px 3px 10px; gap: 8px; min-height: 38px; } .hdr-actions .cta .long { display: none; } }

/* ------------------------------------------------------------ Mise en page commune */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 9vw, 124px) var(--gutter) 0; }
.head { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; margin-bottom: 30px; }
.lead { max-width: 660px; color: var(--text); font-size: 18px; margin: -10px 0 34px; }

/* ------------------------------------------------------------ Accueil */
/* Premier écran, comme l'écran titre du jeu : le papier blanc à gauche, la trame, puis l'image du jeu. */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: min(calc(100svh - var(--hdr)), 760px); overflow: hidden; }
.hero-paper { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(28px, 3.6vw, 52px) clamp(24px, 3vw, 48px) clamp(28px, 3.6vw, 52px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.hero-logo { width: min(440px, 100%); height: auto; margin: 0 0 0 -2.4%; }
.hero-line { margin: 12px 0 0; font-size: clamp(22px, 2vw, 27px); }
.hero-pitch { max-width: 490px; color: var(--text); margin: 14px 0 24px; }
.hero-record { display: grid; justify-items: start; gap: 8px; margin: 0 0 24px; }
.hero-record-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hero-record .clock { font-size: clamp(38px, 3.6vw, 48px); line-height: 1; }
.hero-record .who { font: 400 20px/1 var(--display); text-transform: uppercase; color: var(--mist); }
.hero-buy { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.hero-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.hero-art { position: relative; background: #a9add9 url('/media/hero.webp') 50% 30% / cover no-repeat; min-height: 340px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { order: -1; height: 58vw; min-height: 220px; max-height: 420px; }
  .hero-art .halftone.h { display: none; }
  .hero-paper { padding-top: 6px; padding-bottom: 20px; }
  .hero-logo { width: min(400px, 92%); }
}
@media (min-width: 901px) { .hero-art .halftone.v { display: none; } }

.trailer-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.trailer-frame video { width: 100%; height: 100%; object-fit: cover; }
.trailer-frame .tag { position: absolute; z-index: 2; }
.trailer-name { left: 16px; top: 16px; }
.trailer-sound { right: 16px; bottom: 16px; border: 0; cursor: pointer; }
.trailer-sound:hover { background: #000; }
.trailer-frame.sound-on .trailer-name, .trailer-frame.sound-on .trailer-sound { display: none; }
@media (max-width: 600px) { .trailer-frame .tag { --t: 15px; } .trailer-name { left: 8px; top: 8px; } .trailer-sound { right: 8px; bottom: 8px; } }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 28px; }
.feature video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--lilac); }
.feature-top { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; }
.feature-top .tag { --t: 22px; }
.feature p { color: var(--text); font-size: 16px; max-width: 420px; }
@media (max-width: 1000px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; gap: 36px; } }

/* Liste des segments : comme la colonne de gauche du classement du jeu (numéro, nom), avec le record à droite. */
.segs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.segs li { border-bottom: 1px solid var(--hair); }
.seg { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 22px; padding: 12px 0; }
.seg .item { font-size: clamp(14px, 1.4vw, 19px); letter-spacing: .18em; }
.seg .item .sq { width: 40px; height: 40px; font-size: 13px; }
.seg-rec { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.seg-rec .clock { font-size: 26px; padding-top: .12em; }
.seg-rec .who { font: 400 17px/1 var(--display); text-transform: uppercase; color: var(--mist); padding-top: .12em; min-width: 120px; text-align: right; }
.seg-rec .none { font: 300 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.medal-key { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.medal-key span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair); padding: 6px 12px 6px 8px; font: 400 16px/1 var(--display); text-transform: uppercase; }
.medal-key span:first-child { border-color: var(--violet); }
.medal-key span .medal-ico { margin: -4px 0; }
.medal-note { color: var(--text); font-size: 15.5px; margin-top: 14px; max-width: 640px; }
@media (max-width: 700px) {
  .seg { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .seg .watch { display: none; }
  .seg-rec { flex-direction: column; align-items: flex-end; gap: 4px; }
  .seg-rec .who { min-width: 0; font-size: 14px; }
  .seg-rec .clock { font-size: 22px; }
  .seg .item { letter-spacing: .12em; gap: 12px; }
  .seg .item .sq { width: 34px; height: 34px; }
}

/* Aperçu du classement de la tour. */
.teaser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.teaser-text p { color: var(--text); margin: 16px 0 28px; max-width: 440px; }
@media (max-width: 900px) { .teaser { grid-template-columns: 1fr; } }

.finale { max-width: var(--max); margin: clamp(90px, 11vw, 150px) auto 0; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.finale img { width: min(380px, 78vw); height: auto; }
.finale .thin { font-size: clamp(20px, 2.2vw, 28px); }

.footer { margin-top: clamp(90px, 11vw, 150px); background: var(--stripe); }
.footer-in { max-width: var(--max); margin: 0 auto; padding: 44px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 34px 70px; align-items: start; }
.footer-logo { width: 190px; height: auto; margin: -8px 0 10px -6px; }
.footer-nav { display: flex; flex-direction: column; gap: 12px; }
.footer-nav .item { font-size: 12px; letter-spacing: .16em; gap: 11px; }
.footer-nav .item .sq { width: 26px; height: 26px; font-size: 13px; background: #fff; }
.footer-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--mist); border-top: 1px solid var(--hair); padding-top: 18px; }
@media (max-width: 720px) { .footer-in { grid-template-columns: 1fr 1fr; } .footer-in > div:first-child { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ Lignes de classement (comme le classement du jeu) */
.rows { list-style: none; margin: 0; padding: 0; }
.rows-head { display: grid; grid-template-columns: var(--cols); align-items: end; gap: 0 14px; padding: 0 12px 8px; border-bottom: 2px solid #000;
  font: 400 15px/1 var(--display); text-transform: uppercase; color: var(--mist); }
.rows-head .r { text-align: right; }
.row { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 0 14px; min-height: 48px; padding: 6px 12px; }
.rows > .row:nth-child(even of .row) { background: var(--stripe); }
.row .name { font: 400 23px/1 var(--display); text-transform: uppercase; padding-top: .12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row .name small { display: block; font: 300 11.5px/1.3 var(--sans); letter-spacing: .1em; color: var(--mist); margin-top: 1px; }
.row .time { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.row .time .clock { font-size: 24px; padding-top: .12em; }
.row .gap { text-align: right; }
.row .gap .clock { font-size: 18px; color: var(--mist); padding-top: .12em; }
.row .act { text-align: right; }
.row.empty { color: var(--mist); grid-template-columns: 1fr; padding: 22px 12px; font-size: 15px; }
.rows.small { --cols: 32px minmax(0, 1fr) auto; }
.rows.small .row { min-height: 46px; }

/* ------------------------------------------------------------ Lecteur de replay (habillage du HUD du jeu) */
.screen { position: relative; aspect-ratio: 16 / 9; background: #c9cbe6; overflow: hidden; isolation: isolate; }
.screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ov { position: absolute; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 6px; }
.ov-left { left: 16px; top: 16px; align-items: flex-start; }
.ov-right { right: 16px; top: 16px; align-items: flex-end; }
.ov .tag { --t: 22px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ov .tag:empty { display: none; }
.ov-clock { font-size: 46px; line-height: 1; color: #000; text-shadow: 1px 1px 0 #fff; padding-top: .1em; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.18); z-index: 2; }
.progress-bar { height: 100%; width: 0; background: var(--violet); }
.screen.idle .ov-right, .screen.idle .progress, .screen.no-gl .progress { display: none; }
.screen.idle .ov-seg, .screen.no-gl .ov-seg { display: none; }
.slate { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #fff;
  text-align: center; transition: opacity .4s ease, visibility .4s; padding: 24px; }
.slate.off { opacity: 0; visibility: hidden; }
.slate .tag { --t: 18px; }
.slate-title { font: 100 clamp(16px, 2vw, 26px)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.slate-meter { width: 200px; height: 4px; background: var(--lilac); overflow: hidden; }
.slate-meter div { height: 100%; width: 0; background: var(--violet); transition: width .2s; }
@media (max-width: 720px) {
  .ov-left { left: 8px; top: 8px; } .ov-right { right: 8px; top: 8px; }
  .ov .tag { --t: 13px; }
  .ov-seg { display: none !important; }
  .ov-clock { font-size: 22px; }
}

/* ------------------------------------------------------------ Page des classements */
.lb { max-width: var(--max); margin: 0 auto; padding: 44px var(--gutter) 0; }
.lb-top { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.lb-top .switch { margin-left: auto; }
.lb-intro { color: var(--text); max-width: 720px; margin: 0 0 30px; }
.switch { display: inline-flex; border: 1.5px solid #000; }
.switch button { border: 0; background: #fff; padding: 8px 14px 3px; font: 400 18px/1 var(--display); text-transform: uppercase; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.switch button.on { background: #000; color: #fff; }
.switch button:disabled { color: var(--mist); cursor: default; }
.switch .tag { --t: 12px; }

/* Les classements : la tour, la somme des meilleurs segments, puis chaque segment ; flèches pour faire défiler. */
.cats-wrap { position: relative; margin: 0 0 34px; }
.cats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 1fr); overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.cats::-webkit-scrollbar { display: none; }
.cat { scroll-snap-align: start; text-align: left; border: 0; border-right: 1px solid var(--hair); background: #fff; padding: 16px 16px 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 14px; font-family: var(--sans); color: #000; }
.cat:last-child { border-right: 0; }
.cat .item { pointer-events: none; font-size: 12.5px; letter-spacing: .16em; gap: 11px; }
.cat .item .sq { width: 28px; height: 28px; font-size: 11px; }
.cat:hover .item .sq, .cat.on .item .sq { background: var(--violet); border-color: var(--violet); color: #fff; }
.cat.on { background: var(--violet-soft); box-shadow: inset 0 -3px 0 var(--violet); }
.cat-wr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.cat-wr .clock { font-size: 24px; }
.cat-wr .who { font: 400 15px/1 var(--display); text-transform: uppercase; color: var(--mist); }
.cat-wr .none { font: 300 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.cat-soon { cursor: default; background: #fff; }
.cat-soon .item { color: var(--mist); }
.cat-soon .item .sq { border-color: var(--hair) !important; background: #fff !important; color: var(--mist) !important; }
.cats-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border: 1.5px solid #000; background: #fff; color: #000;
  display: grid; place-items: center; cursor: pointer; transition: opacity .2s, background .15s, color .15s; padding: 0; }
.cats-arrow svg { width: 15px; height: 15px; }
.cats-arrow:hover { background: #000; color: #fff; }
.cats-prev { left: -12px; } .cats-next { right: -12px; }
.cats-arrow.off { opacity: 0; pointer-events: none; }

.board-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
.board-head-top { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; width: 100%; }
.board-head-top .status { margin-left: auto; }
.board-head p { color: var(--text); max-width: 640px; }
.medals { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
.medals li { border: 1px solid var(--hair); padding: 9px 10px 8px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 10px; align-items: center; }
.medals li.wr { border: 2px solid var(--violet); padding: 8px 9px 7px; }
.medals .medal-ico { width: 38px; height: 38px; grid-row: span 3; }
.m-name { font: 400 14px/1 var(--display); text-transform: uppercase; color: var(--mist); padding-top: .12em; }
.m-time { font-size: 21px; line-height: 1.05; }
.m-count { font: 300 11.5px/1.3 var(--sans); color: var(--mist); }
@media (max-width: 760px) {
  .medals { gap: 4px; }
  .medals li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px 2px 7px; gap: 2px; }
  .medals .medal-ico { grid-row: auto; width: 30px; height: 30px; }
  .m-time { font-size: 14px; }
  .m-name { font-size: 12px; }
  .m-count { font-size: 10px; }
}

.board { --cols: 32px minmax(0, 1fr) 96px 200px 116px; }
.board.no-watch { --cols: 32px minmax(0, 1fr) 200px 116px; }
.row.watchable { cursor: pointer; }
.row.watchable:hover { background: var(--violet-soft) !important; }
.row.playing, .row.playing:hover { background: var(--violet) !important; color: #fff; }
.row.playing .rank:not(.r1):not(.r2):not(.r3) { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.row.playing .gap .clock { color: #fff; }
.row.playing .watch { background: #fff; color: var(--violet); border-color: #fff; }
@media (max-width: 700px) {
  .board { --cols: 28px minmax(0, 1fr) 62px 118px; }
  .board.no-watch { --cols: 28px minmax(0, 1fr) 128px; }
  .rows-head .gap-h, .row .gap { display: none; }
  .row { padding: 6px 6px; gap: 0 9px; min-height: 44px; }
  .rows-head { padding: 0 6px 8px; gap: 0 9px; }
  .row .name { font-size: 18px; }
  .row .time .clock { font-size: 18px; }
  .row .time { gap: 6px; }
  .row .medal-ico { width: 18px; height: 18px; }
  .rank { width: 28px; height: 28px; font-size: 16px; }
  .watch { min-width: 0; width: 100%; padding: 4px 4px 0; font-size: 13px; height: 28px; }
}

/* Le replay s'ouvre dans le classement, sous la course regardée, sur toute la largeur. */
.replay-li { background: #000; padding: 0 0 12px; }
.replay-li .screen { width: min(100%, calc((100svh - var(--hdr) - 120px) * 16 / 9)); min-width: min(100%, 560px); margin: 0 auto; }
.lb-controls { display: flex; align-items: center; gap: 8px; padding: 12px 12px 0; color: #fff; flex-wrap: wrap; }
.ctl { height: 34px; min-width: 34px; padding: 4px 10px 0; border: 0; background: #fff; color: #000; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; font: 400 19px/1 var(--display); text-transform: uppercase; }
.ctl svg { width: 13px; height: 13px; margin-top: -3px; }
.ctl:hover { background: var(--violet); color: #fff; }
.ctl.violet { background: var(--violet); color: #fff; }
.ctl.violet:hover { background: #fff; color: var(--violet); }
.ctl-speed { display: inline-flex; gap: 2px; }
.ctl-speed button { height: 34px; border: 0; background: #2b2c35; color: #fff; font: 400 18px/1 var(--display); padding: 4px 9px 0; cursor: pointer; }
.ctl-speed button.on { background: #fff; color: #000; }
.ctl-clock { font-size: 22px; color: #fff; padding: 2px 6px 0; }
.ctl-clock .total { opacity: .5; }
.scrub { flex: 1; min-width: 120px; height: 34px; margin: 0 4px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.scrub::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--violet) var(--p, 0%), #44434f var(--p, 0%)); }
.scrub::-moz-range-track { height: 4px; background: #44434f; }
.scrub::-moz-range-progress { height: 4px; background: var(--violet); }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; background: #fff; border: 0; border-radius: 0; }
.scrub::-moz-range-thumb { width: 14px; height: 14px; background: #fff; border: 0; border-radius: 0; }
@media (max-width: 700px) {
  .lb-controls { gap: 6px; padding: 10px 8px 0; }
  .scrub { order: -1; flex-basis: 100%; margin: 0; }
  .ctl-clock { font-size: 17px; margin-left: auto; }
  .ctl .lbl { display: none; }
}

.lb-cta { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--stripe); padding: 28px 28px; }
.lb-cta p { color: var(--text); margin-top: 12px; max-width: 560px; }

/* ------------------------------------------------------------ Page VitruvIA */
.vit-hero { max-width: var(--max); margin: 0 auto; padding: clamp(50px, 7vw, 100px) var(--gutter) 70px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.vit-hero h1 { font: 100 clamp(36px, 4.8vw, 68px)/1.08 var(--sans); letter-spacing: .04em; text-transform: uppercase; margin-top: 24px; }
.vit-hero h1 em { font-style: normal; color: var(--violet); }
.vit-lede { color: var(--text); font-size: clamp(16px, 1.3vw, 19px); max-width: 540px; margin: 26px 0 34px; }
.vit-actions { display: flex; align-items: center; gap: 20px 30px; flex-wrap: wrap; }
.vit-mark { text-align: center; }
.vit-mark figcaption { margin-top: 18px; opacity: 0; animation: rise .8s ease 3.6s forwards; }
.vit-word { width: min(78%, 340px); margin: 26px auto 0; opacity: 0; animation: rise 1s ease 3.1s forwards; }
.canon { width: min(100%, 400px); overflow: visible; margin: 0 auto; }
.canon .construction { fill: none; stroke: var(--violet); stroke-width: 0.035; stroke-linecap: round; }
.canon .construction > * { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 1.6s cubic-bezier(.6,.1,.2,1) forwards, fade-line 1.2s ease 3s forwards; }
.canon .c-circle { animation-delay: .2s, 3s; }
.canon .c-square { animation-delay: .6s, 3s; }
.canon .c-tri { fill: rgba(116,70,242,.12); animation-delay: 1s, 3s; }
.canon .c-axis { stroke-dasharray: 2 .25; stroke-dashoffset: 0; opacity: 0; animation: appear .8s ease .3s forwards, fade-line 1.2s ease 3s forwards; }
.canon .c-axis-2 { animation-delay: .5s, 3s; }
.canon .glyph path { fill: #000; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: carve .9s cubic-bezier(.2,.8,.2,1) forwards; }
.canon .glyph path:nth-child(1) { animation-delay: 1.7s; }
.canon .glyph .g-dome { fill: var(--violet); animation-delay: 1.95s; }
.canon .glyph path:nth-child(3) { animation-delay: 2.2s; }
.canon .labels text { font: 300 0.42px var(--sans); fill: var(--violet); opacity: 0; animation: appear .6s ease 1.3s forwards, fade-line 1.2s ease 3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes fade-line { to { opacity: .28; } }
@keyframes carve { from { opacity: 0; transform: scale(.92) translateY(.3px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .vit-hero { grid-template-columns: 1fr; gap: 20px; } .vit-mark { order: -1; } .canon { width: 210px; } .vit-word { width: 210px; } }

.figures { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figure { border-top: 2px solid #000; padding: 18px 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.figure + .figure { margin-left: 18px; }
.figure .clock { font-size: clamp(40px, 4.4vw, 60px); line-height: 1; }
@media (max-width: 820px) { .figures { grid-template-columns: 1fr 1fr; gap: 26px 0; } .figure:nth-child(3) { margin-left: 0; } }

.live { margin-top: clamp(80px, 10vw, 130px); background: var(--night); color: #fff; padding: 56px var(--gutter) 62px; }
.live-in { max-width: var(--max); margin: 0 auto; }
.live .caption { color: #a3a1b0; }
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
@media (max-width: 1060px) { .live-grid { grid-template-columns: 1fr; } }
.guide { border: 1px solid var(--night-line); padding: 16px 14px 14px; display: flex; flex-direction: column; }
.guide-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.guide-head .tag { --t: 16px; }
.guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.guide-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 8px; cursor: pointer; }
.guide-list li:hover { background: rgba(255,255,255,.07); }
.guide-list li.on { background: var(--violet); }
.guide-list li.off { opacity: .4; cursor: default; }
.g-num { width: 28px; height: 28px; border: 1px solid #5a5866; display: grid; place-items: center; font: 300 11px/1 var(--sans); }
.guide-list li.on .g-num { background: #fff; color: var(--violet); border-color: #fff; }
.g-name { font: 300 12px/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; min-width: 0; }
.g-who { display: block; font: 400 14px/1.2 var(--display); letter-spacing: .02em; color: #a3a1b0; margin-top: 3px; }
.guide-list li.on .g-who { color: #e7deff; }
.g-time { font-size: 18px; padding-top: .12em; }
.guide-empty { color: #a3a1b0; font-size: 13px; cursor: default !important; display: block !important; }
.guide-more { margin-top: auto; padding-top: 18px; }
.guide-more .item { color: #fff; font-size: 12px; letter-spacing: .14em; gap: 10px; }
.guide-more .item .sq { width: 26px; height: 26px; border-color: #5a5866; color: #fff; font-size: 13px; }

.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.value { border-top: 2px solid #000; padding-top: 18px; }
.value .tag { --t: 22px; margin-bottom: 16px; }
.value p { color: var(--text); font-size: 16px; }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; gap: 34px; } }

.branches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.branch { border: 1px solid var(--hair); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 270px; }
.branch-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 34px; margin-bottom: auto; }
.branch-top .tag { --t: 15px; }
.branch-code { font: 400 34px/1 var(--display); color: var(--hair); }
.branch.on { border: 2px solid var(--violet); padding: 17px 17px 19px; }
.branch.on .branch-code { color: var(--violet); }
.branch h3 { font: 400 25px/1 var(--display); text-transform: uppercase; padding-top: .12em; }
.branch p { color: var(--text); font-size: 15px; min-height: 6.4em; }
.branch.off h3 { color: var(--mist); }
.redact { background: #000; color: #000; line-height: 1.9; user-select: none; }
@media (max-width: 1020px) { .branches { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .branches { grid-template-columns: 1fr; } .branch { min-height: 0; } .branch p { min-height: 0; } .branch-top { padding-bottom: 16px; } }

.faq-list { border-top: 2px solid #000; max-width: 880px; }
.faq-list details { border-bottom: 1px solid var(--hair); }
.faq-list summary { list-style: none; cursor: pointer; padding: 18px 48px 14px 0; font: 400 23px/1.15 var(--display); text-transform: uppercase; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 1px solid rgba(0,0,0,.45);
  display: grid; place-items: center; font: 300 18px/1 var(--sans); transition: background .15s, color .15s; }
.faq-list summary:hover::after, .faq-list details[open] summary::after { background: var(--violet); border-color: var(--violet); color: #fff; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { color: var(--text); margin: 0 0 20px; max-width: 720px; }
.faq-list a { color: var(--violet); }

/* ------------------------------------------------------------ Pages simples (confidentialité, 404) */
.doc { max-width: 820px; margin: 0 auto; padding: 56px var(--gutter) 40px; }
.doc h1 { margin: 22px 0 14px; }
.doc h2 { font: 400 25px/1.1 var(--display); text-transform: uppercase; margin: 44px 0 12px; padding-top: .12em; }
.doc p, .doc li { color: var(--text); }
.doc p { margin: 0 0 12px; }
.doc ul { padding-left: 20px; }
.doc li { margin: 8px 0; }
.doc b { font-weight: 300; color: #000; box-shadow: inset 0 -2px 0 var(--violet-soft); }
.doc .lang { display: flex; gap: 14px 30px; margin: 22px 0 36px; flex-wrap: wrap; }
.doc section + section { margin-top: 80px; padding-top: 60px; border-top: 2px solid #000; }
.doc .card { background: var(--stripe); padding: 18px 22px; margin: 14px 0; }
.doc .card p { margin: 3px 0; }
.doc a { color: var(--violet); }

.lost { min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px max(var(--gutter), calc((100vw - 760px) / 2)); gap: 20px; }
.lost-logo { width: 220px; height: auto; margin-left: -4px; }
.lost p { color: var(--text); max-width: 460px; }
.lost nav { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }

/* ?tv : l'écran du direct seul, plein cadre (captures de contrôle). */
body.tvmode .screen { position: fixed; inset: 0; z-index: 100; aspect-ratio: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .canon .construction > *, .canon .glyph path, .canon .labels text, .vit-word, .vit-mark figcaption { stroke-dashoffset: 0; opacity: 1; }
  .hdr-records-move { position: static; }
}