/* ═══════════════════════════════════════════════════════════════════
   pitwall-extra.css — surcouche servie par le Worker (simrace.app).
   Référencée par le pit wall LOCAL (localhost:8080/v3) ET incluse dans le
   snapshot online. Contient UNIQUEMENT les ajouts au CSS v3 d'origine :
     1. le thème clair (variables html[data-theme="light"])
     2. l'onglet actif en LIME (le color:#fff du v3 disparaissait sur clair)
     3. la restructure home2 (bandeau stats pleine largeur + mid|classement)
   Le CSS v3 dark de base reste dans le template C#.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Thème clair (palette light, mappée sur les vars v3) ── */
html[data-theme="light"]{
  --bg:#eef1f6;--sf:#ffffff;--cd:#ffffff;--cd2:#f1f3f8;
  --bd:#dde1ea;--bd2:#c8cdda;
  --tx:#14161d;--tx2:#3f4456;--dm:#586074;
  --gr:#15803d;--rd:#dc2626;--yl:#b45309;--bl:#2563eb;
  --pu:#7c3aed;--cy:#0e7490;--or:#ea580c;--pk:#db2777;
  --gr-bg:rgba(21,128,61,.10);--rd-bg:rgba(220,38,38,.10);
  --yl-bg:rgba(180,83,9,.10);--bl-bg:rgba(37,99,235,.10);
  --pu-bg:rgba(124,58,237,.10);--cy-bg:rgba(14,116,144,.10);
  --glass:rgba(0,0,0,.03);--glass-border:rgba(0,0,0,.08);
}

