/* ==========================================================================================
   FLASH SCOUT — APPARENCE « PLANCHE » (v2), D'APRÈS LA MAQUETTE FOURNIE
   ------------------------------------------------------------------------------------------
   Cette feuille NE REMPLACE RIEN. Tout y est enfermé sous `body[data-ui="v2"]` : tant que
   l'attribut n'est pas posé, pas une règle ne s'applique et l'apparence d'origine est
   strictement intacte. Le choix se fait dans Réglages → Général, et se retient par appareil.
   Elle est chargée APRÈS styles.css : à spécificité égale, c'est elle qui l'emporte.

   Ce que dit la maquette, et qu'on reprend tel quel :
   · fond #EEF1F7, surfaces blanches, encre #232A38 — une seule famille de gris bleutés ;
   · accent #3A63B8 (bleu sourd) au lieu du bleu vif, rouge #C0453F « en direct », vert #3F8F6A ;
   · RAYONS CONCENTRIQUES : r(intérieur) = r(extérieur) − rembourrage. Une carte à 20 px dont
     le rembourrage vaut 6 px contient des lignes à 14 px. D'où l'échelle 20 / 14 / 10 / 6 ;
   · deux polices : Instrument Sans pour le texte, IBM Plex Mono pour TOUS les chiffres, en
     chasse tabulaire pour que les colonnes s'alignent au pixel ;
   · plus d'ombres portées ni de flou : la séparation se fait au trait (#E3E8F1).
   ========================================================================================== */

/* Les polices se chargent en `swap` et retombent sur la police système si le réseau manque —
   l'application reste lisible hors ligne, elle perd seulement son dessin de caractère. */
/* ---------- Polices, servies par le site lui-même ----------
   Elles étaient importées de fonts.googleapis.com. Trois raisons de les héberger ici :

   1. ÇA NE MARCHAIT PAS. La Content-Security-Policy du site publié dit `style-src 'self'`
      et `font-src 'self'` : la feuille de Google était BLOQUÉE et les polices ne se
      chargeaient jamais en production — la planche s'affichait dans la police du système.
      Le serveur de développement n'envoyant pas de CSP, rien ne le laissait voir en local.
   2. HORS LIGNE. L'application doit fonctionner au bord d'un terrain sans réseau. Une police
      distante n'y serait jamais arrivée ; celle-ci est mise en cache comme le reste.
   3. VIE PRIVÉE. Plus aucune adresse IP de visiteur n'est transmise à un tiers.

   Instrument Sans et IBM Plex Mono sont sous licence SIL Open Font 1.1 (cf.
   assets/fonts/LICENCE.txt) : la redistribution est expressément permise.
   Sous-ensembles latin et latin étendu seulement — le site est en français, anglais et
   espagnol ; le cyrillique et le vietnamien étaient du poids mort. */
/* IBM Plex Mono 400 — latin-ext */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 — latin */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 — latin-ext */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 — latin */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 600 — latin-ext */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:600;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 600 — latin */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:600;
  font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans 400 700 — latin-ext */
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/instrument-sans-400-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans 400 700 — latin */
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/instrument-sans-400-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body[data-ui="v2"],
body[data-ui="v2"][data-theme="light"]{
  --bg:#eef1f7; --bg2:#e7ebf2; --panel:#ffffff; --panel2:#f6f8fc;
  --line:#e3e8f1; --line2:#dbe2ee;
  --txt:#232a38; --dim:#5b6579; --faint:#8b94a6;
  /* PAS d'accent codé ici : `applyChrome` pose la couleur choisie dans les Réglages en style
     inline sur <html>, et une déclaration portée par <body> l'emporterait sur cette valeur
     héritée — le sélecteur de couleur devenait inopérant dès qu'on passait sur cette
     apparence. Le bleu de la planche est proposé comme un choix de plus (« Planche »),
     pas imposé. */
  /* Ni `--fld` ni `--orange` ici, pour la même raison que l'accent : `applyChrome` les aligne
     tous sur la couleur choisie (un seul accent, quel que soit le mode) et une déclaration
     portée par <body> l'emporterait sur cette valeur héritée de <html>. */
  --green:#3f8f6a; --red:#c0453f;
  --pinEven:#f6f8fc; --pinHover:#eef3fb; --rowEven:transparent; --rowHover:#f6f8fc;
  --topbar:rgba(238,241,247,.86); --btnHover:#eef3fb; --glow:#e4ebf8;
  /* Rayons concentriques de la maquette. */
  --r:14px; --r-lg:20px; --r-md:14px; --r-sm:10px; --r-xs:6px; --r-pill:10px;
  /* Le « verre » disparaît : surfaces pleines, séparation au trait. */
  --glass:#ffffff; --glass2:#ffffff;
  --glass-brd:#e3e8f1; --glass-brd2:#dbe2ee; --hi:transparent;
  --shadow:none; --shadow-sm:none; --blur:none;
  --v2-soft:#eef3fb; --v2-softbrd:#d9e3f6;
}

/* Variante sombre : la même charte, retournée. La maquette est claire ; on ne prive pas pour
   autant du thème sombre ceux qui l'ont choisi. */
