/* ═══════════════════════════════════════════════════════════════════════
   SRO — Site officiel (étape 1 : fondations)
   Couleur dominante : Jaune SRO
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette SRO */
  --sro-yellow:        #FFCB05;   /* jaune SRO officiel */
  --sro-yellow-deep:   #E8B400;   /* jaune appuyé (hover/shadow) */
  --sro-yellow-soft:   #FFE066;   /* jaune doux (gradient) */
  --accent:            var(--sro-yellow);

  /* Backgrounds */
  --bg-0:    #050608;
  --bg-1:    #0a0c10;
  --bg-2:    #11141a;
  --bg-3:    #181c24;
  --bg-card: rgba(20, 23, 30, 0.85);

  /* Lignes */
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Texte */
  --text:      #e8eaee;
  --text-mute: #8a8f99;
  --text-dim:  #5a5f6a;

  /* Fonts */
  --mono:    'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 203, 5, 0.08), transparent 60%),
    var(--bg-0);
  min-height: 100vh;
  overflow-x: hidden;
}

a       { color: inherit; text-decoration: none; }
button  { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.site { max-width: 100vw; overflow-x: hidden; }

/* ─────────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 32px;
  padding: 16px 40px;
  background: rgba(5, 6, 8, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--sro-yellow);
  color: #000;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  box-shadow: 0 0 20px rgba(255, 203, 5, 0.4);
}
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; }
.logo-tag  { font-size: 10px; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }

.site-nav { display: flex; gap: 28px; flex: 1; }
.site-nav a {
  font-size: 13px; color: var(--text-mute); font-weight: 500;
  letter-spacing: 0.02em; transition: color 0.15s;
}
.site-nav a:hover { color: var(--text); }
.site-nav .nav-team {
  color: var(--sro-yellow);
  border: 1px solid rgba(255, 203, 5, 0.35);
  border-radius: 100px;
  padding: 4px 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s;
}
.site-nav .nav-team:hover {
  background: rgba(255, 203, 5, 0.12);
  border-color: var(--sro-yellow);
  color: var(--sro-yellow);
}

.header-right { display: flex; align-items: center; gap: 16px; }
.lang-toggle {
  display: flex; gap: 4px; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
}
.lang-toggle .on { color: var(--text); }
.lang-sep        { color: var(--text-dim); }
.header-cta {
  padding: 9px 16px; border-radius: 8px;
  background: var(--sro-yellow);
  color: #000; font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
  transition: transform 0.15s, box-shadow 0.15s;
}
.header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 203, 5, 0.35);
}

/* ─────────────────────────────────────────────────────────────────────
   TYPO COMMUNE
   ───────────────────────────────────────────────────────────────────── */
.section-head {
  max-width: 760px; margin: 0 auto 56px; text-align: center; padding: 0 24px;
}
.section-title {
  font-family: var(--display); font-weight: 700; font-size: 52px;
  letter-spacing: -0.02em; line-height: 1.05;
  margin-bottom: 18px; text-wrap: balance;
}
.section-sub {
  font-size: 17px; color: var(--text-mute); line-height: 1.55;
  text-wrap: pretty; max-width: 580px; margin: 0 auto;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--text-mute); text-transform: uppercase; margin-bottom: 18px;
}
.eb-bar { width: 24px; height: 2px; background: var(--sro-yellow); }

/* ─────────────────────────────────────────────────────────────────────
   HERO (squelette — dashboard ajouté étape 2)
   ───────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 92vh;
  padding: 80px 40px 100px;
  overflow: hidden;
}
.hero-bg     { position: absolute; inset: 0; pointer-events: none; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}
.hero-glow {
  position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 700px; filter: blur(80px); opacity: 0.55;
  background: radial-gradient(circle, rgba(255,203,5,0.32) 0%, transparent 60%);
}
.hero-streak {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sro-yellow), transparent);
  opacity: 0.5;
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 48px; align-items: center;
  max-width: 1480px; margin: 0 auto;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--text-mute); text-transform: uppercase;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 100px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 24px;
}
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sro-yellow); box-shadow: 0 0 10px var(--sro-yellow); }

.hero-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 0.96; letter-spacing: -0.035em;
  margin-bottom: 28px;
}
.hero-title .ht-l1, .hero-title .ht-l2 { display: block; }
.hero-title .ht-l2 { color: var(--sro-yellow); }

.hero-summary {
  font-size: 18px; line-height: 1.6; color: var(--text-mute);
  max-width: 540px; margin-bottom: 36px; text-wrap: pretty;
}

.hero-ctas { display: flex; gap: 14px; align-items: center; margin-bottom: 36px; flex-wrap: wrap; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 10px;
  background: var(--sro-yellow);
  color: #000; font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 8px 24px rgba(255, 203, 5, 0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 203, 5, 0.45);
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px; border-radius: 10px;
  color: var(--text); font-weight: 500; font-size: 14px;
  border: 1px solid var(--line-strong);
  transition: border-color 0.15s, background 0.15s;
}
.btn-ghost:hover { border-color: var(--text-mute); background: rgba(255,255,255,0.03); }

.hero-meta { display: flex; gap: 28px; flex-wrap: wrap; }
.hm-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mute); }
.hm-tick {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.05); color: var(--sro-yellow);
  font-size: 11px; font-weight: 700;
}

.hero-right { position: relative; min-height: 360px; display: flex; justify-content: center; align-items: center; }

.hero-live-tag {
  display: inline-flex; align-items: center; gap: 8px;
  position: absolute; top: -12px; right: 0; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: #ff5050;
  padding: 6px 10px;
  background: rgba(20, 0, 0, 0.85);
  border: 1px solid rgba(255, 80, 80, 0.4);
  border-radius: 4px;
}
.hlt-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5050; animation: hltPulse 1.5s ease-in-out infinite; }
@keyframes hltPulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

/* ─────────────────────────────────────────────────────────────────────
   DASHCENTER WIDGET (fidèle à DashCenter.vue, 520×280)
   ───────────────────────────────────────────────────────────────────── */
.dc-wrapper {
  position: relative;
  display: inline-block;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.7));
}