/* ── 2. Onglet actif en LIME (marque) + lisible sur les 2 thèmes ── */
.tab-btn.active{background:linear-gradient(135deg,rgba(212,255,0,.18),rgba(212,255,0,.05))!important;color:var(--tx)!important;border:1px solid rgba(212,255,0,.45)!important}
html[data-theme="light"] .tab-btn.active{background:rgba(150,180,0,.20)!important;color:#14161d!important;border-color:rgba(140,170,0,.6)!important}

/* ── 2b. Onglets GROSSES FEATURES (VIRAGES / FREINS / BALANCE) = pastille NOIRE + texte LIME sur les
   2 thèmes → ils ressortent comme nos features phares (et restent lisibles partout, fond clair compris). ── */
.tab-btn[data-tab="virages"],.tab-btn[data-tab="brakes"],.tab-btn[data-tab="balance"],.tab-btn[data-tab="briefing"],.tab-btn[data-tab="tyres"],.tab-btn[data-tab="mech"]{
  background:#0c0f15!important;color:#c8ff00!important;border:1px solid rgba(200,255,0,.40)!important;border-radius:20px!important;font-weight:700!important}
.tab-btn[data-tab="virages"]:hover,.tab-btn[data-tab="brakes"]:hover,.tab-btn[data-tab="balance"]:hover,.tab-btn[data-tab="briefing"]:hover,.tab-btn[data-tab="tyres"]:hover,.tab-btn[data-tab="mech"]:hover{
  background:#161b24!important;border-color:rgba(200,255,0,.75)!important}
/* sélectionné = INVERSÉ (pastille lime pleine + texte sombre), identique pour tous les onglets de setup */
.tab-btn[data-tab="virages"].active,.tab-btn[data-tab="brakes"].active,.tab-btn[data-tab="balance"].active,.tab-btn[data-tab="briefing"].active,.tab-btn[data-tab="tyres"].active,.tab-btn[data-tab="mech"].active{
  background:#c8ff00!important;color:#0a0c00!important;border-color:#c8ff00!important;box-shadow:0 0 12px rgba(200,255,0,.35)!important}
/* BALANCE est Pro → pw-tiers le repeint violet (.pw-lock). C'est une grosse feature : on garde la
   pastille noire + lime (le 🔒 reste via .pw-lock::after). Spécificité > .pw-lock sur les 2 thèmes. */
.tab-btn.pw-lock[data-tab="balance"],.tab-btn.pw-lock[data-tab="briefing"],.tab-btn.pw-lock[data-tab="tyres"],.tab-btn.pw-lock[data-tab="mech"]{background:#0c0f15!important;color:#c8ff00!important;border:1px solid rgba(200,255,0,.40)!important;border-radius:20px!important;opacity:1!important}
html[data-theme="light"] .tab-btn.pw-lock[data-tab="balance"],html[data-theme="light"] .tab-btn.pw-lock[data-tab="briefing"],html[data-theme="light"] .tab-btn.pw-lock[data-tab="tyres"],html[data-theme="light"] .tab-btn.pw-lock[data-tab="mech"]{background:#0c0f15!important;color:#c8ff00!important;border-color:rgba(200,255,0,.40)!important;opacity:1!important}
html[data-theme="light"] .logo .ai{color:#6b8e00}
/* titres de page en lime (#c8ff00) → lime foncé lisible sur clair */
html[data-theme="light"] .pw-h-lime{color:#5c7a00!important}
/* carte COG : la voiture avait le filtre invert en dur sans override clair → invisible (blanc/blanc).
   En clair on annule le filtre (lignes sombres visibles). Le dark garde l'invert inline. */
html[data-theme="light"] #cog-car-img,html[data-theme="light"] #cop-car-img{filter:none!important}

/* ── 2c. BALANCE : titres de cartes + nombre de litres en PASTILLE sombre. Lime/couleur sur blanc =
   illisible en thème clair → pastille = lisible sur les 2 thèmes, cohérent avec les badges de poids. ── */
#page-balance .card-title{display:inline-block;background:#161b2e;border:0.5px solid rgba(255,255,255,.08);padding:4px 12px;border-radius:12px;line-height:1.35;margin-bottom:10px}
/* sous-titre (2e partie) du titre : var(--dm) trop foncé sur la pastille sombre -> gris clair lisible + un peu plus gros.
   La pastille .card-title est sombre (#161b2e) dans LES DEUX thèmes (voir 2c), donc une couleur claire fixe convient partout. */
#page-balance .card-title span{color:#cdd3e6!important;font-size:11px!important;font-weight:500!important}
/* textes secondaires de l'onglet BALANCE (légendes, libellés sliders, « comment lire », en-têtes table, deltas) :
   le var(--dm) sombre (#9298b6) était trop foncé/illisible sur fond noir. On RELÈVE --dm pour #page-balance en sombre,
   et on RESTAURE la valeur foncée en thème clair (sinon gris clair illisible sur blanc). */
#page-balance{--dm:#aab2cc}
html[data-theme="light"] #page-balance{--dm:#586074}
#cog-fuel-out{display:inline-block;background:#2b3242;color:#c8ff00!important;padding:1px 9px;border-radius:10px}

/* ── 2d. BALANCE — contraste sur les 2 thèmes (18/06) ──
   (a) BIAIS AV/AR MOYEN : valeur lime (#c8ff00 codé en dur inline) posée dans une cellule CLAIRE
       (.val sur --cd2) → illisible en thème clair. Lime foncé lisible sur clair (le dark garde le lime). */
html[data-theme="light"] #bal-meanlong{color:#5c7a00!important}
/* (b) Les pastilles de titre #page-balance sont SOMBRES (#161b2e) dans LES 2 thèmes (voir 2c). En clair,
   les accents (var(--bl), var(--dm), var(--or)…) basculent en foncé → texte foncé sur pastille sombre =
   illisible (« couleurs sombres sur le noir »). On REMET sur la pastille les valeurs CLAIRES (= celles du
   thème sombre) : var(--…) y résout alors en couleur claire lisible, sans !important ni écrasement de propriété. */
html[data-theme="light"] #page-balance .card-title{
  --dm:#aab2cc;--bl:#60a5fa;--or:#fb923c;--gr:#34d399;--yl:#fbbf24;--pu:#a78bfa;--cy:#22d3ee;--rd:#f87171;
}

/* ── 3. (obsolète — retiré le 16/06) L'ancienne restructure « .home2 » (display:contents +
   grid-template-areas stats/mid/stand) ciblait un conteneur .home2 qui N'EXISTE PLUS : le layout
   LIVE est désormais géré par « .live-grid » dans le template C# (/v3) — classement plein-hauteur
   à droite, stats + progression + jauges empilées à gauche. Le « .home2-main{display:contents} »
   résiduel DISSOLVAIT home2-main dans .live-grid → ses enfants (stats/mid) atterrissaient comme
   items de grille sur des grid-area inexistantes → cartes éparpillées + grosses zones vides.
   Ne PAS réintroduire de règle .home2-main display:contents. ── */

/* ── 4. Classement plein-hauteur (desktop) : .live-grid n'avait que des lignes implicites, donc le
   « grid-row:1/-1 » du classement ne s'étirait que sur la 1re ligne. 2 lignes explicites règlent ça
   (le classement couvre toute la colonne droite, à côté des stats ET des jauges). Scopé desktop :
   sous 1181px le layout passe en 1 colonne empilée. ── */
@media(min-width:1181px){.live-grid{grid-template-rows:auto auto!important}}

/* ═══ STINT + BRIEFING : lisibilité (police trop petite + gris trop foncé) — 16/06 ═══
   Même principe que BALANCE : (1) on relève le --dm sombre (#9298b6, illisible) et on le
   restaure en thème clair ; (2) on remonte les tailles de police codées EN DUR dans le JS
   (inline 10 / 10.5 / 11.5 / 17px) via sélecteurs d'attribut + !important (battent l'inline).
   CSS chargé du CDN → corrige le pit wall LOCAL (/v3) ET online, sans recompiler. */
#page-stint,#page-briefing{--dm:#aab2cc}
html[data-theme="light"] #page-stint,html[data-theme="light"] #page-briefing{--dm:#586074}

/* STINT — problèmes récurrents (titre 11.5 / badge + solution 10.5) + valeurs métriques (17) */
#page-stint [style*="font-size:11.5px"]{font-size:14px!important}
#page-stint [style*="font-size:10.5px"]{font-size:13px!important}
#page-stint [style*="font-size:17px"]{font-size:22px!important}

/* BRIEFING — corps des cartes ingénieurs (bullets 11.5 / rôle 10) ; la valeur reco en var(--dm)
   est déjà relevée par la règle --dm ci-dessus. Scopé à tout #page-briefing (pas que #brf-engineers). */
#page-briefing [style*="font-size:11.5px"]{font-size:13px!important}
#page-briefing [style*="font-size:10px"]{font-size:12px!important}

/* ═══ 5. CARTES CONTRASTÉES PARTOUT (17/06) ═══
   La lisibilité du SETUP vient des cellules de valeur posées dans un sous-panneau --cd2 (comme .tyre-card /
   les cartes par roue). On élève TOUTES les cellules .val en sous-panneau → look contrasté homogène sur
   tous les onglets, sans recompiler (CSS servi du CDN → pit wall LOCAL /v3 ET online).
   Exception : les tuiles déjà cartées « card val » gardent le fond carte --cd (pas de double-imbrication). */
.val{background:var(--cd2);border:1px solid var(--bd);border-radius:var(--radius-sm);padding:10px 9px}
.card.val{background:var(--cd);border:1px solid var(--glass-border);padding:16px}
/* un poil plus d'air entre les cellules élevées (les grilles g3/g4 étaient à gap:6px) */
.grid.g3,.grid.g4{gap:9px}

/* ═══ 6. ONGLET BRAKES — jauge fenêtre thermique (18/06) ═══
   Jauge horizontale froid→fenêtre→fading + bande cible + aiguille. Servie du CDN (local /v3 + online). */
.bw-track{position:relative;height:22px;border-radius:6px;overflow:hidden;margin-top:2px;
  background:linear-gradient(90deg,#2563eb 0%,#38bdf8 26%,#22c55e 44%,#22c55e 74%,#f59e0b 86%,#ef4444 100%)}
.bw-win{position:absolute;top:0;bottom:0;border-left:2px dashed rgba(255,255,255,.9);border-right:2px dashed rgba(255,255,255,.9);background:rgba(255,255,255,.12)}
.bw-needle{position:absolute;top:-3px;bottom:-3px;width:3px;background:#fff;box-shadow:0 0 6px 1px rgba(0,0,0,.6)}
.bw-needle:after{content:"";position:absolute;left:50%;top:-5px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(0,0,0,.5)}
.bw-scale{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dm);margin-top:4px;letter-spacing:.3px}
/* thème clair : aiguille/bornes lisibles sur la jauge claire */
html[data-theme="light"] .bw-needle{background:#14161d;box-shadow:0 0 5px 1px rgba(255,255,255,.7)}
html[data-theme="light"] .bw-needle:after{background:#14161d;box-shadow:0 0 5px 1px rgba(255,255,255,.7)}
html[data-theme="light"] .bw-win{border-color:rgba(20,22,29,.85);background:rgba(20,22,29,.08)}

/* ═══ 7. Thème GRIS (anthracite « Audi », cohérent avec la home) — 20/06 ═══
   3e thème du pit wall, mappé sur les variables v3. Châssis anthracite, texte quasi blanc,
   accents (couleurs de données) conservés vifs du thème sombre → ils ressortent sur le gris.
   Le lime des features reste lisible (fond anthracite, pas blanc). */
html[data-theme="grey"]{
  --bg:#2e3034;--sf:#3a3d42;--cd:#393c41;--cd2:#323539;
  --bd:#4a4e55;--bd2:#6b707a;
  --tx:#eef0f2;--tx2:#c0c4cc;--dm:#8b9098;
  --glass:rgba(255,255,255,.04);--glass-border:rgba(255,255,255,.09);
}

/* ═══ 8. Sélecteur de thème 3 états (☽ sombre · ☼ clair · ◑ gris) — injecté par theme.js
   dans le header du pit wall, à gauche du picker livery. Même style que la home (.themeseg). ═══ */
.themeseg{display:inline-flex;align-items:center;background:var(--cd2);border:1px solid var(--bd);border-radius:8px;padding:2px;gap:2px}
.themeseg .tsg{background:transparent;border:none;color:var(--dm);cursor:pointer;font-size:14px;line-height:1;padding:5px 9px;border-radius:6px;transition:.12s;font-family:inherit}
.themeseg .tsg:hover{color:var(--tx)}
.themeseg .tsg[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}