body[data-ui="v2"][data-theme="dark"]{
  --bg:#12161f; --bg2:#161b26; --panel:#1a2030; --panel2:#151a26;
  --line:#252d3e; --line2:#2f394d;
  --txt:#eef1f7; --dim:#a3adc0; --faint:#767f92;
  --pinEven:#151a26; --pinHover:#1e2637; --rowHover:#1e2637;
  --topbar:rgba(18,22,31,.86); --btnHover:#242c3d;
  --glass:#1a2030; --glass2:#1a2030; --glass-brd:#252d3e; --glass-brd2:#2f394d;
  --v2-soft:#1c2740; --v2-softbrd:#2b3a5c;
}

/* ---------- Typographie ---------- */
body[data-ui="v2"]{
  font-family:'Instrument Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Le fond de la maquette est PLAT : les halos radiaux de l'apparence d'origine sont retirés. */
  background:var(--bg);
}
body[data-ui="v2"] .page-title,
body[data-ui="v2"] .hero .name,
body[data-ui="v2"] .td-name,
body[data-ui="v2"] .sec .t{letter-spacing:-.025em;font-weight:700;}

/* TOUS les chiffres en mono tabulaire — c'est ce qui aligne les colonnes au pixel. */
body[data-ui="v2"] .num,body[data-ui="v2"] .tabnum,
body[data-ui="v2"] .st-stats .v,body[data-ui="v2"] .st-rank,
body[data-ui="v2"] table td,body[data-ui="v2"] table th,
body[data-ui="v2"] .sb-sc,body[data-ui="v2"] .bk-sc,
body[data-ui="v2"] .ms-v,body[data-ui="v2"] .pf-num,
body[data-ui="v2"] .car-tab td,body[data-ui="v2"] .car-tab th{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
}
/* Micro-étiquettes : mono, majuscules, interlettrage ouvert. */
body[data-ui="v2"] .st-headrow .st-rank,
body[data-ui="v2"] .st-headrow .st-hlbl,
body[data-ui="v2"] .st-headrow .st-hpct,
body[data-ui="v2"] .st-stats.head div,
body[data-ui="v2"] .nx-lab,body[data-ui="v2"] .bk-lbl,
body[data-ui="v2"] thead th{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-weight:500; letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- Surfaces : trait plutôt qu'ombre ---------- */
body[data-ui="v2"] .card,
body[data-ui="v2"] .hero,
body[data-ui="v2"] .bk-match,
body[data-ui="v2"] .ts-row,
body[data-ui="v2"] .th-next{
  background:var(--panel); border:1px solid var(--line);
  box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Le classement devient UNE carte dont les lignes sont des cellules : la carte porte un
   rembourrage de 6 px, les lignes un rayon de 14 — la règle concentrique de la maquette. */
body[data-ui="v2"] .card.standings{padding:6px;border-radius:var(--r-lg);}
body[data-ui="v2"] .st-row{border-bottom:none;border-radius:var(--r-md);}
body[data-ui="v2"] .st-row:nth-child(odd){background:var(--panel2);}
body[data-ui="v2"] .st-row.mine{
  background:var(--v2-soft); box-shadow:inset 0 0 0 1px var(--v2-softbrd);
}
body[data-ui="v2"] .st-headrow{border-bottom:none;}
body[data-ui="v2"] .st-row.podium .st-rank,
body[data-ui="v2"] .st-rank{color:var(--accent);}

/* ---------- Boutons, onglets, capsules : rayons courts, pas de capsule ---------- */
body[data-ui="v2"] .btn,
body[data-ui="v2"] .nav a,
body[data-ui="v2"] .badge,
body[data-ui="v2"] .sel,
body[data-ui="v2"] .compsel{border-radius:var(--r-sm) !important;}

/* ---------- Tri d'une colonne de statistiques ----------
   Appuyer sur l'en-tête d'une stat la déplace à droite et la classait sur une pastille
   colorée en dégradé rouge → vert. Ce dégradé vient de l'apparence d'origine ; sur la
   planche, où rien d'autre n'est peint, il ressort comme un corps étranger. Le classement
   se lit déjà dans l'ORDRE des lignes : la couleur ne disait rien de plus.
   Le chiffre reste, en mono comme tous les chiffres de cette apparence. */
body[data-ui="v2"] td.keyc .pill{
  background:transparent !important; color:var(--txt);
  min-width:0; padding:0; border-radius:0;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1rem;
  font-variant-numeric:tabular-nums;
}
/* La colonne triée se signale par l'encre et la flèche, pas par la couleur d'accent. */
body[data-ui="v2"] thead th.sorted,
body[data-ui="v2"] th.keyc.sorted{color:var(--txt);}

/* Sous-menus (Play-offs/Stats/Leaders, Batting/Pitching/Fielding, bascules) : la boîte et
   les capsules qu'elle contient partageaient le MÊME rayon. Deux arcs de même rayon ne sont
   pas concentriques : l'angle du bouton « déborde » de celui de la case, ce qui se voit sur
   l'onglet actif. Le rayon intérieur vaut donc celui de la boîte moins son rembourrage. */
/* Le `!important` répond à celui du bloc « capsules » de styles.css, qui arrondit
   indistinctement la boîte ET ses boutons au même rayon. */
body[data-ui="v2"] .champtabs{border-radius:var(--r-md) !important;padding:4px;}
body[data-ui="v2"] .champtabs button{border-radius:calc(var(--r-md) - 4px) !important;}
body[data-ui="v2"] .seg button{border-radius:calc(var(--r-md) - 3px) !important;}
body[data-ui="v2"] .toggle{border-radius:var(--r-md) !important;padding:4px;}
body[data-ui="v2"] .toggle button{border-radius:calc(var(--r-md) - 4px) !important;}
body[data-ui="v2"] .scope-seg{border-radius:var(--r-sm) !important;padding:2px;}
body[data-ui="v2"] .scope-seg button{border-radius:calc(var(--r-sm) - 2px) !important;}
body[data-ui="v2"] .btn{box-shadow:none;border:1px solid var(--line);background:var(--panel);}
body[data-ui="v2"] .btn.primary{background:var(--accent);border-color:transparent;color:#fff;}
body[data-ui="v2"] .btn:hover{background:var(--btnHover);}
/* Onglet actif : encre pleine, comme la maquette (et non un aplat d'accent). */
body[data-ui="v2"] .champtabs button.on{background:var(--txt);color:var(--bg);box-shadow:none;}
body[data-ui="v2"] .nav a.on{background:var(--txt);color:var(--bg);}
body[data-ui="v2"] .seg{background:var(--bg2);border:none;padding:3px;border-radius:var(--r-md) !important;}
body[data-ui="v2"] .seg button.on{background:var(--panel);color:var(--txt);box-shadow:0 1px 2px rgba(35,42,56,.06);}
body[data-ui="v2"] .toggle{background:var(--bg2);border:none;}
body[data-ui="v2"] .toggle button.on{box-shadow:none;}

/* ---------- Barre d'onglets ---------- */
body[data-ui="v2"] .tabbar{
  background:var(--topbar); border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
body[data-ui="v2"] .tabbar a{border-radius:var(--r-md);font-family:'Instrument Sans',sans-serif;font-weight:500;}
body[data-ui="v2"] .tabbar a.on{background:var(--panel);color:var(--txt);font-weight:600;}

/* ---------- Bandeau, pied de page ---------- */
body[data-ui="v2"] .site-banner{background:var(--txt);color:var(--bg);}
body[data-ui="v2"] .topbar{background:var(--topbar);border-bottom:1px solid var(--line);}
body[data-ui="v2"] .foot{color:var(--faint);}

/* ==========================================================================================
   TABLEAU D'AFFICHAGE — la carte sombre de la planche (option 1b)
   La maquette pose le score sur un bloc encre : deux lignes d'équipe empilées à gauche (nom à
   gauche, score en mono à droite), un filet vertical, puis la manche à droite. L'équipe qui
   n'est pas au bâton est ATTÉNUÉE — l'état se lit à l'opacité, sans étiquette en plus.
   Le balisage n'est pas touché : `.sb-main` est déjà une grille à trois colonnes, on la
   replie en deux colonnes sur deux rangées.
   Réserve : la planche fait saigner ce bloc jusqu'aux bords de l'écran, sous une barre de
   titre qui remplace le bouton retour et les onglets. Cela demande de revoir le balisage de
   l'écran de match ; ici le bloc reste une carte.
   ========================================================================================== */
body[data-ui="v2"] #sbCard{
  background:#232a38; border-color:#232a38; color:#fff;
  border-radius:var(--r-lg); padding:14px 16px;
}
/* Le bandeau PLEIN ÉCRAN (celui qu'on projette pendant le match) portait encore la carte
   claire d'origine : sur ordinateur, le scoring passait du bloc encre au blanc d'avant dès
   qu'on agrandissait. Il prend la même encre — son rembourrage, lui, reste le sien. */
body[data-ui="v2"] .fs-scorecard{background:#232a38; border-color:#232a38; color:#fff;
  border-radius:var(--r-lg);}
body[data-ui="v2"] .fs-wrap{background:var(--bg);}
/* L'EMPILEMENT est réservé aux écrans étroits. La planche le dessine pour un téléphone de
   402 px ; appliqué à une carte de 1 160 px, il laisse un vide béant entre les équipes (à
   gauche) et la manche (à droite). Au-delà, on garde les trois colonnes d'origine, qui
   occupent la largeur — seule la couleur encre reste commune aux deux formats. */
/* Le panneau clair INTÉRIEUR de la carte n'a plus lieu d'être : la carte est le fond. Il
   restait posé au-dessus de 820 px — noms gris sur gris clair, score presque invisible : le
   scoring sur ordinateur en était illisible. Ces trois lignes valent donc à toute largeur. */
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-main{background:none; border:none; padding:0;}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-team{background:none;}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-city{color:rgba(255,255,255,.45);}
@media (min-width:821px){
  body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-mid{gap:14px;}
}
/* L'empilement ne vaut que pour la carte de la page : le bandeau plein écran est fait
   pour occuper toute la largeur d'un écran projeté, il garde ses trois colonnes. */
@media (max-width:820px){
  body[data-ui="v2"] #sbCard .sb-main{
    display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
    gap:5px 14px; align-items:center;
  }
  /* Les deux équipes s'empilent dans la première colonne, la zone centrale passe à droite
     et couvre les deux rangées. */
  body[data-ui="v2"] #sbCard .sb-team:first-child{grid-area:1 / 1 / 2 / 2;}
  body[data-ui="v2"] #sbCard .sb-team:last-child{grid-area:2 / 1 / 3 / 2;}
  body[data-ui="v2"] #sbCard .sb-mid{
    grid-area:1 / 2 / 3 / 3;
    border-left:1px solid rgba(255,255,255,.14); padding-left:14px;
  }
  body[data-ui="v2"] #sbCard .sb-team{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    text-align:left; padding:2px 0; border-radius:0; background:none;
  }
  body[data-ui="v2"] #sbCard .sb-city{display:none;}   /* une seule ligne par équipe */
}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-tn{flex:1 1 auto; min-width:0;}
/* Le DESSIN du nom (graisse, couleur, coupe) est commun aux deux bandeaux ; sa TAILLE ne
   l'est pas : le plein écran est projeté, il garde la sienne, bien plus grande. */
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-nick{
  font-family:'Instrument Sans',sans-serif; font-weight:600; line-height:1.2; letter-spacing:-.01em;
  color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 15 px sur téléphone, comme la planche ; sur grand écran le nom reprend l'échelle du
   tableau d'affichage, comme le score juste en dessous. */
body[data-ui="v2"] #sbCard .sb-nick{font-size:clamp(15px,1.7vw,26px);}
/* 22 px est la taille de la planche, dessinée pour un téléphone : sur le tableau large d'un
   iPad ou d'un Mac, le score doit reprendre son échelle de tableau d'affichage. */
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-sc{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.62); flex:0 0 auto;
}
body[data-ui="v2"] #sbCard .sb-sc{font-size:clamp(22px,4.4vw,52px);}
@media (max-width:820px){
  body[data-ui="v2"] #sbCard .sb-sc{font-size:22px;}
}
/* L'équipe AU BÂTON passe en blanc plein : c'est là tout le marquage d'état. */
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-team:has(.sb-atbat:not(.ghost)) .sb-nick,
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-team:has(.sb-atbat:not(.ghost)) .sb-sc{color:#fff;}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-team.lead .sb-sc{color:#fff;}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-atbat{display:none;}

/* Manche et compteurs, en mono clair sur l'encre. */
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-chip{
  background:none; border:none; box-shadow:none; min-width:0; padding:0; text-align:center;
}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-chip .k{
  font:500 9.5px 'IBM Plex Mono',monospace; letter-spacing:.06em;
  color:rgba(255,255,255,.5); text-transform:uppercase;
}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-chip .v{font:600 15px 'IBM Plex Mono',monospace; color:#fff;}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-counters .k{color:rgba(255,255,255,.5);}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-counters .dot{border-color:rgba(255,255,255,.3);}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-counters .dot.on{background:#fff;border-color:#fff;}
/* Losange des coureurs : base occupée en accent, comme la planche. */
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-runners .base{background:rgba(255,255,255,.14);border-color:transparent;}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-runners .base.on{background:var(--accentA);border-color:transparent;}
/* Commandes du bandeau : lisibles sur fond sombre. */
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-bar{border-top:1px solid rgba(255,255,255,.12);margin-top:12px;padding-top:12px;}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .iconb{
  background:rgba(255,255,255,.12); border-color:transparent; color:#fff; border-radius:var(--r-sm);
}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .iconb:hover{background:rgba(255,255,255,.2);}
body[data-ui="v2"] :is(#sbCard,.fs-scorecard) .sb-final{color:#fff;}

/* ==========================================================================================
   HAUT DE PAGE — le grand titre revient (option 1a)
   L'apparence d'origine masque le titre sur téléphone parce qu'il répétait l'onglet actif de
   la navigation du haut. Cette navigation est descendue en bas : le titre ne répète plus rien,
   et la planche le pose justement en tête, gros et serré. On le rétablit — mais seulement ici,
   l'apparence classique garde sa règle.
   ========================================================================================== */
@media (max-width:560px){
  body[data-ui="v2"] .page-head{flex-wrap:wrap;}
  body[data-ui="v2"] .page-head .page-title{
    display:block; flex:1 1 100%;
    font:700 27px/1.1 'Instrument Sans',sans-serif; letter-spacing:-.025em;
    margin-bottom:2px;
  }
  /* Les deux menus partagent la rangée sous le titre. Base à ZÉRO pour la compétition — le
     millésime restant incompressible, elle prend simplement tout ce qui reste. Avec une base
     `auto` elle réclamait sa largeur de contenu (300 px) et repoussait l'année à la ligne. */
  body[data-ui="v2"] .page-head .compsel{flex:1 1 0;min-width:0;}
  body[data-ui="v2"] .page-head select.seasonsel{flex:0 0 auto;}
}
/* Les menus suivent la charte : surface blanche, trait fin, rayon court. */
body[data-ui="v2"] .sel,
body[data-ui="v2"] .page-head .compsel{
  background-color:var(--panel); background-image:none; border:1px solid var(--line);
  box-shadow:none; font-weight:600;
}
body[data-ui="v2"] .page-head .compsel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b94a6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}

/* ==========================================================================================
   COMPOSANTS COMMUNS — badges, résultats, cartes de match
   La planche n'emploie qu'un seul objet secondaire : une petite pastille en mono, fond gris
   clair, rayon court. Les états y sont teintés (vert pour un bon chiffre, rouge pour une
   alerte) mais jamais en dégradé ni en ombre portée.
   ========================================================================================== */
body[data-ui="v2"] .badge{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.72rem;
  letter-spacing:.02em; padding:5px 9px; border-radius:var(--r-xs);
  background:var(--panel2); color:var(--dim); border:1px solid var(--line);
  box-shadow:none; text-transform:none;
}
/* Le bilan (victoires-défaites) reste le seul badge coloré : c'est un résultat, pas un libellé. */
body[data-ui="v2"] .badge.rec{
  background:#e7f4ee; color:#3f8f6a; border-color:transparent;
  background-image:none; box-shadow:none; font-weight:600;
}
body[data-ui="v2"][data-theme="dark"] .badge.rec{background:#16301f;color:#5cb98a;}

/* Résultats : le score en mono tabulaire, le vainqueur à l'encre pleine et le perdant atténué
   — même principe que le tableau d'affichage, l'état se lit au contraste. */
body[data-ui="v2"] .res-score b{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:1.05rem; color:var(--faint);
}
body[data-ui="v2"] .res-score b.w{font-weight:600; color:var(--txt);}

/* Carte du prochain match : la planche la pose à l'encre pleine, avec sa micro-étiquette en
   mono clair — c'est le seul bloc sombre d'un écran par ailleurs entièrement clair, ce qui
   suffit à le désigner comme l'échéance à retenir. */
/* SEULE la première échéance passe à l'encre : la planche distingue « le prochain match » du
   reste du calendrier. Toutes les convocations partagent la classe `.th-next`, les encrer
   toutes donnait une colonne de blocs sombres — lourde, et sans plus rien désigner. */
body[data-ui="v2"] #tdBody .th-next:first-of-type,
body[data-ui="v2"] .th-next.nx-first{
  background:var(--txt); border-color:var(--txt); color:var(--bg);
}
body[data-ui="v2"] .th-next .nx-lab{color:rgba(255,255,255,.5);}
/* Sur l'encre, les puces d'état reprennent le fond translucide : un aplat pastel prévu pour
   du blanc y devient illisible. Les couleurs d'état restent portées par le TEXTE. */
body[data-ui="v2"] #tdBody .th-next:first-of-type .td-pill{
  background:rgba(255,255,255,.12); border-color:transparent;
}
/* La puce NEUTRE (« sans réponse ») n'a pas de couleur d'état à porter : elle héritait donc
   d'un gris prévu pour un fond clair, illisible sur l'encre. */
body[data-ui="v2"] #tdBody .th-next:first-of-type .td-pill:not(.yes):not(.no):not(.maybe){
  color:rgba(255,255,255,.78);
}
body[data-ui="v2"] #tdBody .th-next:first-of-type .badge{
  background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); border-color:transparent;
}
body[data-ui="v2"] #tdBody .th-next:first-of-type .th-next-meta{color:rgba(255,255,255,.6);}
body[data-ui="v2"][data-theme="dark"] #tdBody .th-next:first-of-type{
  background:var(--panel2);border-color:var(--line);color:var(--txt);
}