.dash {
  width: 520px;
  height: 280px;
  background: rgba(8, 10, 14, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  --scale: 1;
}

/* Sections génériques */
.dash .section {
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Header top — 28px fixe */
.dash .section-header-top {
  flex: 0 0 28px;
  padding: 0 12px;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dash .header-group { display: flex; align-items: center; gap: 8px; }
.dash .header-tag {
  font-family: 'Orbitron', sans-serif;
  font-size: 8px; font-weight: 700; letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
}
.dash .game-time, .dash .irl-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500; color: #fff;
}
.dash .leds { display: flex; gap: 3px; }
.dash .led {
  width: 14px; height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.dash .led.on.green  { background: #00ff88; box-shadow: 0 0 4px rgba(0, 255, 136, 0.5); }
.dash .led.on.yellow { background: #e8c84a; box-shadow: 0 0 4px rgba(232, 200, 74, 0.5); }
.dash .led.on.red    { background: #e84a4a; box-shadow: 0 0 4px rgba(232, 74, 74, 0.5); }

/* Header info — drapeaux + météo (32px) */
.dash .section-header-info {
  flex: 0 0 32px;
  padding: 0 12px;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dash .flags-row { display: flex; gap: 4px; align-items: center; }
.dash .flag {
  width: 22px; height: 16px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px; font-weight: 900;
}
.dash .flag.active.green {
  background: #00c97a; border-color: #00ff88;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
  color: #001a0c;
}
.dash .flag.active.yellow {
  background: #e8c84a; border-color: #ffd700;
  box-shadow: 0 0 8px rgba(232, 200, 74, 0.7);
  color: #1a1400;
}

.dash .weather-row { display: flex; gap: 10px; align-items: center; }
.dash .weather-icon { width: 16px; height: 16px; flex-shrink: 0; }
.dash .weather-item {
  display: flex; align-items: baseline; gap: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(11px * var(--scale));
  font-weight: 500; color: #fff;
}
.dash .w-label {
  font-family: 'Orbitron', sans-serif;
  font-size: calc(8px * var(--scale));
  font-weight: 700; letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.45);
}

/* Main — speed/gear/position */
.dash .section-main {
  flex: 3;
  padding: 0 16px;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dash .speed-block, .dash .gear-block, .dash .pos-block {
  display: flex; flex-direction: column; justify-content: center;
}
.dash .speed-block { align-items: flex-start; }
.dash .gear-block  { align-items: center; flex: 1; }
.dash .pos-block   { align-items: flex-end; }

.dash .mini-label {
  font-family: 'Orbitron', sans-serif;
  font-size: calc(9px * var(--scale));
  font-weight: 700; letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 2px;
}
.dash .speed {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: calc(48px * var(--scale));
  color: #e8c84a;
  line-height: 1; letter-spacing: -1px;
}
.dash .speed-unit {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(10px * var(--scale));
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 2px; font-weight: 500;
}
.dash .gear {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: calc(64px * var(--scale));
  color: #33ceff;
  line-height: 1;
  text-shadow: 0 0 20px rgba(51, 206, 255, 0.3);
}
.dash .rpm {
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(10px * var(--scale));
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}
.dash .position {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: calc(32px * var(--scale));
  color: #fff; line-height: 1;
}
.dash .pos-total {
  font-size: calc(12px * var(--scale));
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}
.dash .pos-line { display: flex; align-items: baseline; gap: calc(6px * var(--scale)); flex-wrap: nowrap; }

/* Blocs */
.dash .section-blocks {
  flex: 2;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dash .block {
  flex: 1;
  padding: 4px 10px;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  gap: 1px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.dash .block:last-child { border-right: none; }
.dash .block-label {
  font-family: 'Orbitron', sans-serif;
  font-size: calc(8px * var(--scale));
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
}
.dash .block-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(16px * var(--scale));
  font-weight: 700; color: #fff; line-height: 1;
}
.dash .block-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(9px * var(--scale));
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.dash .block-value.gap   { color: #e84a4a; }
.dash .block-value.fuel  { color: #4ae87a; }
.dash .block-value.best  { color: #b44ae8; }
.dash .block-value.inc   { color: #e8c84a; }

/* Pneus */
.dash .section-tires {
  flex: 2;
  padding: 0 12px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 8px;
}
.dash .tire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  flex: 1; max-width: 220px;
}
.dash .tire { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.dash .tire-pos {
  font-family: 'Orbitron', sans-serif;
  font-size: calc(9px * var(--scale));
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 1px; font-weight: 700;
  min-width: 18px;
}
.dash .tire-bar {
  flex: 1; height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 1px; position: relative; overflow: hidden;
}
.dash .tire-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1px; }
.dash .tire-temp {
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(13px * var(--scale));
  font-weight: 700; line-height: 1;
  min-width: 36px; text-align: right;
}
.dash .compound-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  gap: 2px;
}
.dash .compound-label {
  font-family: 'Orbitron', sans-serif;
  font-size: calc(8px * var(--scale));
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
}
.dash .compound {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: calc(22px * var(--scale));
  color: #FFD700; line-height: 1;
}
.dash .t-cold { color: #4ab3e8; }
.dash .t-ok   { color: #4ae87a; }
.dash .t-warm { color: #e8c84a; }
.dash .t-hot  { color: #e87a4a; }
.dash .t-over { color: #e84a4a; }

/* Aides */
.dash .section-aides {
  flex: 1;
  padding: 0 12px;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  gap: 8px;
}
.dash .aide-group { display: flex; gap: 8px; }
.dash .aide {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.dash .aide-label {
  font-family: 'Orbitron', sans-serif;
  font-size: calc(9px * var(--scale));
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px; font-weight: 700;
}
.dash .aide-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(12px * var(--scale));
  font-weight: 700; color: #fff;
}
.dash .aide.water .aide-value { color: #4ab3e8; }
.dash .aide.oil   .aide-value { color: #e8a54a; }

@media (max-width: 600px) {
  .dash { width: 100%; max-width: 520px; }
}

/* ─────────────────────────────────────────────────────────────────────
   MAP WIDGET (fidèle à MapWidget.vue, canvas double-stroke)
   ───────────────────────────────────────────────────────────────────── */
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.map-widget {
  position: relative;
  background: rgba(8, 10, 14, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
}
.map-widget .map-body {
  position: relative;
  width: 100%;
  height: 100%;
}
.map-widget .canvas-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}
.map-widget .map-track-label {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--sro-yellow);
  text-shadow: 0 0 8px rgba(0,0,0,0.9);
  pointer-events: none;
}

.hero-side-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
}

@media (max-width: 1100px) {
  .hero-stack     { flex-direction: column; align-items: center; }
  .hero-side-row  { flex-direction: column; align-items: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   FUEL WIDGET (fidèle à FuelWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.fw {
  --fw-accent: #e84a4a;          /* WIDGET_COLORS.fuel */
  position: relative;
  width: 228px;                  /* aligné sur hauteur map (280) */
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 16px;
  background: rgba(8, 10, 14, 1);
  border-radius: 8px;
  border: 1px solid transparent;
  user-select: none;
  transition: border-color 0.3s;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
}
.fw.fw-alert { border-color: rgba(232, 74, 74, 0.4); }

.fw .fw-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  font-weight: 600;
}
.fw.fw-alert .fw-label { color: #e84a4a; }

.fw .fw-main { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.fw .fw-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px; font-weight: 700;
  color: var(--fw-accent);
  line-height: 1;
}
.fw .fw-unit {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; color: rgba(255, 255, 255, 0.4);
}

.fw .fw-bar-track {
  width: 100%; height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px; overflow: hidden;
}
.fw .fw-bar-fill {
  height: 100%;
  background: var(--fw-accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.fw .fw-row { display: flex; justify-content: space-between; align-items: baseline; }
.fw .fw-sub-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.fw .fw-sub-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600;
}
.fw .fw-laps { color: #e8c84a; }
.fw.fw-alert .fw-laps { color: #e84a4a; }
.fw .fw-avg  { color: rgba(255, 255, 255, 0.5); }
.fw .fw-add {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  color: #4ae87a;
}

/* Alerte clignotement */
@keyframes fwBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.3; }
}
.fw .blink { animation: fwBlink 1s infinite; }

/* Rail latéral */
.fw .rail {
  position: absolute;
  top: -1px; bottom: -1px;
  width: 3px;
  background: var(--fw-accent);
  transition: transform .22s cubic-bezier(.7,0,.3,1), opacity .15s;
}
.fw .rail.left  { left: 0;  border-radius: 8px 0 0 8px; }
.fw .rail.right { right: 0; border-radius: 0 8px 8px 0; }
.fw[data-side="left"]  .rail.left  { transform: translateX(0); opacity: 1; }
.fw[data-side="left"]  .rail.right { transform: translateX(3px); opacity: 0; }
.fw[data-side="right"] .rail.left  { transform: translateX(-3px); opacity: 0; }
.fw[data-side="right"] .rail.right { transform: translateX(0); opacity: 1; }
.fw[data-side="center"] .rail.left  { transform: translateX(0); opacity: 1; }
.fw[data-side="center"] .rail.right { transform: translateX(0); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   PILLARS — section 3 piliers
   ───────────────────────────────────────────────────────────────────── */
.pillars-section { padding: 100px 40px; max-width: 1480px; margin: 0 auto; }
.pillars-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.pillar-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.pillar-tag {
  display: inline-flex;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.15em;
  padding: 4px 10px;
  border: 1px solid var(--sro-yellow);
  color: var(--sro-yellow);
  border-radius: 100px;
  align-self: flex-start;
}
.pillar-t {
  font-family: var(--display);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
}
.pillar-d {
  color: var(--text-mute);
  font-size: 14px; line-height: 1.6;
}

.p-demo {
  height: 180px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
}

/* Démo FPS */
.p-demo-fps { display: flex; flex-direction: column; padding: 16px; gap: 10px; }
.pdf-fps { display: flex; align-items: baseline; gap: 8px; }
.pdf-fps-l {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--text-dim);
}
.pdf-fps-v {
  font-family: var(--display);
  font-size: 28px; font-weight: 700;
  color: var(--sro-yellow);
  letter-spacing: -0.02em;
}
.pdf-graph { flex: 1; }
.pdf-graph svg { width: 100%; height: 100%; }
.pdf-procs {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono); font-size: 11px;
}
.pdf-proc {
  display: grid; grid-template-columns: 8px 1fr auto;
  gap: 8px; align-items: center;
  color: var(--text-mute);
}
.pdf-proc-c { width: 8px; height: 8px; border-radius: 2px; }
.pdf-proc-v { color: #fff; font-weight: 600; }

/* Démo profils */
.p-demo-profiles { padding: 20px; }
.pdp-card {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  height: 100%;
  display: flex; flex-direction: column; gap: 10px;
}
.pdp-tag {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--text-dim);
}
.pdp-name {
  font-family: var(--display);
  font-size: 18px; font-weight: 600;
  color: var(--sro-yellow);
}
.pdp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px; flex: 1;
}
.pdp-cell {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: all 0.3s;
  min-height: 18px;
}
.pdp-cell.active {
  background: rgba(255, 203, 5, 0.20);
  border-color: var(--sro-yellow);
}

/* Démo multi-écrans */
.p-demo-screens {
  display: flex; align-items: center; justify-content: space-around;
  padding: 20px;
}
.pds-pc {
  width: 120px; height: 80px;
  border: 2px solid var(--line-strong);
  border-radius: 6px; padding: 4px;
  position: relative;
}
.pds-pc::after {
  content: ''; position: absolute;
  bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 6px;
  background: var(--line-strong);
  border-radius: 0 0 4px 4px;
}
.pds-pc-screen {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0a0c10, #1a1d24);
  border-radius: 3px;
}
.pds-conn { width: 100px; height: 60px; }
.pds-phone {
  width: 50px; height: 100px;
  border: 2px solid var(--line-strong);
  border-radius: 8px; padding: 4px;
}
.pds-phone-screen {
  width: 100%; height: 100%;
  background: #0a0c10;
  border-radius: 4px;
  padding: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
}
.pds-phone-spd {
  font-family: var(--display);
  font-size: 22px; font-weight: 700;
  color: #fff; line-height: 1;
  letter-spacing: -0.02em;
}
.pds-phone-unit {
  font-family: var(--mono);
  font-size: 8px; color: var(--text-mute);
  letter-spacing: 0.1em;
}
.pds-phone-bar {
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
  margin-top: 6px;
}
.pds-phone-bar div { height: 100%; transition: width 0.3s; }

@media (max-width: 1100px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   GALERIE DE WIDGETS — section
   ───────────────────────────────────────────────────────────────────── */
.widgets-section { padding: 100px 40px; max-width: 1480px; margin: 0 auto; }
.widgets-stage   { display: flex; flex-direction: column; gap: 16px; }
.ws-row          { display: grid; gap: 16px; }
.ws-row-top      { grid-template-columns: 1.6fr 1fr; }
.ws-row-3        { grid-template-columns: repeat(3, 1fr); }
.ws-row-4        { grid-template-columns: repeat(4, 1fr); }
.ws-slot-empty   {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.01);
  min-height: 200px;
  opacity: 0.4;
}
.ws-card-desc-mini { font-size: 11px; color: var(--text-mute); }
.ws-card-wide-2    { grid-column: span 2; }
@media (max-width: 1100px) { .ws-card-wide-2 { grid-column: span 1; } }
.ws-card, .ws-card-mini {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.2s;
  min-width: 0;
}
.ws-card:hover, .ws-card-mini:hover { border-color: var(--line-strong); }
.ws-card-head {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.ws-card-name { font-family: var(--display); font-size: 14px; font-weight: 600; }
.ws-card-desc { font-size: 12px; color: var(--text-mute); }

/* ─────────────────────────────────────────────────────────────────────
   STANDINGS WIDGET (fidèle à StandingWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.standings-widget {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  background: rgb(8, 10, 14);
  --sw-font-weight: 600;
}

.standings-widget .sw-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.standings-widget .sw-track {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.88);
}
.standings-widget .sw-sess {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: #e8c84a; opacity: 0.9;
}

.standings-widget .sw-grid-wrap { position: relative; overflow: hidden; }

.standings-widget .st-row { display: grid; align-items: center; height: 40px; }
.standings-widget .st-header { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.standings-widget .st-hcell {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 5px 8px;
  white-space: nowrap; font-weight: 600;
  user-select: none; position: relative;
}
.standings-widget .st-hcell.c { text-align: center; }
.standings-widget .st-hcell.r { text-align: right; }

.standings-widget .st-cell {
  padding: 0 8px; overflow: hidden; height: 40px;
  display: flex; align-items: center;
}
.standings-widget .st-cell.c { justify-content: center; }
.standings-widget .st-cell.r { justify-content: flex-end; }

.standings-widget .st-body > .st-row { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.standings-widget .st-body > .st-row:last-child { border-bottom: none; }

/* Surbrillance joueur / focus / pit */
.standings-widget .st-body > .st-row.player > .st-cell:first-child   { border-left: 2px solid #e8c84a; }
.standings-widget .st-body > .st-row.focused > .st-cell:first-child  { border-left: 2px solid #e87a4a; }
.standings-widget .st-body > .st-row.inpit { background: rgba(160, 100, 0, 0.30); }
.standings-widget .st-body > .st-row.dnf   { opacity: 0.3; }
.standings-widget .st-body > .st-row.player .d-name { color: #e8c84a !important; }
.standings-widget .st-body > .st-row.player .d-team { color: rgba(232, 200, 74, 0.5) !important; }
.standings-widget .st-body > .st-row.focused .d-name { color: #e87a4a !important; }
.standings-widget .st-body > .st-row.focused .d-team { color: rgba(232, 122, 74, 0.5) !important; }
.standings-widget .st-body > .st-row.inpit .cell-pit { color: #e8c84a !important; font-weight: 700; }

/* Pos */
.standings-widget .cell-pos {
  display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px;
}
.standings-widget .pos-abs {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: var(--sw-font-weight, 600);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
}
.standings-widget .pos-abs.p1 { font-size: 18px; color: #e8c84a; }

/* Numéro */
.standings-widget .cell-num { display: flex; align-items: center; justify-content: center; height: 40px; }
.standings-widget .car-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: var(--sw-font-weight, 600);
  font-size: 18px; line-height: 1;
}

/* Licence */
.standings-widget .cell-lic { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 4px; }
.standings-widget .lic-pill {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 3px;
  border-left: 3px solid;
  background: rgba(255, 255, 255, 0.04);
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; line-height: 1.5;
  white-space: nowrap;
}

/* Pilote */
.standings-widget .cell-driver {
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; padding: 3px 0; width: 100%;
}
.standings-widget .d-team {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; color: rgba(255, 255, 255, 0.42);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.1;
}
.standings-widget .d-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: var(--sw-font-weight, 600);
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.15;
}
.standings-widget .cell-driver.solo .d-name { font-size: 19px; line-height: 1; }

/* Temps */
.standings-widget .cell-time {
  display: flex; align-items: center; justify-content: flex-end;
  height: 40px; width: 100%;
}
.standings-widget .t-val {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px; line-height: 1;
  color: rgba(255, 255, 255, 0.88);
}
.standings-widget .t-val.class-best { color: #b44ae8; }
.standings-widget .t-val.good       { color: #4ae87a; }

/* Gap */
.standings-widget .cell-gap-single {
  display: flex; align-items: center; justify-content: flex-end;
  height: 40px; width: 100%;
}
.standings-widget .gv {
  font-family: 'Share Tech Mono', monospace;
  font-weight: var(--sw-font-weight, 600);
  font-size: 18px; line-height: 1;
}
.standings-widget .gv.val  { color: #e84a4a; }
.standings-widget .gv.laps { color: #e8c84a; }
.standings-widget .gv.leader-tag {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px; letter-spacing: 1px;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}
.standings-widget .gv.neutral { color: rgba(255, 255, 255, 0.25); }

/* Footer */
.standings-widget .sw-foot {
  display: flex; align-items: center;
  padding: 6px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  gap: 16px; flex-wrap: wrap;
}
.standings-widget .cls-i { display: flex; flex-direction: column; gap: 1px; }
.standings-widget .cls-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 0.5px; font-weight: 700;
}
.standings-widget .cls-sof {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; color: rgba(255, 255, 255, 0.45);
}
.standings-widget .foot-total {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; color: rgba(255, 255, 255, 0.5);
  margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────────────
   RELATIVE WIDGET (fidèle à RelativeWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.relative-widget {
  background: rgb(8, 10, 14);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  font-family: 'Rajdhani', sans-serif;
  color: rgba(255, 255, 255, 0.88);
  --sw-font-weight: 600;
}

.relative-widget .sw-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.relative-widget .sw-track {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.relative-widget .sw-sess {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase;
  color: #e8c84a; opacity: 0.9;
}

.relative-widget .sw-tbl-wrap { position: relative; overflow: hidden; }
.relative-widget table { border-collapse: collapse; table-layout: fixed; }

.relative-widget .sw-hdrs th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  white-space: nowrap; font-weight: 600;
  user-select: none;
}
.relative-widget .sw-hdrs th.c { text-align: center; }
.relative-widget .sw-hdrs th.r { text-align: right; }

.relative-widget tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  height: 40px;
}
.relative-widget tbody tr:last-child { border-bottom: none; }
.relative-widget td { padding: 0 8px; vertical-align: middle; overflow: hidden; }
.relative-widget td.c { text-align: center; }
.relative-widget td.r { text-align: right; }

.relative-widget tr.row-empty { visibility: hidden; }

/* Joueur — surbrillance jaune */
.relative-widget tr.player {
  background: rgba(232, 200, 74, 0.08) !important;
}
.relative-widget tr.player td:first-child { border-left: 2px solid #e8c84a; }
.relative-widget tr.player .d-name { color: #e8c84a !important; }
.relative-widget tr.player .d-team { color: rgba(232, 200, 74, 0.5) !important; }

/* Pit road */
.relative-widget tr.inpit { background: rgba(160, 100, 0, 0.30) !important; }

/* Lapping (en avance d'un tour) — rouge */
.relative-widget tr.lapping .d-name { color: #ff5555 !important; font-weight: 700; }
/* Lapped (en retard) — bleu */
.relative-widget tr.lapped  .d-name { color: #4a9ee8 !important; font-weight: 700; }

/* Pos */
.relative-widget .cell-pos {
  display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px;
}
.relative-widget .pos-abs {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: var(--sw-font-weight, 600);
  font-size: 16px; color: rgba(255, 255, 255, 0.88);
  line-height: 1;
}
.relative-widget .pos-abs.p1 { font-size: 18px; color: #e8c84a; }

/* Numéro */
.relative-widget .cell-num { display: flex; align-items: center; justify-content: center; height: 40px; }
.relative-widget .car-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: var(--sw-font-weight, 600);
  font-size: 18px; line-height: 1;
}

/* Licence */
.relative-widget .cell-lic { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 4px; }
.relative-widget .lic-pill {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 3px;
  border-left: 3px solid;
  background: rgba(255, 255, 255, 0.04);
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; line-height: 1.5;
  white-space: nowrap;
}

/* Pilote */
.relative-widget .cell-driver {
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; padding: 3px 0;
}
.relative-widget .d-team {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.1;
}
.relative-widget .d-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: var(--sw-font-weight, 600);
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.15;
}

/* Gap */
.relative-widget .cell-gap {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 5px; height: 40px;
}
.relative-widget .gv {
  font-family: 'Share Tech Mono', monospace;
  font-weight: var(--sw-font-weight, 600);
  font-size: 18px; line-height: 1;
}
.relative-widget .gv.ahead  { color: #e84a4a; }   /* devant le joueur — rouge */
.relative-widget .gv.behind { color: #4ae87a; }   /* derrière — vert */
.relative-widget .gv.ref {
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 1px;
}
.relative-widget .pit-badge {
  display: inline-block;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(232, 200, 74, 0.15);
  color: #e8c84a;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 9px;
  letter-spacing: 1px; text-transform: uppercase;
}

.relative-widget .sw-foot {
  display: flex; align-items: center;
  padding: 6px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.relative-widget .foot-session {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 1100px) {
  .ws-row-top { grid-template-columns: 1fr; }
  .ws-row-3   { grid-template-columns: 1fr; }
  .ws-row-4   { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────
   TYRES WIDGET (fidèle à TyreWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.tw {
  --tw-accent: #FF6B35;     /* WIDGET_COLORS.tyres */
  position: relative;
  width: 210px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: rgba(8, 10, 14, 1);
  border-radius: 8px;
  user-select: none;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
}
.tw .tw-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  font-weight: 600;
}
.tw .tw-compound { font-weight: 700; }

.tw .tw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tw .tc { display: flex; flex-direction: column; gap: 4px; }
.tw .tc-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.tw .tc-bars {
  display: flex; gap: 3px;
  align-items: flex-end;
  height: 36px;
}
.tw .tc-bar-track {
  flex: 1; height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.tw .tc-bar-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  border-radius: 3px;
  transition: height 0.3s, background 0.3s;
}
.tw .tc-temps { display: flex; gap: 2px; }
.tw .tc-temp {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  flex: 1; text-align: center;
  transition: color 0.3s;
}

/* Rail latéral */
.tw .rail {
  position: absolute; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--tw-accent);
  transition: transform .22s cubic-bezier(.7,0,.3,1), opacity .15s;
}
.tw .rail.left  { left: 0;  border-radius: 8px 0 0 8px; }
.tw .rail.right { right: 0; border-radius: 0 8px 8px 0; }
.tw[data-side="left"]  .rail.left  { transform: translateX(0); opacity: 1; }
.tw[data-side="left"]  .rail.right { transform: translateX(3px); opacity: 0; }
.tw[data-side="right"] .rail.left  { transform: translateX(-3px); opacity: 0; }
.tw[data-side="right"] .rail.right { transform: translateX(0); opacity: 1; }
.tw[data-side="center"] .rail.left  { transform: translateX(0); opacity: 1; }
.tw[data-side="center"] .rail.right { transform: translateX(0); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   DELTA BAR WIDGET (fidèle à DeltaBarWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.delta-widget {
  position: relative;
  width: 100%;
  background: transparent;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.delta-widget .delta-track {
  position: relative;
  width: 100%;
  height: 15px;
  background: #1a2030;
  border-radius: 4px;
  overflow: hidden;
}
.delta-widget .delta-bar { position: absolute; top: 0; height: 100%; }
.delta-widget .delta-bar--loss {
  right: 50%;
  background: #E24B4A;
  border-radius: 4px 0 0 4px;
  transition: width 0.1s linear;
}
.delta-widget .delta-bar--gain {
  left: 50%;
  background: #00ff88;
  border-radius: 0 4px 4px 0;
  transition: width 0.1s linear;
}
.delta-widget .delta-center-line {
  position: absolute;
  left: 50%; top: 0;
  width: 1.5px; height: 100%;
  background: #3a4455;
  transform: translateX(-50%);
}
.delta-widget .delta-value {
  font-family: 'Share Tech Mono', monospace;
  font-size: 24px;
  font-weight: bold;
  background: #3a445583;
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: 0.05em;
  transition: color 0.1s linear;
}
.delta-widget .delta-value--neutral { color: #555; }
.delta-widget .delta-value--gain    { color: #00ff88; }
.delta-widget .delta-value--loss    { color: #E24B4A; }

/* ─────────────────────────────────────────────────────────────────────
   BEST LAP WIDGET (fidèle à BestLapWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.blw {
  --bl-accent: #c84ae8;     /* WIDGET_COLORS.bestlap = violet */
  position: relative;
  width: 100%;
  max-width: 200px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 16px;
  background: rgba(8, 10, 14, 1);
  border-radius: 8px;
  user-select: none;
}
.blw .blw-label, .blw .blw-sublabel {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  font-weight: 600;
}
.blw .blw-sublabel { margin-top: 6px; }
.blw .blw-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px; font-weight: 700;
  color: var(--bl-accent);
  line-height: 1; letter-spacing: 1px;
}
.blw .blw-classtime {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1; letter-spacing: 1px;
}
.blw .blw-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600;
  line-height: 1; margin-top: 2px;
}
.blw .delta-best    { color: #4ae87a; }
.blw .delta-slow    { color: #e84a4a; }
.blw .delta-neutral { color: rgba(255, 255, 255, 0.3); }

.blw .rail {
  position: absolute; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--bl-accent);
  transition: transform .22s cubic-bezier(.7,0,.3,1), opacity .15s;
}
.blw .rail.left  { left: 0;  border-radius: 8px 0 0 8px; }
.blw .rail.right { right: 0; border-radius: 0 8px 8px 0; }
.blw[data-side="left"]  .rail.left  { transform: translateX(0); opacity: 1; }
.blw[data-side="left"]  .rail.right { transform: translateX(3px); opacity: 0; }
.blw[data-side="right"] .rail.left  { transform: translateX(-3px); opacity: 0; }
.blw[data-side="right"] .rail.right { transform: translateX(0); opacity: 1; }
.blw[data-side="center"] .rail.left  { transform: translateX(0); opacity: 1; }
.blw[data-side="center"] .rail.right { transform: translateX(0); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   LAST LAP WIDGET (fidèle à LastLapWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.llw {
  --ll-accent: #33CEFF;     /* WIDGET_COLORS.lastlap = cyan */
  position: relative;
  width: 100%;
  max-width: 200px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 16px;
  background: rgba(8, 10, 14, 1);
  border-radius: 8px;
  user-select: none;
}
.llw .llw-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase; font-weight: 600;
}
.llw .llw-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px; font-weight: 700;
  color: #ffffff;
  line-height: 1; letter-spacing: 1px;
}
.llw .llw-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600;
  line-height: 1; margin-top: 2px;
}
.llw .delta-best    { color: #4ae87a; }
.llw .delta-slow    { color: #e84a4a; }
.llw .delta-neutral { color: rgba(255, 255, 255, 0.3); }

.llw .rail {
  position: absolute; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--ll-accent);
  transition: transform .22s cubic-bezier(.7,0,.3,1), opacity .15s;
}
.llw .rail.left  { left: 0;  border-radius: 8px 0 0 8px; }
.llw .rail.right { right: 0; border-radius: 0 8px 8px 0; }
.llw[data-side="left"]  .rail.left  { transform: translateX(0); opacity: 1; }
.llw[data-side="left"]  .rail.right { transform: translateX(3px); opacity: 0; }
.llw[data-side="right"] .rail.left  { transform: translateX(-3px); opacity: 0; }
.llw[data-side="right"] .rail.right { transform: translateX(0); opacity: 1; }
.llw[data-side="center"] .rail.left  { transform: translateX(0); opacity: 1; }
.llw[data-side="center"] .rail.right { transform: translateX(0); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   GAP WIDGET (fidèle à GapWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.gw {
  --gw-accent: #4ae87a;     /* WIDGET_COLORS.gap = vert */
  position: relative;
  width: 100%;
  max-width: 200px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 16px;
  background: rgba(8, 10, 14, 1);
  border-radius: 8px;
  user-select: none;
}
.gw .gw-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase; font-weight: 600;
}
.gw .gw-row { display: flex; align-items: baseline; gap: 8px; }
.gw .gw-arrow { font-size: 10px; opacity: 0.5; flex-shrink: 0; }
.gw .gw-front .gw-arrow { color: #e84a4a; }
.gw .gw-rear  .gw-arrow { color: #4ae87a; }
.gw .gw-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700;
  line-height: 1; letter-spacing: 0.5px;
}
.gw .gw-value.front { color: #e84a4a; }
.gw .gw-value.rear  { color: #4ae87a; }

.gw .rail {
  position: absolute; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--gw-accent);
  transition: transform .22s cubic-bezier(.7,0,.3,1), opacity .15s;
}
.gw .rail.left  { left: 0;  border-radius: 8px 0 0 8px; }
.gw .rail.right { right: 0; border-radius: 0 8px 8px 0; }
.gw[data-side="left"]  .rail.left  { transform: translateX(0); opacity: 1; }
.gw[data-side="left"]  .rail.right { transform: translateX(3px); opacity: 0; }
.gw[data-side="right"] .rail.left  { transform: translateX(-3px); opacity: 0; }
.gw[data-side="right"] .rail.right { transform: translateX(0); opacity: 1; }
.gw[data-side="center"] .rail.left  { transform: translateX(0); opacity: 1; }
.gw[data-side="center"] .rail.right { transform: translateX(0); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   WEATHER WIDGET (fidèle à WeatherWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.ww {
  --ww-accent: #4ae8d8;     /* WIDGET_COLORS.weather = cyan */
  position: relative;
  width: 100%;
  max-width: 200px;
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 14px;
  background: rgba(8, 10, 14, 1);
  border-radius: 8px;
  user-select: none;
}
.ww .ww-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase; font-weight: 600;
}
.ww .ww-skies {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  display: flex; align-items: center; gap: 6px;
}
.ww .ww-icon { font-size: 14px; }

.ww .ww-temps { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ww .ww-temp-block { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ww .ww-temp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700;
  line-height: 1;
  transition: color 0.5s ease;
}
.ww .ww-temp-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ww .ww-sep { color: rgba(255, 255, 255, 0.15); font-size: 18px; }
.ww .ww-divider { height: 1px; background: rgba(255, 255, 255, 0.06); margin: 2px 0; }

.ww .ww-row { display: flex; justify-content: space-between; align-items: center; }
.ww .ww-row-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.ww .ww-row-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.ww .ww-wetness {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: color 0.5s ease;
}

.ww .rail {
  position: absolute; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--ww-accent);
  transition: transform .22s cubic-bezier(.7,0,.3,1), opacity .15s;
}
.ww .rail.left  { left: 0;  border-radius: 8px 0 0 8px; }
.ww .rail.right { right: 0; border-radius: 0 8px 8px 0; }
.ww[data-side="left"]  .rail.left  { transform: translateX(0); opacity: 1; }
.ww[data-side="left"]  .rail.right { transform: translateX(3px); opacity: 0; }
.ww[data-side="right"] .rail.left  { transform: translateX(-3px); opacity: 0; }
.ww[data-side="right"] .rail.right { transform: translateX(0); opacity: 1; }
.ww[data-side="center"] .rail.left  { transform: translateX(0); opacity: 1; }
.ww[data-side="center"] .rail.right { transform: translateX(0); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   POSITION WIDGET (fidèle à PositionWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.pw {
  --pw-accent: #FF5888;     /* WIDGET_COLORS.position = rose */
  position: relative;
  width: 100%;
  max-width: 200px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 16px;
  background: rgba(8, 10, 14, 1);
  border-radius: 8px;
  user-select: none;
}
.pw .pw-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase; font-weight: 600;
}
.pw .pw-main { display: flex; align-items: baseline; gap: 2px; line-height: 1; }
.pw .pw-p {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--pw-accent);
  opacity: 0.7;
}
.pw .pw-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px; font-weight: 700;
  color: #ffffff; line-height: 1;
}
.pw .pw-total {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
}
.pw .pw-lap { margin-top: 4px; }
.pw .pw-lap-v {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pw .rail {
  position: absolute; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--pw-accent);
  transition: transform .22s cubic-bezier(.7,0,.3,1), opacity .15s;
}
.pw .rail.left  { left: 0;  border-radius: 8px 0 0 8px; }
.pw .rail.right { right: 0; border-radius: 0 8px 8px 0; }
.pw[data-side="left"]  .rail.left  { transform: translateX(0); opacity: 1; }
.pw[data-side="left"]  .rail.right { transform: translateX(3px); opacity: 0; }
.pw[data-side="right"] .rail.left  { transform: translateX(-3px); opacity: 0; }
.pw[data-side="right"] .rail.right { transform: translateX(0); opacity: 1; }
.pw[data-side="center"] .rail.left  { transform: translateX(0); opacity: 1; }
.pw[data-side="center"] .rail.right { transform: translateX(0); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   SESSION WIDGET (fidèle à SessionWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.session-widget {
  --se-accent: #e8a44a;     /* WIDGET_COLORS.session = orange */
  position: relative;
  width: 100%;
  max-width: 200px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 16px;
  background: rgba(8, 10, 14, 1);
  border-radius: 8px;
  user-select: none;
}
.session-widget .sew-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase; font-weight: 600;
}
.session-widget .sew-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px; font-weight: 700;
  color: #00C8FF;
  line-height: 1; letter-spacing: 1px;
}
.session-widget .sew-timer-u {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.2em;
  margin-left: 6px;
  vertical-align: 0.4em;
}
.session-widget .sew-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.session-widget .sew-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.session-widget .sew-dot.active {
  background: #4ae87a;
  animation: sewBlink 1.2s infinite;
}
@keyframes sewBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }

.session-widget .sew-type {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.session-widget .sew-laps { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.session-widget .sew-laps-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700;
  color: #e8c84a;
  line-height: 1;
}
.session-widget .sew-laps-u {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.2em;
}

.session-widget .rail {
  position: absolute; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--se-accent);
  transition: transform .22s cubic-bezier(.7,0,.3,1), opacity .15s;
}
.session-widget .rail.left  { left: 0;  border-radius: 8px 0 0 8px; }
.session-widget .rail.right { right: 0; border-radius: 0 8px 8px 0; }
.session-widget[data-side="left"]  .rail.left  { transform: translateX(0); opacity: 1; }
.session-widget[data-side="left"]  .rail.right { transform: translateX(3px); opacity: 0; }
.session-widget[data-side="right"] .rail.left  { transform: translateX(-3px); opacity: 0; }
.session-widget[data-side="right"] .rail.right { transform: translateX(0); opacity: 1; }
.session-widget[data-side="center"] .rail.left  { transform: translateX(0); opacity: 1; }
.session-widget[data-side="center"] .rail.right { transform: translateX(0); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   INCIDENTS WIDGET (fidèle à IncidentsWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
.iw {
  --iw-accent: #E8E8A0;     /* WIDGET_COLORS.incidents = ivoire */
  position: relative;
  width: 100%;
  max-width: 200px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 16px;
  background: rgba(8, 10, 14, 1);
  border-radius: 8px;
  user-select: none;
}
.iw .iw-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase; font-weight: 600;
}
.iw .iw-main { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.iw .iw-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 48px; font-weight: 700;
  color: #ffffff; line-height: 1;
}
.iw .iw-limit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1;
}

.iw .iw-bar-wrap {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px; overflow: hidden;
  margin-top: 2px;
}
.iw .iw-bar-fill {
  height: 100%; border-radius: 2px;
  transition: width 0.4s ease, background 0.4s ease;
}

.iw .iw-sub { margin-top: 2px; }
.iw .iw-sub span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 600;
}
.iw .iw-sub-ok      { color: rgba(255, 255, 255, 0.28); }
.iw .iw-sub-warning { color: #e8c84a; }
.iw .iw-sub-danger  { color: #e84a4a; }
.iw .iw-no-limit    { color: rgba(255, 255, 255, 0.28); }

.iw .rail {
  position: absolute; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--iw-accent);
  transition: transform .22s cubic-bezier(.7,0,.3,1), opacity .15s;
}
.iw .rail.left  { left: 0;  border-radius: 8px 0 0 8px; }
.iw .rail.right { right: 0; border-radius: 0 8px 8px 0; }
.iw[data-side="left"]  .rail.left  { transform: translateX(0); opacity: 1; }
.iw[data-side="left"]  .rail.right { transform: translateX(3px); opacity: 0; }
.iw[data-side="right"] .rail.left  { transform: translateX(-3px); opacity: 0; }
.iw[data-side="right"] .rail.right { transform: translateX(0); opacity: 1; }
.iw[data-side="center"] .rail.left  { transform: translateX(0); opacity: 1; }
.iw[data-side="center"] .rail.right { transform: translateX(0); opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────
   BATTLE WIDGET (fidèle à BattleWidget.vue)
   ───────────────────────────────────────────────────────────────────── */
@keyframes bw-stripe   { 0%{transform:translateX(0)} 100%{transform:translateX(-12px)} }
@keyframes bw-blink    { 50%{opacity:.2} }
@keyframes bw-chev-l   { 0%{transform:translateX(110%) scale(.5);opacity:0}
                         20%{opacity:calc(.3 + var(--chev-intensity)*.7)}
                         80%{opacity:calc(.3 + var(--chev-intensity)*.7)}
                         100%{transform:translateX(-110%) scale(1.2);opacity:0} }
@keyframes bw-chev-r   { 0%{transform:translateX(-110%) scale(.5);opacity:0}
                         20%{opacity:calc(.3 + var(--chev-intensity)*.7)}
                         80%{opacity:calc(.3 + var(--chev-intensity)*.7)}
                         100%{transform:translateX(110%) scale(1.2);opacity:0} }
@keyframes bw-streak-l { 0%{transform:translateX(40%)}  100%{transform:translateX(-120%)} }
@keyframes bw-streak-r { 0%{transform:translateX(-40%)} 100%{transform:translateX(120%)}  }

.bw {
  position: relative;
  font-family: 'Barlow Condensed', sans-serif;
  color: #fff;
  user-select: none;
  width: 100%;
  max-width: 800px;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
}

/* Flagbar */
.bw .bw-flagbar {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  overflow: hidden;
  background: var(--fc, #00E865);
}
.bw .bw-flagbar-stripes {
  position: absolute; inset: 0;
  display: flex; pointer-events: none;
  opacity: 0.15;
}
.bw .bw-flagbar-stripes i {
  flex: 1;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.6) 0 6px, transparent 6px 12px);
  animation: bw-stripe .6s linear infinite;
}
.bw .bw-flagbar-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: bw-blink .8s steps(2,end) infinite;
  z-index: 2; flex-shrink: 0; opacity: 0.7;
}
.bw .bw-flagbar-label { z-index: 2; flex: 1; }
.bw .bw-flagbar-time {
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; opacity: 0.7;
}
.bw .bw-lap-pill {
  background: rgba(0,0,0,0.25);
  padding: 2px 8px;
  font-weight: 900; font-size: 10px; letter-spacing: 0.1em;
  z-index: 2;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* Battle row */
.bw .bw-row {
  display: grid;
  grid-template-columns: 1fr 72px 1.05fr 72px 1fr;
  background: #0a0a10;
  position: relative;
  overflow: hidden;
}
.bw .bw-row::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.018) 14px 15px);
  pointer-events: none;
}

/* Pilot panels */
.bw .bw-pilot {
  position: relative;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  gap: 4px; overflow: hidden;
}
.bw .bw-pilot--behind {
  background:
    linear-gradient(135deg, rgba(255,31,46,.18) 0%, rgba(255,31,46,0) 60%),
    linear-gradient(180deg, #14060a 0%, #0a0a10 100%);
}
.bw .bw-pilot--ahead {
  background:
    linear-gradient(225deg, rgba(255,212,0,.13) 0%, rgba(255,212,0,0) 60%),
    linear-gradient(180deg, #15110a 0%, #0a0a10 100%);
}
.bw .bw-pilot--focus {
  background: linear-gradient(180deg, #ffe154 0%, #f5b900 75%, #d99300 100%);
  color: #1a0e00;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.bw .bw-focus-pattern {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.05) 14px 16px);
  pointer-events: none;
}
.bw .bw-focus-gloss {
  position: absolute; top: -10%; left: -10%;
  width: 60%; height: 30%;
  background: radial-gradient(ellipse, rgba(255,255,255,.4), transparent 70%);
  pointer-events: none;
}

/* Position block */
.bw .bw-pos-block { display: flex; align-items: center; gap: 10px; }
.bw .bw-pos {
  font-weight: 900;
  font-size: 44px;
  line-height: .85;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.bw .bw-pilot--behind .bw-pos { color: #FF1F2E; text-shadow: 0 0 18px rgba(255,31,46,.6); }
.bw .bw-pilot--ahead  .bw-pos { color: #FFD400; text-shadow: 0 0 18px rgba(255,212,0,.6); }
.bw .bw-pilot--focus  .bw-pos { color: #1a0e00; }

.bw .bw-fullname {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: .9;
  line-height: 1.2;
}
.bw .bw-car-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: .5; margin-top: 1px;
}
.bw .bw-pilot--focus .bw-car-name { color: #1a0e00; opacity: .7; }

/* Gap card */
.bw .bw-gap-card {
  margin-top: 8px;
  padding: 7px 10px 8px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-left-width: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.bw .bw-gap-card--behind { border-left-color: #FF1F2E; }
.bw .bw-gap-card--ahead  { border-left-color: #FFD400; }
.bw .bw-gap-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.24em;
  color: #8a8a96; text-transform: uppercase;
}
.bw .bw-gap-val {
  font-weight: 900;
  font-size: 32px; line-height: .95;
  letter-spacing: -0.01em;
}
.bw .bw-gap-card--behind .bw-gap-val { color: #FF1F2E; text-shadow: 0 0 18px rgba(255,31,46,.5); }
.bw .bw-gap-card--ahead  .bw-gap-val { color: #FFD400; text-shadow: 0 0 18px rgba(255,212,0,.5); }
.bw .bw-gap-trend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
}
.bw .bw-gap-trend--closing { color: #FF1F2E; }
.bw .bw-gap-trend--stable  { color: #22E06C; }

/* Telemetry strip */
.bw .bw-tel {
  margin-top: 8px;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.1);
}
.bw .bw-pilot--focus .bw-tel { border-color: rgba(0,0,0,.25); }
.bw .bw-tel-cell {
  padding: 7px 8px 4px;
  display: flex; flex-direction: column; gap: 3px;
}
.bw .bw-tel-cell + .bw-tel-cell { border-left: 1px solid rgba(255,255,255,.08); }
.bw .bw-pilot--focus .bw-tel-cell + .bw-tel-cell { border-left-color: rgba(0,0,0,.18); }
.bw .bw-tel-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; opacity: .6;
}
.bw .bw-tel-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 17px;
  letter-spacing: 0.02em; color: #22E06C;
}
.bw .bw-pilot--focus .bw-tel-val { color: #1a0e00; }

/* Sector bar */
.bw .bw-sectors { display: flex; gap: 3px; margin-top: 3px; }
.bw .bw-sector { flex: 1; height: 4px; border-radius: 1px; }
.bw .bw-sector--gray { background: rgba(255,255,255,.2); }

/* Chevron rail */
.bw .bw-rail {
  position: relative;
  background: #06060a;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.06);
  border-right: 1px solid rgba(255,255,255,.06);
}
.bw .bw-rail--left  { --chev-color: #FF1F2E; --chev-glow: rgba(255,31,46,.95); }
.bw .bw-rail--right { --chev-color: #FFD400; --chev-glow: rgba(255,212,0,.95); }

.bw .bw-rail-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, var(--chev-glow), transparent 65%);
  opacity: calc(.05 + var(--chev-intensity) * .4);
  pointer-events: none;
}
.bw .bw-chev {
  position: absolute;
  width: 36px; height: 52px;
  top: 50%; margin-top: -26px;
  opacity: 0;
}
.bw .bw-rail--left  .bw-chev { animation: bw-chev-l var(--chev-period) linear infinite; }
.bw .bw-rail--right .bw-chev { animation: bw-chev-r var(--chev-period) linear infinite; }
.bw .bw-chev svg {
  width: 100%; height: 100%;
  fill: var(--chev-color);
  filter: drop-shadow(0 0 calc(2px + var(--chev-intensity) * 10px) var(--chev-glow));
}
.bw .bw-streaks {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: calc(.1 + var(--chev-intensity) * .5);
}
.bw .bw-streaks i {
  position: absolute;
  left: -10%; right: -10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--chev-color), transparent);
}
.bw .bw-streaks i:nth-child(1) { top: 18%; animation-delay: -0.1s; }
.bw .bw-streaks i:nth-child(2) { top: 38%; animation-delay: -0.3s; }
.bw .bw-streaks i:nth-child(3) { top: 62%; animation-delay: -0.5s; }
.bw .bw-streaks i:nth-child(4) { top: 82%; animation-delay: -0.7s; }
.bw .bw-rail--left  .bw-streaks i { animation: bw-streak-l var(--chev-period) linear infinite; }
.bw .bw-rail--right .bw-streaks i { animation: bw-streak-r var(--chev-period) linear infinite; }

/* Responsive — passe en colonnes étroites */
@media (max-width: 800px) {
  .bw .bw-row {
    grid-template-columns: 1fr 36px 1fr 36px 1fr;
  }
  .bw .bw-pos { font-size: 32px; }
  .bw .bw-gap-val { font-size: 22px; }
  .bw .bw-fullname { font-size: 12px; }
}

/* ─────────────────────────────────────────────────────────────────────
   COCKPIT SECTION
   ───────────────────────────────────────────────────────────────────── */
.cockpit-section { padding: 100px 40px; max-width: 1480px; margin: 0 auto; }
.cockpit-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cockpit-frame {
  position: relative;
  border-radius: 14px; overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.cockpit-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cockpit-frame-foot {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--mono); font-size: 11px; color: var(--text);
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px;
}
.cf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sro-yellow); }
@media (max-width: 1100px) { .cockpit-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────
   HOW IT WORKS
   ───────────────────────────────────────────────────────────────────── */
.how-section { padding: 100px 40px; max-width: 1480px; margin: 0 auto; }
.how-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative; padding: 12px 0;
}
.how-step {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.3s, transform 0.3s;
}
.how-step.active {
  border-color: var(--sro-yellow);
  transform: translateY(-2px);
}
.how-step-num {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.15em;
  width: 36px; height: 24px;
  border-radius: 4px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--text-mute);
  transition: all 0.3s;
}
.how-step.active .how-step-num {
  background: var(--sro-yellow);
  border-color: var(--sro-yellow);
  color: #000;
}
.how-step-t { font-family: var(--display); font-size: 14px; font-weight: 600; }
.how-step-d { font-size: 12px; color: var(--text-mute); line-height: 1.5; }
@media (max-width: 1100px) { .how-flow { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────
   EDIT MODE SECTION
   ───────────────────────────────────────────────────────────────────── */
.edit-section { padding: 100px 40px; max-width: 1480px; margin: 0 auto; }
.edit-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px; align-items: center;
}
.edit-features { display: flex; flex-direction: column; gap: 14px; margin: 28px 0; }
.ef-item { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.ef-tick {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sro-yellow);
  color: #000; font-size: 11px; font-weight: 700;
}
.edit-shortcut {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--mono);
}
.edit-shortcut kbd {
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  padding: 4px 10px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 13px; font-weight: 600; color: #fff;
  box-shadow: 0 2px 0 var(--line);
}
.edit-shortcut span { color: var(--text-mute); }

.hide-shortcut {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--mono);
}
.hide-shortcut kbd {
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  padding: 4px 10px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 13px; font-weight: 600; color: #fff;
  box-shadow: 0 2px 0 var(--line);
}
.hide-shortcut span { color: var(--text-mute); }

.emd {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  height: 380px;
  display: flex; flex-direction: column; gap: 12px;
}
.emd-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  background: var(--bg-2);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.emd-toolbar-item {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.15em;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-mute);
}
.emd-toolbar-item.active {
  border-color: var(--sro-yellow);
  color: var(--sro-yellow);
}
.emd-toolbar-spacer { flex: 1; }
.emd-toolbar-car {
  font-family: var(--mono); font-size: 11px;
  color: var(--sro-yellow);
}
.emd-canvas {
  flex: 1; position: relative;
  background:
    linear-gradient(135deg, rgba(255,203,5,0.04), transparent),
    repeating-linear-gradient(0deg,  transparent, transparent 39px, rgba(255,255,255,0.03) 39px, rgba(255,255,255,0.03) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.03) 39px, rgba(255,255,255,0.03) 40px);
  border-radius: 8px;
}
.emd-w {
  position: absolute;
  background: rgba(20, 23, 30, 0.85);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
  transition: border-color 0.3s;
}
.emd-w.selected { z-index: 2; border-color: var(--sro-yellow); }
.emd-w-l {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.12em;
}
.emd-w-handle {
  position: absolute;
  bottom: -3px; right: -3px;
  width: 8px; height: 8px;
  background: var(--text-dim);
  border-radius: 2px;
  transition: background 0.3s;
}
.emd-w.selected .emd-w-handle { background: var(--sro-yellow); }
.emd-w-1 { top: 12px;    left: 12px;  width: 200px; height: 100px; }
.emd-w-2 { top: 12px;    right: 12px; width: 180px; height: 140px; }
.emd-w-3 { bottom: 12px; left: 12px;  width: 120px; height: 90px;  }
.emd-w-4 { bottom: 12px; right: 12px; width: 160px; height: 100px; }

@media (max-width: 1100px) { .edit-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────
   ROADMAP
   ───────────────────────────────────────────────────────────────────── */
.roadmap-section { padding: 100px 40px; max-width: 1100px; margin: 0 auto; }
.roadmap-progress {
  display: grid;
  grid-template-columns: 200px 1fr 60px;
  gap: 20px; align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 32px;
}
.rp-l {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--text-mute);
}
.rp-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.rp-bar-fill {
  height: 100%;
  background: var(--sro-yellow);
  box-shadow: 0 0 16px var(--sro-yellow);
  transition: width 0.4s;
}
.rp-pct {
  font-family: var(--display);
  font-weight: 700; font-size: 22px;
  color: var(--sro-yellow);
  text-align: right;
}
.roadmap-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}
.rg-col {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.rg-col-h {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.15em;
  padding-bottom: 14px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
}
.rg-col-h.done { color: #00d96a; }
.rg-col-h.todo { color: var(--text-mute); }
.rg-tick { font-size: 14px; }
.rg-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 13px;
}
.rg-item.done { color: var(--text); }
.rg-item.todo { color: var(--text-mute); }
.rg-bullet {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sro-yellow);
}
.rg-bullet.outline {
  background: transparent;
  border: 1px solid var(--text-dim);
}

@media (max-width: 1100px) { .roadmap-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────
   DOWNLOAD
   ───────────────────────────────────────────────────────────────────── */
.dl-section { padding: 60px 40px 100px; max-width: 1480px; margin: 0 auto; }
.dl-card {
  position: relative; overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: 80px 48px;
}
.dl-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 80%);
}
.dl-bg-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 600px;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(255,203,5,0.30) 0%, transparent 70%);
}
.dl-content {
  position: relative; z-index: 1;
  max-width: 700px; margin: 0 auto;
  text-align: center;
}
.dl-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.dl-sub {
  font-size: 16px; color: var(--text-mute);
  margin-bottom: 36px;
  max-width: 480px;
  margin-left: auto; margin-right: auto;
}
.dl-cta-block {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  margin-bottom: 32px;
}
.dl-version {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--text-mute);
}
.dl-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 32px;
  border-radius: 12px;
  background: var(--sro-yellow);
  color: #000;
  font-weight: 600; font-size: 16px;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 40px rgba(255, 203, 5, 0.4);
  transition: transform 0.15s, box-shadow 0.2s;
}
.dl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(255, 203, 5, 0.55);
}
.dl-meta {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-dim);
}
.dl-warn {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 480px; margin: 0 auto;
  padding: 14px 16px;
  background: rgba(255, 203, 5, 0.06);
  border: 1px solid rgba(255, 203, 5, 0.18);
  border-radius: 8px;
  text-align: left;
}
.dl-warn-icon { font-size: 16px; line-height: 1.2; }
.dl-warn-t {
  font-size: 12px; font-weight: 600;
  color: var(--sro-yellow);
  margin-bottom: 4px;
}
.dl-warn-d { font-size: 11px; color: var(--text-mute); line-height: 1.5; }

/* ─────────────────────────────────────────────────────────────────────
   SUPPORT
   ───────────────────────────────────────────────────────────────────── */
.support-section { padding: 100px 40px; max-width: 1100px; margin: 0 auto; }
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.support-card {
  display: grid;
  grid-template-columns: 36px 1fr 16px;
  align-items: center; gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  transition: all 0.2s;
}
.support-card:hover {
  border-color: var(--sro-yellow);
  transform: translateY(-2px);
}
.sc-icon { font-size: 22px; }
.sc-l {
  font-family: var(--display);
  font-size: 15px; font-weight: 600;
}
.sc-arrow {
  color: var(--text-mute);
  transition: transform 0.2s, color 0.2s;
}
.support-card:hover .sc-arrow {
  color: var(--sro-yellow);
  transform: translateX(3px);
}
.support-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
}

@media (max-width: 700px) { .support-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────── */
.site-footer { padding: 60px 40px 28px; border-top: 1px solid var(--line); margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; max-width: 1100px; margin: 0 auto 40px; }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-tag  { font-family: var(--display); font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.footer-made { font-size: 12px; color: var(--text-mute); max-width: 280px; line-height: 1.5; }
.footer-h    { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: var(--text-mute); text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { display: block; font-size: 13px; color: var(--text); padding: 5px 0; transition: color 0.15s; }
.site-footer a:hover { color: var(--sro-yellow); }
.footer-bottom { display: flex; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-nav    { display: none; }
}
@media (max-width: 700px) {
  .section-title { font-size: 36px; }
  .site-header   { padding: 14px 20px; gap: 16px; }
  .hero          { padding: 48px 20px 60px; }
}