/* Police Titillium Web (SIL Open Font License, voir /fonts/OFL.txt), incluse localement. */
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 400; font-display: swap; src: url('/live/fonts/titillium-400.woff2') format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 600; font-display: swap; src: url('/live/fonts/titillium-600.woff2') format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 700; font-display: swap; src: url('/live/fonts/titillium-700.woff2') format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 900; font-display: swap; src: url('/live/fonts/titillium-900.woff2') format('woff2'); }

:root {
  /* Valeurs de base (remplacées par celles du thème Pitwall, plus bas) */
  --bg: #000000;
  --panel: #0b0b0d;
  --panel-2: #121215;
  --panel-3: #1b1b20;
  --border: #232329;
  --line: #17171b;        /* séparateurs de lignes */
  --line-2: #2a2a31;
  --hover: #151519;
  --deep: #060607;
  --top-1: #0e0e11;
  --top-2: #070708;
  --focus: #19191f;
  --text: #f1f1f4;
  --text-2: #bcbcc6;
  --muted: #80808c;
  --accent: #e10600;
  --accent-2: #ff2d1f;
  --purple: #c77dff;
  --green: #35d07f;
  --yellow: #f5c518;
  --orange: #ff9f1a;
  --red: #ff3b30;
  --blue: #3ea6ff;
  --sc: #ffb020;
  --radius: 10px;
  --font: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Appli : un clic ou un double-clic dans le vide ne surligne rien ; texte sélectionnable seulement là
   où on peut vouloir le copier (champs, article, radios, direction de course, adresses) */
body { -webkit-user-select: none; user-select: none; }
:is(input, textarea, [contenteditable], .nw-reader, .rd-text, .rd-orig, .rcm-msg, .rc-msg, pre, code, .selectable) { -webkit-user-select: text; user-select: text; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
select { padding: 3px 9px; }
b { font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
code { background: var(--panel-3); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
[hidden] { display: none !important; }

/* ---------- Barre du haut ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--top-1), var(--top-2));
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  flex: none;
  min-width: 0;
}
.topbar > * { flex-shrink: 0; }
.topbar > .session { flex-shrink: 1; min-width: 120px; }
.topbar > .spacer { flex-shrink: 1; min-width: 0; }

.brand { display: flex; align-items: center; gap: 6px; font-weight: 900; letter-spacing: .5px; }
.logo { width: 28px; height: 28px; display: block; flex: none; }
.brand-name { font-size: 16px; }
.session { min-width: 180px; max-width: 360px; }
.session-name { font-weight: 700; font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.track-status {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--panel-3); font-weight: 900; letter-spacing: .6px; text-transform: uppercase;
  min-width: 128px; justify-content: center; transition: background .3s;
}
.ts-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.track-status.green { background: rgba(53, 208, 127, .16); color: var(--green); }
.track-status.green .ts-dot { background: var(--green); }
.track-status.yellow { background: var(--yellow); color: #1a1500; }
.track-status.yellow .ts-dot { background: #1a1500; }
.track-status.sc, .track-status.vsc { background: var(--sc); color: #1d1200; animation: pulse 1.2s infinite; }
.track-status.sc .ts-dot, .track-status.vsc .ts-dot { background: #1d1200; }
.track-status.red { background: var(--red); color: #fff; animation: pulse 1s infinite; }
.track-status.red .ts-dot { background: #fff; }
/* Damier : texte toujours foncé sur fond clair (en apparence claire, pastille foncée pour ressortir) */
.track-status.chequered { background: #f2f4f8; color: #0b0c0f; }
.track-status.chequered .ts-dot { width: 16px; height: 16px; border-radius: 3px; background: repeating-conic-gradient(#0b0c0f 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
[data-scheme="light"] .track-status.chequered { background: #15171c; color: #fff; }
[data-scheme="light"] .track-status.chequered .ts-dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
@keyframes pulse { 50% { filter: brightness(1.25); } }

.hstat { display: flex; flex-direction: column; align-items: flex-start; }
.hstat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.hstat-value { font-size: 18px; font-weight: 700; line-height: 1.1; }
.weather-mini { flex-direction: row; gap: 10px; font-size: 13px; color: var(--text-2); }
.weather-mini .wm { display: flex; flex-direction: column; }
.weather-mini .wm b { font-size: 15px; color: var(--text); }
.spacer { flex: 1; }

/* ---------- Délai ---------- */
.delay {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 8px;
}
.delay-head { display: flex; flex-direction: column; align-items: center; }
.delay-title { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; }
.delay-warn { color: var(--orange); cursor: help; }
.delay-controls { display: flex; align-items: center; gap: 3px; }
.dbtn {
  background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 7px; cursor: pointer; font-weight: 600; min-width: 34px;
}
.dbtn:hover { border-color: var(--muted); }
.dpause { display: grid; place-items: center; }
.dpause.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.delay-input {
  width: 84px; text-align: center; font-size: 20px; font-weight: 900;
  background: var(--deep); border: 1px solid var(--border); border-radius: 6px; padding: 1px 4px;
}
.delay-input:focus { outline: 2px solid var(--accent); }
.preset {
  background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; max-width: 190px;
}

.btn {
  background: var(--panel-3); border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 11px; cursor: pointer; font-weight: 600; white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); }
.icon-btn { background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 18px; padding: 2px 8px; color: var(--text-2); }
.icon-btn:hover { border-color: var(--border); color: var(--text); }
.icon-btn.small { font-size: 14px; padding: 1px 6px; }

.source-badge {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px;
  font-weight: 700; letter-spacing: .5px;
}
.src-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.source-badge.live .src-dot { background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 1.4s infinite; }
.source-badge.replay .src-dot { background: var(--blue); }
.source-badge.error .src-dot { background: var(--orange); }
.source-badge.stale .src-dot { background: var(--orange); animation: pulse 1.4s infinite; }

/* ---------- Barre de replay ---------- */
.replaybar {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px;
  background: var(--top-2); border-bottom: 1px solid var(--border); flex: none;
}
.replaybar { gap: 14px; padding: 8px 16px; }
.rp-play { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: #3d7bff; color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 0 0 4px color-mix(in srgb, #3d7bff 22%, transparent); }
.rp-play:hover { filter: brightness(1.12); }
.rp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rp-top { display: flex; align-items: baseline; gap: 10px; font-size: 11px; line-height: 1; }
.rp-title { color: #6fa0ff; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.rp-phase { color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Piste : segments colorés (séance, drapeaux), partie déjà lue en bleu, points de début / fin */
.rp-track { position: relative; height: 18px; margin: 0 7px; }
.rp-segs, .rp-played { position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 3px; pointer-events: none; }
.rp-segs { background: var(--panel-3); overflow: hidden; }
.rp-segs i { position: absolute; top: 0; bottom: 0; }
.rp-segs i.run { background: #2f8f5b; }
.rp-segs i.yellow { background: #e6c229; }
.rp-segs i.sc { background: var(--sc, #ffb020); }
.rp-segs i.vsc { background: repeating-linear-gradient(90deg, var(--sc, #ffb020) 0 4px, #8a6512 4px 7px); }
.rp-segs i.red { background: #e5332a; }
.rp-played { right: auto; width: 0; background: #3d7bff; }
.rp-dots { position: absolute; inset: 0; pointer-events: none; }
.rp-dot { position: absolute; top: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--panel);
  pointer-events: auto; cursor: pointer; z-index: 2; }
.rp-dot.end { background: #c9ccd6; }
.rp-lbl { position: absolute; top: -13px; transform: translateX(-50%); font-size: 9.5px; font-weight: 800; color: var(--text-2); letter-spacing: .4px; white-space: nowrap; }
.rp-track input[type=range] { position: absolute; inset: 0; width: 100%; height: 18px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; z-index: 1; }
.rp-track input[type=range]::-webkit-slider-runnable-track { height: 18px; background: transparent; }
.rp-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: #fff; border: 3px solid #3d7bff; box-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.rp-track input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #3d7bff; }
.rp-track input[type=range]::-moz-range-track { background: transparent; }
.rp-side { flex: none; display: flex; align-items: center; gap: 8px; }
/* Grand écran : la barre de lecture occupe toute la largeur, sous le titre et les commandes */
@media (min-width: 901px) {
  .replaybar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 12px; align-items: center; padding: 8px 18px 10px 16px; }
  .replaybar .rp-play { grid-row: 1 / 3; }
  .replaybar .rp-main { display: contents; }
  .replaybar .rp-top { grid-column: 2; grid-row: 1; align-self: center; }
  .replaybar .rp-side { grid-column: 3; grid-row: 1; }
  .replaybar .rp-track { grid-column: 2 / 4; grid-row: 2; margin: 0 7px 0 2px; }
}
.rp-flags { color: var(--text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.rp-speeds { display: flex; gap: 4px; }
.rp-speed { min-width: 34px; height: 26px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-2);
  font: 700 11.5px/1 inherit; cursor: pointer; }
.rp-speed:hover { color: var(--text); }
.rp-speed.on { background: #3d7bff; border-color: #3d7bff; color: #fff; }
.replaybar .rp-red { border-color: var(--red); color: #fff; background: color-mix(in srgb, var(--red) 28%, var(--panel-3)); }
.rp-time { min-width: 0; text-align: right; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Grille ---------- */
.grid {
  flex: 1; min-height: 0;
  display: grid; gap: 10px; padding: 10px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .95fr);
  grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas:
    "tower map duel"
    "tower feed extra";
}
.p-tower { grid-area: tower; }
.p-map { grid-area: map; }
.p-feed { grid-area: feed; }
.p-duel { grid-area: duel; }
.p-extra { grid-area: extra; }

@media (max-width: 1600px) {
  body { overflow: auto; }
  .grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: 640px 520px 460px;
    grid-template-areas: "tower map" "tower duel" "feed extra";
  }
}
@media (max-width: 1000px) {
  .grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "map" "tower" "duel" "feed" "extra"; }
  .p-map { height: 420px; }
  .p-tower { height: 720px; }
  .p-duel, .p-feed, .p-extra { height: 460px; }
}

.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 12px; border-bottom: 1px solid var(--border); background: var(--panel-2); flex: none;
}
.panel-head h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-2); }
.panel-tools { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.panel-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.hint { font-size: 12px; }

.tabs { justify-content: flex-start; flex-wrap: wrap; gap: 4px; padding: 5px 8px; }
.tab { white-space: nowrap; flex: none; background: none; border: none; color: var(--muted); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.tab:is(.active, .group-on) { background: var(--panel-3); color: var(--text); }
/* Onglets inutiles pour la séance chargée (qualifs, essais, course) */
.tab.sess-off { display: none; }
/* Sélecteur des onglets regroupés (Écarts / Positions, Tours / Rythme, Messages / Enquêtes / Limites) */
.tab-seg { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.tab-seg.alone { margin: 6px 12px; }
.tab-seg button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.tab-seg button:hover { color: var(--text-2); }
.tab-seg button.on { background: var(--panel-3); color: var(--text); cursor: default; }
.tabpane { display: none; }
.tabpane.active { display: block; }

.toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.toggle input { accent-color: var(--accent); }

/* ---------- Classement ---------- */
.tower { width: 100%; border-collapse: collapse; }
.tower th {
  position: sticky; top: 0; z-index: 2; background: var(--panel-2);
  font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
  padding: 5px 4px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tower td { padding: 3px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; height: var(--tower-row-h, 34px); }
.tower tr.trow { cursor: pointer; }
/* Les boutons duel restent visibles quand le classement déborde en largeur. */
.tower td.c-duel { position: sticky; right: 0; z-index: 1; background: var(--panel); }
.tower th.c-duel { right: 0; z-index: 3; }
.tower tr.out td.c-duel { opacity: 1; }
.tower tr.out td.c-duel .duel-btns { opacity: .45; }
.tower tr.trow:hover td { background: var(--hover); }
.tower tr.focus td { background: var(--focus); }
.tower tr.duel-a td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.tower tr.duel-b td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.tower tr.out td { opacity: .45; }
.tower tr.danger td { background: rgba(255, 59, 48, .07); }
.tower tr.cut td { border-bottom: 2px dashed var(--red); }
/* Pilote qui a passé le drapeau à damier : toute sa ligne en damier, léger (le texte reste lisible) */
.tower tr.fin { background: var(--chequer) 0 0 / 16px 16px; }
:root { --chequer: repeating-conic-gradient(rgba(128, 128, 128, .24) 0 25%, transparent 0 50%); }
.pos { font-weight: 900; font-size: 15px; width: 26px; text-align: center; }
.pos-delta { font-size: 10.5px; font-weight: 700; margin-left: 1px; }
.up { color: var(--green); } .down { color: var(--red); }
.drv { display: flex; align-items: center; gap: 7px; }
.drv-bar { width: 6px; height: 22px; border-radius: 2px; flex: none; }
.drv-tla { font-weight: 900; font-size: 15px; letter-spacing: .3px; min-width: 36px; }
.drv-num { color: var(--muted); font-size: 11px; min-width: 18px; }
.drv-tags { display: flex; gap: 3px; }
.tag { font-size: 10px; font-weight: 900; padding: 0 4px; border-radius: 3px; line-height: 15px; letter-spacing: .3px; }
.tag.pit { background: var(--blue); color: #001526; }
.tag.out { background: var(--green); color: #002012; }
.tag.ret { background: #5a6272; color: #fff; }
.tag.stop { background: var(--red); color: #fff; }
.tag.pen { background: #ff8a3d; color: #2a1200; }
.tag.drs { background: var(--green); color: #002012; }
.tag.flag-blue { background: var(--blue); color: #001526; }
.tag.catch { background: rgba(53,208,127,.18); color: var(--green); }

.t-gap, .t-int, .t-lap { text-align: right; font-weight: 600; }
.t-int.catching { color: var(--green); }
.purple { color: var(--purple) !important; }
.green { color: var(--green) !important; }
.yellow { color: var(--yellow) !important; }
.dim { color: var(--muted); }
.sector { min-width: 50px; }
.sector-val { font-size: 12px; font-weight: 600; text-align: center; }
.segs { display: flex; gap: 1px; margin-top: 2px; }
.seg { height: 4px; flex: 1; border-radius: 1px; background: var(--line-2); min-width: 3px; }
.seg-yellow { background: var(--yellow); }
.seg-green { background: var(--green); }
.seg-purple { background: var(--purple); }
.seg-pit { background: var(--blue); }
.tyre {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--tc); font-size: 10px; font-weight: 900; color: var(--tc); background: var(--deep);
  /* Titillium : plus de place sous la ligne de base qu'au-dessus des capitales -> lettre recentrée */
  line-height: 1;
}
.tyre-age { font-size: 11px; color: var(--text-2); margin-left: 4px; }
.duel-btns { display: flex; gap: 3px; }
.ab {
  border: 1px solid var(--border); background: var(--panel-3); color: var(--muted);
  font-size: 11px; font-weight: 900; width: 24px; height: 22px; border-radius: 4px; cursor: pointer; padding: 0;
}
.ab.a.on { background: var(--blue); color: #001526; border-color: var(--blue); }
.ab.b.on { background: var(--orange); color: #221300; border-color: var(--orange); }
.ab:hover { color: var(--text); }

/* ---------- Carte ---------- */
.map-wrap { overflow: hidden; }
#mapCanvas { width: 100%; height: 100%; display: block; }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.map-legend { position: absolute; left: 10px; bottom: 8px; font-size: 11.5px; color: var(--muted); pointer-events: none; display: flex; gap: 10px; }
.map-mode { font-weight: 700; }
.map-mode.gps { color: var(--green); }
.map-mode.est { color: var(--orange); }

/* ---------- Direction de course ---------- */
.rcm, .radio { list-style: none; margin: 0; padding: 0; }
.rcm li { display: grid; grid-template-columns: 62px 18px 1fr; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); align-items: start; }
.rcm li.new { animation: flash 2s; }
@keyframes flash { from { background: rgba(245, 197, 24, .18); } to { background: transparent; } }
.rcm-time { color: var(--muted); font-size: 12px; line-height: 1.25; }
.rcm-flag { width: 16px; height: 12px; border-radius: 2px; margin-top: 3px; background: var(--line-2); }
.rcm-msg { font-size: 13px; line-height: 1.3; }
.flag-GREEN { background: var(--green); }
.flag-YELLOW { background: var(--yellow); }
.flag-DOUBLE-YELLOW { background: repeating-linear-gradient(90deg, var(--yellow) 0 6px, #111 6px 8px); }
.flag-RED { background: var(--red); }
.flag-BLUE { background: var(--blue); }
.flag-CLEAR { background: #d8dde6; }
.flag-CHEQUERED { background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 8px 8px; }
.flag-BLACK-AND-WHITE { background: linear-gradient(135deg, #111 50%, #fff 50%); }
.flag-BLACK-AND-ORANGE { background: radial-gradient(circle, var(--orange) 35%, #111 36%); }
.flag-BLACK { background: #000; border: 1px solid #555; }
.flag-SC { background: var(--sc); }
.flag-DRS { background: var(--green); opacity: .7; }


.pits { width: 100%; border-collapse: collapse; }
.pits td, .pits th { padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
.pits th { color: var(--muted); font-size: 11px; text-transform: uppercase; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.pit-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 10px 12px 4px; }
.pit-card { background: var(--panel-3); border-radius: 8px; padding: 7px 10px; }
.pit-big { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 1px 0; }
.pit-big.best { color: var(--purple, #b36bff); }
.lap-pill { display: inline-block; min-width: 34px; text-align: center; font-weight: 700; font-size: 12px; background: var(--panel-3); border-radius: 4px; padding: 1px 5px; }
.pit-tyres { white-space: nowrap; }
.pit-cell { display: flex; align-items: center; gap: 8px; }
.pit-val { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 56px; }
.pit-val.best { color: var(--purple, #b36bff); }
.pit-val.slow { color: var(--orange); }
.pit-val.bad { color: var(--red); }
.pbar { flex: 0 0 90px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--text-2); border-radius: 3px; }
.pbar.lane i { background: var(--blue); }
.pbar.best i { background: var(--purple, #b36bff); }
.pbar.slow i { background: var(--orange); }
.pbar.bad i { background: var(--red); }
.pit-tag { font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 3px; background: var(--panel-3); color: var(--text-2); white-space: nowrap; }
.pit-tag.bad { background: rgba(255, 59, 48, .18); color: var(--red); }
.pit-n { font-weight: 800; text-align: center; }
.pit-seq { white-space: nowrap; }
.pit-pill { display: inline-block; font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--panel-3); margin: 1px 0; font-variant-numeric: tabular-nums; }
.pit-pill.best { color: var(--purple, #b36bff); }
.pit-pill.slow { color: var(--orange); }
.pit-pill.bad { color: var(--red); }

/* ---------- Duel ---------- */
.duel-pick { gap: 5px; }
.duel-pick select { max-width: 130px; }
.duel-pick select, .row select, .row input {
  background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px;
}
.duel-empty { padding: 30px 18px; color: var(--muted); text-align: center; line-height: 1.6; }
.duel-hero { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 14px 6px; }
.duel-side { display: flex; flex-direction: column; gap: 2px; }
.duel-side.b { align-items: flex-end; text-align: right; }
.duel-name { font-size: 22px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.duel-side.b .duel-name { flex-direction: row-reverse; }
.duel-swatch { width: 6px; height: 26px; border-radius: 3px; }
.duel-sub { color: var(--muted); font-size: 12px; }
.duel-gap { text-align: center; }
.duel-gap-val { font-size: 38px; font-weight: 900; line-height: 1; letter-spacing: -.5px; }
.duel-gap-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.duel-gap-src { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
.duel-trend { text-align: center; padding: 4px 12px 8px; font-size: 13px; color: var(--text-2); }
.duel-trend b { color: var(--text); }
.duel-chart { padding: 0 10px; }
.duel-chart svg { width: 100%; height: 130px; display: block; }
.chart-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 6px 12px 2px; display: flex; justify-content: space-between; }
.cmp { width: 100%; border-collapse: collapse; margin-top: 4px; }
.cmp td { padding: 4px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.cmp td:first-child { text-align: left; font-weight: 700; }
.cmp td:nth-child(2) { text-align: center; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; }
.cmp td:last-child { text-align: right; font-weight: 700; }
.cmp .win { color: var(--green); }
.laps-cmp { width: 100%; border-collapse: collapse; }
.laps-cmp td, .laps-cmp th { padding: 3px 10px; font-size: 12.5px; border-bottom: 1px solid var(--line); text-align: right; }
.laps-cmp th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.laps-cmp td:first-child, .laps-cmp th:first-child { text-align: left; }
#dTele { padding: 4px 12px 8px; }
.duel-dials .dial { max-width: 240px; }
.duel-letter { font-size: 11px; width: 17px; height: 17px; border-radius: 4px; display: inline-grid; place-items: center; color: #fff; }
.duel-letter.a { background: var(--blue); }
.duel-letter.b { background: var(--orange); }

/* ---------- Télémétrie ---------- */
.tele { padding: 10px 12px; }
.tele-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tele-head select { background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gauge { background: var(--panel-2); border-radius: 8px; padding: 7px 10px; }
.gauge-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.gauge-val { font-size: 24px; font-weight: 900; line-height: 1.1; }
.gauge-val small { font-size: 12px; color: var(--muted); font-weight: 600; }
.bar { height: 8px; background: var(--panel-3); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.bar > i { display: block; height: 100%; border-radius: 4px; }
.bar.thr > i { background: var(--green); }
.bar.brk > i { background: var(--red); }
.bar.rpm > i { background: var(--blue); }
.trace { margin-top: 10px; }
.trace svg { width: 100%; height: 120px; display: block; }
.note { padding: 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- Stratégie ---------- */
.strat { padding: 8px 12px; }
.strat-row { display: grid; grid-template-columns: 44px 1fr 62px 72px; gap: 8px; align-items: center; height: 20px; }
.strat-pace, .strat-deg { font-size: 12px; font-weight: 700; text-align: right; }
.strat-headrow { height: 16px; }
.strat-headrow span { text-align: right; }
.strat-name { font-weight: 700; font-size: 12.5px; }
.strat-track { position: relative; height: 12px; background: var(--panel-3); border-radius: 3px; }
.strat-stint { position: absolute; top: 0; height: 12px; border-radius: 3px; border-right: 2px solid var(--panel); font-size: 9px; font-weight: 900; color: #111; display: grid; place-items: center; overflow: hidden; }
.strat-axis { display: grid; grid-template-columns: 44px 1fr 142px; gap: 8px; font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.strat-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); margin-bottom: 8px; }

/* ---------- Météo ---------- */
.wind-arrow { display: inline-block; transition: transform .5s; }

/* ---------- Championnat ---------- */
.champ { width: 100%; border-collapse: collapse; }
.champ td, .champ th { padding: 4px 10px; border-bottom: 1px solid var(--line); font-size: 13px; text-align: right; }
.champ th { color: var(--muted); font-size: 11px; text-transform: uppercase; position: sticky; top: 0; background: var(--panel); }
.champ td:nth-child(2), .champ th:nth-child(2) { text-align: left; }

/* ---------- Modales ---------- */
.modal {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
  padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 60px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.modal.wide { width: min(720px, calc(100vw - 32px)); }
/* Premier lancement : écrans d'accueil */
.modal.welcome { width: min(560px, calc(100vw - 32px)); }
.welcome .wl-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 0; }
.welcome .wl-dots { display: flex; gap: 6px; }
.welcome .wl-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--border); }
.welcome .wl-dots i.done { background: var(--text-2); }
.welcome .wl-dots i.on { background: var(--accent); }
.welcome .wl-skip { background: none; border-color: transparent; color: var(--text-2); }
.welcome .wl-body { padding: 10px 18px 6px; }
.welcome .wl-body h3 { margin: 4px 0 10px; font-size: 20px; }
.welcome .wl-body p { margin: 0 0 10px; line-height: 1.45; }
.welcome .wl-favs { max-height: min(440px, 52vh); overflow: auto; }
.welcome .hm-fav-edit { display: grid; gap: 6px; }
.welcome .fav { padding: 4px 11px; font-size: 13px; }
.welcome .wl-tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); line-height: 1.45; }
.welcome .wl-tip > .ic { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }
.welcome .wl-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 10px; }
.welcome .wl-choice { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }
.welcome .wl-choice .ic { width: 20px; height: 20px; color: var(--text-2); }
.welcome .wl-choice small { color: var(--text-2); line-height: 1.35; }
.welcome .wl-choice.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.welcome .wl-choice.on .ic { color: var(--accent); }
.welcome .wl-foot { display: flex; justify-content: space-between; padding: 10px 18px 16px; }
.modal::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel-2); position: sticky; top: 0; }
.modal-head h3 { margin: 0; font-size: 16px; }
.creator-dlg { width: min(360px, calc(100vw - 32px)); }
.creator-form { padding: 16px; display: grid; gap: 8px; }
.creator-form input { padding: 8px 10px; font-size: 15px; }
.stats-bar { position: fixed; right: 16px; bottom: 16px; z-index: 1200; width: min(360px, calc(100vw - 32px)); padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: stats-in .25s ease-out; }
.stats-bar-head { display: flex; align-items: center; gap: 7px; padding-right: 26px; }
.stats-bar-head .ic { color: var(--accent); }
.stats-bar p { margin: 6px 0 0; }
.stats-bar .stats-more { max-height: 40vh; overflow-y: auto; }
.stats-bar .stats-actions { justify-content: flex-end; gap: 6px; margin-top: 10px; }
.stats-bar .stats-details { margin-right: auto; }
.stats-later { position: absolute; top: 8px; right: 8px; }
@keyframes stats-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 900px) { .stats-bar { right: 8px; left: 8px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .stats-bar { animation: none; } }
:root[data-motion="off"] .stats-bar { animation: none; }
.modal-body { padding: 12px 16px 16px; }
.autosync { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel-2); }
.autosync[hidden] { display: none; }
.autosync p { margin: 6px 0 8px; line-height: 1.45; }
.as-head { display: flex; align-items: center; gap: 8px; }
.as-head b { display: inline-flex; align-items: center; gap: 6px; }
.as-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 4px; background: var(--panel-3); color: var(--text-2); }
.as-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.as-meter { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; }
.as-meter[hidden] { display: none; }
.as-bar { width: 90px; height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; flex: none; }
.as-bar i { display: block; height: 100%; width: 0; background: var(--green, #2ecc71); transition: width .2s; }
.as-status { margin-top: 8px; line-height: 1.4; }
.as-status:empty { display: none; }
.as-status.err { color: var(--orange); }
.as-results { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.as-results:empty { display: none; }
.as-results li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.as-results li > span:first-of-type { flex: 1; }
.as-results .ic { width: 15px; height: 15px; flex: none; }
.as-adjust { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.as-adjust b { min-width: 46px; text-align: center; color: var(--text); }
.as-step { padding: 2px 8px; font-size: 12px; }
.sync-or { margin: 0 0 6px; }
#syncBtn.listening { position: relative; }
#syncBtn.listening::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); animation: as-pulse 1.4s ease-in-out infinite; }
@keyframes as-pulse { 50% { opacity: .35; } }
.sync-now { display: flex; justify-content: space-between; align-items: baseline; background: var(--panel-2); padding: 8px 12px; border-radius: 8px; margin: 10px 0; }
.sync-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.sync-list li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.sync-list li:last-child { border-bottom: none; }
.sync-list .se-text { font-weight: 600; line-height: 1.25; }
.sync-list .se-meta { font-size: 11.5px; color: var(--muted); }
.sync-list .se-kind { display: inline-block; font-size: 10px; font-weight: 900; text-transform: uppercase; padding: 0 5px; border-radius: 3px; background: var(--panel-3); margin-right: 5px; color: var(--text-2); }
.sync-list li.lap .se-kind { background: var(--accent); color: #fff; }
.sync-list li.empty { display: block; color: var(--muted); text-align: center; padding: 18px; }
.sync-save { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sync-save input { flex: 1 1 160px; min-width: 0; background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; }
.sync-save .btn { flex: 0 1 auto; max-width: 100%; }
.preset-manage { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-3); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12.5px; }
.chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.set-block { padding: 10px 0 14px; border-bottom: 1px solid var(--border); }
.set-block:last-child { border-bottom: none; }
.set-block h4 { margin: 0 0 6px; font-size: 14px; }
.cl-list { display: flex; flex-direction: column; gap: 6px; }
.cl-ver { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: var(--panel-2); }
.cl-ver > summary { cursor: pointer; font-size: 13px; }
.cl-ver > summary .muted { margin-left: 6px; font-size: 12px; }
.cl-next { margin-top: 8px; }
.cl-body { font-size: 12.5px; line-height: 1.45; }
.cl-body h5 { margin: 10px 0 2px; font-size: 12.5px; color: var(--accent); }
.cl-body ul { margin: 4px 0; padding-left: 18px; }
.cl-body p { margin: 4px 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.fb-form { display: grid; gap: 8px; margin-top: 8px; border-radius: 10px; }
.ext-card { display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ext-card > div { flex: 1; display: grid; gap: 4px; }
.ext-card .btn { flex: none; }
@media (max-width: 600px) { .ext-card { flex-direction: column; align-items: stretch; } }
.fb-form.drag { outline: 2px dashed var(--accent); outline-offset: 6px; }
.fb-form select { justify-self: start; }
.fb-form textarea { width: 100%; resize: vertical; font: inherit; }
.fb-form .row { margin: 0; }
.fb-form .row input { flex: 1; min-width: 200px; }
.row input[type=password] { flex: 1; min-width: 200px; padding: 5px 8px; }
details summary { cursor: pointer; color: var(--text-2); margin: 6px 0; }
details ol { line-height: 1.6; }

.toast {
  position: fixed; inset: auto auto 18px 50%; margin: 0; transform: translateX(-50%);
  background: var(--panel-3); border: 1px solid var(--border); padding: 9px 16px; border-radius: 9px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5); z-index: 100; font-weight: 600; color: var(--text); overflow: visible;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

.chart-tip {
  position: absolute; pointer-events: none; background: var(--deep); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; font-size: 12px; white-space: nowrap; z-index: 5; color: var(--text);
}

/* ---------- Bandeau drapeau ---------- */
.flag-banner {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex: none;
  padding: 7px 14px; font-weight: 900; font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase;
  animation: pulse 1.1s infinite;
}
.flag-banner .fb-icon { width: 26px; height: 18px; border-radius: 3px; }
.flag-banner .fb-sub { font-size: 13px; font-weight: 700; letter-spacing: .4px; opacity: .85; text-transform: none; }
.flag-banner.red { background: var(--red); color: #fff; }
.flag-banner.red .fb-icon { background: #fff; }
.flag-banner.sc, .flag-banner.vsc { background: var(--sc); color: #1d1200; }
.flag-banner.sc .fb-icon, .flag-banner.vsc .fb-icon { background: #1d1200; }
.flag-banner.yellow { background: var(--yellow); color: #1a1500; animation: none; font-size: 15px; padding: 4px 14px; }
.flag-banner.yellow .fb-icon { background: #1a1500; }
.flag-banner.green { background: var(--green); color: #002012; animation: none; font-size: 15px; padding: 4px 14px; }
.flag-banner.green .fb-icon { background: #002012; }

/* ---------- Contrôles de panneaux ---------- */
.panel-ctrl { display: flex; gap: 2px; margin-left: auto; flex: none; }
.panel-ctrl button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 5px; border-radius: 4px; }
.panel-ctrl button:hover { color: var(--text); background: var(--panel-3); }
.tabs .panel-ctrl { position: sticky; right: 0; background: var(--panel-2); padding-left: 4px; }
.grid.has-max > .panel:not(.maximized) { display: none; }
.grid.has-max { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; grid-template-areas: none !important; }
.grid.has-max > .panel.maximized { grid-area: auto !important; }
.panel.hidden-panel { display: none !important; }
body.solo .topbar .session, body.solo .topbar .hstat, body.solo .brand-name, body.solo #settingsBtn, body.solo #resetUiBtn, body.solo #commBtn { display: none; }
body.solo { overflow: hidden; }

/* ---------- Disposition libre ---------- */
.grid.custom { display: flex; gap: 0; }
.grid.custom > .lcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.grid.custom > .lcol.note { align-items: center; justify-content: center; flex: 1; }
.grid.custom .lcol > .panel { min-height: 0; height: auto; }
.lsplit-v, .lsplit-h { flex: 0 0 10px; position: relative; touch-action: none; }
.lsplit-v { cursor: col-resize; }
.lsplit-h { cursor: row-resize; }
.lsplit-v::after, .lsplit-h::after { content: ''; position: absolute; border-radius: 2px; background: transparent; transition: background .15s; }
.lsplit-v::after { left: 4px; width: 2px; top: 30%; bottom: 30%; }
.lsplit-h::after { top: 4px; height: 2px; left: 30%; right: 30%; }
.lsplit-v:hover::after, .lsplit-h:hover::after, .lsplit-v.active::after, .lsplit-h.active::after { background: var(--blue); }
body.resizing-x, body.resizing-x * { cursor: col-resize !important; user-select: none; }
body.resizing-y, body.resizing-y * { cursor: row-resize !important; user-select: none; }
body.dragging-panel, body.dragging-panel * { cursor: grabbing !important; user-select: none; }
.panel-ctrl .lgrip { cursor: grab; touch-action: none; font-size: 15px; }
.ldrag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; background: var(--panel-2); border: 1px solid var(--blue);
  border-radius: 6px; padding: 4px 10px; font-weight: 700; font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.ldrop { position: fixed; z-index: 999; pointer-events: none; background: rgba(47, 140, 255, .16); border: 2px dashed var(--blue);
  border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #cfe4ff; }
.lpop-menu { position: fixed; z-index: 1001; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px;
  display: flex; flex-direction: column; gap: 4px; min-width: 280px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.lpop-menu button { text-align: left; background: var(--panel-3); border: 1px solid transparent; color: var(--text); border-radius: 6px; padding: 7px 10px; cursor: pointer; font-size: 13px; }
.lpop-menu button:hover { border-color: var(--blue); }
.lpop-menu button:disabled { opacity: .45; cursor: default; border-color: transparent; }
.lpop-menu .rail-sep { height: 1px; background: var(--border); margin: 2px 0; }
#soloFreeBtn.on { color: var(--accent); border-color: var(--accent); }
.grid.custom.has-max .lsplit-v, .grid.custom.has-max .lsplit-h { display: none; }
.grid.custom.has-max > .lcol:not(:has(.panel.maximized)) { display: none; }
/* Panneau agrandi : toute la place, quelles que soient les proportions enregistrées */
.grid.custom.has-max > .lcol:has(.panel.maximized), .grid.custom.has-max .panel.maximized { flex: 1 1 0 !important; }
.grid.custom.has-max .lcol > .panel:not(.maximized) { display: none; }
/* Disposition libre : panneaux placés et dimensionnés à la main (js/ui/layout.js) */
.grid.custom.free { display: block; position: relative; }
.grid.free > .panel { position: absolute; margin: 0; min-width: 0; min-height: 0; box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }
.grid.free > .lcol.note { position: absolute; inset: 0; display: flex; }
.grid.free.has-max > .panel.maximized { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; z-index: 90 !important; }
.fr-rs { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 5; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--muted) 50%, var(--muted) 58%, transparent 58%, transparent 70%, var(--muted) 70%, var(--muted) 78%, transparent 78%);
  border-bottom-right-radius: 8px; opacity: .55; }
.fr-rs:hover { opacity: 1; }
.grid.free.has-max :is(.fr-rs, .fr-edge) { display: none; }
/* Bords et autres coins : zones invisibles, curseur de redimensionnement au survol */
.fr-edge { position: absolute; z-index: 6; touch-action: none; }   /* au-dessus de l'en-tête du panneau */
.fr-n, .fr-s { left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
.fr-n { top: -3px; } .fr-s { bottom: -3px; }
.fr-e, .fr-w { top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.fr-e { right: -3px; } .fr-w { left: -3px; }
.fr-ne, .fr-nw, .fr-sw { width: 14px; height: 14px; }
.fr-ne { top: -3px; right: -3px; cursor: nesw-resize; } .fr-nw { top: -3px; left: -3px; cursor: nwse-resize; } .fr-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
.btn.small { padding: 2px 7px; font-size: 12px; }
.btn.on { background: var(--blue); border-color: var(--blue); color: #001526; }
.subbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.subbar select { background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
.spoil-toggle { margin: 4px 0 6px; }

/* ---------- Classement : animations, colonnes, qualifs ---------- */
.tower tr.flash-up td { animation: tower-up 2.5s ease-out; }
.tower tr.flash-down td { animation: tower-down 2.5s ease-out; }
@keyframes tower-up { from { background-color: rgba(53, 208, 127, .4); } to { background-color: transparent; } }
@keyframes tower-down { from { background-color: rgba(255, 59, 48, .35); } to { background-color: transparent; } }

.tower.hide-int .c-int, .tower.hide-last .c-last, .tower.hide-best .c-best, .tower.hide-sec .c-sec,
.tower.hide-tyre .c-tyre, .tower.hide-pits .c-pits, .tower.hide-speed .c-speed, .tower.hide-duel .c-duel,
.tower.hide-pred .c-pred, .tower.hide-q .c-q, .tower.hide-tags .c-tags, .tower.hide-name .drv-last { display: none !important; }
/* Colonnes facultatives (masquées tant qu'on ne les a pas ajoutées) */
.tower:not(.show-grid) .c-grid, .tower:not(.show-laps) .c-laps, .tower:not(.show-gapf) .c-gapf,
.tower:not(.show-spd) .c-spd, .tower:not(.show-team) .c-team, .tower:not(.show-bsec) .c-bsec { display: none; }
/* État (STAND, SORTIE, TOUR…) dans sa propre colonne : les étiquettes sont alignées d'une ligne à l'autre */
.tower td.c-tags { padding-left: 2px; padding-right: 4px; }
.tower td.c-tags:empty, .tower th.c-tags { padding: 0; }
.tower .c-tags .drv-tags { justify-content: flex-start; }
.tower td.c-grid, .tower td.c-laps, .tower th.c-grid, .tower th.c-laps { text-align: center; }
.tower td.c-spd { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-2); }
.tower td.c-spd b { color: var(--text); font-weight: 600; }
.tower td.c-team { white-space: nowrap; color: var(--text-2); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.tower td.c-gapf.ahead { color: var(--green); }
.tower td.c-gapf.behind { color: var(--orange); }
.tower-cols .map-layers-menu { min-width: 250px; left: 0; right: auto; }   /* bouton à gauche du panneau : menu ouvert vers la droite */
.tower-cols .col-sep { font-size: 11px; color: var(--muted); padding: 6px 8px 2px; text-transform: uppercase; letter-spacing: .6px; }
.tag.push { background: var(--purple); color: #1a0030; }
.pred { font-size: 12px; font-weight: 700; }
.pred small { color: var(--muted); font-weight: 600; }
.cutline { padding: 4px 10px; font-size: 12px; color: var(--text-2); background: rgba(255,59,48,.08); border-bottom: 1px solid var(--border); }
.cutline b { color: var(--text); }
.fav-btn { background: none; border: none; padding: 0 2px; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; opacity: 0; }
.fav-btn.on { color: var(--yellow); opacity: 1; }
.tower tr.trow:hover .fav-btn { opacity: 1; }
.fav-btn:hover { color: var(--yellow); }

/* ---------- Duel : photos, rythme ---------- */
.duel-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--panel-3); border: 2px solid var(--border); }
.duel-side .duel-id { display: flex; align-items: center; gap: 8px; }
.duel-side.b .duel-id { flex-direction: row-reverse; }
.legend-inline { display: flex; gap: 12px; font-size: 11.5px; color: var(--text-2); }
.legend-inline i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
/* Télémétrie : compteurs de deux pilotes */
.tele2 { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.tele2-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Puces de choix des pilotes : largeur ajustée au trigramme (sans le vide laissé par « + Comparer… »),
   flèche et ✕ centrés sur la hauteur */
.tele-chip { display: inline-flex; align-items: center; height: 28px; border: 1.5px solid var(--tc); border-radius: 7px; overflow: hidden; background: var(--panel-2); }
.tele-chip select.tele-pick:not([multiple]):not([size]) { field-sizing: content; min-width: 0; width: auto; height: 100%; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--text); font-weight: 800; font-size: 13px; padding: 0 24px 0 9px; background-position: right 7px center; }
.tele2-vs { color: var(--muted); font-style: italic; font-size: 12px; }
.tele-hint { margin-left: auto; }
.tele2-dials { display: grid; align-items: center; gap: 6px; }
.tele2-dials.two { grid-template-columns: 1fr auto 1fr; }
.tele2-dials.one { grid-template-columns: minmax(0, 360px); justify-content: center; }
.tele2-vs { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; }
.tele2-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tele-name { display: flex; align-items: center; gap: 6px; color: var(--tc); font-size: 15px; }
.tele-name .team-logo { width: 20px; height: 20px; }
.tele-name .muted { color: var(--text-2); }
.dial { width: 100%; max-width: 300px; display: block; }
.dial path { fill: none; stroke-linecap: round; }
.dl-track { stroke: var(--panel-3); stroke-width: 12; }
.dl-speed { stroke-width: 12; }
.dl-in { stroke: var(--panel-3); stroke-width: 8; }
.dl-thr { stroke: #2fd17a; stroke-width: 8; }
.dl-brk { stroke: #ff3b30; stroke-width: 8; }
.dl-tick { fill: var(--text-2); font-size: 9.5px; font-weight: 700; text-anchor: middle; }
.dl-arc-lbl { fill: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: 1.2px; text-anchor: middle; }
.dl-speed-val { fill: var(--text); font-size: 36px; font-weight: 800; text-anchor: middle; font-variant-numeric: tabular-nums; }
.dl-rpm { fill: var(--text); font-size: 15px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.dl-unit { fill: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .8px; text-anchor: middle; }
.dl-gear { fill: var(--text); font-size: 20px; font-weight: 900; text-anchor: middle; }
/* Énergie estimée : recharge (pied levé) et batterie vide (plein gaz sans accélérer) */
.dl-energy { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-anchor: middle; }
.dl-energy.harvest { fill: var(--green); }
.dl-energy.clip { fill: var(--orange); }
.tele-trace { width: 100%; height: 110px; }
.tele-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--panel-3); }

/* ---------- Bagarres / arrêt simulé ---------- */
.battle { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.battle-pair { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.battle-gap { font-size: 18px; font-weight: 900; }
.battle-sub { font-size: 12px; color: var(--muted); }
.battle.hot .battle-gap { color: var(--green); }
.pitsim { padding: 10px 12px; }
.pitsim-ctrl { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.pitsim-ctrl select { display: block; margin-top: 3px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 14px; font-weight: 700; }
.loss-box { flex: 1; min-width: 260px; }
.stepper { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.stepper .btn { min-width: 46px; padding: 6px 8px; font-size: 13px; font-weight: 700; }
.stepper .btn.small { min-width: 0; }
.stepper output { min-width: 74px; text-align: center; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.loss-box input[type=range] { width: 100%; accent-color: var(--red); }
.pit-result { background: var(--panel-2); border-radius: 10px; padding: 12px 14px; margin: 8px 0; }
.pit-result .big { font-size: 30px; font-weight: 900; line-height: 1; }
.pit-order { width: 100%; border-collapse: collapse; margin-top: 6px; }
.pit-order td { padding: 3px 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.pit-order tr.me td { background: rgba(62, 166, 255, .15); font-weight: 700; }

/* ---------- Réglages ---------- */
.rec-list { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow: auto; }
.rec { display: flex; align-items: center; gap: 8px; background: var(--panel-2); padding: 5px 8px; border-radius: 7px; font-size: 12.5px; }
.rec .rec-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-list { display: flex; flex-wrap: wrap; gap: 4px; }
.fav { border: 1px solid var(--border); background: var(--panel-3); border-radius: 999px; padding: 1px 9px; font-size: 12px; cursor: pointer; font-weight: 700; }
.fav.on { background: var(--yellow); color: #1a1500; border-color: var(--yellow); }
#bookmarklet { cursor: grab; }

/* ---------- Carte ---------- */
#mapCanvas { cursor: grab; }
#mapCanvas:active { cursor: grabbing; }
.tower th.t-lap, .tower th.t-gap, .tower th.t-int { text-align: right; }

/* ---------- Mise à jour (appli de bureau) ---------- */
/* Au-dessus des espaces plein écran (Accueil, Saison, Actu : z-index 800) */
.update-pill {
  position: fixed; right: 18px; bottom: 18px; z-index: 1100; display: flex; align-items: center; gap: 10px;
  background: var(--panel-3); border: 1px solid var(--blue); border-radius: 10px; padding: 8px 10px 8px 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5); font-weight: 600; font-size: 13px;
}

/* ---------- Enquêtes / limites de piste ---------- */
.tab-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--orange); color: #221300; font-size: 10.5px; font-weight: 900; margin-left: 3px; }
.inc { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.inc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inc-status { font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; padding: 1px 7px; border-radius: 4px; background: var(--panel-3); color: var(--text-2); }
.inc-status.investigating { background: var(--orange); color: #221300; }
.inc-status.after { background: var(--blue); color: #001526; }
.inc-status.noted { background: var(--line-2); color: var(--text); }
.inc-status.nfa { background: rgba(53, 208, 127, .16); color: var(--green); }
.inc-status.penalty { background: var(--red); color: #fff; }
.inc-status.warning, .inc-status.reprimand { background: var(--yellow); color: #1a1500; }
.inc-cars { display: flex; gap: 8px; font-weight: 700; }
.inc-cars span { display: inline-flex; align-items: center; gap: 4px; }
.inc-where { color: var(--muted); font-size: 12px; }
.inc-reason { font-size: 13px; margin: 4px 0 2px; }
.inc-steps { list-style: none; margin: 4px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--border); font-size: 12px; color: var(--text-2); }
.inc-steps li { padding: 1px 0; }
.inc-steps b { color: var(--text); }
.tl-table { width: 100%; border-collapse: collapse; }
.tl-table td, .tl-table th { padding: 5px 10px; border-bottom: 1px solid var(--line); font-size: 13px; text-align: left; }
.tl-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; position: sticky; top: 0; background: var(--panel); }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.pips i.on { background: var(--yellow); }
.pips i.on.bw { background: repeating-linear-gradient(135deg, #111 0 3px, #fff 3px 6px); }
.pips i.on.pen { background: var(--red); }
.inc-dec { margin: 5px 0 3px; padding: 5px 8px; border-radius: 6px; background: var(--panel-3); border-left: 3px solid var(--muted); font-size: 13px; }
.inc-dec.penalty { border-left-color: var(--red); }
.inc-dec.warning, .inc-dec.reprimand { border-left-color: var(--yellow); }
.inc-dec-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inc-dec-label { font-weight: 700; }
.inc-who { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.inc-who .muted { font-weight: 600; }
.inc-served { font-size: 11px; color: var(--green); }
.fia-doc { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--blue); text-decoration: none; }
.fia-doc:hover { text-decoration: underline; }
.inc > .fia-doc { display: block; }
#stewardsSummary a { color: var(--blue); }
/* Panneaux étroits (disposition libre) : on masque les textes d'aide de l'en-tête */
.grid.custom .panel { container-type: inline-size; }
@container (max-width: 560px) {
  .panel-tools .hint { display: none; }
}

/* Barre du haut sur une seule ligne : on compacte progressivement selon la largeur */
@media (max-width: 2100px) {
  .topbar .sb-label { display: none; }
}
@media (max-width: 1950px) {
  .topbar { gap: 12px; }
  .topbar .delay { gap: 6px; }
  .topbar .preset { max-width: 150px; }
}
@media (max-width: 1800px) {
  .topbar .weather-mini { display: none; }
  .topbar .session { max-width: 240px; }
}
@media (max-width: 1600px) {
  .topbar { gap: 9px; padding: 8px 10px; }
  .topbar .brand-name { display: none; }
  .topbar .hstat-label { font-size: 10px; }
  .topbar .hstat-value { font-size: 16px; }
  .topbar .track-status { min-width: 0; padding: 6px 9px; font-size: 13px; }
  .topbar .dbtn { min-width: 26px; padding: 3px 4px; }
  .topbar .delay-input { width: 58px; font-size: 17px; }
  .topbar .preset { max-width: 112px; }
  .topbar .delay-title { display: none; }
  .topbar #syncBtn { padding: 5px 8px; }
  .topbar .source-badge { padding: 4px 9px; }
  .topbar .icon-btn { padding: 2px 5px; }
}
@media (max-width: 1450px) {
  .topbar .dbtn[data-step="-100"], .topbar .dbtn[data-step="100"] { display: none; }
  .topbar .session { max-width: 170px; }
  .topbar .preset { max-width: 96px; }
}
@media (max-width: 1360px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
}

/* ---------- Commentaires F1 TV ---------- */
.comm-btn { position: relative; }
.comm-btn.on::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); }
.comm-btn.muted { opacity: .55; }
.comm-panel { position: fixed; top: 62px; right: 12px; z-index: 900; width: 380px; max-width: calc(100vw - 24px);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; gap: 8px; }
.comm-head { display: flex; align-items: center; gap: 6px; }
.comm-head .icon-btn { margin-left: auto; }
.comm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comm-row select { display: block; margin-top: 2px; background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; max-width: 170px; }
.comm-row input[type=range] { flex: 1; accent-color: var(--red); min-width: 90px; }
.comm-offset output { min-width: 56px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.comm-status { color: var(--text-2); line-height: 1.35; white-space: pre-line; }
.comm-status.err { color: var(--orange); }
.comm-status.ok { color: var(--green); }
.comm-info { color: var(--text-2); }
.comm-src { gap: 14px; }
.comm-radio-form { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--panel-3); border-radius: 8px; }
.comm-radio-form input, .comm-radio-form select { background: var(--deep); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; color: var(--text); }

/* ---------- Carte : drapeaux, SC / VSC ---------- */
.map-flags { position: absolute; left: 16px; top: 16px; right: 16px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.map-flags:empty { display: none; }
.mf-banner { font-weight: 900; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; padding: 3px 10px; border-radius: 6px; }
.mf-banner.red { background: var(--red); color: #fff; animation: pulse 1s infinite; }
.mf-banner.sc { background: var(--sc, #ffb020); color: #1d1200; animation: pulse 1.2s infinite; }
.mf-banner.vsc { background: rgba(0, 0, 0, .82); color: var(--sc, #ffb020); border: 2px dashed var(--sc, #ffb020); }   /* fond sombre : les voitures de la carte ne passent pas à travers */
.mf-item { font-size: 12px; background: rgba(0, 0, 0, .82); border-left: 3px solid #f5c518; border-radius: 4px; padding: 2px 8px; color: #F1F3F6; }   /* pastille toujours sombre, aussi en thème clair */
.mf-item.dy { border-left-color: #ff9f1a; }
.mf-item b { color: #f5c518; }
.mf-item.dy b { color: #ff9f1a; }
/* Les classes utilitaires .yellow / .green (texte coloré) ne doivent pas s'appliquer aux bandeaux pleins */
.track-status.yellow, .flag-banner.yellow { color: #1a1500 !important; }
.flag-banner.green { color: #002012 !important; }
/* Bandeaux et pastilles de drapeau : texte bien contrasté et fixe (seul le fond pulse) */
@keyframes bg-sc { 50% { background-color: #ffcc55; } }
@keyframes bg-red { 50% { background-color: #ff6157; } }
@keyframes bg-yellow { 50% { background-color: #ffe066; } }
.flag-banner, .track-status.sc, .track-status.vsc, .track-status.red, .mf-banner.sc, .mf-banner.red { filter: none !important; }
.flag-banner.sc, .flag-banner.vsc, .track-status.sc, .track-status.vsc, .mf-banner.sc { color: #000 !important; animation: bg-sc 1.4s ease-in-out infinite; }
.flag-banner.red, .track-status.red, .mf-banner.red { color: #fff !important; animation: bg-red 1.2s ease-in-out infinite; }
.flag-banner.yellow, .track-status.yellow { color: #000 !important; animation: bg-yellow 1.6s ease-in-out infinite; }
.flag-banner .fb-sub { opacity: 1; }
.flag-banner.sc .fb-icon, .flag-banner.vsc .fb-icon, .flag-banner.yellow .fb-icon, .track-status.sc .ts-dot, .track-status.vsc .ts-dot, .track-status.yellow .ts-dot { background: #000; }
.comm-browser { color: var(--blue); text-decoration: none; }
.comm-browser:hover { text-decoration: underline; }

/* État de la piste (haut de page) */
.hstat.surface .hstat-value { font-size: 14px; padding: 1px 8px; border-radius: 5px; display: inline-block; }
.hstat.surface.dry .hstat-value { background: rgba(245, 197, 24, .14); color: #ffd866; }
.hstat.surface.damp .hstat-value { background: rgba(67, 176, 42, .18); color: #7fe06a; }
.hstat.surface.wet .hstat-value { background: rgba(47, 140, 255, .2); color: #7fb8ff; }
.pts-gain { color: var(--green); font-weight: 700; }

/* Fluidité : les mises à jour d'un panneau ne forcent pas le recalcul des autres */
.panel-body, .tabpane { contain: layout paint; }

/* Radios d'équipe (façon MultiViewer) : bande de cartes audio + fil des radios retranscrites */
.tabpane.rd-pane.active { display: flex; flex-direction: column; height: 100%; }
/* Réglages sur une seule ligne (défilable) : les cartes des radios restent visibles dans un petit panneau */
/* Réglages des radios : menu « Options » de l'en-tête du panneau, en colonne */
.rd-menu { margin-left: 8px; }
.rd-menu-body { min-width: 250px; max-width: 320px; }
/* Menu d'options d'un onglet : seulement quand cet onglet est ouvert */
.panel-head:has(> [data-tab="rcm"]:not(.active)) > [data-menu-for="rcm"],
.panel-head:has(> [data-tab="radios"]:not(.active)) > [data-menu-for="radios"] { display: none; }
.rd-row { display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.rcm-hidden { padding: 6px 12px 0; }
.rcm-hidden:empty { display: none; }
.rd-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 4px 6px; }
.rd-bar label { white-space: nowrap; }
.rd-opts { display: contents; }
.rd-opts[hidden] { display: none; }
.rd-status:empty { display: none; }
.rd-status { padding: 6px 6px 2px; border-top: 1px solid var(--line); line-height: 1.4; }
.rd-empty { padding: 10px 12px; }
.rd-av { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--tc); display: grid; place-items: center; }
.rd-av > b { font-size: 11px; color: #fff; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.rd-av img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top; background: color-mix(in srgb, var(--tc) 80%, #000); }
.rd-mic { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; border: 2px solid var(--panel); }
.rd-mic .ic { width: 9px; height: 9px; }
/* Bande du haut */
.rd-strip { flex: none; display: flex; gap: 8px; padding: 8px 10px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.rd-strip:empty { display: none; }
.rd-card { position: relative; flex: none; display: flex; align-items: center; gap: 10px; min-width: 210px; max-width: 260px; padding: 8px 12px 8px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); text-align: left; font: inherit; cursor: pointer; overflow: hidden; }
.rd-card:hover { border-color: var(--line-2); background: var(--hover); }
.rd-card.playing { border-color: var(--rd-prog); }
.rd-card.playing .rd-mic { background: var(--accent); }
.rd-card.unheard::after { content: ''; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.rd-c-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rd-c-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-c-when { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-c-dur { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Progression de la radio en cours : la carte entière se remplit (cyan), barre pleine largeur en bas */
.rd-strip { --rd-prog: #22d3ee; }
:root[data-scheme="light"] .rd-strip { --rd-prog: #0891b2; }
.rd-card > :not(.rd-fill):not(.rd-prog) { position: relative; z-index: 1; }
.rd-fill { position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--rd-prog) 30%, transparent); transform-origin: left; transform: scaleX(0); display: none; pointer-events: none; }
.rd-prog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: none; }
.rd-card.playing .rd-fill { display: block; }
.rd-card.playing .rd-prog { display: block; height: 5px; background: color-mix(in srgb, var(--rd-prog) 25%, var(--line)); cursor: pointer; }
.rd-prog i { display: block; height: 100%; background: var(--rd-prog); transform-origin: left; transform: scaleX(0); }
.rd-card.playing .rd-c-dur { color: var(--rd-prog); }
/* Fil des radios retranscrites */
.rd-vol { width: 110px; }
.rd-speed { min-width: 36px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-3); color: var(--text); font-size: 12px; cursor: pointer; }
.rd-text-off { margin: 4px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-list { list-style: none; margin: 0; padding: 0 4px 6px; flex: 1; min-height: 0; overflow-y: auto; }
.rd-line { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.rd-line:hover { background: var(--hover); }
.rd-line.playing { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rd-l-main { flex: 1; min-width: 0; padding-top: 1px; }
.rd-text { font-size: 14.5px; line-height: 1.4; }
.rd-orig { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 2px; }
.rd-l-who { font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.rd-line .pending { color: var(--muted); font-style: normal; }
.rd-line.ob { cursor: default; }
.rd-ob { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); vertical-align: 1px; }

/* ---------- Panneau Analyse (race trace, positions, temps, pneus, secteurs) ---------- */
.tabpane.ana-pane.active { display: flex; flex-direction: column; height: 100%; }
.ana-chart { position: relative; flex: 1; min-height: 160px; }
.ana-chart canvas { position: absolute; inset: 0; cursor: crosshair; }
.ana-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--panel); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 11.5px; min-width: 150px; max-height: calc(100% - 8px); overflow: hidden; }
.ana-tip b { display: block; margin-bottom: 3px; }
.ana-tip div { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.ana-tip div i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ana-tip div span { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
.ana-tip em { color: var(--muted); font-style: normal; font-size: 10px; }
.tyre-hist-wrap { overflow: auto; height: 100%; }
.tyre-hist { border-collapse: separate; border-spacing: 2px; font-size: 11px; font-variant-numeric: tabular-nums; }
.tyre-hist th { color: var(--muted); font-weight: 600; padding: 2px 4px; text-align: center; }
.tyre-hist th.sticky { position: sticky; left: 0; background: var(--panel); z-index: 1; text-align: left; }
.tyre-hist td { padding: 2px 5px; text-align: center; border-radius: 3px; white-space: nowrap; background: color-mix(in srgb, var(--tc) 22%, transparent); border-bottom: 2px solid var(--tc); }
.tyre-hist td:empty { background: none; border: 0; }
.tyre-hist td.pit { outline: 1px solid #fff; }
:root[data-scheme="light"] .tyre-hist td { background: color-mix(in srgb, var(--tc) 30%, transparent); }
:root[data-scheme="light"] .tyre-hist td.pit { outline: 1.5px solid var(--text); }
:root[data-scheme="light"] .tyre-hist td.best { color: var(--purple); }
.tyre-hist td.best { color: #d58cff; font-weight: 700; }
.tyre-legend { padding: 6px 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.tyre-legend span { border-bottom: 2px solid var(--tc); }
.sector-board { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sector-board th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; padding: 5px 6px; text-align: right; cursor: pointer; white-space: nowrap; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); }
.sector-board th:nth-child(-n+2) { text-align: left; cursor: default; }
.sector-board th.sorted { color: var(--text); }
.sector-board th.sorted::after { content: ''; display: inline-block; margin-left: 5px; vertical-align: middle; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
.sector-board td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--line); }
.sector-board td:nth-child(-n+2) { text-align: left; }
.sector-board td.purple { color: #d58cff; font-weight: 700; }
.sector-board tr[data-num] { cursor: pointer; }
.sector-board tr[data-num]:hover td { background: var(--hover); }

/* Réglages en onglets */
#settingsModal .set-block.set-hidden { display: none; }
/* Panneaux à nombreux onglets : onglets plus compacts pour tenir sur une ligne */
.panel-head.tabs.many .tab { padding: 4px 7px; letter-spacing: .2px; font-size: 12px; }
/* Onglets déplaçables (glisser vers un autre panneau ou une autre place) */
body.tab-dragging, body.tab-dragging * { cursor: grabbing !important; user-select: none; }
.tab-ghost { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); opacity: .95; }
.tab-marker { position: fixed; z-index: 10001; width: 3px; border-radius: 2px; background: var(--accent); pointer-events: none; }
.panel.tab-drop { box-shadow: inset 0 0 0 2px var(--accent); }
.tab-empty { margin: 16px; text-align: center; }
.tab-empty .btn { margin-top: 10px; }
.panel:not(:has(.panel-ctrl [data-act="hide"])) .tab-empty .btn { display: none; }

/* ---------- Espace Saison ---------- */
.season-btn { font-weight: 700; }
.season-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.season-view { position: fixed; inset: var(--sz-top, 62px) 0 0 0; z-index: 800; display: flex; background: var(--bg); }
.sz-side { width: 220px; flex: none; border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--panel); }
.sz-side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; font-size: 16px; }
#szNav, #nwNav, #rvNav { display: flex; flex-direction: column; gap: 2px; }
:is(#szNav, #nwNav, #rvNav) button { text-align: left; background: none; border: 0; color: var(--text-2); font: inherit; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
:is(#szNav, #nwNav, #rvNav) button:hover { background: var(--hover); color: var(--text); }
:is(#szNav, #nwNav, #rvNav) button.active { background: var(--panel-3); color: var(--text); }
.sz-back { margin-top: auto; }
.sz-src { padding: 6px; }
.sz-main { flex: 1; overflow: auto; padding: 18px 22px 30px; }
.sz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sz-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-height: 110px; }
.sz-big { font-size: 24px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.sz-big small { font-size: 13px; font-weight: 600; color: var(--muted); }
.sz-count { background: linear-gradient(135deg, #d4110a, #7d0703); border-color: #e21a12; grid-column: span 2; }
.sz-kicker { font-weight: 700; }
.sz-badge { background: rgba(0,0,0,.3); border-radius: 5px; padding: 1px 6px; font-size: 12px; margin-right: 4px; }
.sz-countdown { display: flex; gap: 18px; margin-top: 6px; }
.sz-countdown span { display: flex; flex-direction: column; }
.sz-countdown b { font-size: 34px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.sz-countdown small { font-size: 11px; text-transform: uppercase; opacity: .8; letter-spacing: .5px; }
.sz-when { opacity: .85; }
.sz-progress { height: 6px; background: var(--panel-3); border-radius: 3px; overflow: hidden; margin: 4px 0; }
.sz-progress i { display: block; height: 100%; background: var(--accent); }
.sz-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sz-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; overflow-x: auto; }
.sz-box h3 { margin: 0 0 10px; font-size: 17px; }
.sz-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 8px; }
.sz-table th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.sz-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sz-table td .drv-bar { display: inline-block; vertical-align: middle; margin-right: 8px; height: 16px; }
.sz-big .drv-bar { height: 22px; }
.sz-table tr.muted td { color: var(--muted); }
.sz-chip { display: inline-block; border-left: 3px solid var(--tc); background: color-mix(in srgb, var(--tc) 18%, transparent); padding: 1px 7px; border-radius: 4px; font-weight: 700; font-size: 12.5px; }
.sz-tag { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 4px; background: var(--panel-3); color: var(--text-2); margin-right: 3px; }
.sz-tag.done { background: rgba(53, 208, 127, .15); color: var(--green); }
.sz-tag.next { background: var(--accent); color: #fff; }
.sz-tag.sprint { background: rgba(199, 125, 255, .18); color: var(--purple); }
/* Calendrier : prochain Grand Prix en grand, puis la saison en liste groupée par mois */
.cal { display: flex; flex-direction: column; gap: 14px; }
.cal-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: stretch; padding: 18px 20px; border-radius: 6px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 26%, var(--panel)) 0%, var(--panel) 58%); border: 1px solid var(--border); border-left: 4px solid var(--accent); }
.cal-hero-main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.cal-hero-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--accent); color: #fff; font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.cal-round { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.cal-hero-name { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; font: 800 34px/1.05 var(--font-cond, var(--font)); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.cal-hero-name .cal-flag { width: 42px; height: 28px; }
.cal-hero-sub { color: var(--text-2); font-size: 13px; }
.cal-next { margin-top: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cal-hero .sz-countdown { margin: 0 0 6px; }
.cal-days { display: flex; gap: 8px; align-self: center; }
.cal-day { min-width: 132px; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.cal-day-h { padding: 5px 10px; background: var(--bc-pos-bg, var(--text)); color: var(--bc-pos-fg, var(--bg)); font: 800 12px/1.3 var(--font-cond, var(--font)); letter-spacing: .08em; text-transform: uppercase; }
.cal-s { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; font-size: 13px; border-top: 1px solid var(--line); }
.cal-s:first-of-type { border-top: 0; }
.cal-s b { font-variant-numeric: tabular-nums; }
.cal-s.past { color: var(--muted); }
.cal-progress { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 13px; }
.cal-progress .sz-progress { flex: 1; margin: 0; }
.cal-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); overflow: hidden; }
.cal-month { padding: 7px 14px 5px; background: var(--panel-2); color: var(--muted); font: 700 11px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; border-top: 1px solid var(--line); }
.cal-month:first-child { border-top: 0; }
.cal-row { border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.cal-month + .cal-row { border-top: 0; }
.cal-row > summary { display: grid; grid-template-columns: 34px 28px minmax(0, 1fr) 120px 70px minmax(0, 300px) 16px; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; list-style: none; }
.cal-row > summary::-webkit-details-marker { display: none; }
.cal-row > summary:hover { background: var(--hover); }
.cal-num { display: grid; place-items: center; height: 26px; border-radius: 3px; background: var(--panel-3); color: var(--text-2); font: 800 15px/1 var(--font-cond, var(--font)); font-variant-numeric: tabular-nums; }
.cal-row.next .cal-num { background: var(--bc-pos-bg, var(--text)); color: var(--bc-pos-fg, var(--bg)); }
.cal-row.next { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); box-shadow: inset 4px 0 var(--accent); }
.cal-flag { width: 28px; height: 19px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--line-2); }
.cal-name { display: flex; flex-direction: column; min-width: 0; }
.cal-name b { font: 700 15px/1.2 var(--font); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-name small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-date { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-res { display: flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.cal-res .ic { color: #ffd166; flex: none; }
.cal-state { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cal-row.next .cal-state { color: var(--accent); }
.cal-row.done > summary :is(.cal-name b, .cal-date) { color: var(--text-2); }
.cal-chev { color: var(--muted); transition: transform .15s; }
.cal-row[open] .cal-chev { transform: rotate(180deg); }
.cal-row-body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 4px 14px 14px 88px; }
.cal-row-body .cal-days { align-self: auto; flex-wrap: wrap; }
@media (max-width: 1100px) {
  .cal-hero { grid-template-columns: 1fr; }
  .cal-days { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .cal-row > summary { grid-template-columns: 30px 26px minmax(0, 1fr) 16px; row-gap: 4px; }
  .cal-row > summary :is(.cal-date, .cal-sprint, .cal-res, .cal-state) { grid-column: 3; }
  .cal-row > summary .cal-sprint:empty { display: none; }
  .cal-row-body { padding-left: 14px; }
  .cal-hero-name { font-size: 26px; }
}
.sz-svg { width: 100%; height: auto; }
.sz-gl { stroke: var(--line-2); stroke-width: 1; }
.sz-ax { fill: var(--muted); font-size: 11px; }
.sz-lbl { font-size: 11px; font-weight: 700; }
.sz-h2h-pick { margin-bottom: 10px; }
.sz-h2h { max-width: 760px; }
.sz-h2h-head { display: flex; justify-content: space-between; align-items: center; font-size: 20px; margin-bottom: 10px; }
.sz-vs { font-weight: 900; font-style: italic; color: var(--muted); }
.sz-h2h-row { padding: 6px 0; border-top: 1px solid var(--line); }
.sz-h2h-label { text-align: center; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.sz-h2h-bar { display: flex; align-items: center; gap: 10px; }
.sz-h2h-bar > span { width: 34px; text-align: center; font-weight: 800; font-size: 16px; color: var(--muted); }
.sz-h2h-bar > span.win { color: var(--text); }
.sz-h2h-track { flex: 1; height: 14px; background: var(--panel-3); border-radius: 7px; position: relative; overflow: hidden; }
.sz-h2h-track i { position: absolute; top: 0; bottom: 0; }
.sz-h2h-track i.a { right: 50%; }
.sz-h2h-track i.b { left: 50%; background: #e8e8ee; }
@media (max-width: 900px) { .sz-side { width: 160px; } .sz-count { grid-column: auto; } .sz-grid2 { grid-template-columns: 1fr; } }

.ana-pace { flex: 1; display: flex; min-height: 0; }
.ana-pace .ana-chart { flex: 1; }
.ana-fastest { width: 230px; flex: none; overflow: auto; border-left: 1px solid var(--border); }
.ana-fastest-title { padding: 6px 8px; }
.ana-png { margin-left: auto; }
.ana-cutoff { width: 90px; vertical-align: middle; }
@container (max-width: 560px) { .ana-fastest { display: none; } }

/* ---------- Carte : menu des calques et zoom ---------- */
.p-map .panel-head { position: relative; z-index: 6; }
.map-layers { position: relative; }
.map-layers > summary { list-style: none; user-select: none; }
.map-layers > summary::-webkit-details-marker { display: none; }
.map-layers[open] > summary { border-color: var(--accent); color: var(--text); }
.map-layers-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
.map-layers-menu .toggle { padding: 6px 8px; border-radius: 6px; color: var(--text-2); white-space: nowrap; }
.map-layers-menu .toggle:hover { background: var(--hover); color: var(--text); }
.map-zoom {
  position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 2px; padding: 3px;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent); border: 1px solid var(--border); border-radius: 9px;
  backdrop-filter: blur(6px); opacity: .55; transition: opacity .15s;
}
.map-wrap:hover .map-zoom { opacity: 1; }
.map-zoom .icon-btn { width: 28px; height: 26px; padding: 0; font-size: 16px; line-height: 1; display: grid; place-items: center; }

/* Logo d'écurie (blanc) sur pastille aux couleurs de l'équipe */
.team-logo {
  width: 24px; height: 24px; flex: none; border-radius: 5px; display: inline-block; vertical-align: middle;
  background-color: color-mix(in srgb, var(--tc) 52%, #000);
  background-position: center; background-repeat: no-repeat; background-size: 76%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 75%, transparent), inset 3px 0 0 var(--tc);
}
.champ .team-logo { width: 19px; height: 19px; margin-right: 6px; }
/* Logo en couleurs officielles : pastille claire, filet à la couleur de l'écurie */
.team-logo.color {
  background-color: #f2f2f5; background-size: 66%; background-position: 60% center;
  box-shadow: inset 3px 0 0 var(--tc);
}

/* ---------- Saison : statistiques détaillées ---------- */
.sz-nav-sep { margin: 12px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.sz-kpis { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.sz-kpi { min-height: 0; }
.sz-kpi .sz-big { font-size: 24px; }
.sz-drv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, var(--panel)), var(--panel) 60%); }
.sz-drv-head .drv-bar { height: 44px; width: 7px; }
.sz-drv-name { font-size: 24px; font-weight: 900; }
.sz-dnf { fill: var(--red); font-weight: 900; }
.sz-hbars { display: flex; flex-direction: column; gap: 5px; }
.sz-hbar { display: grid; grid-template-columns: 150px 1fr 82px; align-items: center; gap: 10px; font-size: 13px; }
.sz-hb-l { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz-hb-l .team-logo { width: 20px; height: 20px; }
.sz-hb-t { height: 12px; background: var(--panel-3); border-radius: 6px; overflow: hidden; }
.sz-hb-t i { display: block; height: 100%; border-radius: 6px; opacity: .9; }
.sz-hb-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.sz-scroll { overflow-x: auto; }
.sz-heat th, .sz-heat td { text-align: center; white-space: nowrap; }
.sz-heat td:first-child, .sz-heat th:first-child { text-align: left; }
.sz-heat td:first-child .team-logo, .sz-table td .team-logo { width: 20px; height: 20px; margin-right: 7px; }
.sz-hm { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.sz-circs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
.sz-circ { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.sz-circ-head b { font-size: 17px; font-weight: 900; }
.sz-circ-body { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.sz-outline { width: 120px; height: 120px; display: grid; place-items: center; text-align: center; }
.sz-outline polygon { fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linejoin: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)); }
.sz-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12.5px; }
.sz-facts dt { color: var(--muted); }
.sz-facts dd { margin: 0; font-weight: 700; text-align: right; }
.sz-meter { display: grid; grid-template-columns: 112px 1fr 104px; align-items: center; gap: 8px; font-size: 12px; }
.sz-meter span { color: var(--muted); }
.sz-meter div { height: 7px; background: var(--panel-3); border-radius: 4px; overflow: hidden; }
.sz-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ff8a4d); border-radius: 4px; }
.sz-meter b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .sz-hbar { grid-template-columns: 110px 1fr 70px; } }
.sz-stress .sz-dots { height: auto; background: none; display: flex; gap: 4px; overflow: visible; }
.sz-stress .sz-dots i { width: 14px; height: 7px; border-radius: 3px; background: var(--panel-3); }
.sz-stress .sz-dots i.on { background: linear-gradient(90deg, #ffd166, var(--accent)); }
.sz-cpd { font-variant-numeric: tabular-nums; }
.sz-near { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.sz-near .muted { margin-right: 4px; }
.sz-near .sz-tag { text-transform: none; letter-spacing: 0; font-weight: 700; }

/* ---------- Saison : notes des pilotes ---------- */
.sz-grade { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-weight: 900; font-size: 13px; color: #111; vertical-align: middle; }
.sz-grade.big { width: 34px; height: 34px; font-size: 20px; border-radius: 8px; }
.sz-grade-n { margin-left: 6px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle; }
.sz-big .sz-grade-n { font-size: 20px; }
.sz-grade.g-S { background: linear-gradient(135deg, #ffe08a, #f5b52e); }
.sz-grade.g-A { background: #3ddc84; }
.sz-grade.g-B { background: #8fd3ff; }
.sz-grade.g-C { background: #c9ced8; }
.sz-grade.g-D { background: #ffb36b; }
.sz-grade.g-F { background: #ff6b6b; }
.sz-grade-scale { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.sz-grade-scale > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sz-rate td, .sz-rate th { white-space: nowrap; }
.sz-rate th { font-size: 11px; }
.sz-rate .sz-rate-g { min-width: 64px; }
.sz-how p { margin: 6px 0; font-size: 13px; }
.sz-how ul { margin: 4px 0 8px; padding-left: 20px; font-size: 13px; columns: 2; }
.sz-up { color: var(--green); }
.sz-down { color: var(--red); }
.sz-h2h-grades > div { flex: 1; }
.sz-gap-chart { min-width: 620px; }
.sz-svg .sz-clip { fill: #fff; font-weight: 800; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 2px; }
.sz-h2h-grades > span { width: auto; min-width: 34px; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
@media (max-width: 900px) { .sz-how ul { columns: 1; } }

/* ---------- Saison : évolutions techniques et éléments moteur ---------- */
.sz-upd { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 8px; margin-top: 8px; }
.sz-upd-item { background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--tc); border-radius: 8px; padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; }
.sz-upd-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sz-upd-head .team-logo { width: 20px; height: 20px; }
.sz-upd-head b { font-size: 14px; }
.sz-pu { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sz-pu small { color: var(--muted); margin-left: 1px; }
.sz-pu.at { background: color-mix(in srgb, var(--orange) 22%, transparent); }
.sz-pu.over { background: color-mix(in srgb, var(--red) 30%, transparent); }
.sz-pu.over b { color: #fff; }
.sz-pu-key { display: inline-block; padding: 0 6px; border-radius: 4px; margin-left: 6px; }
.sz-pu-key.at { background: color-mix(in srgb, var(--orange) 22%, transparent); }
.sz-pu-key.over { background: color-mix(in srgb, var(--red) 30%, transparent); }
.sz-h2h-pick { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* Course au titre : portraits, éliminés grisés, barre points actuels + maximum possible */
.tr-intro { display: flex; gap: 40px; flex-wrap: wrap; }
.tr-big { font-size: 20px; font-weight: 800; }
.tr-count, .tr-champ { margin: -4px 0 12px; font-size: 14px; color: var(--text-2); }
.tr-count b { font-size: 18px; color: var(--text); }
.tr-champ { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 9px; font-weight: 800; color: #1d1500; background: var(--yellow); }
.tr-clinch { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); border-left: 3px solid var(--yellow); background: var(--panel-2, var(--panel)); font-size: 13px; }
.tr-cl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tr-cl-head .ic { width: 15px; height: 15px; margin-top: -2px; vertical-align: middle; color: var(--yellow); }
.tr-cl-sub { margin-top: 8px; color: var(--text-2); }
.tr-cl-scroll { overflow-x: auto; }
.tr-cl-tbl { margin-top: 4px; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.tr-cl-tbl th { padding: 2px 18px 3px 0; text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); }
.tr-cl-tbl td { padding: 3px 18px 3px 0; border-top: 1px solid var(--border); }
.tr-cl-who { padding-left: 6px; border-left: 3px solid var(--tc); font-weight: 800; }
@media (max-width: 600px) { .tr-cl-tbl { white-space: normal; } .tr-cl-tbl :is(th, td) { padding-right: 10px; } }
.tr-cl-note { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tr-card { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); border-left: 3px solid var(--tc); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 12%, var(--panel)) 0%, var(--panel) 60%); transition: opacity .2s, filter .2s; }
.tr-card.out { opacity: .5; filter: grayscale(1); background: var(--panel); }
.tr-card.out:hover { opacity: .85; }
.tr-pic { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; background: color-mix(in srgb, var(--tc) 30%, var(--panel-3)); display: grid; place-items: center; }
.tr-pic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top; }
.tr-pic > span:not(.team-logo) { font: 800 15px "Saira Condensed", sans-serif; color: var(--text); }
.tr-pic.logo { border-radius: 12px; background: var(--panel-3); }
.tr-pic.logo .team-logo { width: 46px; height: 46px; }
.tr-pic em { position: absolute; left: -4px; bottom: -2px; min-width: 18px; text-align: center; font: 800 11px/1 "Saira Condensed", sans-serif; font-style: normal; padding: 3px 4px; border-radius: 6px; background: var(--tc); color: #fff; box-shadow: 0 0 0 2px var(--panel); }
.tr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-info > b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-team { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-pts { font-size: 12.5px; }
.tr-pts b { font-size: 15px; }
.tr-sub { font-size: 11.5px; color: var(--text-2); }
.tr-sub.lead { color: var(--green); font-weight: 800; }
.tr-out { font-size: 11.5px; font-weight: 700; color: var(--red); }
.tr-card.out .tr-out { color: var(--text-2); }
.tr-bar { position: relative; display: flex; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--panel-3); }
.tr-bar i { display: block; height: 100%; }
.tr-bar i.now { border-radius: 3px 0 0 3px; }
.tr-bar i.max { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tc) 55%, transparent) 0 3px, transparent 3px 6px); }
.tr-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }

/* Duel : écurie choisie par son logo, ou pilote contre pilote ; deux colonnes sur grand écran */
.sz-team-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; margin-bottom: 12px; }
.sz-team-btn { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; }
.sz-team-btn > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-team-btn:hover { border-color: var(--tc); color: var(--text); }
.sz-team-btn.on { border-color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc); background: color-mix(in srgb, var(--tc) 10%, var(--panel)); color: var(--text); }
.sz-team-btn .team-logo, .sz-team-btn .drv-bar { flex: none; }
.sz-team-btn .team-logo { width: 26px; height: 26px; }
.sz-h2h-drivers { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.sz-h2h-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.sz-h2h-layout .sz-h2h { max-width: none; }
.sz-h2h-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sz-h2h-who .team-logo { width: 28px; height: 28px; }
@media (max-width: 1100px) { .sz-h2h-layout { grid-template-columns: minmax(0, 1fr); } }
.sz-wrap td { white-space: normal; }
.sz-wrap td:first-child { white-space: nowrap; }

/* ======================================================================
   Mode mobile (téléphone, tablette en portrait) : un panneau à la fois
   ====================================================================== */
.mob-nav, .mob-panels { display: none; }
html:not(.phone) [data-phone] { display: none !important; }
html.phone [data-desk] { display: none !important; }
/* Ordinateur, mode Essentiel : le principal seulement (data-expert : mode Complet) */
html.essential [data-expert] { display: none !important; }
/* Mode Essentiel : classement compact (code pilote, écart, secteurs en couleur, pneus), sans nom complet ni mini-secteurs ;
   agrandi (⤢) : les colonnes choisies dans son menu */
html.essential:not(.ess-quali):not(.ess-big) .p-tower:not(.maximized) .tower :is(.c-int, .c-last, .c-best, .c-pits, .c-speed, .c-duel, .drv-last) { display: none !important; }
/* Essentiel, essais et qualifs : meilleur tour, écart et intervalle, secteurs en couleur (sans mini-secteurs) ;
   en qualifs (colonnes Q1-Q3), le tour en cours (temps prévu et position visée) */
html.essential.ess-quali:not(.ess-big) .p-tower:not(.maximized) .tower :is(.c-last, .c-speed, .c-duel, .drv-last),
html.essential.ess-quali:not(.ess-big) .p-tower:not(.maximized) .tower:not(:has(.c-q)) .c-pred { display: none !important; }
/* Essentiel, écran plus grand que le 1080p : grand classement (dernier tour, secteurs et mini-secteurs), sans speed trap ni boutons duel ;
   tour en cours seulement en qualifs */
html.essential.ess-big .p-tower:not(.maximized) .tower :is(.c-speed, .c-duel),
html.essential.ess-big .p-tower:not(.maximized) .tower:not(:has(.c-q)) .c-pred { display: none !important; }
/* Essentiel : télémétrie seule dans le panneau Analyse */
html.essential .p-analysis [data-tab]:not([data-tab="telemetry"]) { display: none !important; }
html.essential .p-tower .panel-tools .hint { display: none; }
html.essential:not(.ess-big) .tower .c-sec .segs { display: none; }
html.essential:not(.ess-big) .p-tower:not(.maximized) .tower td.c-sec .sector-val { font-size: 0; width: 22px; height: 8px; margin: 0 auto; border-radius: 2px; background: #E3B505; }
html.essential:not(.ess-big) .p-tower:not(.maximized) .tower td.c-sec .sector-val.green { background: var(--green); }
html.essential:not(.ess-big) .p-tower:not(.maximized) .tower td.c-sec .sector-val.purple { background: var(--purple); }
html.essential:not(.ess-big) .p-tower:not(.maximized) .tower td.c-sec .sector-val:has(.dim) { background: var(--line-2); }

/* Design classique : pas de bandeau du bas (il fait partie du design Broadcast) */
html[data-design="classic"] .rc-bar { display: none !important; }
.tb-break { display: none; }
@media (max-width: 900px) {
  .topbar .tb-break { display: block; flex-basis: 100%; height: 0; }
  .topbar #sourceLabel { font-size: 11px; }
  .grid.mobile .tower .drv-num { display: none; }
  .grid.mobile .tower .team-logo { width: 22px; height: 22px; }
  html, body { height: 100%; }
  body { overflow: hidden; height: 100dvh; padding-top: env(safe-area-inset-top); }
  /* Barre du haut sur trois lignes compactes */
  .topbar { flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; }
  .topbar .brand-name, .topbar .weather-mini, .topbar .delay-title, .topbar .preset, .topbar .spacer,
  .topbar #resetUiBtn, .topbar .sb-label, .topbar .sync-label,
  .topbar .dbtn[data-step="-100"], .topbar .dbtn[data-step="100"], .topbar .dbtn[data-step="-5000"], .topbar .dbtn[data-step="5000"] { display: none !important; }
  .topbar .brand { order: 0; }
  .topbar .session { order: 1; flex: 1 1 0; min-width: 0; max-width: none !important; }
  .topbar .tb-break.b1 { order: 2; }
  .topbar .tb-break.b2 { order: 4; }
  .topbar .session-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
  .topbar .track-status { order: 1; min-width: 0; padding: 5px 9px; font-size: 12px; }
  .topbar .hstat { order: 3; }
  .topbar .hstat-label { font-size: 9.5px; }
  .topbar .hstat-value { font-size: 15px; }
  .topbar .delay { order: 5; flex: 0 1 auto; justify-content: flex-start; gap: 6px; padding: 3px 5px; }
  .topbar .delay-controls { gap: 4px; }
  .topbar .delay-input { width: 58px; font-size: 17px; }
  .topbar .dbtn { min-width: 34px; min-height: 34px; }
  .topbar #syncBtn { padding: 6px 12px; font-size: 16px; }
  .topbar .delay > * { flex: none; }
  .topbar .source-badge { order: 6; padding: 5px 8px; margin-left: auto; }
  .topbar #seasonBtn, .topbar #newsBtn, .topbar #commBtn, .topbar #settingsBtn { order: 7; }
  .topbar .tb-tools { order: 6; }
  .topbar .tb-tool { width: 30px; height: 30px; }
  .topbar .session-flag { width: 24px; height: 16px; }
  .topbar :is(#seasonBtn, #newsBtn) { padding: 5px 9px; }
  .topbar .icon-btn { padding: 4px 6px; font-size: 19px; }
  /* Barre de lecture (replay) : deux lignes, lecture + barre, puis heure et commandes */
  html[data-theme="pitwall"] .replaybar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 8px 10px 6px; align-items: center; }
  .replaybar .rp-main { display: contents; }
  .replaybar .rp-top, .replaybar #rpStart, .replaybar .rp-flags, .rp-speed[data-speed="10"], .rp-speed[data-speed="20"], .rp-speed[data-speed="30"] { display: none; }
  html[data-theme="pitwall"] .rp-play { width: 34px; height: 34px; }
  .replaybar .rp-track { grid-column: 2; grid-row: 1; margin: 6px 7px 0 2px; }
  .replaybar .rp-side { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; gap: 6px; }
  .replaybar .rp-side .btn.small, .rp-speed { height: 28px; padding: 0 8px; min-width: 0; }
  .replaybar .rp-mo-l, .replaybar .rp-dur { display: none; }
  [data-theme="pitwall"] .replaybar .rp-time { margin-right: auto; }
  .replaybar #rpClose { padding: 0 4px; height: 28px; }
  /* Un panneau à la fois, sur toute la hauteur disponible */
  .grid.mobile { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 6px; gap: 0; overflow: hidden; }
  .grid.mobile > .panel { flex: 1 1 auto; height: auto !important; min-height: 0; border-radius: 10px; }
  /* Calques de la carte : au-dessus de la barre du bas, toute la largeur, défilement au doigt (le panneau
     coupait le menu) */
  .grid.mobile .map-layers-menu { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom));
    max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  .grid.mobile .map-layers-menu .toggle { white-space: normal; }
  .grid.mobile .panel-ctrl { display: none; }
  .grid.mobile .panel-head .hint, .p-tower .panel-head .hint { display: none; }
  /* Classement : colonnes essentielles */
  .grid.mobile .tower .c-last, .grid.mobile .tower .c-best, .grid.mobile .tower .c-sec, .grid.mobile .tower .c-pred,
  .grid.mobile .tower .c-q, .grid.mobile .tower .c-speed, .grid.mobile .tower .c-duel { display: none; }
  .grid.mobile .tower { zoom: 1 !important; --tower-row-h: 34px !important; }
  .grid.mobile .tower td, .grid.mobile .tower th { padding-left: 4px; padding-right: 4px; }
  /* ☆ visible seulement au survol : inutile au doigt (favoris dans ⚙ → Alertes & favoris) */
  .grid.mobile .tower .fav-btn { display: none; }
  .grid.mobile .tower .drv { gap: 5px; }
  /* Barre d'onglets du bas */
  .mob-nav { display: flex; flex: none; overflow-x: auto; scrollbar-width: none; background: var(--panel); border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 2px; }
  .mob-nav[hidden] { display: none; }
  /* Saison, Actu, Commentaires et Réglages sont dans la barre du bas : la barre du haut garde une ligne de moins */
  body:has(#mobNav:not([hidden])) .topbar :is(#seasonBtn, #newsBtn, #commBtn, #settingsBtn) { display: none; }
  /* « Retour au direct » : bouton Direct de la barre du bas, qui reste visible sous les espaces */
  body:has(#mobNav:not([hidden])) :is(#szClose, #nwClose) { display: none; }
  /* Téléphone, version simplifiée : l'essentiel seulement (data-full : ordinateur ou version complète) */
  html.phone.simple [data-full] { display: none !important; }
  /* Panneaux du Direct en onglets, sous la barre du haut */
  .mob-panels:not([hidden]) { display: flex; flex: none; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px 8px; background: var(--panel); border-bottom: 1px solid var(--border); }
  .mob-panels::-webkit-scrollbar { display: none; }
  .mob-panels button { flex: none; background: none; border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .mob-panels button.active { background: var(--panel-3); border-color: var(--line-2); color: var(--text); }
  .mob-more { position: fixed; z-index: 1001; min-width: 230px; }
  .mob-more button { font-size: 15px; padding: 11px 12px; }
  .mob-nav::-webkit-scrollbar { display: none; }
  /* Tous les onglets tiennent sur la largeur du téléphone (« Stratégie » n'est plus coupé) */
  .mob-nav button { flex: 1 1 0; min-width: 48px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 1px 4px;
    background: none; border: 0; border-radius: 8px; color: var(--muted); font-size: 10.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  @media (max-width: 380px) { .mob-nav button { font-size: 9.5px; } }
  .mob-nav button.active { color: var(--text); background: var(--panel-3); }
  /* Espace Saison : menu en bandeau horizontal */
  .season-view { flex-direction: column; }
  .sz-side { width: auto !important; flex-direction: row; align-items: center; overflow-x: auto; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--border); gap: 4px; }
  .sz-side-head { padding: 0 6px 0 0; flex: none; }
  .sz-side-head b { display: none; }
  #szNav, #nwNav, #rvNav { display: flex; flex-direction: row; gap: 2px; flex: none; }
  :is(#szNav, #nwNav, #rvNav) button { white-space: nowrap; padding: 7px 9px; }
  .sz-nav-sep, .sz-src { display: none; }
  .sz-back { flex: none; }
  .sz-main { padding: 10px !important; }
  .sz-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  .sz-count { grid-column: 1 / -1 !important; }
  .sz-upd { grid-template-columns: 1fr; }
  .sz-circs { grid-template-columns: 1fr; }
  .sz-hbar { grid-template-columns: 96px 1fr 64px; font-size: 12px; }
  .sz-scroll, .sz-box { overflow-x: auto; }
  /* Fenêtres de réglages / synchro sur toute la largeur */
  .modal { width: calc(100vw - 16px) !important; max-width: none !important; max-height: calc(100dvh - 16px); }
  /* Champs à 16 px : pas de zoom automatique sur iPhone */
  input, select, textarea { font-size: 16px; }
}
@media (max-width: 480px) {
  .topbar #sourceLabel { display: none; }
  .topbar .source-badge { padding: 9px; }
  .topbar .hstat-value { font-size: 14px; }
  .topbar { row-gap: 4px; }
}
@media (max-width: 400px) {
  .topbar { column-gap: 6px; padding: 6px 8px; }
  .topbar .delay { gap: 4px; padding: 3px 4px; }
  .topbar .delay-input { width: 50px; }
  .topbar .dbtn { min-width: 30px; }
  .topbar #syncBtn { padding: 6px 8px; }
  .topbar :is(#seasonBtn, #newsBtn) { padding: 5px 6px; }
  .topbar .icon-btn { padding: 4px 4px; }
}
/* Téléphone : boutons du haut resserrés pour tenir sur une ligne (Saison, Actu, Radios, Réglages) */
@media (max-width: 480px) {
  .topbar { column-gap: 6px; }
  .topbar .tb-tools { gap: 2px; }
  .topbar .tb-tool { width: 26px; }
  .topbar :is(#seasonBtn, #newsBtn) { padding: 4px 5px; }
  .topbar .source-badge { padding: 4px 6px; }
}
@media (max-width: 400px) {
  .topbar { column-gap: 4px; }
  .topbar .tb-tool { width: 24px; }
  .topbar #syncBtn { padding: 6px 6px; }
  .topbar :is(#seasonBtn, #newsBtn, .icon-btn) { padding: 4px 3px; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .grid.mobile .tower .c-last, .grid.mobile .tower .c-best { display: table-cell; }
}
@media (max-width: 900px) {
  .grid.mobile .p-duel .panel-head { flex-wrap: wrap; row-gap: 6px; }
}

/* Accès depuis le téléphone */
.lan-wrap { display: flex; gap: 16px; align-items: flex-start; margin-top: 8px; flex-wrap: wrap; }
.lan-qr { width: 170px; height: 170px; flex: none; background: #fff; border-radius: 10px; padding: 6px; }
.lan-qr svg { width: 100%; height: 100%; display: block; }
.qr-mini { width: 112px; height: 112px; flex: none; background: #fff; border-radius: 8px; padding: 4px; }
.qr-mini svg { width: 100%; height: 100%; display: block; }
.lan-wrap .small { flex: 1; min-width: 220px; }
.lan-wrap p { margin: 0 0 8px; }
#lanUrl { word-break: break-all; user-select: all; }

/* Écran tactile sans clavier : pas de raccourcis clavier */
@media (hover: none) and (pointer: coarse) {
  #shortcutsBlock { display: none !important; }
}
@media (max-width: 380px) {
  .grid.mobile .tower td, .grid.mobile .tower th { padding-left: 3px; padding-right: 3px; }
  .replaybar .rp-side .btn.small, .rp-speed { padding: 0 5px; }
  .replaybar .rp-side { gap: 5px; }
}
@media (max-width: 340px) {
  .grid.mobile .tower .c-pits { display: none; }
}

/* Évolutions techniques : traduction */
.sz-tr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 10px; }
.sz-tr-wait { color: var(--muted); font-style: italic; }
.sz-upd-desc { color: var(--text-2); }

/* ---------- Listes déroulantes (voir js/ui/select.js) ---------- */
select:not([multiple]):not([size]):not(.x-native) {
  appearance: none; -webkit-appearance: none;
  background: var(--panel-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9aa6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 10px 6px;
  border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  padding-right: 26px !important;
  cursor: pointer; line-height: 1.35; transition: border-color .15s, background-color .15s;
}
select:not([multiple]):not([size]):not(.x-native):hover { border-color: var(--line-2); background-color: var(--hover); }
select:not([multiple]):not([size]):not(.x-native):focus-visible { outline: none; border-color: var(--accent); }
select.csel-open:not(.x-native) { border-color: var(--accent); background-color: var(--panel-2); }
select option { background: var(--panel-2); color: var(--text); }

/* ---------- Champs de saisie : même allure partout (fond sombre, liseré, accent au focus) ----------
   Sélecteur sans poids (:where) : les champs qui ont leur propre style (délai, recherche…) le gardent */
:where(input:not([type]), input[type="text"], input[type="password"], input[type="url"], input[type="email"], input[type="number"], input[type="datetime-local"], input[type="date"], input[type="time"], textarea):where(:not(.x-native)) {
  appearance: none; -webkit-appearance: none; box-sizing: border-box;
  background: var(--panel-3); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 9px; line-height: 1.35; min-width: 0;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
:where(input:not([type]), input[type="text"], input[type="password"], input[type="url"], input[type="email"], input[type="number"], input[type="datetime-local"], input[type="date"], input[type="time"], textarea):where(:not(.x-native))::placeholder { color: var(--muted); opacity: 1; }
:where(input:not([type]), input[type="text"], input[type="password"], input[type="url"], input[type="email"], input[type="number"], input[type="datetime-local"], input[type="date"], input[type="time"], textarea):where(:not(.x-native)):hover { border-color: var(--line-2); }
:where(input:not([type]), input[type="text"], input[type="password"], input[type="url"], input[type="email"], input[type="number"], input[type="datetime-local"], input[type="date"], input[type="time"], textarea):where(:not(.x-native)):focus { outline: none; border-color: var(--accent); background-color: var(--panel-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
:where(input[type="datetime-local"], input[type="date"], input[type="time"])::-webkit-calendar-picker-indicator { filter: invert(.75); cursor: pointer; }
:root[data-scheme="light"] :where(input[type="datetime-local"], input[type="date"], input[type="time"])::-webkit-calendar-picker-indicator { filter: none; }

/* ---------- Champs de recherche (même allure que les listes) ---------- */
input[type="search"]:not(.x-native) {
  appearance: none; -webkit-appearance: none;
  background: var(--panel-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9aa6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 9px center / 14px 14px;
  border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  padding: 5px 9px 5px 30px; line-height: 1.35; min-width: 0;
  transition: border-color .15s, background-color .15s;
}
input[type="search"]:not(.x-native)::placeholder { color: var(--muted); opacity: 1; }
input[type="search"]:not(.x-native):hover { border-color: var(--line-2); background-color: var(--hover); }
input[type="search"]:not(.x-native):focus { outline: none; border-color: var(--accent); background-color: var(--panel-2); }
input[type="search"]:not(.x-native)::-webkit-search-cancel-button {
  -webkit-appearance: none; width: 14px; height: 14px; cursor: pointer; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
input[type="search"]:not(.x-native)::-webkit-search-cancel-button:hover { opacity: 1; }
.csel-pop {
  position: fixed; inset: auto; margin: 0; z-index: 10000; padding: 4px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4); font: inherit; font-size: 13px;
  max-width: min(420px, calc(100vw - 12px)); scrollbar-width: thin;
}
.csel-opt { position: relative; padding: 6px 12px 6px 14px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csel-opt.in-group { padding-left: 22px; }
.csel-opt.active { background: var(--panel-3); }
.csel-opt.sel { font-weight: 700; }
.csel-opt.sel::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--accent); }
.csel-opt.disabled { color: var(--muted); cursor: default; }
.csel-group { padding: 8px 10px 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }

/* Classement : graisse plus légère, pneus centrés et alignés d'une ligne à l'autre */
.tower .pos { font-weight: 700; }
.tower .drv-tla { font-weight: 700; letter-spacing: .5px; }
.tower .tag { font-weight: 700; }
.tower th.c-tyre, .tower td.c-tyre { text-align: center; }
.tower td.c-tyre { white-space: nowrap; }
.tower td.c-tyre .tyre { vertical-align: middle; }
.tower td.c-tyre .tyre-age { display: inline-block; min-width: 2ch; text-align: left; vertical-align: middle; }
.tower th.c-pits, .tower td.c-pits, .tower th.c-speed, .tower td.c-speed { text-align: center; }
#muteBtn.off { color: var(--muted); opacity: .75; }
body.solo #muteBtn { display: none; }

/* Légendes sous les panneaux (js/ui/legends.js) */
.panel-legend {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px;
  padding: 6px 12px 7px; border-top: 1px solid var(--line); background: var(--deep);
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}
.panel-legend .lg-i { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.panel-legend .lg-bar { width: 14px; height: 4px; border-radius: 2px; background: var(--c); }
.panel-legend .lg-dash { width: 16px; height: 0; border-top: 2px dashed var(--c); }
.panel-legend .tag { font-size: 9px; line-height: 13px; }
.panel-legend .lg-tyre { width: 15px; height: 15px; border-width: 2px; font-size: 8px; }
.grid.mobile .panel-legend { font-size: 11px; padding: 5px 10px; }
.panel-legend, .grid.mobile .panel-legend { position: relative; padding-right: 78px; }
.panel-legend .lg-hide { position: absolute; right: 8px; top: 4px; background: none; border: 1px solid transparent; border-radius: 5px; color: var(--muted); font-size: 11px; padding: 1px 6px; cursor: pointer; }
.panel-legend .lg-hide:hover { border-color: var(--border); color: var(--text); }
/* Légende repliée (panneau court) : un bouton, la légende se déroule par-dessus le contenu */
.panel { position: relative; }
.panel-legend .lg-body { display: contents; }
.panel-legend .lg-more { display: none; align-items: center; gap: 5px; background: none; border: 1px solid transparent; border-radius: 5px; color: var(--muted); font: inherit; font-size: 11.5px; padding: 1px 6px; cursor: pointer; }
.panel-legend .lg-more:hover { border-color: var(--border); color: var(--text); }
.panel-legend .lg-more .ic { width: 13px; height: 13px; }
.panel-legend.compact { padding: 2px 6px; }
.panel-legend.compact .lg-more { display: inline-flex; }
.panel-legend.compact:not(.open) .lg-body, .panel-legend.compact:not(.open) .lg-hide { display: none; }
.panel-legend.compact.open { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 75%; padding: 6px 78px 8px 12px; box-shadow: 0 -10px 24px rgba(0, 0, 0, .35); }
.panel-legend.compact.open .lg-more { color: var(--text); }

/* Analyse → Comparaison (js/ui/compare.js) */
#anaCompare { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.cmp-drv { display: flex; flex-direction: column; border-left: 3px solid var(--c); padding-left: 10px; }
.cmp-drv.right { border-left: 0; border-right: 3px solid var(--c); padding: 0 10px 0 0; text-align: right; align-items: flex-end; }
.cmp-drv b { font-size: 20px; letter-spacing: .5px; }
.cmp-drv span { font-size: 16px; font-weight: 600; }
.cmp-gap { text-align: center; display: flex; flex-direction: column; }
.cmp-gap b { font-size: 24px; font-weight: 700; }
.cmp-sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cmp-sector { background: var(--panel-2); border: 1px solid var(--border); border-top: 3px solid var(--c, var(--border)); border-radius: 6px; padding: 7px 10px; display: flex; flex-direction: column; gap: 3px; }
.cmp-row { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.cmp-win { font-size: 12px; color: var(--c); font-weight: 700; }
.cmp-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 3px; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); letter-spacing: .4px; }
.cmp-summary { font-size: 13px; }
.cmp-vis { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.4fr); gap: 12px; align-items: center; }
.cmp-map { width: 100%; max-height: 300px; }
.cmp-right { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-delta { width: 100%; height: auto; }
.cmp-delta .cmp-ax { font-size: 11px; fill: var(--muted); }
.cmp-delta .cmp-zero { stroke: var(--line-2); stroke-width: 1; }
.cmp-delta .cmp-sec { stroke: var(--line-2); stroke-dasharray: 3 3; }
.cmp-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 5px; }
.cmp-mini { border-radius: 5px; padding: 4px 7px; background: color-mix(in srgb, var(--c) calc(var(--k) * 100%), var(--panel-2)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); display: flex; flex-direction: column; line-height: 1.25; }
.cmp-mini span { font-size: 10.5px; color: var(--text-2); }
.cmp-mini b { font-size: 12px; font-weight: 700; color: #fff; }
.cmp-mini.approx { border-style: dashed; }
.cmp-speeds { border-collapse: collapse; font-size: 13px; max-width: 360px; }
.cmp-speeds th, .cmp-speeds td { padding: 3px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.cmp-speeds th:first-child, .cmp-speeds td:first-child { text-align: left; }
.cmp-speeds td.best { color: var(--purple); font-weight: 700; }
@container (max-width: 560px) { .cmp-vis { grid-template-columns: 1fr; } .cmp-sectors { grid-template-columns: 1fr; } }

/* ---------- Éléments affichés seulement dans la mise en page Pitwall ---------- */
.rail { display: none; }
.lap-bar { display: none; }
.drv-last { display: none; }
.mob-nav .mn-svg { display: block; width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin: 1px 0 2px; }
.mob-nav button.active .mn-svg { stroke: var(--accent); }
.dmore { display: none; }
.delay-controls { position: relative; }
/* Hors mise en page Pitwall : boutons −5 −1 −.1 [délai] +.1 +1 +5 sur une ligne */
.delay-steps { display: contents; }
.delay-steps .m { order: -1; }

/* ================= Mise en page Pitwall (partie 1) =================
   Barre de navigation à gauche, barre d'état de la séance, cartes arrondies, onglets segmentés,
   replay en bas façon lecteur vidéo, logos et couleurs officiels des écuries. */
:root[data-theme="pitwall"] {
  --bg: #07070a; --panel: #0f0f13; --panel-2: #15151b; --panel-3: #1c1c23;
  --border: #202028; --line: #1a1a21; --line-2: #2b2b34; --hover: #15151b; --deep: #0b0b0e;
  --top-1: #07070a; --top-2: #07070a; --focus: rgba(62, 166, 255, .08);
  --text: #f1f1f5; --text-2: #b4b4bf; --muted: #7c7c88; --radius: 10px;
  --purple: #b65cff; --green: #2fd17a; --rail-w: 60px;
}
[data-theme="pitwall"] body { font-size: 13.5px; }

/* Barre latérale (fenêtre principale, grand écran) */
@media (min-width: 901px) {
  [data-theme="pitwall"] body:not(.solo) { padding-left: var(--rail-w); }
  [data-theme="pitwall"] body:not(.solo) .rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); z-index: 850;
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0;
    background: var(--panel); border-right: 1px solid var(--border);
  }
  [data-theme="pitwall"] body:not(.solo) .topbar :is(.brand, #seasonBtn, #newsBtn, #commBtn, #resetUiBtn, #settingsBtn) { display: none; }
  [data-theme="pitwall"] body:not(.solo) .season-view { left: var(--rail-w); }
  [data-theme="pitwall"] body:not(.solo) .comm-panel { right: auto; left: calc(var(--rail-w) + 10px); }
}
.rail-logo { width: 38px; height: 38px; display: block; margin-bottom: 12px; flex: none; filter: drop-shadow(0 4px 10px rgba(225, 6, 0, .25)); }
.rail-btn { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); position: relative;
  background: none; border: 0; padding: 0; cursor: pointer; flex: none; transition: color .15s, background-color .15s; }
.rail-btn:hover { color: var(--text-2); background: var(--panel-2); }
.rail-btn.on { color: var(--text); background: var(--panel-3); }
.rail-btn.on::before { content: ''; position: absolute; left: -7px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--accent); }
.rail-btn.playing::after { content: ''; position: absolute; top: 7px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.rail-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: -9px; }
.rail-btn small { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 8.5px; letter-spacing: .4px; text-transform: uppercase; font-weight: 600; }
.rail-sp { flex: 1; }
.rail-div { width: 30px; height: 1px; background: var(--border); margin: 4px 0; flex: none; }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-btn:disabled:hover { background: none; color: var(--muted); }

/* Barre d'état de la séance */
[data-theme="pitwall"] .topbar { background: var(--bg); border-bottom: 1px solid var(--border); }
@media (min-width: 901px) {
  [data-theme="pitwall"] .topbar { min-height: 56px; gap: 22px; padding: 6px 18px; }
  /* Largeur réservée seulement en course (barre d'avancement) : pas de vide après « SQ1 » */
  [data-theme="pitwall"] .lap-box:has(.lap-bar:not([hidden])) { min-width: 96px; }
}
/* Titre « Délai » masqué faute de place : pas de case vide */
@media (max-width: 1600px) {
  [data-theme="pitwall"] .topbar .delay-head:not(:has(.delay-warn:not([hidden]))) { display: none; }
  [data-theme="pitwall"] .topbar .delay-controls { border-left: 0; }
}
@media (max-width: 900px) {
  [data-theme="pitwall"] .topbar .lap-box .hstat-value { font-size: 16px; }
  [data-theme="pitwall"] .topbar #lapsLeftBox { display: none !important; }
  [data-theme="pitwall"] .topbar .delay-input { padding-left: 4px; }
}
[data-theme="pitwall"] .session-name { font-size: 15px; font-weight: 700; }
[data-theme="pitwall"] .session-sub { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
[data-theme="pitwall"] .track-status { border-radius: 999px; font-weight: 600; letter-spacing: .2px; text-transform: none; min-width: 0; padding: 5px 12px; border: 1px solid transparent; font-size: 13px; }
[data-theme="pitwall"] .track-status:not(.yellow):not(.sc):not(.vsc):not(.red):not(.chequered) { background: transparent; border-color: var(--line-2); color: var(--text); }
[data-theme="pitwall"] .ts-dot { width: 8px; height: 8px; }
[data-theme="pitwall"] .track-status.green .ts-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(47, 209, 122, .18); }
[data-theme="pitwall"] .hstat-label { font-size: 10px; letter-spacing: 1.3px; color: var(--muted); }
[data-theme="pitwall"] .hstat-value { font-size: 15px; font-weight: 600; }
[data-theme="pitwall"] .lap-box .hstat-value { font-size: 19px; font-weight: 700; }
[data-theme="pitwall"] .lap-bar:not([hidden]) { display: block; align-self: stretch; height: 3px; margin-top: 3px; background: var(--panel-3); border-radius: 2px; overflow: hidden; }
[data-theme="pitwall"] .lap-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s; }
[data-theme="pitwall"] .weather-mini { gap: 16px; }
[data-theme="pitwall"] .weather-mini .wm span { font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; }
[data-theme="pitwall"] .weather-mini .wm b { font-size: 15px; font-weight: 600; }

/* Délai : bloc compact, réglages fins dans un petit menu */
[data-theme="pitwall"] .delay { background: transparent; border: 1px solid var(--line-2); border-radius: 8px; padding: 0; gap: 0; }
[data-theme="pitwall"] .delay > * { align-self: stretch; display: flex; align-items: center; }
[data-theme="pitwall"] .delay-head { flex-direction: row; gap: 4px; padding: 0 10px; }
[data-theme="pitwall"] .delay-title { font-size: 12px; text-transform: none; letter-spacing: 0; }
[data-theme="pitwall"] .delay-title::after { content: ' TV'; }
[data-theme="pitwall"] .delay-controls { border-left: 1px solid var(--line-2); gap: 0; }
[data-theme="pitwall"] .delay-input, [data-theme="pitwall"] .topbar .delay-input { field-sizing: content; min-width: 24px; max-width: 70px; width: auto; font-size: 16px; font-weight: 700; background: transparent; border: 0; border-radius: 0; padding: 4px 1px 4px 6px; text-align: right; }
[data-theme="pitwall"] .delay-input:focus { outline: none; background: var(--panel-2); }
[data-theme="pitwall"] .delay-controls::after { content: 's'; color: var(--muted); font-size: 13px; padding: 0 4px 0 2px; order: 1; }
[data-theme="pitwall"] .dmore { display: grid; place-items: center; order: 2; align-self: stretch; min-width: 28px; padding: 0 6px; background: none; border: 0; border-left: 1px solid var(--line-2);
  color: var(--text-2); font-weight: 700; font-size: 14px; cursor: pointer; }
[data-theme="pitwall"] .dmore:hover, [data-theme="pitwall"] .delay.open .dmore { background: var(--panel-2); color: var(--text); }
[data-theme="pitwall"] .dpause { order: 3; align-self: stretch; min-width: 30px; padding: 0 6px; background: none; border: 0; border-left: 1px solid var(--line-2); border-radius: 0; color: var(--text-2); }
[data-theme="pitwall"] .dpause:hover { background: var(--panel-2); color: var(--text); }
[data-theme="pitwall"] .dpause.on { background: var(--accent); color: #fff; }
[data-theme="pitwall"] .delay-steps { display: none; }
[data-theme="pitwall"] .delay.open .delay-steps {
  display: grid; grid-template-columns: repeat(6, auto); gap: 4px; position: absolute; top: calc(100% + 8px); left: 0; z-index: 960;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
[data-theme="pitwall"] .delay-steps .m { order: 0; }
[data-theme="pitwall"] .dbtn { background: var(--panel-3); border-color: var(--line-2); border-radius: 6px; min-width: 40px; padding: 5px 8px; }
[data-theme="pitwall"] .delay .preset { border: 0 !important; border-left: 1px solid var(--line-2) !important; border-radius: 0; background-color: transparent; max-width: 170px; color: var(--text-2); }
[data-theme="pitwall"] .delay #syncBtn { border-radius: 0 7px 7px 0; margin: -1px -1px -1px 0; padding: 0 13px; }
[data-theme="pitwall"] .btn { background: transparent; border-color: var(--line-2); border-radius: 7px; }
[data-theme="pitwall"] .btn-accent { background: var(--accent); border-color: var(--accent); }
[data-theme="pitwall"] .source-badge { background: transparent; border-color: transparent; letter-spacing: 1px; font-size: 12px; color: var(--text-2); }
[data-theme="pitwall"] .icon-btn { border-radius: 8px; }

/* Cartes et onglets segmentés */
[data-theme="pitwall"] .grid { padding: 12px; }
[data-theme="pitwall"] .lsplit-v, [data-theme="pitwall"] .lsplit-h { flex-basis: 12px; }
[data-theme="pitwall"] .lsplit-v::after { left: 5px; }
[data-theme="pitwall"] .lsplit-h::after { top: 5px; }
[data-theme="pitwall"] .panel { border-radius: 10px; border-color: var(--border); background: var(--panel); }
[data-theme="pitwall"] .panel-head { background: var(--panel); border-bottom: 1px solid var(--line); padding: 9px 14px 8px; }
[data-theme="pitwall"] .panel-head h2 { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--text-2); }
[data-theme="pitwall"] .panel-head.tabs { padding: 7px 10px; gap: 2px; }
[data-theme="pitwall"] .tab { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); padding: 5px 10px; border-radius: 6px; }
[data-theme="pitwall"] .tab:hover { color: var(--text-2); background: var(--panel-2); }
[data-theme="pitwall"] .tab:is(.active, .group-on) { background: var(--panel-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
[data-theme="pitwall"] .tabs .panel-ctrl { background: var(--panel); }
[data-theme="pitwall"] .panel-legend { background: var(--panel); border-top-color: var(--line); }

/* Classement */
[data-theme="pitwall"] .tower th { background: var(--panel); font-size: 10px; letter-spacing: 1.1px; font-weight: 600; border-bottom-color: var(--line); }
[data-theme="pitwall"] .tower td { border-bottom-color: var(--line); }
[data-theme="pitwall"] .tower .pos { font-size: 14px; line-height: 1.05; }
[data-theme="pitwall"] .tower .pos-delta { display: block; font-size: 9px; margin: 0; line-height: 1; }
[data-theme="pitwall"] .tower .drv { gap: 8px; }
[data-theme="pitwall"] .tower .drv-num { display: none; }
[data-theme="pitwall"] .tower .drv-tla { font-size: 14.5px; letter-spacing: .6px; min-width: 38px; }
[data-theme="pitwall"] .tower .drv-last { display: inline-block; color: var(--muted); font-size: 11.5px; font-weight: 400; max-width: 96px; overflow: hidden; text-overflow: ellipsis; margin-left: -2px; }
[data-theme="pitwall"] .grid.mobile .tower .drv-last { display: none; }
[data-theme="pitwall"] .tower .drv-bar { width: 3px; height: 18px; }
[data-theme="pitwall"] .tower .team-logo { width: 22px; height: 22px; border-radius: 6px; }
[data-theme="pitwall"] .tyre { width: 19px; height: 19px; border-width: 2px; background: transparent; font-size: 9.5px; }
[data-theme="pitwall"] .tyre-age { color: var(--muted); }

/* Autres panneaux */
[data-theme="pitwall"] :is(.duel-name, .duel-gap-val, .gauge-val, .battle-gap, .pit-big, .sz-big, .sz-drv-name, .mf-banner) { font-weight: 700; }
[data-theme="pitwall"] :is(.gauge, .pit-card, .cmp-sector) { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; }
[data-theme="pitwall"] .chart-title { letter-spacing: 1.1px; font-size: 10px; }
[data-theme="pitwall"] .rcm li { border-bottom-color: var(--line); }

/* Replay en bas, façon lecteur vidéo */
[data-theme="pitwall"] .replaybar { order: 5; background: var(--panel); border-top: 1px solid var(--border); border-bottom: 0; padding: 8px 16px; gap: 10px; }
[data-theme="pitwall"] .mob-nav { order: 6; }
[data-theme="pitwall"] .replaybar .rp-time { color: var(--text-2); font-size: 12px; }

/* Espace Saison */
[data-theme="pitwall"] .sz-side { background: var(--panel); }
[data-theme="pitwall"] #szNav button { position: relative; font-size: 13px; }
[data-theme="pitwall"] #szNav button.active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--accent); }
[data-theme="pitwall"] :is(.sz-card, .sz-box) { border-radius: 10px; background: var(--panel); border-color: var(--border); }

/* Téléphone : icônes dessinées dans la barre du bas */
[data-theme="pitwall"] .mob-nav .mn-svg { display: block; width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin: 1px 0 2px; }
[data-theme="pitwall"] .mob-nav button.active { background: none; color: var(--text); }
[data-theme="pitwall"] .mob-nav button.active .mn-svg { stroke: var(--accent); }
@media (min-width: 901px) {
  [data-theme="pitwall"] .delay #syncBtn { font-size: 0; }
  [data-theme="pitwall"] .delay #syncBtn .sync-label { font-size: 12.5px; }
}
/* Téléphone : le menu du délai propose tous les pas */
[data-theme="pitwall"] .topbar .delay-steps .dbtn { display: block !important; }
/* Barre du haut : place pour l'heure du circuit (tours restants masqués d'abord ; le design F1 Pro
   montre déjà la progression sous le numéro du tour) */
@media (max-width: 1950px) {
  :root:not([data-theme="pitwall"]) .topbar #lapsLeftBox { display: none !important; }
}
@media (min-width: 901px) and (max-width: 1500px) {
  [data-theme="pitwall"] .topbar { gap: 14px; padding: 6px 12px; }
  [data-theme="pitwall"] .topbar #lapsLeftBox { display: none !important; }
  [data-theme="pitwall"] .delay .preset { max-width: 150px; }
}

/* ---------- Onglet Pneus (js/ui/tyres.js) ---------- */
.ty { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.ty-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ty-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ty-card-head b { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-2); }
.ty-card-head .ty-src, .ty-card-head .btn, .ty-card-head .toggle { margin-left: auto; }
.ty-src { color: var(--muted); font-size: 12px; text-decoration: none; }
.ty-src:hover { color: var(--text); }
.ty-comps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ty-comp { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--tc); border-radius: 7px; padding: 7px 10px; min-width: 0; }
.ty-comp .tyre { width: 26px; height: 26px; font-size: 12px; flex: none; }
.ty-comp div { display: flex; flex-direction: column; min-width: 0; }
.ty-comp b { font-size: 18px; line-height: 1.1; }
.ty-comp span:not(.tyre) { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.ty-art + .ty-art { border-top: 1px solid var(--line); padding-top: 8px; }
.ty-art-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ty-art-head a { color: var(--text); font-weight: 600; text-decoration: none; font-size: 13px; }
.ty-art-head a:hover { text-decoration: underline; }
.ty-art ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.ty-scroll { overflow-x: auto; }
.ty-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ty-table th { text-align: left; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 3px 8px 6px; white-space: nowrap; }
.ty-table th .tyre { width: 16px; height: 16px; border-width: 2px; font-size: 8px; vertical-align: middle; }
.ty-table td { padding: 4px 8px; border-top: 1px solid var(--line); white-space: nowrap; }
.ty-drv { border-left: 3px solid var(--c); }
.ty-drv b { letter-spacing: .5px; }
.ty-q3 { margin-left: 6px; font-size: 9.5px; font-weight: 700; padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--red) 22%, transparent); color: #ff8a80; }
.ty-cell { display: table-cell; }
.ty-new { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; margin-right: 6px; border-radius: 10px; background: color-mix(in srgb, var(--tc) 85%, #000); color: #111; font-weight: 800; font-size: 12px; }
.ty-new.zero { background: var(--panel-3); color: var(--muted); }
.ty-used { display: inline-block; min-width: 20px; text-align: center; margin: 0 3px 0 0; padding: 0 4px; border-radius: 4px; background: var(--panel-3); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.ty-used.on { box-shadow: inset 0 0 0 1.5px var(--text); color: var(--text); }
@container (max-width: 520px) { .ty-comps { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ty-comp { padding: 6px 8px; gap: 7px; } .ty-comp .tyre { width: 22px; height: 22px; } .ty-comp b { font-size: 16px; } }
.auth-pill { border-color: var(--orange); bottom: 72px; max-width: min(620px, calc(100vw - 36px)); }

/* ================= Correctifs d'interface ================= */
/* Boutons du panneau (déplacer, agrandir, détacher, masquer) toujours en haut à droite : le
   contenu de l'en-tête (onglets, sélecteurs du duel…) passe à la ligne au lieu de les pousser
   hors du panneau ou sur une ligne à part. */
.grid:not(.mobile) .panel-head { position: relative; flex-wrap: wrap; row-gap: 4px; padding-right: 116px; justify-content: flex-start; column-gap: 14px; }
/* Boutons du panneau : centrés sur la première ligne de l'en-tête (position calculée dans layout.js) */
.grid:not(.mobile) .panel-head > .panel-ctrl { position: absolute; top: var(--ctrl-top, 8px); right: 8px; height: 26px; align-items: center; margin: 0; padding: 0; background: none; z-index: 3; }
/* Panneau dont tous les onglets ont été déplacés : la barre garde sa hauteur (boutons cliquables) */
.grid:not(.mobile) .panel-head[data-tabs]:not(:has(> [data-tab])) { min-height: 42px; }
.grid:not(.mobile) .panel-head > .panel-tools { flex-wrap: wrap; min-width: 0; row-gap: 4px; }
body.solo .grid .panel-head { padding-right: 116px; }
/* Duel : sélecteurs qui se partagent la place */
.duel-pick { flex: 1 1 auto; justify-content: flex-end; }
.duel-pick select { flex: 1 1 110px; min-width: 0; max-width: 150px; }
.grid.mobile .p-duel .duel-pick { flex-wrap: wrap; justify-content: flex-start; }

/* Légendes : jamais plus d'un tiers du panneau (défilent au-delà) */
.panel-legend { max-height: 33%; overflow-y: auto; flex-shrink: 1; min-height: 0; }
.grid.mobile .panel-legend { max-height: 26%; }
/* Réglages : hauteur fixe, la fenêtre ne saute plus d'un onglet à l'autre */
@media (min-width: 901px) {
}
/* Écran peu haut (portable 1366×768…) : les panneaux gardent une taille utile et la page défile ;
   barre du haut et barre de replay restent visibles */
@media (min-width: 901px) and (max-height: 860px) {
  body:not(.solo) { overflow-y: auto; }
  body:not(.solo) .grid:not(.has-max) { flex: none; height: 1000px; }
  body:not(.solo) .topbar { position: sticky; top: 0; z-index: 60; }
  [data-theme="pitwall"] body:not(.solo) .replaybar { position: sticky; bottom: 0; z-index: 60; }
}
/* Anciens thèmes : un peu de marge pour la barre de défilement sur portable */
@media (max-width: 1450px) {
  :root:not([data-theme="pitwall"]) .topbar { gap: 7px; }
}
/* Barre du haut : la barre de progression du tour ne décale plus la case « Tour » par rapport
   aux autres (libellés et valeurs alignés) */
[data-theme="pitwall"] .topbar .lap-box { position: relative; }
[data-theme="pitwall"] .topbar .lap-bar:not([hidden]) { position: absolute; left: 0; right: 0; bottom: -6px; margin: 0; }
/* Bouton Saison sans cadre, comme les autres icônes de la barre (téléphone, fenêtres secondaires) */
[data-theme="pitwall"] .topbar :is(#seasonBtn, #newsBtn):not(.on) { background: none; border-color: transparent; }
[data-theme="pitwall"] .topbar > .hstat { height: 38px; justify-content: flex-start; align-self: center; }
[data-theme="pitwall"] .topbar .hstat-label, [data-theme="pitwall"] .topbar .weather-mini .wm span { line-height: 14px; }
[data-theme="pitwall"] .topbar .hstat-value, [data-theme="pitwall"] .topbar .weather-mini .wm b { line-height: 22px; }
[data-theme="pitwall"] .topbar .surface .hstat-value { line-height: 20px; }

/* Simulateur : cercle de position (js/ui/race-tools.js) */
.pitsim-cols { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.cd-wrap { flex: 0 1 clamp(240px, 34%, 460px); min-width: 220px; margin: 0 auto; }
.pitsim-res { flex: 1 1 240px; min-width: 0; }
.cd { width: 100%; height: auto; display: block; overflow: visible; }
.cd-ring { fill: none; stroke: var(--line-2); stroke-width: 10; }
.cd-ticks line { stroke: var(--panel); stroke-width: 2; }
.cd-loss { fill: none; stroke: var(--accent); stroke-width: 10; stroke-opacity: .35; stroke-linecap: round; }
.cd-car circle { stroke: var(--panel); stroke-width: 2; }
.cd-car.me circle { stroke: #fff; stroke-width: 2.5; }
.cd-car text { font: 700 10px var(--font); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.cd-car.me text { font-size: 11.5px; }
.cd-ghost { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 3 3; }
.cd-ghost-l { font: 700 10px var(--font); fill: var(--text-2); text-anchor: middle; dominant-baseline: middle; }
.cd-line { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.cd-top { font: 700 9px var(--font); fill: var(--muted); text-anchor: middle; letter-spacing: 1px; }
.cd-mid { font: 700 11px var(--font); fill: var(--muted); text-anchor: middle; letter-spacing: .5px; text-transform: uppercase; }
.cd-mid2 { font: 600 11px var(--font); fill: var(--muted); text-anchor: middle; }
.sector-board td.sec-better { color: var(--green); }
.sector-board td.sec-worse { color: #ff6b61; }
.sector-board tr.is-ref td { background: var(--focus); font-weight: 700; }
.tower tr.cool td:not(.c-duel) { opacity: .38; transition: opacity .3s; }
.tower tr.cool td.c-duel .duel-btns { opacity: .38; }
.tyre-hist td.cmp-link { cursor: pointer; }
.tyre-hist td.cmp-link:hover { outline: 1px solid var(--text-2); outline-offset: -1px; }
#anaLapCanvas { cursor: pointer; }
.cmp-lap { max-width: 170px; }
/* Secteurs : références du circuit (éditions précédentes) */
/* Records : une colonne par édition, alignée d'une ligne à l'autre */
.rec-strip { padding: 8px 10px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 190px repeat(var(--n, 4), max-content); align-items: center; gap: 5px 18px; font-size: 12.5px; overflow-x: auto; }
.rec-row { display: contents; }
.rec-row.rec-now { display: flex; grid-column: 1 / -1; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.rec-now .rec-k { width: 190px; margin-right: 8px; flex: none; }
.rec-k { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rec-i { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-t { display: inline-block; min-width: 2.4em; }
.rec-i b { color: var(--muted); font-weight: 600; }
.rec-i i { width: 3px; height: 12px; border-radius: 2px; background: var(--c, #888); }
.rec-now { color: var(--text); font-weight: 600; }
.rec-strip .sec-better { color: var(--green); } .rec-strip .sec-worse { color: #ff6b61; }

/* ---------- Barre du haut façon MultiViewer (js/ui/header.js, js/ui/topinfo.js) ---------- */
.session { display: flex; align-items: center; gap: 10px; }
.session-txt { min-width: 0; }
.session-flag { width: 30px; height: 20px; border-radius: 3px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.session-flag[hidden] { display: none; }
/* Temps restant en grand, comme une horloge */
[data-theme="pitwall"] .topbar .clock-box .hstat-value { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .3px; line-height: 22px; }
.weather-mini .wm b small { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.weather-mini .wind-arrow { font-style: normal; color: var(--blue); font-weight: 800; margin-left: 2px; }
[data-theme="pitwall"] .topbar .weather-mini { display: flex; gap: 14px; }
/* Si la barre manque encore de place (barre latérale, infos du replay), les mesures en trop passent sur une 2e ligne masquée */
.topbar > .weather-mini { flex-shrink: 20; min-width: 0; flex-wrap: wrap; overflow: hidden; max-height: 40px; }
/* Moins de place : pression, humidité, vent puis air disparaissent (toute la météo reste dans l'onglet Météo) */
@media (max-width: 2100px) { [data-theme="pitwall"] .topbar .wm-pres { display: none; } }
@media (max-width: 1960px) { [data-theme="pitwall"] .topbar .wm-hum { display: none; } }
@media (max-width: 1840px) { [data-theme="pitwall"] .topbar .wm-wind { display: none; } }
@media (max-width: 1720px) { [data-theme="pitwall"] .topbar .wm-air { display: none; } }
@media (max-width: 1660px) { [data-theme="pitwall"] .topbar .weather-mini { display: none; } }

/* Outils : documents FIA, vitesses, meilleurs secteurs */
.tb-tools { display: flex; gap: 2px; align-items: center; }
body.solo .tb-tools { display: none; }
.tb-tool { position: relative; width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--text-2); cursor: pointer; padding: 0; }
/* Outils de la barre du haut : pictogramme et mot (masqué quand la place manque) */
.tb-tool:has(small) { width: auto; min-width: 32px; height: auto; min-height: 32px; padding: 3px 6px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.tb-tool small { font-size: 9.5px; line-height: 1; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-family: var(--font-cond, inherit); }
.tb-tool:hover small { color: var(--text-2); }
@media (max-width: 1450px) { .tb-tool small { display: none; } .tb-tool:has(small) { width: 32px; padding: 0; } }
.tb-tool svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tb-tool:hover { background: var(--panel-2); color: var(--text); }
.tb-tool.on { background: var(--panel-2); border-color: var(--line-2); color: var(--text); }
.tb-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.tb-dot[hidden] { display: none; }
.tb-pop { position: fixed; z-index: 900; width: min(560px, calc(100vw - 16px)); max-height: min(70vh, 640px); display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); animation: tbp-in .14s ease-out; }
.tb-pop-docs { width: min(620px, calc(100vw - 16px)); }
.tb-pop-weather { overflow: auto; }
@keyframes tbp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tbp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tbp-head b { font-size: 14px; }
.tbp-head a { margin-left: auto; color: var(--blue); text-decoration: none; }
.tbp-head #tbDocGp { max-width: 260px; font-size: 12px; }
.tbp-head { align-items: center; }
.tbp-filter { width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); padding: 7px 10px; font: inherit; font-size: 13px; }
.tbp-filter:focus { outline: none; border-color: var(--accent); }
.tbp-scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.tbd-doc { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.tbd-doc:last-child { border-bottom: 0; }
.tbd-title { font-size: 13px; font-weight: 600; color: var(--text); }
.tbd-sum { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.tbd-sum b { color: var(--text); }
.tbd-time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tbd-dl { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 7px; color: var(--text-2); text-decoration: none; font-weight: 700; }
.tbd-dl:hover { color: var(--text); border-color: var(--blue); }
.tbp-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; }
.tbp-seg button { background: none; border: 0; color: var(--text-2); padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.tbp-seg button.on { background: var(--panel-3); color: var(--text); }
.tbp-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tbp-table th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; text-align: right; padding: 5px 8px; cursor: pointer; white-space: nowrap; user-select: none; }
.tbp-table th:first-child { text-align: left; cursor: default; }
.tbp-table th.sorted { color: var(--text); }
.tbp-table td { padding: 4px 8px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tbp-table td:first-child { text-align: left; }
.tbp-table td small { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.1; }
.tbp-table td.purple { color: var(--purple, #b06cff); font-weight: 700; }
.tbp-table .drv { gap: 7px; }
@media (min-width: 1451px) {
  [data-theme="pitwall"] .topbar > .session { max-width: 300px; }
}
@media (min-width: 901px) and (max-width: 2000px) {
  [data-theme="pitwall"] .topbar { gap: 17px; }
}

/* ---------- Animations douces (désactivées si le système demande moins d'animations) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tabpane.active { animation: pane-in .18s ease-out; }
  .grid.has-max > .panel.maximized { animation: panel-max .2s cubic-bezier(.2, .8, .3, 1); }
  /* Pages pleine fenêtre : fond opaque tout de suite (le tableau de bord ne transparaît pas), contenu en fondu */
  .season-view:not([hidden]) > * { animation: pane-in .2s ease-out; }
  .lpop-menu, .csel-pop, .map-layers[open] .map-layers-menu, #towerCols[open] > :not(summary) { animation: tbp-in .14s ease-out; }
  .track-status, .surface .hstat-value { transition: background-color .35s, color .35s, border-color .35s; }
  .tower tbody tr { transition: background-color .35s, opacity .35s; }
  .btn, .icon-btn, .tb-tool, .panel-ctrl button, .tabs [data-tab], .lpop-menu button, .rail [data-rail] { transition: background-color .15s, color .15s, border-color .15s, opacity .15s; }
  .bar > i, .lap-bar i { transition: width .35s ease-out; }
  .toast { animation: tbp-in .18s ease-out; }
}
@keyframes pane-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes panel-max { from { opacity: .35; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* =====================================================================================
   Thème « Pitwall » (par défaut) : la mise en page F1 Pro, avec le style de la refonte
   « Pitwall moderne » — fond graphite, cartes à filet fin, chiffres en chasse fixe,
   titres en Saira Condensed, rouge F1 réservé au direct et aux alertes.
   Polices Saira, Saira Condensed et JetBrains Mono (SIL Open Font License, voir /fonts/OFL-*.txt).
   ===================================================================================== */
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/live/fonts/saira-var.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/live/fonts/sairacondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/live/fonts/sairacondensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/live/fonts/sairacondensed-800.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/live/fonts/jetbrainsmono-var.woff2') format('woff2'); }

:root[data-theme="pitwall"] {
  --bg: #07080A; --panel: #0E1116; --panel-2: #15191F; --panel-3: #1C2028;
  --border: #1C2028; --line: #151920; --line-2: #2E3440; --hover: #15191F; --deep: #0B0D11;
  --top-1: #0B0D11; --top-2: #0B0D11; --focus: rgba(225, 6, 0, .10);
  --text: #F1F3F6; --text-2: #B4BAC4; --muted: #8A919C;
  --purple: #C084FC; --green: #34D399; --yellow: #FACC15; --orange: #FB923C; --red: #FF453A; --blue: #60A5FA;
  --radius: 14px; --rail-w: 76px;
  --font: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-cond: 'Saira Condensed', 'Saira', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
[data-theme="pitwall"] body { font-size: 13.5px; background: var(--bg); }

/* Chiffres en chasse fixe : temps, écarts, vitesses, horloges */
[data-theme="pitwall"] :is(.tower td.t-gap, .tower td.t-int, .tower td.t-lap, .tower td.pos, .tower td.c-pits, .tower td.c-speed, .tower td.c-grid, .tower td.c-laps, .tower td.c-gapf, .tower td.c-spd,
  .tower .sector-val, .tyre-age, .hstat-value, .delay-input, .rp-time, .duel-gap-val, .cmp td, .laps-cmp td, .pit-big, .pit-val, .champ td, .strat-pace, .strat-deg,
  .tbp-table td, .tbd-time, .rcm-time, .weather-mini .wm b, .dl-speed-val, .dl-rpm) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
[data-theme="pitwall"] .tower td.pos { font-weight: 700; }

/* Titres : Saira Condensed en capitales */
[data-theme="pitwall"] :is(.panel-head h2, .chart-title, .hstat-label, .tbp-head b, .set-block h3) { font-family: var(--font-cond); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
[data-theme="pitwall"] .panel-head h2 { font-size: 14.5px; color: var(--text); }
[data-theme="pitwall"] :is(.drv-tla, .duel-name, .tele-name b, .strat-name, .tbp-table .drv b) { font-family: var(--font-cond); font-weight: 700; letter-spacing: .8px; }
[data-theme="pitwall"] .tower .drv-tla { font-size: 15.5px; }
[data-theme="pitwall"] .session-name { font-family: var(--font-cond); font-size: 19px; font-weight: 700; letter-spacing: .2px; }

/* Cartes */
[data-theme="pitwall"] .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; }
[data-theme="pitwall"] .panel-head { border-bottom: 1px solid var(--border); }
[data-theme="pitwall"] .tabs [data-tab] { border-radius: 8px; font-size: 13px; }
[data-theme="pitwall"] .tabs [data-tab].active { background: var(--panel-3); color: var(--text); box-shadow: none; }

/* Barre latérale : icône + libellé */
@media (min-width: 901px) {
  [data-theme="pitwall"] body:not(.solo) .rail { background: var(--deep); border-right: 1px solid var(--border); gap: 4px; padding: 14px 0; }
}
[data-theme="pitwall"] .rail-btn { width: 64px; height: 54px; border-radius: 12px; }
[data-theme="pitwall"] .rail-btn svg { width: 22px; height: 22px; margin-top: -12px; }
[data-theme="pitwall"] .rail-btn small { bottom: 6px; font-family: var(--font-cond); font-size: 10.5px; letter-spacing: .9px; }
/* « Commentaires » : le mot le plus long, resserré pour garder une marge de chaque côté */
[data-theme="pitwall"] .rail-btn small.rail-long { font-size: 9.5px; letter-spacing: .2px; }
[data-theme="pitwall"] .rail-btn.on { background: var(--panel-3); }
[data-theme="pitwall"] .rail-btn.on::before { left: -6px; top: 14px; bottom: 14px; }

/* Barre du haut */
[data-theme="pitwall"] .topbar { background: var(--deep); border-bottom: 1px solid var(--border); }
[data-theme="pitwall"] .topbar .clock-box .hstat-value { font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 26px; }
[data-theme="pitwall"] .track-status:not(.yellow):not(.sc):not(.vsc):not(.red):not(.chequered) { border-color: transparent; }
[data-theme="pitwall"] .track-status.green { background: rgba(52, 211, 153, .12); color: var(--green); }
[data-theme="pitwall"] .track-status.green .ts-dot { box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
[data-theme="pitwall"] .delay { border-color: var(--line-2); border-radius: 10px; }
[data-theme="pitwall"] .delay #syncBtn { border-radius: 0 9px 9px 0; font-weight: 600; }
[data-theme="pitwall"] .source-badge.live { background: rgba(225, 6, 0, .14); color: #FF6B66; border-color: transparent; font-family: var(--font-cond); letter-spacing: 1.4px; }
[data-theme="pitwall"] .source-badge { font-family: var(--font-cond); letter-spacing: 1.2px; font-weight: 700; }

/* Classement */
[data-theme="pitwall"] .tower th { font-family: var(--font); font-size: 10.5px; letter-spacing: 1.1px; color: var(--muted); font-weight: 500; }
[data-theme="pitwall"] .tower td { border-bottom-color: var(--line); }
[data-theme="pitwall"] .tower tr.focus td { background: rgba(225, 6, 0, .10); }
[data-theme="pitwall"] .tower tr.focus td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
[data-theme="pitwall"] .seg { height: 9px; border-radius: 2px; min-width: 4px; }
[data-theme="pitwall"] .seg-yellow { background: #E3B505; }
[data-theme="pitwall"] .tag { font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: .8px; padding: 1px 6px; border-radius: 5px; line-height: 15px; }
[data-theme="pitwall"] .tag.pit { background: rgba(96, 165, 250, .16); color: #93C5FD; }
[data-theme="pitwall"] .tag.out { background: rgba(52, 211, 153, .16); color: #6EE7B7; }
[data-theme="pitwall"] .tag.push { background: rgba(192, 132, 252, .16); color: #D8B4FE; }
[data-theme="pitwall"] .tag.stop { background: rgba(225, 6, 0, .18); color: #FF8A85; }
[data-theme="pitwall"] .tag.ret { background: rgba(138, 145, 156, .18); color: #B4BAC4; }
[data-theme="pitwall"] .tag.drs { background: rgba(52, 211, 153, .16); color: #6EE7B7; }
[data-theme="pitwall"] .tag.flag-blue { background: rgba(96, 165, 250, .16); color: #93C5FD; }
/* Pneus : anneau de la couleur du composé, lettre au centre */
[data-theme="pitwall"] .tyre { background: transparent !important; color: var(--tc) !important; border: 2.5px solid var(--tc); box-shadow: none; font-family: var(--font); font-weight: 700; }

/* Boutons et menus */
[data-theme="pitwall"] .btn { border-radius: 9px; }
[data-theme="pitwall"] :is(.lpop-menu, .csel-pop, .map-layers-menu, .tb-pop) { border-radius: 12px; border-color: var(--line-2); }

/* Barre de lecture : gros bouton rond clair */
[data-theme="pitwall"] .replaybar { background: var(--deep); border-top: 1px solid var(--border); }
[data-theme="pitwall"] .rp-play { width: 44px; height: 44px; background: #F1F3F6 !important; color: #07080A !important; }
[data-theme="pitwall"] .rp-played { background: rgba(96, 165, 250, .55); }
[data-theme="pitwall"] .rp-speed.on, [data-theme="pitwall"] .rp-speed[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Carte : bande « ordre sur la piste » sous le tracé */
.map-ribbon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44px; display: block; background: linear-gradient(to top, rgba(7,8,10,.92), rgba(7,8,10,.55)); border-top: 1px solid var(--border); pointer-events: none; }
.map-ribbon[hidden] { display: none; }
.map-wrap.with-ribbon .map-legend { bottom: 52px; }
.map-wrap.with-ribbon .map-zoom { bottom: 54px; }

/* Pitwall : espace Saison (chiffres en chasse fixe, titres condensés) */
[data-theme="pitwall"] :is(.sz-big, .sz-table td, .sz-grade, .sz-meter b) { font-variant-numeric: tabular-nums; }
[data-theme="pitwall"] .sz-big { font-family: var(--font-cond); letter-spacing: .3px; }
[data-theme="pitwall"] :is(.sz-card, .sz-box) { border-radius: 14px; border-color: var(--border); background: var(--panel); }
[data-theme="pitwall"] .sz-table th { font-size: 10.5px; letter-spacing: 1.1px; color: var(--muted); font-weight: 500; }
[data-theme="pitwall"] .sz-countdown b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- Espace Actu (actualités) ---- */
.nw-opts { display: flex; flex-direction: column; gap: 8px; padding: 12px 6px 0; border-top: 1px solid var(--line); margin-top: 8px; }
.nw-opts input[type="search"], .nw-opts select { width: 100%; }
.nw-alerts { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.nw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nw-head h2 { margin: 0 0 2px; font-size: 22px; }
.nw-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.nw-guard { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: color-mix(in srgb, var(--yellow, #facc15) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--yellow, #facc15) 45%, transparent); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.nw-list { display: flex; flex-direction: column; gap: 10px; }
.nw-list.guarded :is(.nw-title, .nw-sum, .nw-thumb, .nw-others, .nw-trans), .nw-layout.guarded .nw-aside :is(.nwa-top, .nwa-vids) { filter: blur(7px); pointer-events: none; user-select: none; }
.nw-card { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px; position: relative; }
.nw-card.unread::before { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--accent); }
.nw-card.imp { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.nw-thumb { position: relative; flex: none; width: 168px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: var(--panel-3); align-self: flex-start; }
.nw-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.nw-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nw-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
/* Actu déjà lue : grisée, bouton « Lu » ; non lue : bouton discret, visible au survol */
.nw-card.read { opacity: .55; }
.nw-card.read:hover { opacity: .9; }
.nw-readbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--muted); font: 600 11.5px/1.4 inherit; cursor: pointer; opacity: 0; transition: opacity .15s; }
.nw-readbtn .ic { width: 12px; height: 12px; }
.nw-card:hover .nw-readbtn, .nw-readbtn:focus-visible, .nw-readbtn.on { opacity: 1; }
.nw-readbtn.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
@media (hover: none) { .nw-readbtn { opacity: 1; } }
.nw-src { font-weight: 800; color: var(--text); }
.nw-src.nw-c-official { color: var(--accent); }
.nw-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.nw-lang { font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 4px; background: var(--panel-3); color: var(--text-2); }
.nw-imp { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: #ff8a80; }
.nw-imp.major { background: var(--accent); color: #fff; }
.nw-hot { font-weight: 700; color: var(--orange, #fb923c); }
.nw-favmark { color: var(--yellow, #facc15); font-size: 14px; }
.nw-title { font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--text); text-decoration: none; }
.nw-title:hover { text-decoration: underline; }
.nw-trans { font-size: 11.5px; }
.nw-vo { background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: 4px; font: inherit; font-size: 10.5px; padding: 0 5px; cursor: pointer; }
.nw-vo-text { font-size: 13px; color: var(--text-2); font-style: italic; }
.nw-sum { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.nw-tag { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; border-left: 3px solid var(--tc); background: color-mix(in srgb, var(--tc) 16%, transparent); }
.nw-tags:empty { display: none; }
.nw-others summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.nw-others a { display: block; font-size: 13px; color: var(--text-2); text-decoration: none; padding: 4px 0 4px 10px; border-left: 2px solid var(--line-2, var(--border)); margin-top: 4px; }
.nw-others a:hover { color: var(--text); }
.nw-more { margin: 14px 0; }
.nw-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.nw-add input { flex: 1; min-width: 240px; }
.nw-src-table td:first-child { white-space: normal; }
.nw-ok { color: var(--green); }
.nw-err { color: var(--orange, #fb923c); cursor: help; }
/* Pastille du nombre d'actualités non lues */
:is(#newsBtn, .rail-btn[data-rail="news"])[data-count] { position: relative; }
:is(#newsBtn, .rail-btn[data-rail="news"])[data-count]::after { content: attr(data-count); position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-sizing: border-box; }
#newsBtn[data-count]::after { top: -5px; right: -5px; }
@media (max-width: 760px) {
  .news-view .nw-opts { flex-direction: row; flex: none; border: 0; margin: 0; padding: 0 0 0 6px; align-items: center; }
  .news-view .nw-opts input[type="search"] { width: 150px; }
  .news-view .nw-opts select, .news-view .nw-opts .toggle, .news-view .nw-alerts { width: auto; white-space: nowrap; }
  .nw-card { flex-direction: column; gap: 8px; }
  .nw-thumb { width: 100%; }
  .nw-title { font-size: 15.5px; }
}

/* ---- Icônes dessinées (icons.js), à la place des emojis ---- */
.ic { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic.ic-s { width: .95em; height: .95em; vertical-align: -0.12em; opacity: .85; }
.ic.ic-on { margin-left: auto; color: var(--accent); }
.ic.ic-live { color: var(--accent); }
button > .ic:only-child, .icon-btn > .ic { vertical-align: middle; }
:is(.btn, .icon-btn, button, a, h3, h4, b, summary, .sz-tag) > .ic + *, :is(.btn, button, h3, h4) > .ic { margin-right: .1em; }
#szNav button, #nwNav button, .set-tab, .lpop-menu button, .rail-menu button { display: flex; align-items: center; gap: 8px; }
#szNav button .ic, #nwNav button .ic { width: 17px; height: 17px; color: var(--muted); }
:is(#szNav, #nwNav, #rvNav) button.active .ic { color: var(--accent); }
.set-tab .ic { width: 16px; height: 16px; }
.lpop-menu button .ic, .rail-menu button .ic { width: 16px; height: 16px; color: var(--text-2); }
.lpop-menu button .ic.ic-on { color: var(--accent); }
.nw-head h2 { display: flex; align-items: center; gap: 10px; }
.nw-head h2 .ic { width: 22px; height: 22px; color: var(--accent); }
.sz-box h3 { display: flex; align-items: center; gap: 8px; }
.toast { display: flex; align-items: center; gap: 9px; }
.toast > .ic { width: 18px; height: 18px; color: var(--accent); }
.fav-btn .ic { width: 14px; height: 14px; stroke-width: 1.9; }
.fav-btn.on .ic { color: var(--yellow); }
.nw-play .ic { width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
.nw-hot .ic { width: 13px; height: 13px; vertical-align: -2px; }
.nw-favmark .ic { width: 14px; height: 14px; vertical-align: -2px; }
.nw-guard > .ic { width: 20px; height: 20px; color: var(--yellow, #facc15); }
.panel-ctrl button .ic { width: 14px; height: 14px; }
.sz-dnf-x { stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.mn-svg { pointer-events: none; }

/* ---- Cases à cocher et boutons radio au style de l'application ---- */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer; position: relative;
  width: 17px; height: 17px; border: 1.5px solid var(--line-2, var(--border)); background: var(--panel-2, var(--panel)); border-radius: 5px;
  display: inline-grid; place-content: center; vertical-align: middle; transition: background .15s, border-color .15s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::after { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s ease-out; }
input[type="radio"]::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s ease-out; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
input[type="radio"]:checked::after { transform: scale(1); }
input[type="checkbox"]:hover:not(:checked), input[type="radio"]:hover:not(:checked) { border-color: var(--text-2); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: default; }
/* Options (libellé + case) : interrupteur */
.toggle input[type="checkbox"] { width: 30px; height: 17px; border-radius: 999px; border-width: 1.5px; place-content: center start; padding: 0 2px; }
.toggle input[type="checkbox"]::after { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--text-2); transform: translateX(0); transition: transform .16s ease-out, background .16s; }
.toggle input[type="checkbox"]:checked::after { background: #fff; transform: translateX(13px); }
.toggle { gap: 8px; }

/* Espace Actu : fil + colonne de droite */
.nw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; align-items: start; }
.nw-feed { min-width: 0; }
.nw-aside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.nwa-box { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.nwa-box h3 { margin: 0 0 4px; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.nwa-box h3 .ic { color: var(--accent); width: 17px; height: 17px; }
.nwa-box h3 .muted { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.nwa-top { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: var(--text); padding: 6px 4px; border-radius: 8px; }
.nwa-top:hover { background: var(--hover); }
.nwa-rank { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--panel-3); font-family: var(--font-mono, inherit); font-size: 12px; font-weight: 700; color: var(--text-2); }
.nwa-top:first-of-type .nwa-rank { background: var(--accent); color: #fff; }
.nwa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nwa-txt b { font-size: 13.5px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nwa-who { display: grid; grid-template-columns: 96px 1fr 24px; align-items: center; gap: 8px; background: none; border: 0; color: var(--text-2); font: inherit; font-size: 13px; padding: 4px 4px; border-radius: 7px; cursor: pointer; text-align: left; }
.nwa-who:hover, .nwa-who.on { background: var(--hover); color: var(--text); }
.nwa-who.on { box-shadow: inset 0 0 0 1px var(--tc); }
.nwa-who-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nwa-bar { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.nwa-bar i { display: block; height: 100%; background: var(--tc); border-radius: 3px; }
.nwa-n { text-align: right; font-family: var(--font-mono, inherit); font-size: 12px; color: var(--muted); }
.nwa-vids { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nwa-vids a { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--text); min-width: 0; }
.nwa-vthumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--panel-3); display: grid; place-items: center; }
.nwa-vthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nwa-vthumb .ic { position: relative; width: 24px; height: 24px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
.nwa-vtitle { font-size: 12px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-filter { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--tc); background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--text); border-radius: 999px; padding: 1px 6px 1px 9px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; margin-right: 4px; }
.nw-filter .ic { width: 12px; height: 12px; }
@media (max-width: 1250px) { .nw-layout { grid-template-columns: 1fr; } .nw-aside { display: none; } }

/* Flèches et triangles dessinés (places gagnées / perdues, tri, direction du vent) */
.ic.i-tri-up, .ic.i-tri-down { width: .75em; height: .75em; vertical-align: 0; margin-right: 1px; }
.wind-arrow .ic { width: 1em; height: 1em; vertical-align: -0.12em; stroke-width: 2.4; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 4px; border: 1px solid var(--line-2, var(--border)); border-bottom-width: 2px; border-radius: 4px; background: var(--panel-2, var(--panel)); color: var(--text); font: inherit; font-size: 11px; vertical-align: -3px; }
kbd .ic { width: 12px; height: 12px; opacity: 1; }

/* ---------- Animations de l'interface (légères : opacité et déplacements uniquement) ----------
   Désactivées si le système demande moins d'animations ou si « Animations de l'interface » est
   décoché dans Réglages, onglet Affichage. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) {
    --ease-out: cubic-bezier(.2, .8, .25, 1);
    --ease-spring: cubic-bezier(.3, 1.35, .5, 1);
  }
  /* Démarrage : les panneaux arrivent l'un après l'autre */
  :root:not([data-motion="off"]) body.booting .grid .panel { animation: rise-in .5s var(--ease-out) both; animation-delay: calc(var(--boot-c, 0) * .07s + var(--boot-r, 0) * .05s); }
  :root:not([data-motion="off"]) body.booting .grid > :nth-child(2) { --boot-c: 1; }
  :root:not([data-motion="off"]) body.booting .grid > :nth-child(3) { --boot-c: 2; }
  :root:not([data-motion="off"]) body.booting .grid > :nth-child(n+4) { --boot-c: 3; }
  :root:not([data-motion="off"]) body.booting .lcol > .panel:nth-child(2) { --boot-r: 1; }
  :root:not([data-motion="off"]) body.booting .lcol > .panel:nth-child(n+3) { --boot-r: 2; }
  :root:not([data-motion="off"]) body.booting :is(.topbar, .rail) { animation: fade-in .45s ease-out both; }

  /* Boutons : léger enfoncement au clic */
  :root:not([data-motion="off"]) :is(.btn, .icon-btn, .tb-tool, .rail-btn, .set-tab, .tabs [data-tab], #szNav button, #nwNav button, .nwa-who, .panel-ctrl button) { transition: background-color .15s, color .15s, border-color .15s, opacity .15s, transform .12s var(--ease-out); }
  :root:not([data-motion="off"]) :is(.btn, .icon-btn, .tb-tool, .set-tab, .tabs [data-tab], #szNav button, #nwNav button, .panel-ctrl button):active { transform: scale(.95); }
  /* Barre latérale : icône qui se soulève au survol, repère rouge qui s'étire */
  :root:not([data-motion="off"]) .rail-btn svg { transition: transform .2s var(--ease-out); }
  :root:not([data-motion="off"]) .rail-btn:hover svg { transform: translateY(-2px); }
  :root:not([data-motion="off"]) .rail-btn:active { transform: scale(.93); }
  :root:not([data-motion="off"]) .rail-btn.on::before { animation: rail-mark .35s var(--ease-spring); transform-origin: center; }
  /* Menus de navigation : l'icône active glisse un peu */
  :root:not([data-motion="off"]) :is(#szNav, #nwNav, #rvNav) button .ic { transition: transform .2s var(--ease-out), color .2s; }
  :root:not([data-motion="off"]) :is(#szNav, #nwNav, #rvNav) button:hover .ic { transform: translateX(2px); }

  /* Fenêtres (Réglages, synchro TV…) : arrivée en douceur */
  :root:not([data-motion="off"]) dialog[open] { animation: modal-in .26s var(--ease-out); }
  :root:not([data-motion="off"]) dialog[open]::backdrop { animation: fade-in .25s ease-out; }
  :root:not([data-motion="off"]) .modal .tabpane.active, :root:not([data-motion="off"]) .set-block:not(.set-hidden) { animation: pane-in .22s ease-out; }
  /* Messages : glissent depuis le bas */
  :root:not([data-motion="off"]) .toast:not([hidden]) { animation: toast-in .32s var(--ease-spring); }
  /* Espaces Saison et Actu */
  :root:not([data-motion="off"]) .season-view:not([hidden]) > * { animation: view-in .3s var(--ease-out); }
  :root:not([data-motion="off"]) .sz-main.sz-anim > * { animation: rise-in .3s var(--ease-out) both; }
  :root:not([data-motion="off"]) .sz-main.sz-anim > :nth-child(2) { animation-delay: .04s; }
  :root:not([data-motion="off"]) .sz-main.sz-anim > :nth-child(n+3) { animation-delay: .08s; }
  /* Actu : cartes en cascade à l'ouverture et au changement de rubrique, nouvelles arrivées surlignées */
  :root:not([data-motion="off"]) .nw-list.cascade > .nw-card { animation: rise-in .4s var(--ease-out) both; }
  :root:not([data-motion="off"]) .nw-list.cascade > .nw-card:nth-child(2) { animation-delay: .03s; }
  :root:not([data-motion="off"]) .nw-list.cascade > .nw-card:nth-child(3) { animation-delay: .06s; }
  :root:not([data-motion="off"]) .nw-list.cascade > .nw-card:nth-child(4) { animation-delay: .09s; }
  :root:not([data-motion="off"]) .nw-list.cascade > .nw-card:nth-child(5) { animation-delay: .12s; }
  :root:not([data-motion="off"]) .nw-list.cascade > .nw-card:nth-child(6) { animation-delay: .15s; }
  :root:not([data-motion="off"]) .nw-list.cascade > .nw-card:nth-child(n+7) { animation-delay: .18s; }
  :root:not([data-motion="off"]) .nw-card.arrived { animation: card-arrive 1.6s var(--ease-out); }
  :root:not([data-motion="off"]) :is(.nw-card, .sz-card, .nwa-top, .nwa-vids a) { transition: transform .2s var(--ease-out), border-color .2s, background-color .2s, box-shadow .2s; }
  :root:not([data-motion="off"]) :is(.nw-card, .sz-card):hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
  :root:not([data-motion="off"]) .nwa-vthumb img { transition: transform .4s var(--ease-out); }
  :root:not([data-motion="off"]) .nwa-vids a:hover .nwa-vthumb img, :root:not([data-motion="off"]) .nw-thumb:hover .nw-img { transform: scale(1.05); }
  :root:not([data-motion="off"]) .nw-img { transition: transform .4s var(--ease-out); }
  :root:not([data-motion="off"]) .nwa-bar i { animation: bar-grow .6s var(--ease-out) both; transform-origin: left; }
  /* Pastille du nombre de nouveautés : petit rebond quand il augmente */
  :root:not([data-motion="off"]) .count-pop::after { animation: badge-pop .45s var(--ease-spring); }
  /* Point du direct : onde qui s'élargit */
  :root:not([data-motion="off"]) .source-badge.live .src-dot { position: relative; }
  :root:not([data-motion="off"]) .source-badge.live .src-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); animation: ripple 1.8s ease-out infinite; }
  /* Interrupteurs : la pastille rebondit un peu */
  :root:not([data-motion="off"]) .toggle input[type="checkbox"]::after { transition: transform .22s var(--ease-spring), background .16s; }
  /* Triangles des places gagnées / perdues */
  :root:not([data-motion="off"]) .tower tr:is(.flash-up, .flash-down) .ic:is(.i-tri-up, .i-tri-down) { animation: tri-bump .6s var(--ease-spring); }
}
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes view-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes rail-mark { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes card-arrive { 0% { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); background-color: color-mix(in srgb, var(--accent) 10%, var(--panel)); } 100% { box-shadow: none; background-color: var(--panel); } }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes badge-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(2.8); opacity: 0; } }
@keyframes tri-bump { 0% { transform: translateY(0); } 40% { transform: translateY(-3px); } 100% { transform: none; } }

/* =====================================================================================
   Pitwall clair : mêmes formes, fond gris très clair, panneaux blancs, couleurs de
   chronométrage plus foncées pour rester lisibles sur le blanc. Choisi dans Réglages, onglet
   Affichage (« Apparence »), ou automatiquement selon le système.
   ===================================================================================== */
:root[data-theme="pitwall"][data-scheme="light"] {
  --bg: #F4F5F7; --panel: #FFFFFF; --panel-2: #F3F4F7; --panel-3: #E9ECF1;
  --border: #E1E5EB; --line: #EEF0F4; --line-2: #CDD3DC; --hover: #F1F3F6; --deep: #FFFFFF;
  --top-1: #FFFFFF; --top-2: #FFFFFF; --focus: rgba(225, 6, 0, .07);
  --text: #0E1116; --text-2: #3D4552; --muted: #6B7380;
  --purple: #9333EA; --green: #059669; --yellow: #B88A00; --orange: #EA580C; --red: #DC2626; --blue: #2563EB; --sc: #D98A00;
  color-scheme: light;
}
/* Pitwall clair : éléments à couleurs fixes */
:root[data-scheme="light"] .tag.pit, :root[data-scheme="light"] .tag.flag-blue { background: rgba(37, 99, 235, .12); color: #1D4ED8; }
:root[data-scheme="light"] :is(.tag.out, .tag.drs) { background: rgba(5, 150, 105, .12); color: #047857; }
:root[data-scheme="light"] .tag.push { background: rgba(147, 51, 234, .12); color: #7E22CE; }
:root[data-scheme="light"] .tag.stop { background: rgba(220, 38, 38, .12); color: #B91C1C; }
:root[data-scheme="light"] .tag.ret { background: rgba(107, 115, 128, .14); color: #4B5563; }
:root[data-scheme="light"] .tag.catch { background: rgba(5, 150, 105, .12); color: #047857; }
:root[data-scheme="light"] .hstat.surface.dry .hstat-value { background: rgba(202, 138, 4, .14); color: #8A6100; }
:root[data-scheme="light"] .hstat.surface.damp .hstat-value { background: rgba(22, 163, 74, .14); color: #15803D; }
:root[data-scheme="light"] .hstat.surface.wet .hstat-value { background: rgba(37, 99, 235, .14); color: #1D4ED8; }
:root[data-scheme="light"] .map-ribbon { background: linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,.7)); }
:root[data-scheme="light"] .cmp-mini b { color: var(--text); }
:root[data-scheme="light"] .panel, :root[data-scheme="light"] .nwa-box, :root[data-scheme="light"] .nw-card, :root[data-scheme="light"] .sz-card, :root[data-scheme="light"] .sz-box { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
:root[data-scheme="light"] .toast { background: #0E1116; color: #F1F3F6; border-color: #0E1116; }
:root[data-scheme="light"] ::-webkit-scrollbar-thumb { background: #CDD3DC; }
/* Mode clair : « Replay » lisible sur fond blanc */
:root[data-scheme="light"] .rp-title { color: var(--blue); }

/* Mini-classement : petite fenêtre toujours au premier plan */
body.mini-body { display: block; min-height: 0; height: 100vh; overflow: hidden; padding-bottom: 20px; box-sizing: border-box; background: var(--bg); color: var(--text); font-family: "Saira Condensed", "Titillium Web", sans-serif; }
.mini-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--panel); border-bottom: 1px solid var(--border); }
.mini-flag { min-width: 10px; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: .5px; line-height: 18px; color: #fff; background: var(--green); }
.mini-flag.f-yellow { background: var(--yellow); color: #1d1500; }
.mini-flag.f-sc, .mini-flag.f-vsc { background: var(--sc); color: #1d1200; }
.mini-flag.f-red { background: var(--red); }
.mini-lap { flex: 1; font-weight: 700; font-size: 14px; font-family: "JetBrains Mono", Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-mode { border: 1px solid var(--border); background: var(--panel-2); color: var(--text-2); border-radius: 5px; font: 700 10.5px "Saira Condensed", sans-serif; letter-spacing: .6px; padding: 2px 7px; cursor: pointer; }
.mini-banner { padding: 4px 8px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #fff; background: var(--red); }
.mini-banner.f-sc, .mini-banner.f-vsc { background: var(--sc); color: #1d1200; }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table td { padding: 2px 6px; height: 22px; font-size: 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mini-table .m-pos { width: 22px; text-align: right; color: var(--muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5px; }
.mini-table .m-drv { font-weight: 700; letter-spacing: .4px; }
.mini-table .m-drv i { display: inline-block; width: 3px; height: 13px; margin-right: 6px; vertical-align: -2px; border-radius: 2px; }
.mini-table .m-val { text-align: right; font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5px; color: var(--text-2); }
.mini-table .m-tyre { width: 24px; text-align: center; }
/* Overlay : colonnes choisies (places gagnées, écart au leader, âge des pneus, arrêts) */
.mini-table .m-dl { width: 26px; text-align: right; font: 700 11px "JetBrains Mono", Consolas, monospace; color: var(--muted); }
.mini-table .m-dl.up { color: var(--green); } .mini-table .m-dl.down { color: var(--red); }
.mini-table .m-sub { font-size: 11px; color: var(--muted); }
.mini-table .m-age { width: auto; white-space: nowrap; }
.mini-table .m-age .tyre-age { font-size: 10.5px; color: var(--muted); margin-left: 3px; }
.mini-table .m-pits { width: 16px; text-align: center; font: 700 11px "JetBrains Mono", Consolas, monospace; color: var(--muted); }
.mini-table .m-tag { font: 700 10px "Saira Condensed", sans-serif; letter-spacing: .5px; color: var(--blue); }
.mini-table tr.focus td { background: var(--focus); }
.mini-table tr.duel-a .m-drv { color: var(--blue); }
.mini-table tr.duel-b .m-drv { color: var(--orange); }
.mini-table tr.out td { opacity: .45; }
.mini-table tr.cut td { border-bottom: 2px solid var(--red); }
.mini-table tr.danger .m-pos { color: var(--red); }
.mini-menu { display: grid; gap: 4px; padding: 6px 8px; background: var(--panel); border-bottom: 1px solid var(--border); }
.mini-table .m-empty { color: var(--muted); font-size: 12px; white-space: normal; padding: 10px 8px; }
.mini-foot { position: fixed; bottom: 0; left: 0; right: 0; padding: 3px 8px; font-size: 10.5px; color: var(--muted); background: var(--panel); border-top: 1px solid var(--border); }
.mini-table .m-drv .ic { width: 10px; height: 10px; margin-left: 4px; vertical-align: 0; color: var(--yellow); fill: currentColor; }
@media (max-width: 900px), (pointer: coarse) { #miniBtn { display: none; } }
@media (max-width: 600px) { #summaryBtn { display: none; } }
a.btn { text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }

/* Replay : moments clés (liste et repères sur la barre de lecture) */
.rp-marks { position: absolute; inset: 0; pointer-events: none; }
.rp-tip { position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 2px;
  max-width: 320px; padding: 6px 9px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: 12px; white-space: nowrap; }
.rp-tip b { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--muted); }
.rp-tip span { overflow: hidden; text-overflow: ellipsis; }
.rp-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--blue); opacity: .85; }
.rp-mark.k-race { background: var(--purple); }
.rp-mark.k-pit { background: var(--muted); }
.rp-mark.k-inc { background: var(--orange); }
.rp-mark.k-flag { background: var(--sc); }
#rpMoments.on { background: var(--panel-3); color: var(--text); }
.moments-pop { position: fixed; right: 16px; bottom: 86px; z-index: 60; width: min(440px, calc(100vw - 32px)); max-height: min(560px, 62vh); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.moments-pop[hidden] { display: none; }
.mo-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mo-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-right: auto; }
.mo-filters { display: flex; gap: 4px; order: 3; width: 100%; }
.mo-filters button { border: 1px solid var(--border); background: var(--panel-2); color: var(--text-2); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.mo-filters button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.mo-list { overflow-y: auto; padding: 4px 0; }
.mo-row { display: grid; grid-template-columns: 22px 54px 1fr; align-items: center; gap: 6px; width: 100%; padding: 6px 14px; border: 0; background: none; color: var(--text); text-align: left; font-size: 13px; cursor: pointer; }
.mo-row:hover { background: var(--hover); }
.mo-row .mo-ic { color: var(--blue); display: inline-flex; }
.mo-row.k-race .mo-ic { color: var(--purple); }
.mo-row.k-inc .mo-ic { color: var(--orange); }
.mo-row.k-flag .mo-ic { color: var(--sc); }
.mo-row.k-pit .mo-ic { color: var(--muted); }
.mo-row .mo-when { color: var(--muted); font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; }
.mo-row.future .mo-txt { color: var(--text-2); }
.mo-empty { padding: 12px 14px; }
.mo-spoil { padding: 8px 14px 10px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .moments-pop { right: 8px; left: 8px; width: auto; bottom: 150px; } }

/* Résumé automatique de la séance */
.summary-dlg { width: min(820px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); }
.summary-dlg::backdrop { background: rgba(0, 0, 0, .5); }
.sum-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 18px; border-bottom: 1px solid var(--line); }
.sum-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; margin-right: auto; }
.sum-body { padding: 8px 18px; max-height: 60vh; overflow-y: auto; }
.sum-body p { margin: 8px 0; line-height: 1.5; font-size: 14.5px; }
.sum-foot { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 14px 14px 18px; border-top: 1px solid var(--line); }

/* Météo : temps qu'il fait (ciel, température, vent, pluie), prochaines heures, jours du week-end */
.tb-pop.tb-pop-weather { width: min(680px, calc(100vw - 16px)); max-height: min(88vh, 940px); }
.wxv { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 0; }
.wxv-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 14%, var(--panel-2)), var(--panel-2)); border: 1px solid var(--border); }
.wxv-now { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wxv-sky { flex: none; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--yellow) 16%, transparent); color: var(--yellow); }
.wxv-sky.wet { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); }
.wxv-sky .ic { width: 38px; height: 38px; stroke-width: 1.6; }
.wxv-temp { font-size: 40px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.wxv-temp sup { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: 2px; vertical-align: 18px; }
.wxv-cond { font-size: 14px; font-weight: 600; margin-top: 3px; }
.wxv-src { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.wxv-track { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; }
.wxv-track span { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.wxv-track b { font-size: 26px; font-weight: 900; line-height: 1; color: var(--orange); }
.wxv-scale { position: relative; width: 70px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #3b82f6, #22c55e, #eab308, #f97316, #ef4444); }
.wxv-scale > i { position: absolute; top: -3px; width: 3px; height: 11px; margin-left: -1.5px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 1.5px var(--panel); }
.wxv-wind { display: flex; align-items: center; gap: 8px; }
.wxv-wind > div { display: flex; flex-direction: column; line-height: 1.2; }
.wxv-wind b { font-size: 20px; font-weight: 800; white-space: nowrap; }
.wxv-wind b small { font-size: 11px; color: var(--muted); font-weight: 600; }
.wxv-wind span { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.wxv-rose { width: 64px; height: 64px; flex: none; }
.wxv-rose circle { fill: var(--panel); stroke: var(--line-2); stroke-width: 1.5; }
.wxv-rose text { fill: var(--muted); font: 700 8px "Saira Condensed", sans-serif; text-anchor: middle; dominant-baseline: middle; }
.wxv-rose path { fill: var(--blue); }
.wxv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wxv-chips > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.wxv-chips b { color: var(--text); }
.wxv-chips .ic { width: 14px; height: 14px; color: var(--blue); }
.wxv-chips .wxv-rain .ic { color: var(--yellow); }
.wxv-chips .wxv-rain.on { background: color-mix(in srgb, var(--blue) 22%, var(--panel-2)); border-color: var(--blue); color: var(--text); font-weight: 700; }
.wxv-chips .wxv-rain.on .ic { color: var(--blue); }
.wxv-sec h5 { margin: 2px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.wxv-hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.wxv-h { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.wxv-h .ic { width: 22px; height: 22px; color: var(--text-2); }
.wxv-h b { font-size: 14px; color: var(--text); }
.wxv-h.wet { border-color: color-mix(in srgb, var(--blue) 55%, var(--border)); }
.wxv-h.wet small { color: var(--blue); font-weight: 700; }
.wxv-pbar { position: relative; width: 6px; height: 26px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.wxv-pbar > i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--blue); border-radius: 3px; }
.wxv-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.wxv-d { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.wxv-d.race { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.wxv-d > .ic { grid-row: span 2; width: 30px; height: 30px; color: var(--text-2); }
.wxv-dn { grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.wxv-dt { font-size: 13px; color: var(--muted); white-space: nowrap; }
.wxv-dt b { font-size: 17px; color: var(--text); }
.wxv-dr { display: block; height: 5px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.wxv-dr > i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.wxv-d small { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.wxv-d small .ic { width: 12px; height: 12px; color: var(--blue); }
.wxv-d em { grid-column: 1 / -1; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); }
@media (max-width: 600px) {
  .wxv-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .wxv-wind { grid-column: 1 / -1; }
}

/* Météo : radar de pluie (circuit de près avec son tracé, alentours, région) et carte Windy */
#wxRadar { margin-top: 14px; padding: 0 4px 6px; }
.wxr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.wxr-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.wxr-views { margin-left: auto; }
.wxr-views button.on { background: var(--accent); color: #fff; }
.wxr-map { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); }
.wxr-map img { position: absolute; max-width: none; user-select: none; pointer-events: none; }
.wxr-frame { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.wxr-frame.on { opacity: .8; }
.wxr-base.dark img { filter: invert(1) hue-rotate(180deg) brightness(.8) contrast(.9) saturate(.4); }
.wxr-track { position: absolute; left: 0; top: 0; pointer-events: none; }
.wxr-track polygon { fill: none; stroke-linejoin: round; }
/* Tracé couleur bitume : asphalte gris bordé d'un liseré clair, lisible sur fond sombre ou clair */
.wxr-track .o { stroke: rgba(235, 237, 240, .75); stroke-width: 8; }
.wxr-track .i { stroke: #54585f; stroke-width: 5; }
.wxr-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent, #E10600); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .5); }
.wxr-scale { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.wxr-scale > i { display: block; height: 4px; border: 2px solid #fff; border-top: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.wxr-legend { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.wxr-legend > i { display: block; width: 90px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #9be7ff, #2f80ed, #00b050, #ffd400, #ff7a00, #e00000); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.wxr-ctl { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wxr-ctl input[type=range] { flex: 1; }
.wxr-time { font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.wxr-time.future { color: var(--blue); }
.wxr-note { margin: 6px 0 0; }
.wxr-windy { display: block; width: 100%; height: 380px; border: 0; border-radius: 12px; background: var(--panel-2); }

/* Saison : pronostics entre amis */
.pd-next form { display: flex; flex-direction: column; gap: 10px; }
.pd-name input { margin-left: 6px; width: 200px; }
.pd-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pd-picks label { display: flex; flex-direction: column; gap: 4px; }
.pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pd-table td, .pd-board td { white-space: nowrap; }
.pd-table td small { color: var(--muted); }
.pd-hit { color: var(--green); font-weight: 700; }
.pd-near { color: var(--yellow); }
.pd-me td { background: var(--focus); }
.pd-round summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }

/* Lumières connectées : simulation à l'écran (lueur sur les bords de la fenêtre) */
.light-glow { position: fixed; inset: 0; z-index: 90; pointer-events: none; box-shadow: inset 0 0 60px 18px var(--lg, transparent), inset 0 0 0 4px var(--lg, transparent); transition: box-shadow .4s; }
.light-glow[hidden] { display: none; }
.light-glow.blink { animation: lightBlink 1s steps(2, jump-none) infinite; }
@keyframes lightBlink { 50% { box-shadow: inset 0 0 20px 4px var(--lg, transparent); } }
.lights-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lights-devices { display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100%; }

/* Téléphone : tableaux de la Saison plus compacts, colonne du pilote figée pendant le défilement */
@media (max-width: 700px) {
  .sz-table { font-size: 12.5px; }
  .sz-table th { padding: 5px 6px; }
  .sz-table td { padding: 6px 6px; }
  .sz-table td b + .muted.small { display: none; }
  .sz-heat :is(th, td):first-child, .sz-rate :is(th, td):nth-child(2) { position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--line); }
}

/* ---------- Mode créateur : posts pour les réseaux sociaux ---------- */
.posts-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.posts-fmt { border: 0; background: var(--panel-2); color: var(--text-2); padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.posts-fmt + .posts-fmt { border-left: 1px solid var(--border); }
.posts-fmt.active { background: var(--accent); color: #fff; }
.posts-warn { display: flex; align-items: center; gap: 6px; color: var(--yellow, #e8c35a); margin: 0 0 10px; }
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.posts-item { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.posts-item canvas { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); background: #0b0d12; }
.posts-item canvas { cursor: zoom-in; transition: transform .15s, box-shadow .15s; }
.posts-item canvas:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.posts-item figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.posts-item figcaption span { flex-basis: 100%; font-weight: 600; }
.posts-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.posts-item.off canvas { opacity: 0.3; filter: grayscale(1); }
.posts-item.off figcaption span { color: var(--muted); text-decoration: line-through; }
.posts-caps { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.posts-cap { width: 100%; resize: vertical; font: 13px/1.45 var(--font, inherit); background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px; box-sizing: border-box; }
.posts-acc { background: var(--panel-2); display: grid; gap: 5px; }
.posts-acc a { color: inherit; }
/* Posts « news » : choix de la nouvelle, titre et résumé modifiables */
.posts-news-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
/* Brouillons de posts : un par ligne (reprendre, date, supprimer) */
.posts-draft { gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.posts-draft .btn b { font-weight: 600; }
.posts-news-sel { flex: 1 1 320px; min-width: 0; max-width: 100%; }
.posts-news-edit { display: grid; gap: 8px; margin-bottom: 14px; }
.posts-news-edit select { display: block; margin-top: 4px; }
/* Post écrit à la main : type d'info et source côte à côte */
.posts-news-edit .posts-m2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.posts-news-edit input, .posts-news-edit textarea { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; font: 13px/1.45 var(--font, inherit); background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; resize: vertical; }

.posts-pub-dlg, .posts-acc-dlg { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 40px); }
.posts-pub-body, .posts-acc-body { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: calc(100vh - 120px); }
.posts-pub-body textarea, .posts-acc input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13px; line-height: 1.45; resize: vertical; }
.posts-nets { display: flex; flex-direction: column; gap: 6px; }
.posts-net { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.posts-net.off { opacity: .6; }
.posts-st { max-width: 260px; text-align: right; }
.posts-st.ok, .posts-ok { color: var(--green, #3ddc84); }
.posts-st.err { color: var(--accent); }
.posts-st a { color: inherit; }
.posts-video { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.posts-video .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.posts-vid { width: 180px; aspect-ratio: 9 / 16; border-radius: 8px; background: #000; }
.posts-pub-body > .row { display: flex; align-items: center; gap: 8px; }
.posts-pub-body .spacer { flex: 1; }
.posts-acc { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.posts-acc summary { cursor: pointer; display: flex; gap: 10px; align-items: center; }
.posts-acc ol { margin: 8px 0; padding-left: 20px; line-height: 1.45; }
.posts-acc label { display: block; margin: 6px 0; }
.posts-acc .row { display: flex; gap: 8px; margin-top: 8px; }

/* ---------- Actu : lecture d'un article dans l'appli ---------- */
.nw-reader { position: relative; }
.nwr-bar { position: sticky; top: -18px; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -18px -22px 0; padding: 10px 22px; background: var(--bg); border-bottom: 1px solid var(--border); }
.nwr-bar .spacer { flex: 1; }
.nwr-src { font-size: 13px; color: var(--muted); }
.nwr-src b { color: var(--text); }
.nwr-bar [data-r-vo].on { border-color: var(--accent); color: var(--text); }
.nwr { max-width: 760px; margin: 22px auto 0; }
.nwr h1 { font-size: 26px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.01em; }
.nwr h2 { font-size: 18px; line-height: 1.3; margin: 24px 0 10px; }
.nwr p { font-size: 16px; line-height: 1.65; margin: 0 0 14px; color: var(--text); }
.nwr p.nwr-lead, .nwr p.nwr-post { font-size: 17px; }
.nwr-meta { font-size: 13px; margin-bottom: 14px; }
.nwr-img { display: block; width: 100%; max-height: 440px; object-fit: cover; border-radius: 10px; margin: 6px 0 20px; background: var(--panel-2); }
.nwr-video { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; margin: 6px 0 18px; }
.nwr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Vidéo réservée à YouTube : image assombrie et bouton pour la regarder sur YouTube */
.nwr-video.off { display: grid; place-items: center; text-align: center; }
.nwr-video.off img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.nwr-video.off > div { position: relative; display: grid; justify-items: center; gap: 10px; padding: 16px; color: #fff; }
.nwr-video.off p { margin: 0; color: rgba(255, 255, 255, .8); }
.nwr-loading { display: flex; align-items: center; gap: 8px; padding: 30px 0; }
.nwr-loading .ic { animation: nwr-spin 1.2s linear infinite; }
@keyframes nwr-spin { to { transform: rotate(360deg); } }
.nwr-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin: 8px 0 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text-2); font-size: 14px; }
.nwr-note > span { flex: 1; min-width: 200px; }
.nwr-end { margin: 24px 0 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.nwr-end a { color: inherit; }
@media (max-width: 700px) {
  .nwr-bar { margin: -10px -10px 0; padding: 8px 10px; top: -10px; }
  .nwr h1 { font-size: 21px; }
  .nwr p { font-size: 15.5px; }
}
.nw-reader a.btn { color: var(--text); text-decoration: none; }
.nw-reader a.btn.btn-accent { color: #fff; }
.nwr-sum { margin: 0 0 18px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 10px 10px 0; }
.nwr-sum-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.nwr .nwr-sum p { margin: 0; font-size: 16px; }
.nwr-vo-note { margin: 0 0 10px; }

/* ---- Page d'accueil (sans spoiler) ---- */
.home-view { overflow-y: auto; }
/* Pas de séance en direct : écran d'attente à la place du tableau de bord */
.nolive-view { align-items: center; justify-content: center; overflow-y: auto; padding: 24px 16px; }
.nl-box { max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nl-box h2 { margin: 4px 0; font-size: 24px; font-weight: 900; }
.nl-box p { margin: 0; }
.nl-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.nl-icon .ic { width: 26px; height: 26px; }
.nl-next { font-size: 15px; line-height: 1.5; }
.nl-count { font-size: 30px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.nl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.nl-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.hm-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 14px; }
.hm-hello { margin: 0 0 2px; font-size: 26px; font-weight: 900; letter-spacing: .2px; }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.hm-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.hm-next, .hm-live { background: linear-gradient(135deg, #d4110a, #7d0703); border-color: #e21a12; color: #fff; }
.hm-next .muted, .hm-live .muted { color: rgba(255, 255, 255, .8); }
.hm-kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.hm-live .hm-kicker { justify-content: flex-start; }
.hm-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: hm-pulse 1.4s ease-in-out infinite; }
@keyframes hm-pulse { 50% { opacity: .3; } }
.hm-title { font-size: 20px; font-weight: 800; }
.hm-round { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.hm-tag { display: inline-flex; align-items: center; gap: 6px; }
.hm-next { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.hm-next-main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.hm-next .hm-kicker { justify-content: flex-start; gap: 10px; }
.hm-next .cal-days { flex-wrap: wrap; align-self: center; }
.hm-title { display: flex; align-items: center; gap: 10px; }
.hm-title small { margin-left: 6px; font-size: .78em; font-weight: 700; opacity: .8; }
.cal-s.now { background: color-mix(in srgb, var(--accent) 20%, transparent); font-weight: 700; }
.hm-count { font-size: 34px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hm-actions .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.hm-next .btn { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .35); color: #fff; }
.hm-live .btn-accent { background: #fff; border-color: #fff; color: #b30900; }
.hm-list { display: flex; flex-direction: column; }
.hm-news-item { display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 9px 2px; color: var(--text); font: inherit; cursor: pointer; }
.hm-news-item:first-child { border-top: 0; }
.hm-news-item:hover .hm-news-t { color: var(--accent-2); }
.hm-news-t { font-weight: 600; }
.hm-go { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hm-go button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.hm-go button:hover { border-color: var(--muted); background: var(--panel-2); }
.hm-follow { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; color: var(--text-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.hm-follow:hover { color: var(--text); background: var(--panel-2); }
.hm-follow .ic { width: 15px; height: 15px; }
.hm-go .ic { width: 20px; height: 20px; color: var(--accent); margin-bottom: 4px; }
.hm-go small { color: var(--muted); font-size: 12px; }
@media (max-width: 700px) {
  .hm-main { padding: 14px 12px 90px; }
  .hm-grid { grid-template-columns: 1fr; }
  .hm-go { grid-template-columns: repeat(2, 1fr); }
  .hm-count { font-size: 28px; }
}

/* Espace Replays (js/ui/replays.js) */
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rv-gp { display: flex; flex-direction: column; gap: 10px; }
.rv-gp-head { display: flex; flex-direction: column; gap: 2px; }
.rv-gp-head b { font-size: 15px; }
.rv-sessions { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-sessions .btn { display: inline-flex; align-items: center; gap: 5px; }
.rv-sessions .btn.on { border-color: var(--accent); color: var(--text); }
.rv-empty { display: flex; gap: 14px; align-items: flex-start; }
.rv-empty > .ic { width: 26px; height: 26px; color: var(--accent); flex: none; }
.rv-empty .btn { margin: 6px 6px 0 0; display: inline-flex; align-items: center; gap: 6px; }
.replay-view .rec-list { padding: 6px; }
.rv-gp { margin: 0; }
.hm-wx { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; font-size: 13px; }
.hm-wx span { display: inline-flex; align-items: center; gap: 5px; }
.hm-wx small { display: inline-flex; align-items: center; gap: 3px; opacity: .85; }
.hm-wx .ic { width: 13px; height: 13px; }
.hm-favs { display: grid; grid-template-columns: minmax(2.8em, auto) minmax(0, 1fr) minmax(0, 130px) auto; gap: 6px 10px; transition: filter .2s; }
.hm-fav-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
.hm-fav-row > :last-child { white-space: nowrap; text-align: right; }
.hm-fav-group { grid-column: 1 / -1; margin-top: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.hm-fav-group:first-child { margin-top: 0; }
@media (max-width: 600px) { .hm-favs { grid-template-columns: minmax(2.8em, auto) minmax(0, 1fr) auto; } .hm-fav-row > :nth-child(3) { display: none; } }
.hm-fav-row b { font-size: 16px; }
.hm-fav-pos { font-size: 20px; font-weight: 900; color: var(--accent); }
.hm-blur { filter: blur(7px); user-select: none; pointer-events: none; }
.hm-fav .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.hm-fav .hm-kicker .btn { margin-top: 0; text-transform: none; letter-spacing: 0; }
.hm-fav-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.hm-fav-edit .fav-list { gap: 6px; }
.hm-fav-edit .fav { padding: 4px 11px; font-size: 13px; font-weight: 600; }

/* ---------- Carte flottante (application de bureau) : la carte seule, sans fond ni fenêtre ---------- */
html.float-map, html.float-map body { background: transparent !important; overflow: hidden; }
html.float-map body > :not(.grid):not(.float-bar):not(.float-resize) { display: none !important; }
/* Carte et mini-classement flottants : pas de messages (alertes de course, arrêts…) par-dessus la vidéo */
html:is(.float-map, .float-mini) .toast { display: none !important; }
html.float-map .grid { position: fixed; inset: 0; padding: 0 !important; margin: 0; background: transparent !important; display: block !important; }
html.float-map .grid .panel:not(.p-map), html.float-map .grid :is(.lsplit-v, .lsplit-h) { display: none !important; }
html.float-map .grid .lcol { background: transparent !important; }
html.float-map .p-map { position: fixed !important; z-index: 1; inset: 0 !important; width: auto !important; height: auto !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
html.float-map .p-map > :not(.panel-body) { display: none !important; }
html.float-map .map-wrap { position: absolute; inset: 0; background: transparent !important; cursor: grab; }
html.float-moving, html.float-moving * { cursor: grabbing !important; }
html.float-map :is(.map-zoom, .map-legend, .map-ribbon), html.float-map label:has(#mapGrid) { display: none !important; }
/* Barre d'outils et coin de redimensionnement : visibles au survol seulement */
.float-bar { position: fixed; top: 6px; right: 6px; z-index: 50; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px;
  background: rgba(10, 11, 14, .72); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .12); opacity: 0; transition: opacity .15s; }
.float-bar button, .float-grip { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: #e9ecf1; font: 700 15px/1 inherit; cursor: pointer; }
.float-grip { cursor: grab; }
.float-bar button:hover { background: rgba(255, 255, 255, .14); }
.float-bar .ic { width: 15px; height: 15px; }
.float-resize { position: fixed; right: 0; bottom: 0; z-index: 50; width: 18px; height: 18px; cursor: nwse-resize; opacity: 0; transition: opacity .15s;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .55) 58%, transparent 58%, transparent 70%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, .55) 78%, transparent 78%); }
html:is(.float-map, .float-mini):hover :is(.float-bar, .float-resize), html.float-moving :is(.float-bar, .float-resize), .float-bar:has(.map-layers[open]) { opacity: 1; }
.float-bar .map-layers > summary { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #e9ecf1; cursor: pointer; }
.float-bar .map-layers > summary:hover, .float-bar .map-layers[open] > summary { background: rgba(255, 255, 255, .14); }
.float-bar .map-layers-menu { max-height: calc(100vh - 50px); max-width: calc(100vw - 16px); overflow-y: auto; }

/* Mini-classement flottant (appli de bureau) : pas de fond, chaque ligne en pastille translucide */
html.float-mini, html.float-mini body.mini-body { background: transparent; }
html.float-mini body.mini-body { padding: 4px 4px 26px; cursor: grab; }
html.float-mini :is(.mini-head, .mini-foot) { border: 0; border-radius: 7px; background: color-mix(in srgb, var(--panel) var(--ov-bg, 85%), transparent); }
html.float-mini :is(.mini-head, .mini-banner) { margin-bottom: 3px; }
html.float-mini .mini-banner { border-radius: 7px; }
html.float-mini .mini-table { border-collapse: separate; border-spacing: 0 2px; width: max-content; min-width: 100%; }
html.float-mini .mini-table td { border: 0; background: color-mix(in srgb, var(--panel) var(--ov-bg, 80%), transparent); }
html.float-mini .mini-table tr.focus td { background: linear-gradient(var(--focus), var(--focus)), color-mix(in srgb, var(--panel) var(--ov-bg, 80%), transparent); }
html.float-mini .mini-table td:first-child { border-radius: 6px 0 0 6px; }
html.float-mini .mini-table td:last-child { border-radius: 0 6px 6px 0; }
html.float-mini .mini-foot { left: 4px; right: 4px; bottom: 4px; }
html.float-mini .float-bar { top: auto; bottom: 4px; right: 24px; }   /* en bas : laisse libre le bouton INT / ÉCART */

/* ---------- Résultats : séance en cartes (fenêtre Résumé et page Résultats) ---------- */
.rp-status { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }
.rp-status.done { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.rp-podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 10px; align-items: end; margin: 6px 0 14px; }
.rp-pod { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 16%, var(--panel)) 0%, var(--panel) 70%); border-top: 3px solid var(--tc); min-width: 0; }
.rp-pod.p1 { order: 2; padding-top: 22px; padding-bottom: 18px; }
.rp-pod.p2 { order: 1; }
.rp-pod.p3 { order: 3; }
.rp-pos { position: absolute; top: 8px; right: 10px; font: 900 26px/1 "Saira Condensed", sans-serif; color: color-mix(in srgb, var(--tc) 70%, var(--text)); opacity: .9; }
.rp-pod.p1 .rp-pos { font-size: 34px; }
.rp-pod-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rp-pod-who .team-logo { width: 30px; height: 30px; }
.rp-pod-who > div > b { display: block; font-size: 20px; letter-spacing: .5px; line-height: 1.1; }
.rp-pod-who > div > span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-val { font: 800 17px "JetBrains Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
.rp-lead { font-family: "Saira Condensed", sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: .6px; color: var(--tc); filter: brightness(1.15); }
.rp-sub { font-size: 12px; min-height: 1em; }
/* Cartes : chaque ligne remplie (les dernières s'élargissent au lieu de laisser un trou) */
.rp-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-tiles > .rp-tile { flex: 1 1 210px; }
.rp-tile { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-tile h4 { margin: 0 0 2px; display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .9px; text-transform: uppercase; color: var(--muted); }
.rp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rp-row > :first-child { margin-right: auto; }
.rp-drv { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rp-drv .team-logo { width: 20px; height: 20px; }
.rp-delta { font-weight: 800; font-size: 12px; padding: 1px 6px; border-radius: 6px; }
.rp-delta.up { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.rp-delta.down { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.rp-tyres { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rp-arr { color: var(--muted); display: inline-flex; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 7px; font-size: 12px; font-weight: 700; background: var(--panel-3); }
.rp-chip.sc, .rp-chip.vsc { background: color-mix(in srgb, var(--sc) 22%, transparent); color: var(--sc); }
.rp-chip.red { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.rp-chip.green { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.rp-chip.out { opacity: .85; }
.rp-best { font: 800 24px "JetBrains Mono", Consolas, monospace; color: var(--purple); }
.rp-best.plain { color: var(--text); }
.rp-tile.fl { border-color: color-mix(in srgb, var(--purple) 45%, var(--border)); }
/* Page Résultats : graphique sous les cartes (stratégies ou écarts) */
.rp-chart { margin-top: 10px; gap: 4px; }
.rp-bar-row { display: flex; align-items: center; gap: 8px; height: 20px; }
.rp-bar-who { display: inline-flex; align-items: center; gap: 5px; width: 62px; flex: none; font-size: 12px; }
.rp-bar-who .team-logo { width: 16px; height: 16px; }
.rp-stints { flex: 1; display: flex; gap: 2px; height: 14px; }
.rp-stints i { display: grid; place-items: center; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--tc) 30%, var(--panel-3)); border: 1px solid color-mix(in srgb, var(--tc) 75%, transparent); color: var(--text); font: 700 9.5px/1 "JetBrains Mono", Consolas, monospace; font-style: normal; overflow: hidden; white-space: nowrap; }
.rp-gapbar { flex: 1; height: 10px; border-radius: 5px; background: var(--panel-3); overflow: hidden; }
.rp-gapbar i { display: block; height: 100%; border-radius: 5px; opacity: .85; }
.rp-gapv { width: 64px; text-align: right; font-size: 12px; flex: none; }
/* Page Résultats : chiffres de la séance et pied de page */
.rp-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp-numbers h3 { margin-top: 0; }
.rp-num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.rp-num-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.rp-num-grid b { font: 800 22px "Saira Condensed", sans-serif; }
.rp-num-grid span { font-size: 11.5px; color: var(--muted); }
.rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); }
.rp-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-foot-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
/* Page Résultats */
.results-view .sz-main { max-width: 1800px; margin: 0 auto; width: 100%; }
/* Grand écran : séance en cartes à gauche, classement à droite */
.rp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.rp-layout .rp-podium { margin-top: 0; }
@media (max-width: 1300px) { .rp-layout { grid-template-columns: minmax(0, 1fr); } }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rp-head h2 { margin: 2px 0 0; font-size: 24px; }
.rp-class { margin: 0; }
.rp-class h3 { margin-top: 0; }
.rp-table-wrap { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp-table th { text-align: left; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rp-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rp-table tr.out td { opacity: .55; }
.rp-c-pos { width: 34px; font: 800 14px "Saira Condensed", sans-serif; color: var(--muted); }
.rp-c-drv { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }
.rp-c-drv .team-logo { width: 20px; height: 20px; }
.rp-num { font-family: "JetBrains Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
.rp-c-tyres { display: inline-flex; gap: 3px; vertical-align: middle; }
.rp-purple { color: var(--purple); font-weight: 800; }
.rp-dnf { color: var(--red); font-family: inherit; font-weight: 700; }
/* Fenêtre Résumé : cartes */
.summary-dlg .sum-body { padding: 12px 18px; }
@media (max-width: 640px) {
  .rp-podium { gap: 6px; }
  .rp-pod { padding: 10px 8px; gap: 4px; }
  .rp-pod.p1 { padding-top: 16px; padding-bottom: 12px; }
  .rp-pod-who { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rp-pod-who .team-logo { width: 22px; height: 22px; }
  .rp-pod-who > div > b { font-size: 16px; }
  .rp-pod-who > div > span { display: none; }
  .rp-pos, .rp-pod.p1 .rp-pos { font-size: 18px; top: 6px; right: 7px; }
  .rp-val { font-size: 13px; }
  .rp-lead { font-size: 14px; }
  .rp-sub { font-size: 10.5px; }
}

/* ---------- Réglages : rubriques à gauche, contenu en cartes, recherche ---------- */
#settingsModal.set-modal { width: min(1040px, calc(100vw - 48px)); height: min(740px, calc(100vh - 48px)); max-height: none; overflow: hidden;
  border-radius: 18px; border-color: var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
#settingsModal.set-modal::backdrop { background: rgba(4, 5, 8, .62); backdrop-filter: blur(6px); }
:root:not([data-motion="off"]) #settingsModal.set-modal[open] { animation: set-in .26s var(--ease-out, ease-out); }
@keyframes set-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.set-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); height: 100%; }
.set-side { display: flex; flex-direction: column; gap: 12px; padding: 18px 12px; background: var(--panel-2); border-right: 1px solid var(--border); min-height: 0; overflow-y: auto; }
.set-brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px; font-size: 18px; font-weight: 900; }
.set-brand .ic { color: var(--accent); width: 20px; height: 20px; }
.set-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.set-search:focus-within { border-color: var(--accent); }
.set-search .ic { color: var(--muted); width: 15px; height: 15px; flex: none; }
#settingsModal .set-search input { border: 0; background: none; padding: 9px 0; width: 100%; min-width: 0; font-size: 13.5px; box-shadow: none; outline: none; }
#settingsModal .set-nav { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; }
#settingsModal .set-tab { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: var(--text-2);
  font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
#settingsModal .set-tab:hover { background: var(--panel-3); color: var(--text); }
#settingsModal .set-tab.active { background: var(--panel); color: var(--text); box-shadow: inset 3px 0 0 var(--accent), 0 1px 0 var(--border); }
.set-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-3); color: var(--muted); transition: background-color .15s, color .15s; }
.set-ico .ic { width: 16px; height: 16px; }
#settingsModal .set-tab.active .set-ico { background: var(--accent); color: #fff; }
.set-lbl { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.set-lbl b { font-size: 13.5px; font-weight: 700; }
.set-lbl small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.set-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 26px 14px; margin: 0; border-bottom: 1px solid var(--border); }
.set-head h3 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: .2px; outline: none; }
.set-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.set-close { flex: none; }
#settingsModal .modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 26px 26px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
#settingsModal .set-block { padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
#settingsModal .set-block:last-child { border-bottom: 1px solid var(--border); }
#settingsModal .set-block h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px; font-weight: 800; }
#settingsModal .set-block h4 .ic { color: var(--accent); width: 17px; height: 17px; }
#settingsModal .set-block p { line-height: 1.5; }
#settingsModal .set-block .row { margin: 10px 0; gap: 10px; }
#settingsModal .set-block .row:last-child { margin-bottom: 0; }
#settingsModal .set-block .toggle { line-height: 1.4; white-space: normal; }
/* Réglages simples (un interrupteur ou un menu par ligne) : liste façon réglages du téléphone,
   texte à gauche, commande à droite, lignes séparées */
#settingsModal .set-block .row:has(> .toggle:only-child), #settingsModal .set-block .row:has(> label.small:only-child > select) {
  margin: 0; padding: 11px 0; border-top: 1px solid var(--border); }
#settingsModal .set-block :is(h4, .set-bhead) + .row:has(> .toggle:only-child), #settingsModal .set-block :is(h4, .set-bhead) + .row:has(> label.small:only-child > select) { border-top: 0; padding-top: 2px; }
#settingsModal .set-block .row > .toggle:only-child { flex: 1; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 18px; font-size: 13.5px; }
#settingsModal .set-block .row > label.small:only-child:has(> select) { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 13.5px; }
#settingsModal .set-block .row > label.small:only-child > select { flex: 0 1 auto; width: auto; min-width: 0; max-width: 58%; }
.set-status { padding: 10px 12px; margin: 0 0 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); line-height: 1.5; }
.set-status:empty { display: none; }
.set-more { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.set-more > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: 6px; }
.set-more > summary::-webkit-details-marker { display: none; }
.set-more > summary::before { content: '›'; display: inline-block; transition: transform .15s; font-size: 16px; line-height: 1; }
.set-more[open] > summary::before { transform: rotate(90deg); }
.set-more[open] > summary { margin-bottom: 8px; }
/* Rubriques en cartes : titre (et action) en tête, lignes « texte à gauche, commande à droite »,
   options en tuiles, journal replié */
#settingsModal .modal-body { gap: 16px; padding: 22px 28px 32px; }
#settingsModal .set-block { padding: 18px 20px; border-radius: 16px; }
.set-bhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin-bottom: 14px; }
#settingsModal .set-bhead h4 { margin: 0; font-size: 15px; }
.set-bhead p { grid-column: 1 / -1; margin: 5px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.set-bhead p .ic { width: 13px; height: 13px; vertical-align: -2px; }
.set-bact { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 6px; }
.set-tag { margin-left: 2px; padding: 2px 8px; border-radius: 999px; background: var(--panel-3); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--border); }
:is(.set-bhead, .set-status) + .set-row { border-top: 0; padding-top: 2px; }
.set-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13.5px; }
.set-txt b { font-weight: 500; }
.set-txt small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.set-txt small:empty { display: none; }
.set-ctl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: none; max-width: 62%; }
.set-ctl select { width: auto; max-width: 100%; }
:is(.set-ctl, .set-bhead) .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; font-size: 12.5px; }
:is(.set-ctl, .set-bhead) .btn .ic { width: 14px; height: 14px; }
.set-ctl a.btn:not(.btn-accent) { color: var(--text); }
#settingsModal .lan-wrap .btn { align-self: flex-start; width: auto; }
.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.set-foot { margin: 14px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.set-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
#settingsModal .set-tiles > .toggle { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--panel); font-size: 13px; line-height: 1.35; transition: border-color .15s, background-color .15s; }
#settingsModal .set-tiles > .toggle:hover { border-color: var(--line-2); }
#settingsModal .set-tiles input { flex: none; }
.set-tiles .col-sep { grid-column: 1 / -1; margin: 10px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
#settingsModal .fav-list { gap: 8px; }
#settingsModal .fav { padding: 6px 13px; font-size: 12.5px; transition: border-color .15s, background-color .15s; }
#settingsModal .fav:not(.on):hover { border-color: var(--text-2); }
#changelog { gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); }
#changelog .cl-ver { padding: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
#changelog .cl-ver:first-child { border-top: 0; }
#changelog .cl-ver > summary { display: flex; align-items: center; gap: 10px; padding: 9px 14px; line-height: 1.3; list-style: none; font-size: 13.5px; }
#changelog .cl-ver > summary::-webkit-details-marker { display: none; }
#changelog .cl-ver > summary::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .15s; }
#changelog .cl-ver[open] > summary::after { transform: rotate(90deg); }
#changelog .cl-ver > summary:hover { background: var(--hover, var(--panel-3)); }
#changelog .cl-ver > summary .muted { margin: 0; font-size: 12px; }
#changelog .cl-body { padding: 2px 16px 14px; }
#changelog .cl-more { display: block; width: 100%; padding: 11px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; color: var(--accent); font-weight: 600; }
.diag-new { color: var(--orange); }
.diag-list { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; }
.diag-table { border-collapse: collapse; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.diag-table th, .diag-table td { padding: 2px 8px; text-align: right; border-bottom: 1px solid var(--border); }
#feedDiagOut:empty { display: none; }
.kbd-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px 16px; font-size: 13px; }
.kbd-list > span:nth-child(odd) { display: flex; gap: 4px; }
.kbd-list kbd { min-width: 26px; height: 24px; padding: 0 7px; font-size: 12px; }
@media (max-width: 640px) {
  .set-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .set-ctl { justify-content: flex-start; max-width: none; }
  .set-tiles { grid-template-columns: minmax(0, 1fr); }
}
/* Téléphone et petite fenêtre : plein écran, rubriques en bande défilante en haut */
@media (max-width: 900px) {
  #settingsModal.set-modal { width: 100vw !important; height: 100dvh; max-width: none !important; max-height: 100dvh; inset: 0; border-radius: 0; border: 0; margin: 0; }
  .set-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .set-side { flex-direction: column; gap: 8px; padding: 10px 10px 8px; border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .set-brand { display: none; }
  #settingsModal .set-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  #settingsModal .set-nav::-webkit-scrollbar { display: none; }
  #settingsModal .set-tab { width: auto; flex: none; padding: 6px 12px 6px 6px; border-radius: 999px; }
  #settingsModal .set-tab.active { box-shadow: 0 0 0 1px var(--border); }
  .set-ico { width: 26px; height: 26px; border-radius: 50%; }
  .set-lbl small { display: none; }
  .set-head { padding: 12px 14px 10px; }
  .set-head h3 { font-size: 18px; }
  #settingsModal .modal-body { padding: 12px 12px 24px; gap: 10px; }
  #settingsModal .set-block { padding: 14px; }
}

/* ---------- Posts (mode créateur) : choix à gauche, visuels en grand à droite ---------- */
.posts-dlg { width: min(1400px, calc(100vw - 32px)); height: calc(100vh - 32px); max-height: none; border-radius: 18px; border-color: var(--line-2); overflow: hidden; }
.posts-dlg::backdrop { background: rgba(4, 5, 8, .62); backdrop-filter: blur(6px); }
.posts-dlg[open] { display: block; }
:root:not([data-motion="off"]) .posts-dlg[open] { animation: set-in .26s var(--ease-out, ease-out); }
.pv-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100%; }
.pv-side { display: flex; flex-direction: column; gap: 6px; padding: 18px 12px; background: var(--panel-2); border-right: 1px solid var(--border); overflow-y: auto; min-height: 0; }
.pv-brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 6px; font-size: 18px; font-weight: 900; }
.pv-brand .ic { color: var(--accent); width: 20px; height: 20px; }
.pv-sec { padding: 10px 10px 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-nav { display: flex; flex-direction: column; gap: 2px; }
.pv-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 11px; background: none; color: var(--text-2); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.pv-item:hover { background: var(--panel-3); color: var(--text); }
.pv-item.active { background: var(--panel); color: var(--text); box-shadow: inset 3px 0 0 var(--accent), 0 1px 0 var(--border); }
.pv-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-3); color: var(--muted); transition: background-color .15s, color .15s; }
.pv-ico .ic { width: 16px; height: 16px; }
.pv-item.active .pv-ico { background: var(--accent); color: #fff; }
.pv-lbl { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pv-lbl b { font-size: 13.5px; font-weight: 700; }
.pv-lbl small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Format : petit rectangle aux proportions du visuel */
.pv-ratio { display: block; border: 2px solid currentColor; border-radius: 3px; }
.pv-ratio.r45 { width: 13px; height: 16px; }
.pv-ratio.r916 { width: 10px; height: 17px; }
.pv-opts { display: flex; flex-direction: column; padding: 2px 10px; }
.pv-opts .toggle { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pv-opts .toggle[hidden] { display: none; }
.pv-sig { display: flex; flex-direction: column; gap: 5px; padding: 10px 0 4px; font-size: 12px; color: var(--muted); }
.pv-sig input { width: 100%; box-sizing: border-box; }
.pv-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pv-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.pv-head > div:first-child { flex: 1; min-width: 0; }
.pv-head h3 { margin: 0; font-size: 22px; font-weight: 900; outline: none; }
.pv-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.pv-actions { display: flex; align-items: center; gap: 8px; }
.pv-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.posts-dlg .posts-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 24px; }
.posts-dlg .posts-head { padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.posts-dlg .posts-head:empty { display: none; }
.posts-dlg .posts-head > :first-child { margin-top: 0; }
.posts-dlg .posts-head > :last-child { margin-bottom: 0; }
.posts-dlg .posts-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.posts-dlg .posts-item { padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); transition: border-color .15s; }
.posts-dlg .posts-item:hover { border-color: var(--line-2); }
.posts-dlg .posts-item canvas { border-radius: 9px; border: 0; }
.posts-dlg .posts-caps { margin-top: 18px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.posts-caps:not(:has(*)) { display: none; }   /* format Story : pas de texte à publier */
.posts-dlg .posts-cap { background: var(--panel); }
@media (max-width: 900px) {
  .posts-dlg { width: 100vw !important; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; margin: 0; }
  .pv-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pv-side { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 10px; border-right: 0; border-bottom: 1px solid var(--border); max-height: 40dvh; }
  .pv-brand, .pv-sec { display: none; }
  .pv-nav { flex-direction: row; overflow-x: auto; width: 100%; }
  .pv-item { width: auto; flex: none; }
  .pv-lbl small { display: none; }
  .pv-opts { width: 100%; }
  .pv-head { flex-wrap: wrap; padding: 12px 14px; row-gap: 10px; }
  .pv-head > div:first-child { flex-basis: 100%; }
  .pv-actions { width: 100%; }
  .pv-actions .btn { flex: 1; justify-content: center; }
  .pv-opts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .pv-opts .toggle { font-size: 12.5px; }
  .pv-sig { grid-column: 1 / -1; }
  .pv-head p { display: none; }
  .pv-head h3 { font-size: 18px; }
  .pv-opts .toggle { padding: 6px 0; }
  .pv-sig { flex-direction: row; align-items: center; }
  .posts-dlg .posts-body { padding: 12px; }
}

/* ---------- Posts : même habillage que le Studio (page web), toujours en sombre ----------
   Fonds noirs, coins peu arrondis, barre latérale noire avec un trait rouge sur l'élément choisi,
   intitulés en étiquette rouge, chiffres en Saira Condensed. */
.posts-dlg, .posts-pub-dlg, .posts-acc-dlg {
  color-scheme: dark;
  --bg: #030406; --panel: #101218; --panel-2: #0b0c10; --panel-3: #171a21; --hover: rgba(255, 255, 255, .05);
  --border: rgba(255, 255, 255, .08); --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --text: #fff; --text-2: #b9bcc6; --muted: #858a96; --accent: #e10600; --accent-2: #ff2d1f;
  background: var(--bg); color: var(--text); border-color: var(--line-2); border-radius: 8px;
}
:is(.posts-dlg, .posts-pub-dlg, .posts-acc-dlg) :is(.btn, input[type=text], input[type=password], input[type=datetime-local], textarea, select, .posts-seg, .posts-net, .posts-acc, .posts-video, .posts-cap) { border-radius: 6px; }
:is(.posts-dlg, .posts-pub-dlg, .posts-acc-dlg) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px 14px; background: var(--panel); border-color: var(--line-2); color: var(--text); font-size: 13.5px; }
:is(.posts-dlg, .posts-pub-dlg, .posts-acc-dlg) .btn:hover { background: var(--panel-3); border-color: var(--line-2); }
:is(.posts-dlg, .posts-pub-dlg, .posts-acc-dlg) .btn.small { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
:is(.posts-dlg, .posts-pub-dlg, .posts-acc-dlg) .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
:is(.posts-dlg, .posts-pub-dlg, .posts-acc-dlg) .btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); }
:is(.posts-dlg, .posts-pub-dlg, .posts-acc-dlg) :is(input[type=text], input[type=password], input[type=datetime-local], textarea, select) { background: var(--panel); color: var(--text); border: 1px solid var(--line-2); }
.posts-pub-dlg .sum-head, .posts-acc-dlg .sum-head { background: var(--bg); }
.pv-side { gap: 4px; padding: 20px 14px; background: #000; border-right-color: var(--line); }
.pv-brand { gap: 6px; margin: 0 6px 18px; padding: 0; font: 800 23px/1 'Saira Condensed', sans-serif; letter-spacing: .3px; }
.pv-brand b { color: var(--accent); font-weight: 800; }
.pv-sec { padding: 14px 14px 4px; font-size: 11px; letter-spacing: .1em; }
.pv-item { position: relative; gap: 12px; padding: 9px 14px; border-radius: 6px; }
.pv-item:hover { background: rgba(255, 255, 255, .05); }
.pv-item.active { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: none; }
.pv-item.active::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; background: var(--accent); }
.pv-ico { width: 22px; height: 22px; border-radius: 0; background: none; }
.pv-ico .ic { width: 20px; height: 20px; }
.pv-item.active .pv-ico { background: none; color: #fff; }
.pv-lbl b { font-size: 15px; font-weight: 600; }
.pv-lbl small { font-size: 12px; }
.pv-head { padding: 16px 24px; border-bottom-color: var(--line); }
.pv-head h3 { font: 800 28px/1.05 'Saira Condensed', sans-serif; letter-spacing: .2px; }
.pv-opts .toggle { border-bottom-color: var(--line); }
.posts-dlg .posts-body { padding: 20px 24px 28px; }
.posts-dlg :is(.posts-head, .posts-item, .posts-caps) { border-color: var(--line); border-radius: 6px; background: var(--panel); }
.posts-dlg .posts-item canvas { border-radius: 4px; }
/* Choix du type de post : puces comme dans le Studio (blanche quand choisie) */
.posts-dlg .posts-seg { gap: 6px; border: 0; overflow: visible; flex-wrap: wrap; }
.posts-dlg .posts-fmt { border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel); padding: 7px 14px; font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.posts-dlg .posts-fmt + .posts-fmt { border-left: 1px solid var(--line-2); }
.posts-dlg .posts-fmt.active { background: #fff; border-color: #fff; color: #000; }

/* Statistiques : comptes, posts publiés, liens (mêmes cartes que le Studio) */
.pst { max-width: 1180px; }
.pst-bar { display: flex; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.pst-seg { flex: 1; display: flex; gap: 2px; padding: 3px; border-radius: 6px; background: var(--panel-3); }
.pst-seg button { flex: 1; border: 0; border-radius: 4px; background: none; color: var(--text-2); font: 600 14.5px var(--font); padding: 9px 14px; cursor: pointer; }
.pst-seg button:hover { color: var(--text); }
.pst-seg button.on { background: rgba(255, 255, 255, .14); color: var(--text); }
.pst-status { display: flex; align-items: center; gap: 6px; margin: 0 2px 10px; font-size: 12.5px; color: var(--muted); }
.pst-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pst-pulse .8s infinite alternate; }
@keyframes pst-pulse { from { opacity: .35; } }
.pst-section { display: inline-flex; align-items: center; gap: 8px; height: 24px; margin: 18px 0 10px; padding: 0 9px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pst-section small { color: rgba(255, 255, 255, .75); font-weight: 600; letter-spacing: .02em; text-transform: none; }
[data-pane] > .pst-section:first-child, [data-pane] > .pst-row:first-child { margin-top: 4px; }
.pst-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
[data-pane] > .pst-row { margin: 18px 0 10px; }
[data-pane] > .pst-row .pst-section { margin: 0; }
.pst .spacer { flex: 1; min-width: 0; }
.pst-card { position: relative; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.pst-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; align-items: start; }
.pst-acc-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pst-acc-head > b { flex: 1; font: 800 20px/1.1 'Saira Condensed', sans-serif; }
.pst-acc-total, .pst-acc-f { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pst-acc-total b { margin-right: 5px; color: var(--text); font: 800 28px/1 'Saira Condensed', sans-serif; }
.pst-acc-net { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pst-acc-net:last-child { border-bottom: 0; padding-bottom: 0; }
.pst-acc-net .pst-metrics { grid-column: 1 / -1; }
.pst-acc-f b { margin-right: 4px; color: var(--text); font-size: 15px; }
.pst-acc-off { display: grid; gap: 4px; padding-top: 11px; color: var(--muted); font-size: 12.5px; }
.pst-net { font-weight: 600; min-width: 84px; }
.pst a { color: inherit; text-decoration: none; }
.pst a:hover { text-decoration: underline; }
.pst-acc-off a { color: var(--text-2); font-weight: 600; }
.pst-metrics { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.pst-metric b { margin-right: 4px; color: var(--text); }
/* Posts publiés et liens : colonnes remplies sans trous (cartes de hauteurs différentes) */
.pst-list { columns: 380px; column-gap: 12px; }
.pst-list > * { break-inside: avoid; margin-bottom: 12px; }
.pst-top { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 12.5px; color: var(--muted); }
.pst-top > b { color: var(--text); font-size: 14.5px; }
.pst-top .icon-btn { margin: -6px -8px -6px 0; font-size: 15px; color: var(--muted); }
.pst-t { margin: 6px 0 2px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.pst-net-stats { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pst-card > .pst-metrics { margin-top: 8px; }
.pst-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pst-tile { padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.pst-tile b { display: block; font: 800 30px/1 'Saira Condensed', sans-serif; }
.pst-tile small { color: var(--muted); font-size: 13px; }
.pst-short { display: grid; gap: 8px; max-width: 760px; }
.pst-short input[type=text] { padding: 8px 10px; }
.pst-short .pst-row > input { flex: 1 1 200px; }
.pst-short code { overflow-wrap: anywhere; font-size: 14px; padding: 6px 8px; background: var(--panel-3); }
.pst-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 20px; text-align: center; color: var(--muted); }
.pst-empty .ic { width: 36px; height: 36px; opacity: .5; }
@media (max-width: 900px) {
  .posts-dlg { border-radius: 0; border: 0; }
  .pv-side { padding: 10px; }
  .pv-item.active::before { display: none; }
  .pv-head { padding: 12px 14px; }
  .pv-head h3 { font-size: 22px; }
  .posts-dlg .posts-body { padding: 12px; }
  .pst-accs { grid-template-columns: minmax(0, 1fr); }
  .pst-seg button { padding-inline: 6px; }
}

/* Visionneuse des documents FIA (PDF) */
.modal.pdf-dlg { width: min(1000px, calc(100vw - 32px)); height: calc(100vh - 60px); display: flex; flex-direction: column; }
.modal.pdf-dlg:not([open]) { display: none; }
.pdf-dlg .sum-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-dlg iframe { flex: 1; width: 100%; border: 0; background: #525659; border-radius: 0 0 14px 14px; }

/* Ajout des séances à son agenda : abonnement, Google Agenda ou fichier */
.cal-dlg { width: min(460px, calc(100vw - 32px)); }
.cal-opts { display: grid; gap: 8px; padding: 14px; }
.cal-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.cal-opt:hover { border-color: var(--accent); background: var(--panel-2); }
.cal-opt > .ic { flex: none; margin-top: 2px; color: var(--accent); }
.cal-opt span { display: grid; gap: 2px; }
.cal-opt small { color: var(--muted); }

/* Pronostics : groupe en ligne (lien à partager) */
.pd-group .pd-actions { margin-top: 10px; }
.pd-group input { flex: 1 1 220px; min-width: 0; }
.pd-group summary { cursor: pointer; }

/* Overlays de streaming (sources navigateur d'OBS, Streamlabs, Meld Studio : ?overlay=1) : rien
   d'interactif ni de message, seulement le contenu sur fond transparent */
html.overlay :is(.float-bar, .float-resize, .toast) { display: none !important; }
html.overlay.float-mini body.mini-body { padding-bottom: 4px; cursor: default; }
html.overlay .mini-foot, html.overlay #miniMode { display: none !important; }
/* Carte en overlay : fond réglable (transparente par défaut) */
html.float-map.overlay .map-wrap { background: color-mix(in srgb, var(--panel) var(--ov-bg, 0%), transparent) !important; border-radius: 12px; }

/* Overlays d'un seul élément (overlay.html?w=…) : taille de base fixe, mise à l'échelle de la source */
/* padding : pas de place réservée à la barre latérale de l'appli quand la source dépasse 900 px de large */
html.overlay body.ov-body { background: transparent; margin: 0; padding: 0; overflow: hidden; }
.ov { display: inline-block; padding: 6px; }
.ov-banner { width: 800px; }
.ov-banner .flag-banner, .ov-banner .flag-banner:is(.yellow, .green) { border-radius: 10px; font-size: 24px; padding: 0 18px; height: 64px; white-space: nowrap; overflow: hidden; }
.ov-banner .flag-banner .fb-icon { flex: none; }
.ov-banner .flag-banner .fb-sub { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ov-banner .flag-banner.chequered { background: #f2f4f8; color: #0b0c0f; animation: none; }
.ov-banner .flag-banner.chequered .fb-icon { background: repeating-conic-gradient(#0b0c0f 0 25%, #fff 0 50%) 0 0 / 9px 9px; }
.ov-laps { width: 280px; } .ov-countdown { width: 420px; } .ov-podium { width: 440px; } .ov-telemetry { width: 300px; }
.ov-card { background: color-mix(in srgb, var(--panel) var(--ov-bg, 85%), transparent); border-radius: 12px; padding: 12px 16px; color: var(--text); }
.ov-label { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-big { font: 900 44px/1.1 var(--font-mono, var(--font)); font-variant-numeric: tabular-nums; margin: 2px 0; }
.ov-big small { font-size: .55em; color: var(--muted); font-weight: 700; }
.ov-sub { font-size: 14px; font-weight: 600; color: var(--text-2); }
.ov-bar { height: 5px; border-radius: 3px; background: var(--panel-3); margin: 6px 0; overflow: hidden; }
.ov-bar i { display: block; height: 100%; background: var(--red); }
.ov-wait { font-size: 14px; color: var(--muted); }
.ov-pod { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.ov-pod + .ov-pod { border-top: 1px solid var(--line-2, var(--border)); }
.ov-pod > i { width: 5px; align-self: stretch; border-radius: 3px; }
.ov-pos { font-size: 24px; font-weight: 900; min-width: 22px; text-align: center; }
.ov-name { flex: 1; min-width: 0; font-size: 17px; line-height: 1.2; }
.ov-name b { text-transform: uppercase; }
.ov-name small { display: block; font-size: 12px; color: var(--muted); }
.ov-val { font: 700 16px var(--font-mono, var(--font)); font-variant-numeric: tabular-nums; }
.ov-telemetry .dial { max-width: none; }

/* Réglages → Streaming : adresses à copier */
.stream-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 10px 0; }
.stream-row > .row { flex-wrap: nowrap; }
.stream-row input[readonly] { flex: 1; min-width: 0; font: 12px var(--mono, monospace); }
/* Colonnes du classement, calques de la carte : cases rangées en grille */
.stream-row details .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.stream-row details[open] { margin-bottom: 10px; }
.stream-row details .toggle { align-items: flex-start; line-height: 1.3; }
.stream-row details .toggle input { flex: none; margin-top: 1px; }

/* Écran de chargement du démarrage : flou sur toute l'appli tant que l'accueil n'est pas complet */
.boot-cover { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity .35s ease; }
.boot-cover img { width: 72px; height: 72px; border-radius: 16px; }
.boot-cover b { font-size: 18px; margin-top: 6px; }
.boot-cover small { color: var(--muted); font-size: 13px; }
.boot-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: boot-spin .8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-spin { animation-duration: 2.4s; } }
.boot-cover.out { opacity: 0; pointer-events: none; }
html:is(.float-map, .overlay) .boot-cover { display: none; }
.stream-bg { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.stream-bg label { flex: 1; display: flex; align-items: center; gap: 8px; }
.stream-bg input { flex: 1; max-width: 320px; accent-color: var(--accent); }
.stream-bg span { min-width: 64px; color: var(--muted); }