/* Bandeau de profil (fiche joueur) : les valeurs en mono, les intitulés en micro-étiquette. */
body[data-ui="v2"] .prof-bar{background:var(--panel);border-color:var(--line);border-radius:var(--r-lg);}
body[data-ui="v2"] .pf-num{font-family:'IBM Plex Mono',monospace;font-weight:600;}
body[data-ui="v2"] .pf-i b{font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.06em;}

/* Tableau des play-offs : mêmes surfaces plates que le reste. */
body[data-ui="v2"] .bk-champ{border-color:var(--line);}
body[data-ui="v2"] .bk-team.won .bk-nm{font-weight:600;}
body[data-ui="v2"] .bk-fmt{
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  background:var(--panel2);color:var(--dim);border:1px solid var(--line);
  padding:2px 7px;border-radius:var(--r-xs);
}

/* ==========================================================================================
   SAISIE DU MATCH — les boutons d'action (option 1b)
   La planche hiérarchise par la SURFACE, pas par la couleur : « Strike » est un pavé encre,
   « Balle » un pavé clair, et les actions secondaires (faute, en jeu, retrait) une rangée de
   pastilles blanches cerclées d'un trait. Aucune teinte vive : sur un terrain en plein soleil,
   c'est le contraste qui se lit, pas la nuance.
   Le clavier de saisie garde EXACTEMENT ses boutons et ses libellés — seule leur apparence
   change, et seulement sous cette apparence.
   ========================================================================================== */
