/* ═══════════════════════════════════════════════════════════════════════════
   INDEX Paddock — socle commun à toutes les pages.

   Jetons relevés sur index4g.com (css/site.css de production) et sur la
   maquette Claude Design (claude-design/INDEX Paddock design/). Règles de la
   charte, à ne pas assouplir :
   - zéro arrondi, partout (les voitures et les pastilles d'écurie sont des
     DONNÉES : elles seules restent rondes, via .dot) ;
   - Bebas Neue en graisse 400 uniquement, jamais de faux gras ;
   - l'or sert à l'interaction et au pilote mis en avant, les couleurs
     d'écurie ne servent qu'aux données ;
   - pas de pastille de statut décorative : un statut est du texte coloré ;
   - mouvement calme, et rien quand prefers-reduced-motion le demande.
   Chaque page ajoute sa feuille (home.css, replay.css…) sans redéfinir ceci.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #0a0a0a;
  --bg-raise:  #151515;
  --bg-map:    #0c0c0c;
  --bg-panel:  #0d0d0d;
  --text:      #f0eff0;
  --muted:     #b5b5b5;
  --dim:       #808080;          /* 4,9:1 sur le fond : texte qui porte une information (AA) */
  --off:       #4a4a4a;          /* décoration seulement (filets, graduations) : 2,2:1 */
  --gold:      #e5c469;
  --success:   #22c55e;
  --signal:    #f44336;
  --sc:        #f5c518;          /* voiture de sécurité : bloc jaune plein, texte noir */
  --purple:    #c08cff;          /* meilleur tour */
  --brake:     #ff5a36;
  --rain:      #3a8ee6;
  --surface:   rgba(255,255,255,.055);
  --line:      rgba(255,255,255,.1);
  --line-soft: rgba(255,255,255,.06);
  --line-hard: rgba(255,255,255,.18);

  --tyre-s: #ef3b3b;
  --tyre-m: #f5c518;
  --tyre-h: #f0eff0;
  --tyre-i: #3fbf5f;
  --tyre-w: #3a8ee6;

  --display: 'Bebas Neue', Impact, sans-serif;
  --body:    'Satoshi', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 6.6vw, 96px);
  --maxw: 1680px;
  --hdr: 64px;
  --section-pad: clamp(72px, 9vw, 136px);
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr); }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: var(--body); font-size: 16px; line-height: 1.5; min-height: 100vh; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible {
  outline: 1px solid var(--gold); outline-offset: 2px;
}
p { margin: 0; color: var(--muted); text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── Typographie ─────────────────────────────────────────────────────────── */
.d  { font-family: var(--display); font-weight: 400; letter-spacing: .02em; line-height: .9; }
.m  { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.label--mini { font-size: 9px; letter-spacing: .16em; color: var(--dim); }
.gold { color: var(--gold); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }

/* Titre de section : numéro mono, titre Bebas en deux lignes (la 2e en or),
   une phrase, puis les données. Les titres ne se coupent jamais au milieu
   d'un mot et ne débordent jamais sur la suite (défaut vu sur la maquette). */
.sec { padding: var(--section-pad) var(--gutter); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.sec__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.sec__titles { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sec__kicker { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.sec__kicker b { font-weight: 400; color: var(--gold); }
.sec__title { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 10.5vw, 168px); line-height: .9; padding-bottom: .04em; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.sec__title > span { display: block; }
.sec__title > span + span { color: var(--gold); }
.sec__lede { max-width: 420px; font-size: 15px; color: var(--muted); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 24px;
  border: 1px solid rgba(255,255,255,.25); font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; white-space: nowrap; color: var(--text);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--primary { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 500; }
.btn--primary:hover { background: transparent; color: var(--text); }
.btn--small { height: 32px; padding: 0 12px; font-size: 10px; letter-spacing: .18em; }
/* Sur petit écran, un libellé long passe à la ligne au lieu d'élargir la page
   (« RESUMEN COMPLETO DE LA CARRERA → » en espagnol, à 320 px). */
@media (max-width: 479px) {
  .btn { white-space: normal; height: auto; min-height: 52px; padding-top: 12px; padding-bottom: 12px; line-height: 1.4; }
  .btn--small { min-height: 32px; padding-top: 6px; padding-bottom: 6px; }
}
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg > button { height: 28px; padding: 0 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.seg > button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* ── Données : pilotes, pneus ────────────────────────────────────────────── */
/* Voiture 1 = point plein, voiture 2 = anneau de la même couleur. */
.dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--dim)); }
.dot--2 { background: transparent; border: 2px solid var(--c, var(--dim)); }
.bar-team { display: inline-block; width: 28px; height: 3px; background: var(--c, var(--dim)); flex: none; }
.code { font-family: var(--mono); font-weight: 700; letter-spacing: .06em; }
.tyre {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; border: 1.5px solid var(--c); color: var(--c);
  font-family: var(--mono); font-size: 9px; font-weight: 700; line-height: 1;
}
.tyre[data-c="SOFT"] { --c: var(--tyre-s); }
.tyre[data-c="MEDIUM"] { --c: var(--tyre-m); }
.tyre[data-c="HARD"] { --c: var(--tyre-h); }
.tyre[data-c="INTERMEDIATE"] { --c: var(--tyre-i); }
.tyre[data-c="WET"] { --c: var(--tyre-w); }
.flag-sc { display: inline-block; background: var(--sc); color: var(--bg); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; padding: 3px 7px; white-space: nowrap; }

/* ── Tableaux mono ───────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.table th { text-align: left; font-weight: 400; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); padding: 0 8px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 0 8px 0 0; height: 40px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.table .r { text-align: right; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
/* Même construction et mêmes mesures que l'en-tête d'index4g.com (css/site.css
   de production) : logo, filet, état à gauche ; liens, filet, bouton, filet,
   langue à droite. Filets de 1 × 20 px, textes mono de 11 px, bouton de 32 px. */
.hdr {
  position: sticky; top: 0; z-index: 100; height: var(--hdr);
  display: flex; align-items: center; gap: 24px;
  /* Même largeur utile que le contenu (plafonné à --maxw) sur très grand écran. */
  padding: 0 max(var(--gutter), calc((100% - var(--maxw)) / 2));
  background: rgba(21,21,21,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr__left, .hdr__right, .hdr__stat, .hdr__navgrp, .hdr__langgrp { display: flex; align-items: center; flex: none; }
.hdr__left { gap: 20px; }
.hdr__stat, .hdr__navgrp, .hdr__langgrp { gap: 18px; }
.hdr__stat { gap: 20px; }
.hdr__right { gap: 18px; }
.hdr__spacer { flex: 1; }
.hdr__sep { width: 1px; height: 20px; background: var(--line); flex: none; }
.hdr__logo { display: flex; align-items: baseline; gap: 10px; flex: none; }
.hdr__logo span { font-family: var(--display); font-size: 28px; line-height: 1; letter-spacing: .14em; }
.hdr__logo span + span { color: var(--dim); }
/* Centrage OPTIQUE : Bebas Neue n'a que des capitales mais réserve la place
   d'un jambage sous la ligne de base, si bien que ses lettres, centrées sur
   leur boîte, montent d'environ 1 px. */
.hdr__logo { transform: translateY(1px); }
.hdr__nav { display: flex; gap: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.hdr__nav a { color: var(--dim); white-space: nowrap; transition: color .25s var(--ease); }
.hdr__nav a:hover, .hdr__nav a[aria-current="page"], .hdr__nav a[aria-current="true"] { color: var(--text); }
.hdr__status { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hdr__status.is-next { color: var(--gold); }
/* Bouton : l'idiome .hdr__btn d'index4g.com (filet, survol inversé, focus or). */
.hdr__ext, .hdr__menu {
  display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px;
  border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--muted); white-space: nowrap;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.hdr__ext:hover, .hdr__menu:hover { color: var(--bg); background: var(--text); border-color: var(--text); }
.hdr__ext:focus-visible, .hdr__menu:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; color: var(--text); border-color: var(--gold); }
.hdr__menu { display: none; }
/* Langue : comme le sélecteur d'index4g.com, un code en texte simple (la
   langue courante en blanc) ; la liste se déroule au clic. */
.hdr__langs { position: relative; flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; }
.hdr__langs > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; height: 32px; color: var(--text); white-space: nowrap; }
.hdr__langs > summary::-webkit-details-marker { display: none; }
.hdr__langs > summary:hover { color: var(--gold); }
.hdr__langlist {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 110; min-width: 170px;
  display: flex; flex-direction: column; background: var(--bg-raise); border: 1px solid var(--line-hard);
}
.hdr__langlist .hdr__langlink { display: flex; gap: 10px; padding: 10px 14px; color: var(--muted); letter-spacing: .1em; }
.hdr__langlist .hdr__langlink b { font-weight: 700; color: var(--dim); min-width: 2ch; }
.hdr__langlist .hdr__langlink:hover { background: var(--surface); color: var(--text); }
.hdr__langlist .hdr__langlink[aria-current="true"], .hdr__langlist .hdr__langlink[aria-current="true"] b { color: var(--gold); }
.hdr__langlink { color: var(--dim); }
.hdr__langlink[aria-current="true"] { color: var(--text); }
.hdr__drawerlangs { display: flex; gap: 18px; padding-top: 14px; }
.hdr__drawerlangs .hdr__langlink { border: 0; padding: 0; }
.hdr__drawer { display: none; }

/* Mode MENU : sous 1100 px, ET dès que l'en-tête ne tient pas sur sa ligne
   (core.js pose .is-compact en le mesurant). Un seuil fixe ne suffisait pas :
   la largeur utile dépend de la langue et de l'état affiché. */
@media (max-width: 1099px) {
  .hdr { gap: 16px; }
  .hdr__navgrp, .hdr__nav, .hdr__ext { display: none; }
  .hdr__menu { display: inline-flex; }
}
.hdr.is-compact { gap: 16px; }
.hdr.is-compact .hdr__navgrp, .hdr.is-compact .hdr__nav, .hdr.is-compact .hdr__ext { display: none; }
.hdr.is-compact .hdr__menu { display: inline-flex; }
/* Sous 640 px, l'état quitte l'en-tête (il est repris dans la page), comme sur
   index4g.com ; sous 480 px la langue passe dans le menu et le logo réduit. */
@media (max-width: 639px) { .hdr__stat { display: none; } }
@media (max-width: 479px) {
  .hdr__langgrp { display: none; }
  .hdr__logo span { font-size: 22px; letter-spacing: .12em; }
}
.hdr__drawer[data-open="true"] {
  display: flex; flex-direction: column; position: fixed; z-index: 99; top: var(--hdr); left: 0; right: 0;
  background: var(--bg-raise); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px;
}
.hdr__drawer a { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.ftr { padding: clamp(56px, 6vw, 88px) max(var(--gutter), calc((100% - var(--maxw)) / 2)) 40px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 40px; }
.ftr__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; }
.ftr__brand { display: flex; flex-direction: column; gap: 14px; }
.ftr__word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; font-family: var(--display); font-size: clamp(48px, 6vw, 88px); line-height: .9; }
.ftr__word span:first-child { letter-spacing: .3em; }
.ftr__word span + span { letter-spacing: .16em; color: var(--off); }
.ftr__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 48px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
.ftr__cols > div { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }

/* ── États ───────────────────────────────────────────────────────────────── */
.skeleton { background: rgba(255,255,255,.06); min-height: 8px; }
.error-note { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--signal); }
.error-box { display: flex; flex-direction: column; gap: 18px; padding: var(--section-pad) var(--gutter); }
.error-links { display: flex; gap: 10px; flex-wrap: wrap; }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjg1IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAuOSAwIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+"); }