body[data-ui="v2"] #actions .obtn{
  border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel2);
  font-family:'Instrument Sans',sans-serif; font-weight:600;
}
body[data-ui="v2"] #actions .obtn .ob-s{font-family:'Instrument Sans',sans-serif;font-weight:600;}
/* La légende sous le sigle (« Single », « Walk »…) en micro-étiquette mono. */
body[data-ui="v2"] #actions .obtn .ob-l{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.62rem;
  letter-spacing:.04em; color:var(--faint); text-transform:uppercase;
}
body[data-ui="v2"] #actions .obtn:hover{background:var(--btnHover);}
/* Le STRIKE est le geste le plus fréquent et le plus décisif du compte : c'est lui qui prend
   l'encre pleine, comme dans la planche. Les autres restent clairs. */
body[data-ui="v2"] #actions .obtn[data-pitch="strike"]{
  background:var(--txt); border-color:var(--txt); color:var(--bg);
}
body[data-ui="v2"][data-theme="dark"] #actions .obtn[data-pitch="strike"]{color:var(--bg2);}

/* Intitulés de GROUPE (Count, On base, Outs…) en micro-étiquette.
   `.act-title` en est exclu : ce n'est pas une étiquette mais le NOM DU FRAPPEUR en cours,
   qui doit rester la ligne la plus lisible de la carte. La planche le pose d'ailleurs en gros
   et en gras (« L. Moreau », 19 px). */
body[data-ui="v2"] .agl{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.6rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
}
body[data-ui="v2"] .agl b{font-weight:600;color:var(--txt);}
body[data-ui="v2"] .act-title{
  font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:1.15rem;
  letter-spacing:-.02em;
}

/* ---------- Cartes frappeur / lanceur ---------- */
/* Le liseré de 2 px disparaît : la planche sépare au trait fin, comme partout ailleurs. */
body[data-ui="v2"] .statcard{border:1px solid var(--line);}
body[data-ui="v2"] .ms-tile{
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-sm);
  align-items:flex-start; padding:8px 9px; gap:2px;
}
body[data-ui="v2"] .ms-k{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.6rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--faint); text-align:left;
}
body[data-ui="v2"] .ms-v{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1rem;}
/* Bascule MATCH / SAISON : mêmes règles que les autres segments. */
body[data-ui="v2"] .scope-seg{background:var(--bg2);border:none;border-radius:var(--r-sm);}
body[data-ui="v2"] .scope-seg button{
  font-family:'IBM Plex Mono',monospace; font-weight:500; letter-spacing:.04em;
  border-radius:var(--r-xs);
}
body[data-ui="v2"] .scope-seg button.on{background:var(--panel);color:var(--txt);box-shadow:none;}

/* ==========================================================================================
   ÉCRAN DE MATCH — la bande sombre pleine largeur (option 1b)
   La planche pose le contexte du match sur un bloc encre qui touche les deux bords de l'écran
   et ne s'arrondit qu'en bas. Deux éléments composent cette bande : `.m-head` (retour,
   adversaire, onglets) et le tableau d'affichage qui la prolonge. Ils sont voisins dans le
   document — `.m-head` puis le premier enfant de `#body` — donc il suffit de leur retirer
   l'arrondi qui les sépare pour qu'ils se lisent comme un seul bloc.
   Les marges négatives reprennent EXACTEMENT le rembourrage de `#app` (`clamp(16px,3vw,26px)`)
   plutôt qu'une valeur recopiée : la bande reste au bord quelle que soit la largeur.
   ========================================================================================== */
@media (max-width:560px){
  body[data-ui="v2"] .m-head{
    display:block;
    background:#232a38; color:#fff;
    margin:calc(-1 * clamp(16px,3vw,26px)) calc(-1 * clamp(16px,3vw,26px)) 0;
    padding:12px clamp(16px,3vw,26px) 10px;
  }
  /* Retour : discret sur l'encre, il n'a pas à peser autant qu'un bouton d'action. */
  body[data-ui="v2"] .m-head #toList{
    background:transparent; border:none; color:rgba(255,255,255,.62);
    padding:0; min-height:32px; min-width:0; margin-bottom:6px !important;
    font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.68rem; letter-spacing:.06em;
    text-transform:uppercase;
  }
  /* L'en-tête d'adversaire perd sa carte : sur l'encre, le trait et le fond n'ont plus lieu d'être. */
  body[data-ui="v2"] .m-head .hero{
    background:none; border:none; box-shadow:none; padding:0; border-radius:0;
  }
  body[data-ui="v2"] .m-head .hero .hlab{
    font-family:'IBM Plex Mono',monospace; letter-spacing:.06em; color:rgba(255,255,255,.5);
  }
  body[data-ui="v2"] .m-head .hero .name{color:#fff;}
  body[data-ui="v2"] .m-head .badge{
    background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); border-color:transparent;
  }
  /* Onglets : capsule translucide sur l'encre, actif en blanc plein. */
  body[data-ui="v2"] .m-head #tabs{
    background:rgba(255,255,255,.1); border:none; margin:10px 0 0 !important;
  }
  body[data-ui="v2"] .m-head #tabs button{color:rgba(255,255,255,.62);}
  body[data-ui="v2"] .m-head #tabs button.on{background:#fff;color:#232a38;box-shadow:none;}

  /* Le tableau d'affichage PROLONGE la bande : même encre, bords rejoints, arrondi en bas seul. */
  body[data-ui="v2"] #body > #sbCard{
    margin:0 calc(-1 * clamp(16px,3vw,26px));
    padding-left:clamp(16px,3vw,26px); padding-right:clamp(16px,3vw,26px);
    border-radius:0 0 24px 24px; border:none;
  }
  /* La grille de `#body` sépare ses enfants de 14 px : on annule cet écart au-dessus du
     tableau d'affichage, qui doit toucher la bande. */
  body[data-ui="v2"] #body{padding-top:0;}
  body[data-ui="v2"] #body > #sbCard{margin-top:0;}
}

/* ---------- Évaluation « 5 outils » ---------- */
body[data-ui="v2"] .tool-nm{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase;
}
body[data-ui="v2"] .tool-bar{border-radius:var(--r-xs);height:10px;background:var(--panel2);}
body[data-ui="v2"] .tool-fill{border-radius:0;}
body[data-ui="v2"] .tool-v{font-family:'IBM Plex Mono',monospace;font-weight:600;}

/* ==========================================================================================
   GRAND ÉCRAN — NAVIGATION LATÉRALE (options 1e et 1f)
   Les deux maquettes larges partagent une colonne de gauche : marque en haut, destinations
   empilées en dessous. `.topbar` porte DÉJÀ la marque et la navigation — on la bascule en
   colonne, sans ajouter ni déplacer le moindre élément.
   À partir de 1024 px seulement : en dessous, la barre horizontale reste plus économe en
   largeur, et sous 560 px la barre d'onglets basse prend le relais.
   ========================================================================================== */
@media (min-width:1024px){
  body[data-ui="v2"]{display:block;}          /* le rail est fixe, le corps n'a plus à l'empiler */
  body[data-ui="v2"] .topbar{
    position:fixed; top:0; left:0; bottom:0; width:236px; z-index:50;
    flex-direction:column; align-items:stretch; gap:6px;
    padding:22px 16px; padding-top:max(22px,env(safe-area-inset-top));
    background:var(--panel); border-bottom:none; border-right:1px solid var(--line);
    box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    overflow-y:auto;
  }
  body[data-ui="v2"] .brand{
    font-size:1.05rem; padding:0 10px; margin-bottom:18px; flex:0 0 auto;
  }
  /* La navigation cesse d'être poussée à droite : en colonne, `margin-left:auto` la collerait
     au bord et ferait déborder les libellés. */
  body[data-ui="v2"] .nav{
    flex-direction:column; align-items:stretch; margin-left:0; gap:2px; width:100%;
  }
  body[data-ui="v2"] .nav a{
    padding:10px 12px; border-radius:var(--r-sm) !important; font-weight:500; font-size:.94rem;
    color:var(--dim);
  }
  body[data-ui="v2"] .nav a:hover{background:var(--panel2); color:var(--txt);}
  body[data-ui="v2"] .nav a.on{background:var(--txt); color:var(--bg); font-weight:600;}

  /* Le contenu se décale de la largeur du rail — par un REMBOURRAGE SUR <body>, pas par une
     marge sur chaque bloc. Avec une marge, `#app` gardait `width:min(1160px,100%)` calculé sur
     la largeur TOTALE de la fenêtre : à 1194 px il occupait 236→1396 et débordait de 202 px
     (constaté sur iPad en paysage). Le rembourrage réduit d'abord l'espace disponible, donc
     `100%` vaut ce qui reste réellement, et le centrage automatique de `#app` fonctionne. */
  body[data-ui="v2"]{padding-left:236px;}
  /* Le plafond de 1 160 px datait d'une mise en page SANS rail : à 1 920 px il laissait 262 px
     de vide de chaque côté du contenu. Une fois la navigation sortie du flux, la largeur utile
     doit servir au contenu. On relève le plafond à 1 500 px : la fenêtre est remplie à 1 440
     comme à 1 920, sans pour autant étirer les tableaux à l'infini sur un écran très large. */
  body[data-ui="v2"] #app{width:min(1500px,100%);padding-top:26px;}
}

/* ---------- Classement enrichi sur grand écran (option 1f) ----------
   Deux colonnes de plus, seulement là où la largeur le permet. Le différentiel se lit en
   couleur (positif/négatif) et la forme en cinq pastilles, la plus récente à droite. */
@media (min-width:1024px){
  body[data-ui="v2"] .st-stats{grid-template-columns:repeat(4,40px) 56px 80px;}
  body[data-ui="v2"] .st-x{display:block;}
  body[data-ui="v2"] .st-x.diff{
    font-family:'IBM Plex Mono',monospace; font-weight:500; font-variant-numeric:tabular-nums;
  }
  body[data-ui="v2"] .st-row .st-x.diff{color:var(--dim);}
  body[data-ui="v2"] .st-x.form{display:flex; gap:3px; justify-content:center; align-items:center;}
  body[data-ui="v2"] .st-x.form .fd{
    width:9px; height:9px; border-radius:3px; display:block; background:var(--line2);
  }
  body[data-ui="v2"] .st-x.form .fd.v{background:var(--green);}
  body[data-ui="v2"] .st-x.form .fd.d{background:var(--red);}
  /* En-tête : les deux intitulés suivent la même micro-étiquette que M/V/D/%V. */
  body[data-ui="v2"] .st-headrow .st-x{
    font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:.66rem;
    letter-spacing:.06em; text-transform:uppercase; color:var(--faint); text-align:center;
  }
  body[data-ui="v2"] .st-headrow .st-x.form{display:block;}
}

/* ---------- Variantes de bouton oubliées à la première passe ----------
   `body[data-ui="v2"] .btn` (deux classes + un élément) l'emporte sur `.btn.danger` (deux
   classes) : le fond rouge était donc remplacé par du blanc SANS que la couleur du texte, elle,
   soit reprise — un bouton « Quitter » blanc sur blanc, illisible. Constaté dans l'espace
   d'équipe. On redonne son fond à chaque variante colorée. */
body[data-ui="v2"] .btn.danger{background:var(--red);border-color:transparent;color:#fff;}
body[data-ui="v2"] .btn.danger:hover{background:color-mix(in srgb,var(--red) 85%,#000);}
body[data-ui="v2"] .btn.warn{
  color:var(--red); border-color:color-mix(in srgb,var(--red) 35%,transparent);
  background:color-mix(in srgb,var(--red) 7%,transparent);
}
body[data-ui="v2"] .btn.primary:hover{background:var(--accentA);}

/* ---------- Actions d'un espace d'équipe : hiérarchie, pas alignement ----------
   Le vrai défaut n'était pas la répartition mais le POIDS. « Quitter » est l'action la plus
   rare et la seule irréversible de la rangée ; en rouge plein elle était pourtant la plus
   voyante, et l'étaler sur toute la largeur (essai précédent) en faisait carrément le sujet de
   la carte. On la repousse à droite et on l'allège : contour rouge, fond transparent. Le rouge
   plein reste pour la boîte de confirmation, là où l'acte se décide vraiment.
   « Copier le code » et « Choisir » gardent alors la gauche et tiennent sur une ligne. */
body[data-ui="v2"] .ts-acts > .btn.danger{
  background:transparent; color:var(--red);
  border:1px solid color-mix(in srgb,var(--red) 35%,transparent);
}
body[data-ui="v2"] .ts-acts > .btn.danger:hover{
  background:color-mix(in srgb,var(--red) 10%,transparent);
}

/* ---------- Favoris ---------- */
body[data-ui="v2"] .fav-lbl{font-family:'IBM Plex Mono',monospace;font-weight:500;}
body[data-ui="v2"] .fav-chip{font-weight:500;border-radius:var(--r-sm);}
body[data-ui="v2"] .favbtn{border-radius:var(--r-sm);}

/* ---------- Recherche ---------- */
body[data-ui="v2"] .srchbtn{border-radius:var(--r-sm);}
body[data-ui="v2"] .sq-h{font-family:'IBM Plex Mono',monospace;font-weight:500;}
body[data-ui="v2"] .pick-row .pick-nm{font-weight:600;}

/* ---------- Espace joueur ---------- */
body[data-ui="v2"] .mi-f > span{font-family:'IBM Plex Mono',monospace;font-weight:500;}
body[data-ui="v2"] .myinfo .mi-nm{letter-spacing:-.02em;}

/* ---------- Vie du club ---------- */
body[data-ui="v2"] .ph-img{border-radius:var(--r-md);background:var(--bg2);}
body[data-ui="v2"] .wall-who{letter-spacing:-.01em;}
body[data-ui="v2"] .wall-at,
body[data-ui="v2"] .ph-who,
body[data-ui="v2"] .ev-badge,
body[data-ui="v2"] .exp-st{font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.04em;}
body[data-ui="v2"] .exp-amt{font-family:'IBM Plex Mono',monospace;font-weight:600;font-variant-numeric:tabular-nums;}

/* ---------- Analyse du joueur ---------- */
body[data-ui="v2"] .an-tile{background:var(--panel2);border-color:var(--line);border-radius:var(--r-md);}
body[data-ui="v2"] .an-l,body[data-ui="v2"] .an-pn,body[data-ui="v2"] .an-mainl{
  font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.05em;}
body[data-ui="v2"] .an-v,body[data-ui="v2"] .an-rv,body[data-ui="v2"] .an-mainv,body[data-ui="v2"] .an-pc{
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-variant-numeric:tabular-nums;}
body[data-ui="v2"] .an-mainv{letter-spacing:-.02em;}
body[data-ui="v2"] .cr-v,body[data-ui="v2"] .cr-r{font-family:'IBM Plex Mono',monospace;font-weight:600;font-variant-numeric:tabular-nums;}
body[data-ui="v2"] .dues-in{font-family:'IBM Plex Mono',monospace;}

/* ---------- La journée (planche 1a) : chiffres et étiquettes en mono, comme la planche ---------- */
body[data-ui="v2"] .jn-sc{font-family:'IBM Plex Mono',monospace;font-weight:600;}
body[data-ui="v2"] .jn-h,body[data-ui="v2"] .jn-pill,body[data-ui="v2"] .jn-when{
  font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.06em;}
body[data-ui="v2"] .jn-pill{font-weight:600;}
body[data-ui="v2"] .jn-t{font-family:'Instrument Sans',sans-serif;font-weight:600;letter-spacing:-.01em;}