/* ══════════════════════════════════════════════════════════════════
   Feuille commune de MatchUp NBA (toutes les pages). MatchUp NBA et
   MatchUp Tennis sont la même entreprise : chaque composant reprend ici
   les valeurs du site tennis (app.html, player.html et les pages
   secondaires du dépôt aceedge), sous les noms de classes du tennis quand
   le composant existe des deux côtés (.sec = .card, .tab, .ssw, .fval,
   .fsel, .vb, .badge, .t-pop, .bar-track, .cmp-table, .me-nav,
   .me-footer…). Les pages ne recopient plus ces règles : elles n'ajoutent
   que ce qui leur est propre.
   ══════════════════════════════════════════════════════════════════ */

/* Palette de MatchUp Tennis (app.html, lignes 21-41), seule définition du
   site : les pages n'en gardent plus de copie. --s200 reste défini (#e8e8ea,
   la couleur du texte tennis) ; --s100 n'existe plus. Le gris --s600
   (#3f3f47) colore les mêmes textes qu'au tennis, pas d'autres : titres de
   colonne et copyright du pied de page, sommaire de la Méthode, en-têtes de
   tableau et pastille de période de la Précision, pied de la page Séries,
   titre, légende et cases vides de la grille Défense vs poste. */
:root{
  --f:'Satoshi',system-ui,sans-serif;
  --m:'Inter Tight',sans-serif;
  --s950:#0a0a0c;--s900:#111114;--s800:#1a1a1f;--s700:#2a2a30;--s600:#3f3f47;
  --s500:#6b6b75;--s400:#9a9aa4;--s300:#cbcbd3;--s200:#e8e8ea;
  --em:#4ade80;--em4:#4ade80;--blue:#4ade80;--blue4:#86efac;--amb:#4ade80;
  --red:#ef4444;--red4:#f87171;
  --mu-fav:#4ade80;--mu-dif:#fb923c}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f);background:var(--s950);color:#e8e8ea;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{height:6px;width:6px}
::-webkit-scrollbar-thumb{background:var(--s700);border-radius:8px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Pas de filet overflow-x sur html et body, comme au tennis : il cachait des
   débordements au lieu de les montrer, et empêchait body de passer son
   overflow:hidden à la fenêtre (modale ouverte) : la barre de navigation ne
   collait plus en haut. Chaque bloc tient dans sa largeur, vérifié à 390 et
   1280 px. */
.mono{font-family:var(--m)}
.cs4{color:var(--s400)}.cs5{color:var(--s500)}.fw7{font-weight:700}.fw6{font-weight:600}
/* Texte pour les seuls lecteurs d'écran */
.mu-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ═══ NAVIGATION (app.html:404-438) ═══
   Sous 900 px, le menu tennis à bouton : les liens s'ouvrent sous la barre
   (nav.js sur les pages statiques, NavBar dans mu-cards.js). */
.me-nav{position:sticky;top:0;z-index:500;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(10,10,12,.85);border-bottom:1px solid rgba(255,255,255,.06)}
.me-nav-inner{max-width:80rem;margin:0 auto;display:flex;align-items:center;padding:0 16px;height:52px;gap:16px}
@media(min-width:640px){.me-nav-inner{padding:0 24px;gap:24px}}
.me-nav-logo{font-size:17px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:0;color:#e8e8ea;flex-shrink:0}
.me-nav-logo img{width:24px;height:24px;margin-right:8px;flex-shrink:0;object-fit:contain}
.me-nav-logo .a{color:#4ade80}
.me-nav-logo .b{color:#e8e8ea}
.me-nav-links{display:flex;gap:4px;margin-left:auto;align-items:center}
.me-nav-link{font-size:13px;white-space:nowrap;font-weight:500;color:#9a9aa4;padding:7px 12px;border-radius:6px;transition:all .15s}
.me-nav-link:hover{color:#e8e8ea;background:rgba(255,255,255,.04)}
.me-nav-link.active{color:#86efac;background:rgba(74,222,128,.08)}
.me-nav-link:focus-visible,.me-nav-logo:focus-visible,.me-nav-burger:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.me-nav-burger{display:none;background:none;border:none;color:#9a9aa4;cursor:pointer;padding:6px}
.me-nav-burger svg{width:22px;height:22px}
@media(max-width:900px){
  .me-nav{position:relative}
  .me-nav-links{display:none;position:absolute;top:52px;left:0;right:0;background:#0a0a0c;border:1px solid rgba(255,255,255,.08);border-top:none;flex-direction:column;padding:8px;gap:2px;align-items:stretch;z-index:1000;box-shadow:0 16px 48px rgba(0,0,0,.6);max-height:calc(100vh - 52px);overflow-y:auto}
  .me-nav-links.open{display:flex}
  .me-nav-link{padding:14px 16px;width:100%;border-radius:8px;font-size:15px;background:transparent;color:#e8e8ea}
  .me-nav-link:active,.me-nav-link:hover{background:rgba(74,222,128,.08);color:#86efac}
  .me-nav-burger{display:block;position:relative;z-index:1001;margin-left:auto}
}

/* ═══ PIED DE PAGE (.me-footer d'app.html) ═══ */
.me-footer{border-top:1px solid rgba(255,255,255,.06);margin-top:60px;padding:40px 0 24px;background:rgba(10,10,12,.6)}
.me-footer-inner{max-width:80rem;margin:0 auto;padding:0 24px}
.me-footer-top{display:flex;justify-content:space-between;gap:40px;margin-bottom:32px}
.me-footer-brand{flex-shrink:0;max-width:260px}
.me-footer-logo{font-size:18px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px;color:#e8e8ea}
.me-footer-logo .a{color:#4ade80}
.me-footer-tagline{font-size:14px;color:#6b6b75;line-height:1.5}
.me-footer-cols{display:flex;gap:48px}
.me-footer-col{display:flex;flex-direction:column;gap:6px}
.me-footer-col-title{font-size:12px;font-weight:600;color:#3f3f47;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.me-footer-col a{font-size:14px;color:#6b6b75;transition:color .15s}
.me-footer-col a:hover{color:#e8e8ea}
/* En bas, l'avertissement 18+ puis les sources : l'un sous l'autre (le
   tennis n'a ici qu'une ligne et ses réseaux sociaux). */
.me-footer-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:20px;border-top:1px solid rgba(255,255,255,.04)}
.me-footer-copy{font-size:13px;color:#3f3f47}
.me-footer-avert{font-size:13px;color:var(--s400);line-height:1.6}
.me-footer-avert .badge{color:#e8e8ea;border:1px solid var(--s700);margin-right:4px}
.me-footer-avert a,.me-footer-copy a{color:var(--s300);text-decoration:underline;text-underline-offset:2px}
.me-footer-build{font-size:11px;color:var(--s500);margin-top:8px}
.me-footer a:focus-visible{outline:2px solid var(--em);outline-offset:2px}
@media(max-width:700px){
  .me-footer{margin-top:40px;padding:24px 0 16px}
  .me-footer-top{flex-direction:column;gap:24px}
  .me-footer-cols{gap:24px;flex-wrap:wrap}
  .me-footer-col{min-width:100px}
  .me-footer-bottom{flex-direction:column;gap:12px;text-align:center;align-items:center}
}
@media(max-width:380px){.me-footer-cols{flex-direction:column;gap:16px}.me-footer-inner{padding:0 12px}}

/* ═══ CARTES (.card / .card h3 d'app.html:293-295) ═══
   Toutes les cartes de la fiche, de la modale et des pages. Le titre dit
   son sujet en clair, précédé de son emoji ; aucune carte ne se replie
   (l'onglet joue ce rôle), donc ni chevron ni en-tête bouton. */
.sec{border-radius:.75rem;border:1px solid var(--s800);background:var(--s900);padding:16px;margin-bottom:16px;min-width:0}
@media(min-width:640px){.sec{padding:20px;border-radius:1rem}}
.sec h3{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
/* Titre suivi d'une étiquette (« détail des play types ») : l'étiquette passe
   sous le titre quand la place manque, au lieu de l'écraser sur 4 lignes. */
.sec h3.h3-tag{flex-wrap:wrap;row-gap:6px}
/* Sous-titre de carte (« Derniers matchs vs … », app.html:3256) */
.st{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--s300);margin:14px 0 8px}
.st:first-child{margin-top:0}
/* Petite étiquette en capitales (.mv-h, app.html:177) */
.mv-h{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--s500);margin-bottom:9px}
/* Note de bas de bloc (.vnote, app.html:308) */
.vnote{font-size:10.5px;color:var(--s500);font-style:italic;margin-top:9px;text-align:center}
/* Lien « voir plus » du tennis (app.html:3365), en vrai bouton */
.lien-plus{display:block;margin-top:6px;padding:0;border:0;background:none;font-family:var(--f);font-size:12px;font-weight:400;color:var(--em4);cursor:pointer;text-align:left}
.lien-plus:hover{text-decoration:underline}
.lien-plus:focus-visible{outline:2px solid var(--em);outline-offset:2px;border-radius:4px}
/* Lien-bouton pleine largeur (« Analyse H2H complète → », app.html:3139) */
.cta-l{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px;margin-top:14px;background:rgba(74,222,128,.08);color:var(--em);border:1px solid rgba(74,222,128,.25);border-radius:8px;font-weight:500;font-size:13px;transition:background .2s}
.cta-l:hover{background:rgba(74,222,128,.14)}
.cta-l:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.grid2{display:grid;gap:16px}
@media(min-width:768px){.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* Bloc joueur de « Performance vs style » (app.html:3240) */
.jbloc{border:1px solid var(--s800);border-radius:12px;background:var(--s900);padding:16px;min-width:0}
.jbloc-n{font-size:14px;font-weight:700;margin-bottom:4px}
.jbloc-s{font-size:12px;color:var(--s400);margin-bottom:12px}
.vide-p{padding:9px 11px;border:1px dashed var(--s700);border-radius:8px;font-size:11.5px;color:var(--s400);line-height:1.4}
/* Onglet Style de jeu : un bloc ou une liste sans match dit pourquoi dans un
   cadre plein, au texte de la carte (13 px, --s300) : plus d'encadré pointillé
   en petits caractères gris. */
.tn-vide{padding:12px 14px;border:1px solid var(--s800);border-radius:8px;background:var(--s950);font-size:13px;color:var(--s300);line-height:1.5}
/* Feuille de match du détail déplié d'une ligne de la carte 🎯 : tout le box
   score, en tuiles centrées comme les « stats détaillées » du tennis
   (app.html, libellé au-dessus, valeur dessous), trois rangées (4, 3, 3).
   Chaque tuile au moins aussi large que le plus long mot de son libellé,
   jamais coupé (« Minut / es », « Interceptio / ns » à 320 px) : les tuiles
   s'égalisent dès que la place le permet (390 px et plus) ; sous 360 px, la
   rangée de quatre passe sur deux lignes de deux. Libellés en --s400 (6,8:1)
   et non --s500 : ce sont eux qui disent ce qu'est le chiffre. La tuile du
   marché affiché (celle qui se compare à la ligne) est cernée de --s500 :
   simple repère, la valeur et la ligne sont écrites au-dessus. */
.tn-bx{margin-top:10px;padding-top:10px;border-top:1px solid var(--s800)}
.tn-bxr{display:grid;gap:6px;grid-template-columns:minmax(min-content,1fr)}
.tn-bxr.n2{grid-template-columns:repeat(2,minmax(min-content,1fr))}
.tn-bxr.n3{grid-template-columns:repeat(3,minmax(min-content,1fr))}
.tn-bxr.n4{grid-template-columns:repeat(4,minmax(min-content,1fr))}
@media(max-width:359px){.tn-bxr.n4{grid-template-columns:repeat(2,minmax(min-content,1fr))}}
.tn-bxr+.tn-bxr{margin-top:6px}
.tn-bxt{border:1px solid var(--s700);border-radius:8px;padding:6px 4px;text-align:center;background:var(--s950);
  display:flex;flex-direction:column;justify-content:space-between}
.tn-bxt.on{border-color:var(--s500)}
.tn-bxl{font-size:11px;line-height:1.25;color:var(--s400)}
.tn-bxv{font-size:14px;font-weight:700;color:#fff;margin-top:2px}
.tn-bxs{font-size:11px;color:var(--s400);margin-top:1px}

/* ═══ ONGLETS (.tab et #mTabsNav d'app.html) ═══ */
.tab{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;border-radius:.5rem;padding:6px 12px;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:.15s;background:var(--s800);color:var(--s400)}
.tab.act{background:var(--blue);color:white}
.tab:hover:not(.act){background:var(--s800);color:white}
.tab:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.onglets{position:relative;margin-top:12px}
.onglets-l{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;scroll-behavior:smooth}
.onglets-l::-webkit-scrollbar{display:none}
.onglets-fl{position:absolute;top:0;bottom:4px;z-index:3;width:30px;border:none;padding:0;cursor:pointer;color:var(--s300);font-size:18px}
.onglets-fl.g{left:0;background:linear-gradient(to right,var(--s950) 55%,transparent)}
.onglets-fl.d{right:0;background:linear-gradient(to left,var(--s950) 55%,transparent)}
/* Contenu d'un onglet : .volet du tennis (app.html:306), sans animation :
   une animation de transform en ferait un contexte d'empilement, et ses
   bulles passeraient sous la barre de navigation. */
.volet{margin-top:10px;min-width:0}

/* ═══ INTERRUPTEUR (.ssw, app.html:250-252) ═══
   Tous les choix exclusifs : portées, vues, « Tous / Effectif complet »… */
/* Interrupteur .ssw du tennis : chaque choix garde sa largeur, sur une
   ligne (33 px de haut, comme au tennis). Seulement quand la rangée ne tient
   pas dans la carte (les cinq portées du graphique sur téléphone), un choix
   entier passe à la ligne (flex-wrap) : aucun n'est coupé ni caché. */
.ssw{display:inline-flex;flex-wrap:wrap;border:1px solid var(--s700);border-radius:8px;overflow:hidden;margin-bottom:9px;max-width:100%}
.ssw-b{background:transparent;border:none;color:var(--s400);padding:8px 16px;cursor:pointer;font-size:13px;font-weight:600;font-family:var(--f);flex:0 1 auto;white-space:nowrap}
.ssw-b.act{background:var(--s800);color:#e8e8ea}
.ssw-b:disabled{opacity:.4;cursor:not-allowed}

/* ═══ FILTRES (app.html:125-158) ═══ */
.fbar{display:flex;align-items:center;gap:12px;padding:0;margin-bottom:16px;flex-wrap:wrap}
@media(min-width:640px){.fbar{padding:16px;gap:12px}}
.fsearch{position:relative;flex:1;min-width:180px}
.fsearch input{border-radius:10px;border:1px solid var(--s800);background:var(--s900);padding:8px 12px 8px 32px;font-size:13px;color:white;width:100%;font-family:var(--f);outline:none;transition:.15s}
.fsearch input:hover{border-color:var(--s700)}
.fsearch input:focus{border-color:var(--blue);background:var(--s800)}
.fsearch input::placeholder{color:var(--s500)}
.fsearch .si{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--s500);font-size:13px;pointer-events:none}
.fbtn{border-radius:8px;padding:6px 12px;font-size:12px;font-weight:500;background:transparent;color:var(--s400);border:1px solid var(--s800);cursor:pointer;transition:all .15s;white-space:nowrap}
.fbtn:hover{border-color:var(--s700);color:var(--s300)}
.fbtn.act{background:var(--blue);color:white;border-color:var(--blue)}
.fsel{border-radius:8px;border:1px solid var(--s800);background:transparent;padding:6px 28px 6px 12px;font-size:12px;color:var(--s300);font-family:var(--f);cursor:pointer;transition:.15s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;max-width:100%}
.fsel:hover{border-color:var(--s700);color:white}
.fsel option{background:var(--s900);color:var(--s200)}
.fsel:disabled{opacity:.4;cursor:default}
.sbtn{background:transparent;color:var(--s400);border:none;padding:6px 14px;font-size:12px;font-weight:500;cursor:pointer;border-radius:6px;transition:.15s}
.sbtn:hover{color:var(--s300)}
.sbtn.act{background:var(--s800);color:white}
.fsort-wrap{display:flex;gap:2px;background:var(--s900);border:1px solid var(--s800);border-radius:8px;padding:3px}
.fval{display:flex;align-items:center;gap:6px;border-radius:8px;border:1px solid var(--s800);background:transparent;padding:6px 12px;font-size:12px;font-weight:500;color:var(--s400);cursor:pointer;transition:.15s}
.fval:hover{border-color:var(--s700);color:var(--s300)}
.fval.on{border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.1);color:#86efac}
.fval:disabled{opacity:.4;cursor:not-allowed}
/* Case à cocher dans une puce : bordure --s500 (3:1 sur le fond), pleine une
   fois cochée. */
.fval .box{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--s500);display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#000;flex-shrink:0}
.fval.on .box{background:var(--em);border-color:var(--em)}
.fbtn:focus-visible,.fsel:focus-visible,.sbtn:focus-visible,.fval:focus-visible,.ssw-b:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.ssw-b:focus-visible{outline-offset:-2px}

/* ═══ PILULE DES MARCHÉS (héros tennis ATP/WTA, app.html:504-513) ═══
   Une ligne qui défile, à toutes les largeurs (liste, modale, fiche, pages). */
.seg{display:inline-flex;align-items:stretch;max-width:100%;overflow-x:auto;margin:10px 0 6px;border:1px solid #2a2a2a;border-radius:99px;overflow:hidden;overflow-x:auto;font-size:13px;font-weight:700;user-select:none;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button,.seg a{display:flex;align-items:center;flex:none;padding:6px 16px;border:0;border-radius:0;background:none;color:#a8a8a8;font:inherit;cursor:pointer;white-space:nowrap;text-align:start}
.seg button.on,.seg a.on,.seg button[aria-pressed="true"]{padding:6px 18px;color:#0a0a0a;background:#4ade80}
.seg button:not(.on):not([aria-pressed="true"]):hover,.seg a:not(.on):hover{color:#e8e8ea}
.seg button:focus-visible,.seg a:focus-visible{outline:2px solid var(--em);outline-offset:-2px}
/* Score du marché dans la pilule */
.seg-c{margin-left:6px;font-family:var(--m);font-size:11px;font-weight:800}
.seg button.on .seg-c,.seg button[aria-pressed="true"] .seg-c{color:#0a0a0a!important;opacity:.7}

/* ═══ BADGES (app.html:117, :212-216, :311-312, :781-795) ═══
   Couleurs de la palette des badges du tennis : neutre = .vb-n (gris),
   vert = .sf-grass (gazon), out = rouge, gtd = .vb-moderate (ambre). */
.badge{display:inline-flex;align-items:center;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600}
.badge.neutre{background:var(--s800);border:1px solid var(--s700);color:var(--s500)}
.badge.out{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#f87171}
.badge.gtd{background:rgba(250,204,21,.18);border:1px solid rgba(250,204,21,.45);color:#facc15}
.badge.vert{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);color:#4ade80}
.vb{display:inline-flex;align-items:center;gap:4px;border-radius:.5rem;padding:2px 8px;font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.vb-n{background:var(--s800);border:1px solid var(--s700);color:var(--s500)}
.vb-strong{background:var(--em);color:white;font-weight:800;box-shadow:0 0 8px rgba(74,222,128,.35)}
.vb-moderate{background:rgba(250,204,21,.18);border:1px solid rgba(250,204,21,.45);color:#facc15;font-weight:700}
/* Paliers du score : très favorable = .vb-strong ; favorable = la puce
   choisie du tennis (.fval.on) ; neutre = .vb-n ; difficile en orange (la
   couleur « difficile » du site), plus gras pour très difficile. Le mot et
   l'icône disent toujours le palier. */
.vb.p-tf{background:var(--em);color:white;font-weight:800;box-shadow:0 0 8px rgba(74,222,128,.35)}
.vb.p-f{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.5);color:#86efac}
.vb.p-n{background:var(--s800);border:1px solid var(--s700);color:var(--s400)}
.vb.p-d{background:rgba(251,146,60,.13);border:1px solid rgba(251,146,60,.35);color:#fb923c}
.vb.p-td{background:rgba(251,146,60,.13);border:1px solid rgba(251,146,60,.35);color:#fb923c;font-weight:800}
.vb .mu-ico{letter-spacing:-.12em;margin-right:.12em}
/* Pastille de signal (.vsig, app.html:311-312). Le neutre, que le tennis
   n'affiche pas, prend les valeurs de .vb-n. */
.vsig{display:inline-flex;align-items:center;gap:4px;font-family:var(--m);font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.vsig.S{background:rgba(74,222,128,.16);color:var(--em)}
.vsig.N{background:var(--s800);border:1px solid var(--s700);color:var(--s500)}
.vsig.E{background:rgba(251,191,36,.13);color:#fbbf24}
.vsig.D{background:rgba(251,146,60,.13);color:#fb923c}
.vsig.R{background:rgba(239,68,68,.13);color:#f87171}
/* Pastille de forme / de rang (formBadge 'sm', app.html:781-795) ; sans
   rang, le gris neutre de .vb-n. */
.fb{display:inline-flex;align-items:center;gap:3px;font-family:var(--m);font-weight:700;font-size:11px;padding:2px 6px;border-radius:5px;line-height:1.1;white-space:nowrap;border:1px solid var(--s700);background:var(--s800);color:var(--s500)}
.fb.g{background:rgba(74,222,128,.15);border-color:rgba(74,222,128,.4);color:#4ade80}
.fb.a{background:rgba(251,191,36,.13);border-color:rgba(251,191,36,.35);color:#fbbf24}
.fb.r{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.35);color:#f87171}
/* Ligne venue d'un bookmaker : .vsig.S */
.lrb{display:inline-flex;align-items:center;margin-left:5px;font-family:var(--m);font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em;background:rgba(74,222,128,.16);color:var(--em);vertical-align:1px}
/* Chiffre de carte (.odd-badge, app.html:220-227) */
.odd-badge{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:50px;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-family:var(--m);flex-shrink:0;transition:all .15s}
.odd-badge .lbl{font-size:9px;font-weight:600;color:var(--s500);letter-spacing:.06em;text-transform:uppercase;line-height:1;margin-bottom:2px}
.odd-badge .val{font-size:15px;font-weight:800;color:white;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.odd-badge .val small{font-size:.6em;font-weight:700;opacity:.75;margin-left:1px}
.odd-badge.value-pick{background:linear-gradient(135deg,rgba(74,222,128,.18),rgba(74,222,128,.08));border-color:rgba(74,222,128,.5);box-shadow:0 0 12px rgba(74,222,128,.15)}
.odd-badge.value-pick .lbl{color:var(--em);font-weight:700}
.odd-badge.value-pick .val{color:var(--em);font-size:17px}
@media(min-width:640px){.odd-badge{min-width:60px;padding:6px 12px}.odd-badge .val{font-size:18px}.odd-badge.value-pick .val{font-size:20px}}
/* « provisoire » : badge neutre, explication au survol */
.mu-prov{display:inline-flex;align-items:center;border-radius:.5rem;padding:2px 8px;font-size:11px;font-weight:600;letter-spacing:.02em;background:var(--s800);border:1px solid var(--s700);color:var(--s500);white-space:nowrap;cursor:help;text-transform:none}

/* ═══ SUIVRE : le cœur du tennis (.hb, app.html) ═══ */
.hb{appearance:none;border:0;background:transparent;cursor:pointer;width:34px;height:34px;margin:-7px -7px -7px 4px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;color:var(--s500);transition:background .15s,color .15s;flex:none;padding:0;vertical-align:middle}
.hb:hover{background:rgba(255,255,255,.06);color:var(--s300)}
.hb-modal{margin:0;width:36px;height:36px}
.hb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;display:block;transition:fill .15s,stroke .15s}
.hb.on{color:#fb7185}
.hb.on svg{fill:#fb7185;stroke:#fb7185}
/* Le « pop » du cœur au clic (app.html:358-359) */
.hb.pop svg{animation:favpop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes favpop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
.hb:focus-visible{outline:2px solid var(--em);outline-offset:1px}
/* Cœur plein, sans bouton, devant le nom d'un joueur suivi (cartes de liste) */
.coeur{display:inline-flex;width:14px;height:14px;flex:none;color:#fb7185}
.coeur svg{width:100%;height:100%;fill:#fb7185;stroke:none;display:block}

/* ═══ TUILES CHIFFRÉES (« Global / Sur Dur », app.html:3245-3254) ═══ */
.tt{display:block;border:1px solid var(--s700);border-radius:8px;padding:10px;text-align:center;background:transparent;font-family:var(--f);color:inherit;min-width:0;width:100%;font-size:16px}
button.tt{cursor:pointer;transition:border-color .15s,background .15s}
button.tt:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.tt.sel{border-color:rgba(74,222,128,.6);background:rgba(74,222,128,.12)}
/* Sur le fond teinté de la tuile choisie, #6b6b75 tombe sous 3:1 : libellés en var(--s400). */
.tt.sel .tt-l,.tt.sel .tt-s{color:var(--s400)}
.tt-l,.tt-v,.tt-s{display:block}
.tt-l{font-size:11px;color:var(--s500);margin-bottom:4px;line-height:1.3}
.tt-v{font-family:var(--m);font-size:22px;font-weight:700;line-height:normal;white-space:nowrap}
.tt-v small{font-size:12px;font-weight:600;color:var(--s500);margin-left:2px}
.tt-s{font-size:11px;color:var(--s500);line-height:1.35}
.tt-phrase{margin:8px 0 0;font-size:12px;color:var(--s400);line-height:1.45}
.tt-g{display:grid;gap:8px;min-width:0}
.tt-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tt-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tt-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tt-g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:620px){.tt-g5,.tt-g4{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Tuiles de « Attaque et défense, adversaires pris en compte » : deux par
   ligne sur téléphone, toutes sur une ligne dès 640 px ; libellés et
   sous-lignes en #9a9aa4 (6,8:1), car ce sont eux qui disent le sens du
   chiffre (« 6e meilleure défense sur 30 », « défavorable pour lui »). */
.tt-g.niv{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.tt-g.niv.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.tt-g.niv.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tt-g.niv .tt-l,.tt-g.niv .tt-s{color:var(--s400)}

/* ═══ BARRES (.bar-track / .bar-fill, app.html:297) ═══ */
.bar-track{height:6px;border-radius:99px;background:var(--s800);overflow:hidden}
.bar-fill{height:100%;border-radius:99px;transition:width .5s}

/* ═══ TABLEAUX (.cmp-table, app.html:47-72) ═══ */
.cmp-table{width:100%;border-collapse:collapse}
.cmp-table th{text-align:center;padding:10px 4px;font-size:12px;font-weight:700;font-family:var(--f);color:#e8e8ea}
.cmp-table th.lbl{text-align:left;font-size:11px;color:var(--s400);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.cmp-table td{padding:8px 4px;border-bottom:1px solid var(--s800);vertical-align:middle;text-align:center;font-family:var(--f)}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table td.lbl{font-size:13px;font-weight:400;text-align:left}
.cmp-table td.val{text-align:center;width:32%}
.cmp-cell{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;min-width:56px;justify-content:center}
.cmp-cell.win{background:rgba(74,222,128,.08)}
.cmp-cell.neutral{background:rgba(148,163,184,.06)}
.cmp-val{font-family:var(--m);font-weight:700;font-size:13px}
.cmp-sub2{display:block;font-size:10px;color:var(--s500);font-weight:400;margin-top:2px}
@media(max-width:640px){.cmp-cell{padding:4px;background:transparent!important;min-width:0}}

/* ═══ LIGNES DE LISTE (matchRow / mkRow, app.html:3275-3295) ═══ */
.lr{border:1px solid var(--s800);border-radius:8px;margin-bottom:4px;overflow:hidden}
/* La ligne du joueur ou de l'adversaire du soir : .pp.val du tennis (bordure,
   fond, halo, rayon, padding de 12 px puis 20 px dès 640 px). Dès 640 px, elle
   déborde de 8 px de chaque côté (marges négatives) : ses colonnes restent
   alignées sur celles des autres lignes (12 px du bord). */
.lr.moi{border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.06);box-shadow:0 0 16px rgba(74,222,128,.1);border-radius:.75rem;padding:12px}
.lr.moi>.lr-l{padding:0}
@media(min-width:640px){.lr.moi{border-radius:1rem;padding:20px;margin-left:-8px;margin-right:-8px}}
/* Lignes à padding propre (défense poste par poste) ; .lr.moi l'emporte. */
.lr-p{padding:9px 12px}
/* Liste déroulée qui défile (adversaires préférés) : la place du débord de
   la ligne du soir. */
.lr-defil{max-height:260px;overflow-y:auto}
@media(min-width:640px){.lr-defil{padding:0 8px;margin:0 -8px}}
.lr.soir{border-color:var(--s700);background:var(--s800)}
.lr-l{display:flex;align-items:center;gap:8px;padding:10px 12px;min-width:0}
.lr-t{color:#fff;font-weight:600;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Nom long (profil de défense) : il passe à la ligne, la pastille « ce soir »
   dessous, plutôt que d'être coupé. */
.lr-n{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.lr-n .lr-t{white-space:normal;overflow:visible}
.lr-v{font-family:var(--m);font-size:12px;color:var(--s500);margin-left:auto;white-space:nowrap}
.lr-d{font-size:11px;color:var(--s500);white-space:nowrap}
.lr-tx{font-family:var(--m);font-size:13px;font-weight:700;white-space:nowrap}
.lr-pas{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;font-size:11px;font-weight:700;color:white;flex-shrink:0}
.va-rb{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;width:100%;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:start}
/* Le titre de la ligne et ses chiffres (valeur / ligne, date) ; les chiffres
   ne passent jamais à la ligne. Liste de joueurs (.va-rb2) sur téléphone : le
   nom en entier sur sa ligne, les chiffres dessous, sur toutes les lignes. */
.va-rb-c{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.va-rb-t{color:#fff;font-weight:600;font-size:13px;min-width:0;overflow-wrap:anywhere}
.va-rb-m{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0}
@media(max-width:560px){
  .va-rb2 .va-rb-c{flex-direction:column;align-items:flex-start;gap:3px}
  .va-rb2 .va-rb-m{margin-left:0}
}

/* ═══ LIGNES DE VOLET (app.html:307-330) ═══
   La décomposition du score de la fiche (MuDecomp) et la tête .vstop du bloc
   du score. */
.vstop{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.vstop .f{font-size:14px;font-weight:700;color:#fff}
.vstr{padding:7px 0;border-top:1px solid var(--s800)}
.vstr:first-of-type{border-top:none;padding-top:2px}
.vstl{font-family:var(--m);font-size:10px;font-weight:700;color:var(--s300);text-transform:uppercase;letter-spacing:.04em;text-align:center;margin-bottom:5px}
.vsect{font-family:var(--m);font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--em4);margin:15px 0 9px;padding-top:12px;border-top:1px solid var(--s800)}
/* Règle du tennis : 8 px au-dessus seulement pour un intertitre en tête de
   son bloc ; après la tête du volet et « En clair », 15 px comme au tennis. */
.vsect:first-of-type{margin-top:8px}
.vstv{display:flex;align-items:center;gap:10px}
.vstn{font-family:var(--m);font-size:14px;font-weight:800;width:48px;flex-shrink:0;color:var(--s200)}
.vstn.r{text-align:right}.vstn.w{color:var(--em)}.vstn.l{color:var(--red4)}
.vstb{flex:1;height:6px;border-radius:3px;background:transparent;display:flex;gap:2px;overflow:hidden}
/* Segments de la barre : .seg au tennis, .vseg ici (.seg est la pilule des
   marchés). */
.vstb .vseg{height:100%;background:var(--s600);border-radius:2px;width:0;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.vstb .vseg.w{background:linear-gradient(90deg,var(--em),var(--em4))}
.vstb .vseg.l{background:var(--red4)}
/* Une seule valeur par ligne (la composante, « +0,6 pts+reb+pas ») : la
   colonne part de 72 px et s'élargit à son contenu, la barre cède la place
   (la valeur et son unité sortaient de la carte sur Pts+Reb+Pas et
   Interceptions). */
.vstv .vstn.r{width:auto;min-width:72px;white-space:nowrap}
/* Barre de part et d'autre du zéro (décomposition du score) */
.vstb.dv{gap:2px}
.vstb.dv .dv-g,.vstb.dv .dv-d{flex:1;display:flex;height:100%;background:var(--s800);border-radius:2px;overflow:hidden}
.vstb.dv .dv-g{justify-content:flex-end}

/* ═══ FACTEURS CLÉS : la version B de la page d'essais (« Impact sur son scoring ») ═══
   Branchée à la demande du propriétaire (essais.css, classes ess- recopiées
   en fkb-) : en tête le score, son palier et son (i) ; les composantes du
   score en liste classée (rang, barre verte ou rouge à gauche, titre,
   phrase, valeur en pastille) ; puis les deux blocs du socle du soir en
   pointillés, une ligne par repère avec sa valeur. */
.fkb-tete{margin-bottom:12px;min-width:0}
.fkb-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.fkb-score-l{font-size:15.5px;font-weight:700;color:#e8e8ea}
.fkb-score-c{font-family:var(--m);font-size:22px;font-weight:800;line-height:1}
.fkb-score-c small{font-size:12px;font-weight:600;color:var(--s400);margin-left:1px}
.fkb-score-u{font-family:var(--m);font-size:14px;font-weight:600;color:var(--s300)}
.fkb-score-vide{font-size:13px;color:var(--s300);line-height:1.45}
.fkb-score-b{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:7px}
.fkb-score-b .vsig{font-size:10.5px;padding:4px 8px}
/* Le gris du palier neutre (.vsig.N : 3,3:1) éclairci ici : 6:1. */
.fkb-score-b .vsig.N{color:var(--s400)}
.fkb-i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid rgba(74,222,128,.4);background:rgba(74,222,128,.12);color:var(--em);font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:11.5px;line-height:1;cursor:pointer;padding:0;flex:none}
.fkb-i[aria-expanded="true"]{background:var(--em);color:#0a0a0c}
.fkb-i:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.fkb-i-txt{flex:1 0 100%;font-size:12.5px;line-height:1.5;color:var(--s200);background:var(--s950);border:1px solid rgba(74,222,128,.25);border-radius:10px;padding:10px 12px;font-weight:400}
.fkb-i-txt b{color:var(--em)}
.fkb-imp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.fkb-imp-h h4{font-size:15.5px;font-weight:700;color:#e8e8ea}
.fkb-leg{display:flex;gap:10px;font-size:11px;color:var(--s400)}
.fkb-leg-i{display:inline-flex;align-items:center;gap:4px}
.fkb-pt{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--em);flex:none}
.fkb-leg-i.neg .fkb-pt{background:var(--red)}
.fkb-imp{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.fkb-imp-i{display:flex;align-items:center;gap:10px;padding:11px 10px 11px 0;border-radius:12px;background:rgba(10,10,12,.5);border:1px solid var(--s800);overflow:hidden}
.fkb-imp-bar{align-self:stretch;width:4px;margin:-11px 0;background:var(--em);flex:none}
.fkb-imp-i.neg .fkb-imp-bar{background:var(--red)}
.fkb-imp-i.neu .fkb-imp-bar{background:var(--s600)}
.fkb-imp-n{font-family:var(--m);font-size:13px;font-weight:700;color:var(--s400);width:12px;text-align:center;flex:none}
.fkb-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fkb-tx-t{font-size:13.5px;font-weight:600;color:#e8e8ea;line-height:1.3}
.fkb-tx-s{font-size:11.5px;color:var(--s400);line-height:1.4}
.fkb-pill{font-family:var(--m);font-size:12.5px;font-weight:800;white-space:nowrap;flex:none;padding:6px 10px;border-radius:99px;
  background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.35);color:var(--em)}
.fkb-imp-i.neg .fkb-pill{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4);color:var(--red4)}
.fkb-imp-i.neu .fkb-pill{background:rgba(255,255,255,.04);border-color:var(--s700);color:var(--s300)}
.fkb-imp-pied{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:11.5px;color:var(--s400);line-height:1.45}
.fkb-pt.neu{background:var(--s500)}
/* Le socle du soir : mêmes cartes que les composantes, la flèche à la place
   du rang. */
.fkb-socle-h{margin-top:18px}
.fkb-socle-hs{font-size:12px;font-weight:500;color:var(--s400)}
.fkb-socle-h .fkb-i-txt{order:3}
.fkb-imp-f{font-size:11px;font-weight:800;color:var(--em)}
.fkb-imp-i.neg .fkb-imp-f{color:var(--red4)}
.fkb-imp-i.neu .fkb-imp-f{color:var(--s500)}
@media(max-width:420px){
  .fkb-imp-i{gap:8px}
  .fkb-pill{padding:5px 8px;font-size:12px}
}

/* ═══ INFOBULLES (app.html:229-243) ═══
   <span class="t-trig"><span>Label</span><span class="t-ico">i</span><span class="t-pop">Définition</span></span>
   Survol sur ordinateur, tap sur téléphone (mu-cards.js). Toutes les bulles
   du site sont celles du tennis : centrées au-dessus de leur icône, avec leur
   flèche, recalées dans la largeur de l'écran (positionnerBulle, comme
   positionTooltip du tennis). Seul ajout : quand la place manque au-dessus
   (haut de l'écran, ou barre de navigation qui passe devant), la bulle
   s'ouvre sous l'icône (.t-bas), toujours centrée, la flèche retournée :
   jamais cachée. */
.t-trig{position:relative;display:inline-flex;align-items:center;gap:0;cursor:help;line-height:inherit}
.t-trig .t-ico{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:rgba(74,222,128,.18);color:var(--em);font-size:10px;font-weight:700;font-style:italic;line-height:1;font-family:Georgia,serif;margin-left:4px;border:1px solid rgba(74,222,128,.35);transition:background .15s,color .15s,transform .15s;flex-shrink:0;user-select:none}
.t-trig:hover .t-ico,.t-trig.t-open .t-ico{background:var(--em);color:#0a0a0c;transform:scale(1.1);border-color:var(--em)}
.t-trig:focus-visible{outline:2px solid var(--em);outline-offset:2px;border-radius:4px}
/* Fermée, la bulle ne prend aucune place (display:none, au lieu du seul
   visibility:hidden du tennis) : centrée sur une icône proche du bord
   droit, elle faisait défiler la modale de côté. Ouverte, elle a les
   valeurs du tennis ; son fondu d'apparition est gardé (@starting-style). */
.t-pop{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#141418;border:1px solid rgba(74,222,128,.4);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.5;color:#ffffff;font-weight:400;font-style:normal;letter-spacing:0;text-transform:none;width:max-content;max-width:280px;white-space:normal;text-align:left;z-index:1000;box-shadow:0 8px 28px rgba(0,0,0,.7),0 0 0 1px rgba(74,222,128,.15);opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s,display .15s allow-discrete;pointer-events:none;font-family:var(--f);display:none}
.t-trig:hover .t-pop,.t-trig.t-open .t-pop{opacity:1;visibility:visible;display:block}
@starting-style{.t-trig:hover .t-pop,.t-trig.t-open .t-pop{opacity:0;visibility:hidden}}
.t-pop::after{content:'';position:absolute;top:100%;left:var(--arrow-left,50%);transform:translateX(-50%);border:7px solid transparent;border-top-color:#141418;filter:drop-shadow(0 1px 0 rgba(74,222,128,.4))}
.t-pop b,.t-pop strong{color:var(--em);font-weight:700}
.t-pop em{color:var(--em4);font-style:italic}
@media(max-width:640px){.t-pop{max-width:240px;font-size:12.5px;padding:10px 12px}.t-trig .t-ico{width:16px;height:16px;font-size:11px}}
/* Texte de la bulle : il défile dans la bulle quand elle ne tient entière
   d'aucun côté (max-height posé par positionnerBulle), la flèche restant
   dehors. */
.t-pop-c{display:block}
.t-trig.t-bas .t-pop{bottom:auto;top:calc(100% + 10px)}
.t-trig.t-bas .t-pop::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#141418;filter:drop-shadow(0 -1px 0 rgba(74,222,128,.4))}

/* ═══ FICHE : grille, liste latérale, en-tête ═══ */
.pm-grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:14px;align-items:start;min-width:0}
.pmmain{min-width:0}
.mback{display:none}
@media(max-width:900px){
  .pm-grid{grid-template-columns:minmax(0,1fr)}
  .pm-grid.mdetail .sb{display:none}
  .pm-grid.mlist .pmmain{display:none}
  .mback{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:500;background:transparent;color:var(--s400);border:1px solid var(--s800);cursor:pointer}
  .mback:hover{border-color:var(--s700);color:var(--s300)}
}
.sb{position:sticky;top:66px;max-height:calc(100vh - 80px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:900px){.sb{position:static;max-height:none;overflow-y:visible}}
/* Recherche (.search-input de player.html:47) */
.sb-find{position:relative;margin-bottom:16px}
.sb-search{width:100%;font-family:var(--f);font-size:15px;padding:14px 18px 14px 44px;border-radius:12px;border:1px solid var(--s800);background:var(--s900);color:white;outline:none;transition:.15s}
.sb-search:focus{border-color:var(--em);background:var(--s900)}
.sb-search::placeholder{color:var(--s500)}
.sb-find .si{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--s500);pointer-events:none;font-size:16px}
/* Liste des joueurs : boîte .hub-card, lignes .sr-item (player.html) */
.gcard{border-radius:14px;border:1px solid var(--s800);background:var(--s900);margin-bottom:12px;overflow:hidden}
.ghead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 10px;border-bottom:1px solid var(--s800)}
.ghead .t{font-size:14px;font-weight:700;color:white;line-height:1.2}
.ghead .h{font-size:11.5px;color:var(--s500);font-weight:500}
.prow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--s800);cursor:pointer;transition:.1s;width:100%;background:none;border-left:0;border-right:0;border-top:0;color:inherit;font:inherit;text-align:left}
.prow:last-child{border-bottom:none}
.prow:hover{background:rgba(74,222,128,.06)}
.prow:focus-visible{outline:2px solid var(--em);outline-offset:-2px}
.prow.sel{background:rgba(74,222,128,.1);box-shadow:inset 3px 0 0 rgba(74,222,128,.6)}
.prow .nm{font-size:13.5px;font-weight:600;color:white;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.prow .mt{font-size:11.5px;color:var(--s500);margin-top:2px}
.prow.lk{cursor:default;opacity:.55}
.prow.lk .nm{color:var(--s500)}
.prow-d{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.prow .ln{font-family:var(--m);font-size:12px;font-weight:700;background:var(--s800);border:1px solid var(--s700);border-radius:6px;padding:2px 7px;color:var(--s200);white-space:nowrap}
.lockpill{margin-left:auto}
.offerts .ghead{justify-content:space-between}
.offerts-note{font-size:11.5px;color:var(--s500);padding:8px 14px 10px;line-height:1.45;border-top:1px solid var(--s800)}
.mu-asuivre{font-size:11.5px;color:var(--s400);font-weight:600;white-space:nowrap}

/* En-tête de la fiche : la carte .hero de player.html:68-89. Le conteneur,
   l'avatar, les étiquettes .tag et les points de forme sont dans fiche.html,
   seule page qui l'affiche ; le nom et sa rangée d'étiquettes ici. */
.hero-name{font-size:clamp(22px,5vw,34px);font-weight:800;color:white;letter-spacing:-.02em;line-height:1;margin-bottom:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
/* Bandeau de décision : tuiles de résumé .hs (player.html:83-85) et le bloc
   du score de matchup. */
.dstrip{display:grid;grid-template-columns:minmax(150px,.85fr) minmax(0,2.6fr);gap:8px;margin:14px 0 12px;align-items:stretch}
/* Les tuiles de résumé restent compactes en haut de leur colonne, même quand
   le bloc du score est déplié à côté. */
.dcol{display:grid;gap:8px;min-width:0;align-content:start}
/* Tuile .hs de player.html (fond rgba(15,23,42,.5), bordure #1a1a1f) ; son
   libellé passe à la ligne au lieu d'être coupé. */
.dbox{border-radius:8px;border:1px solid var(--s800);background:rgba(15,23,42,.5);padding:9px 11px;text-align:left;min-width:0;display:block}
.dlab{font-size:11.5px;color:var(--s400);margin-bottom:3px;line-height:1.3}
.dval{font-family:var(--m);font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsub{font-size:11px;color:var(--s500);margin-top:2px}
.mbox{position:relative;border-radius:13px;border:1px solid var(--s800);background:var(--s950);padding:14px;min-width:0;display:flex;flex-direction:column;gap:9px}
.mbox .vstop{margin-bottom:0}
.mrow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mverdict{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.mverdict.mu-leger{font-weight:700}
.mverdict.mu-vide{font-size:15px;font-weight:600;color:var(--s400);letter-spacing:0}
@media(max-width:760px){
  .dstrip{grid-template-columns:minmax(0,1fr);gap:8px}
  .dcol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mbox{grid-column:1/-1;order:-1}
}
.mu-note{font-size:12.5px;color:var(--s400);line-height:1.5}
.mu-score{margin-left:auto;text-align:right}
.mu-s{font-family:var(--m);font-size:30px;font-weight:800;white-space:nowrap;line-height:1;letter-spacing:-.02em}
.mu-s100{font-size:13px;font-weight:700;opacity:.75;margin-left:2px;letter-spacing:0}
.mu-u{font-family:var(--m);font-size:12.5px;font-weight:700;margin-top:2px;white-space:nowrap}
.mu-raison{display:flex;gap:8px;align-items:baseline;font-size:13px;color:var(--s200);line-height:1.45;border-top:1px solid var(--s800);padding-top:8px}
.mu-ico{letter-spacing:-.12em;margin-right:.12em}
.mu-dec{border-top:1px solid var(--s800);padding-top:4px;display:flex;flex-direction:column}
.mu-dec-sty{font-size:12px;color:var(--s400);line-height:1.45;margin-top:4px}
.mu-histo{border:1px solid var(--s800);background:var(--s900);border-radius:8px;padding:9px 11px;font-size:12.5px;color:var(--s300);line-height:1.5}
.mu-pied{font-size:10.5px;color:var(--s500);font-style:italic;line-height:1.45;text-align:center}
.mu-pied a{color:var(--em);font-style:normal}
.mu-det-b{display:inline-flex;align-items:center;align-self:flex-start;padding:0;border:0;background:none;font-family:var(--f);font-size:12px;color:var(--em4);cursor:pointer}
.mu-det-b:focus-visible{outline:2px solid var(--em);outline-offset:2px;border-radius:4px}
@media(min-width:640px){.mu-det-b{display:none}}
/* Absents annoncés, portée des moyennes, moyennes du joueur */
.abs-l{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.scoperow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;min-height:30px}
.statgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;min-width:0}
/* Moyennes : les tuiles .hs de la .hero-summary du tennis (libellé .hs-lbl,
   valeur .hs-val), plus l'écart sous la valeur ; celle du marché affiché
   reste surlignée en vert. */
.scell{background:rgba(15,23,42,.5);border:1px solid var(--s800);border-radius:8px;padding:9px 11px;text-align:left;min-width:0}
.scell.hot{border-color:rgba(74,222,128,.6);background:rgba(74,222,128,.12)}
.scell .l{font-size:11.5px;color:var(--s400);margin-bottom:3px}
.scell.hot .l{color:#86efac}
.scell .v{font-family:var(--m);font-size:14px;font-weight:700;color:#fff;white-space:nowrap}
.scell .d{font-family:var(--m);font-size:11px;font-weight:700;margin-top:2px}
@media(max-width:700px){.statgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}}
@media(max-width:400px){.statgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ═══ GRAPHIQUE MATCH PAR MATCH ═══ */
.charthead{display:flex;align-items:center;gap:8px 10px;margin-bottom:8px;flex-wrap:wrap;min-height:30px}
.ch-taux{font-size:12px;font-weight:700}
.ch-ph{font-size:10.5px;color:var(--s500)}
/* Les colonnes (matchs, puis « ce soir ») se partagent TOUTE la largeur de la
   carte, quel que soit leur nombre : une grille de --nbar colonnes égales,
   la même pour les barres et pour leurs libellés, qui ne peuvent donc plus se
   décaler. Sous 24 px de pas par colonne (12 à la souris au-delà de 24
   matchs ; Chart, colPlancher), le graphique prend --colmin par colonne (2 px
   de plus) et défile dans sa carte (.chartwrap), jamais la page : jamais un
   défilement de quelques pixels. Une barre remplit sa colonne, sans dépasser
   200 px : un match seul ne fait pas un bloc de toute la largeur. */
.chart{position:relative;height:230px;margin:6px 0 4px;--cgap:8px}
.chart.dense{--cgap:2px}
.cbars{position:absolute;inset:0 0 34px var(--gout,0px);display:grid;grid-template-columns:repeat(var(--nbar,11),minmax(0,1fr));align-items:end;column-gap:var(--cgap)}
.cb{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative;min-width:0}
.cb .v{position:absolute;left:0;right:0;text-align:center;font-family:var(--m);font-size:11px;font-weight:700;color:#fff}
.cb .bar{width:100%;max-width:200px;border-radius:4px 4px 0 0;min-height:3px;transition:filter .12s}
.chart.dense .cb .bar{border-radius:2px 2px 0 0}
.cb:hover .bar{filter:brightness(1.22)}
button.cb{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;min-width:0}
button.cb:focus-visible{outline:2px solid var(--em);outline-offset:2px;border-radius:4px}
/* Match de la saison passée : en retrait */
.gl-prev{opacity:.55}
.cxl{position:absolute;left:var(--gout,0px);right:0;bottom:0;display:grid;grid-template-columns:repeat(var(--nbar,11),minmax(0,1fr));column-gap:var(--cgap)}
/* Libellé centré sous sa barre, même plus large qu'elle (flex : il déborde
   des deux côtés, sur les colonnes voisines) ; Chart le décale (transform)
   pour ne chevaucher ni un autre libellé ni le bord du graphique. */
.cx{min-width:0;display:flex;flex-direction:column;align-items:center}
.cxi{display:flex;flex-direction:column;align-items:center}
.cx .o{font-family:var(--f);font-size:11px;font-weight:700;color:var(--s400);white-space:nowrap}
.cx .d{font-family:var(--f);font-size:11px;color:var(--s500);white-space:nowrap}
.cline{position:absolute;left:var(--gout,0px);right:0;height:0;border-top:2px solid #fbbf24;z-index:2;pointer-events:none}
.clab{position:absolute;left:0;transform:translateY(-50%);z-index:3;font-family:var(--f);font-size:11px;font-weight:700;color:#0a0a0c;background:#fbbf24;border-radius:6px;padding:2px 7px}
/* « Face à … » : tous ses matchs contre l'équipe, toutes saisons. Une rangée
   de 18 px en tête porte la saison de chaque groupe de matchs, un filet
   sépare deux saisons ; chaque barre porte SA ligne d'avant-match (trait
   ambre, à la largeur de la barre), « ce soir » la ligne du soir (pastille
   ambre au-dessus de la case pointillée). Pas de ligne commune. */
.chart.face{height:248px}
.chart.face .cbars{top:18px}
.csl{position:absolute;left:var(--gout,0px);right:0;top:0;height:16px;display:grid;grid-template-columns:repeat(var(--nbar,11),minmax(0,1fr));column-gap:var(--cgap)}
/* Une saison par groupe de matchs : posée par Chart (left, en px depuis le
   début du groupe), au début du groupe ou, groupe trop étroit, centrée
   dessus, jamais sur une autre. */
.csl>span{position:relative;min-width:0;height:16px}
.csl .csl-t{position:absolute;top:0;font-family:var(--f);font-size:10.5px;line-height:16px;color:var(--s400);white-space:nowrap}
.cb.sep::before{content:"";position:absolute;top:-18px;bottom:0;left:calc(var(--cgap) / -2 - .5px);border-left:1px solid var(--s700);pointer-events:none}
.cb .v.soir{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;font-family:var(--f);color:#0a0a0c;background:#fbbf24;border-radius:6px;padding:1px 6px}
.cb .v.soir.dr{left:auto;right:0;transform:none}
/* « ce soir » écrit dans sa case, de bas en haut, quand il n'a pas de place
   sous la colonne. */
.cb-soir-v{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f);font-size:10px;font-weight:700;color:var(--s400);white-space:nowrap;line-height:1}
/* Case trop basse : au-dessus de la pastille de la ligne, centré sur la colonne. */
.cb .cb-soir-v.haut{position:absolute;left:50%;transform:translateX(-50%) rotate(180deg);pointer-events:none}
@media(max-width:720px){.chart.face{height:218px}}
/* Liste « Ligne » : un .fsel dont le texte reste ambre, la couleur de la
   ligne du graphique (vert quand c'est une ligne personnalisée). */
.fsel.ligne{color:#fbbf24}
.fsel.ligne.perso{color:var(--em)}
.filtres-actifs{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.chartwrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.chartwrap::-webkit-scrollbar{height:4px}
.chartwrap::-webkit-scrollbar-thumb{background:var(--s700);border-radius:2px}
@media(max-width:720px){
  .chart{height:200px;--cgap:4px}
  .chart.dense{--cgap:2px}
  .cx .o,.cx .d{font-size:10px}
}
/* La ligne du soir se lit sur la pastille de la colonne « ce soir », au
   bout de son trait ; sans cette colonne (graphique filtré), son étiquette
   est dans une marge à gauche (--gout), comme une graduation, pour ne pas
   cacher la valeur de la première barre. Largeur minimale : --nbar colonnes
   de --colmin, moins un écart (n colonnes n'en ont que n-1) ; --colmin vaut 0
   quand tout tient (la grille suit la carte, sans arrondi qui déborde). */
.chartwrap>.chart{min-width:calc(var(--colmin,26px) * var(--nbar,11) - var(--cgap) + var(--gout,0px))}
.rangerow{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;margin-bottom:2px}
.rangerow>.fsel{margin-bottom:9px;align-self:center}

/* ═══ ABSENCES ═══ */
.absgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:7px}
.absgrid .fval{width:100%;justify-content:flex-start;text-align:left}
@media(max-width:420px){.absgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.absch .out{font-family:var(--f);font-size:11px;font-weight:600;color:#f87171;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);border-radius:4px;padding:0 5px}
.absch-nom{min-width:0}
.absch-nom .abs-n{display:block;margin-top:1px;font-size:10.5px;font-weight:500;color:var(--s400)}
.absch.on .abs-n{color:rgba(134,239,172,.8)}
.abs-aucun-t{flex-basis:100%;font-size:12px;color:var(--s400);line-height:1.45}
/* « X sur le banc » (pipeline/onoff.py) : une ligne par coéquipier coché.
   Le sens se lit en mot + icône + couleur : vert il produit plus quand X est
   sur le banc, orange moins, gris écart faible ou trop peu de minutes. */
.banc-aide{margin-top:10px;font-size:12px;color:var(--s400);line-height:1.45}
.banc-liste{margin-top:10px}
.banc{border:1px solid var(--s800);border-radius:8px;padding:10px 12px;margin-bottom:4px}
.banc.plus{border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.06)}
.banc.moins{border-color:rgba(251,146,60,.35);background:rgba(251,146,60,.06)}
.banc-t{font-size:13px;line-height:1.45;color:var(--s200)}
.banc-pal{font-family:var(--m);font-size:12px;font-weight:800;white-space:nowrap;margin-right:7px}
.banc-s{margin-top:3px;font-size:11.5px;color:var(--s400);line-height:1.45}
.banc-s .t-trig{vertical-align:-3px}
.banc-note{margin-top:3px;font-size:11.5px;color:var(--s300);line-height:1.45}
.banc-det{margin-top:6px}
.banc-det summary{cursor:pointer;font-size:12px;color:var(--em4);width:max-content;max-width:100%}
.banc-det summary:focus-visible{outline:2px solid var(--em);outline-offset:2px;border-radius:4px}
.banc-det .cmp-table{max-width:520px;margin-top:6px}

/* ═══ SITUATIONS DE JEU, PROFIL DE TIR, ZONES ═══ */
.ptbar{display:flex;height:16px;border-radius:8px;overflow:hidden;border:1px solid var(--s800)}
.ptseg{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.ptseg span{font-family:var(--m);font-size:10.5px;font-weight:800;color:rgba(0,0,0,.75);white-space:nowrap}
.pt-score{border:1px solid var(--s800);border-radius:8px;padding:10px 12px;margin:0 0 12px}
.pt-score-h{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;justify-content:space-between}
.pt-score-h .mv-h{margin-bottom:0}
.pt-score-t{font-size:12.5px;color:var(--s300);line-height:1.5;margin-top:5px}
.ptgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.ptcase{padding:10px 12px;border-radius:8px;border:1px solid var(--s800)}
.ptnom{font-size:14px;font-weight:700;color:var(--s200);line-height:1.2}
.ptpct{font-family:var(--m);font-size:15px;font-weight:700;color:#fff;line-height:1.1}
.ptsub{font-size:11px;color:var(--s500)}
.ptdet{font-size:12px;color:var(--s400)}
/* Téléphone : « de ses actions » passe à 9.5 px, sinon il chevauche le nom
   des situations longues (« P&R porteur », « Sortie d'écran ») dès 360 px. */
@media(max-width:560px){
  .ptgrid{gap:6px}
  .ptcase{padding:8px 9px}
  .ptnom{font-size:12.5px;line-height:1.25}
  .ptpct{font-size:14px}
  .ptsub{font-size:9.5px}
  .ptdet{font-size:10.5px}
}
/* Très petit écran (320 px) : une situation par ligne, le nom ne touche plus
   « de ses actions ». */
@media(max-width:340px){.ptgrid{grid-template-columns:minmax(0,1fr)}}
/* « D'où il tire » (ZonesCard) : sa part de tirs (barre neutre), sa réussite
   et le palier de la défense adverse (mot + icône + couleur). Deux colonnes
   sur ordinateur (2 points à gauche, 3 points à droite), une sur téléphone. */
.zt-top{display:flex;align-items:center;justify-content:space-between;gap:0 10px;flex-wrap:wrap;margin-bottom:4px}
.zt-base{font-size:12px;color:var(--s400);line-height:1.45;min-width:0;margin-bottom:9px}
.zt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:8px 12px}
.zt-l{padding:10px 12px;border-radius:8px;border:1px solid var(--s800);min-width:0}
/* Zone rare : en retrait, mais lisible (seuls la part et la barre s'effacent). */
.zt-l.rare .zt-n{color:var(--s400);font-weight:600}
.zt-l.rare .zt-part{color:var(--s400)}
.zt-l.rare .bar-fill{opacity:.35}
.zt-leg{font-size:11px;color:var(--s500);margin:0 0 8px;line-height:1.4}
.zt-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px;min-width:0}
.zt-n{font-size:13.5px;font-weight:700;color:var(--s200);min-width:0}
.zt-pal{font-size:12.5px}
.zt-rare{font-size:11px;color:var(--s400);white-space:nowrap}
.zt-b{display:flex;align-items:center;gap:8px;min-width:0}
.zt-b .bar-track{flex:1;min-width:36px}
.zt-part{font-family:var(--m);font-size:13px;font-weight:700;color:#fff;min-width:38px;text-align:right}
.zt-r{font-size:12px;color:var(--s400);white-space:nowrap;min-width:86px;text-align:right}
.zt-d{font-size:11.5px;color:var(--s400);margin-top:5px;line-height:1.4}
@media(max-width:700px){.zt-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:7px}}
@media(max-width:400px){.zt-l{padding:8px 9px}.zt-n{font-size:13px}.zt-r{font-size:11.5px;min-width:80px}.zt-d{font-size:11px}}
/* Le demi-terrain (ZoneTerrain) : traits fins, zones teintées par SA
   réussite face à la ligue (cinq tons de wrBg, plus pâles où il tire peu),
   le symbole ▲ ● ▼ de la défense du soir écrit devant sa part (jamais la
   couleur seule : la fiche et la liste disent le ton et le palier en mots).
   Sur une zone colorée, les deux chiffres prennent l'encre qui contraste le
   plus avec elle (ztEncreSombre) : blancs détourés, ou noirs sans détour,
   4,58:1 au pire. Les tailles de texte sont
   en pieds (unités du dessin) : 2,7 pieds ≈ 14 px sur un téléphone de
   390 px, ≈ 19 px sur ordinateur. Terrain (sa légende dessous) et fiche de
   la zone côte à côte sur ordinateur, l'un sous l'autre sur téléphone. */
.ztc{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
.ztc-col{min-width:0}
/* Légende sous le terrain : pastilles et libellés à l'encre du texte. Pas de
   nowrap : un libellé trop long pour la ligne passe à la ligne au lieu de
   sortir de la carte (« défense des Timberwolves (favorable, neutre,
   difficile) » dépassait de 39 px à 390 px). */
.ztc-lg{max-width:470px;margin:8px auto 0;display:grid;gap:6px;font-size:12px;line-height:1.35;color:var(--s400)}
.ztc-lg-r{display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;min-width:0}
.ztc-lg-t{flex-basis:100%;color:var(--s300);font-weight:600}
.ztc-lg-i{display:inline-flex;align-items:center;gap:5px;min-width:0}
.ztc-lg-i b{color:#fff;font-weight:700}
.ztc-lg-p{color:var(--s300);font-size:11px}
.ztc-lg-s{color:var(--s200)}
.ztc-sw{display:inline-block;width:10px;height:10px;border-radius:3px;flex-shrink:0;vertical-align:-1px}
/* Pastille d'un ton : sa forme pâle (peu de tirs) puis pleine, les deux
   bouts de l'intensité sur le terrain (ZT_A0, ZT_A1). */
.ztc-sw.ton{width:18px}
.ztc-sw.pale{width:24px;background:linear-gradient(90deg,rgba(232,232,234,.45),rgba(232,232,234,.95))}
.ztc-sw.hach{background:repeating-linear-gradient(45deg,rgba(154,154,164,.6) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 0 1px var(--s700)}
.zt-ton .ztc-sw{margin-right:5px}
/* Le mot du ton d'un seul tenant : il passe à la ligne entier
   (« nettement au‑dessus »), sans se couper au trait d'union. */
.zt-ton-m{display:inline-block}
.ztc-lg-k b{color:#fff;font-weight:700}
/* Côte à côte dès 760 px, la fiche de la zone large d'au moins 260 px : à
   768 px, le terrain gardait ses 470 px et ne lui en laissait que 164, ses
   valeurs (« 172/275 · 62.5% », « -3.2 pts · en dessous ») sortaient de la
   carte ; c'est le terrain qui rétrécit (374 px à 768). */
@media(min-width:760px){.ztc{grid-template-columns:minmax(0,470px) minmax(260px,1fr)}}
.ztc-svg{display:block;width:100%;height:auto;max-width:470px;margin:0 auto;overflow:visible;touch-action:manipulation}
.ztc-lignes path,.ztc-lignes circle{fill:none;stroke:var(--s500);stroke-width:1px;vector-effect:non-scaling-stroke}
.ztc-coin{font-family:var(--f);font-size:2.2px;fill:var(--s400);stroke-width:.4px}
.ztc-t{stroke:var(--s700);stroke-width:1px;vector-effect:non-scaling-stroke;transition:fill-opacity .12s}
.ztc-t.ztc-h{stroke:none}
.ztc-z{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.ztc-f{stroke:none;vector-effect:non-scaling-stroke}
.ztc-z.sel .ztc-f{stroke:#fff;stroke-width:2px}
.ztc-z:focus-visible .ztc-f{stroke:#fff;stroke-width:2.5px;stroke-dasharray:4 2}
.ztc-p,.ztc-r,.ztc-coin{text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#0b0b0e;stroke-linejoin:round}
.ztc-p{font-family:var(--m);font-size:2.8px;font-weight:700;fill:#fff;stroke-width:.6px}
.ztc-r{font-family:var(--m);font-size:2.2px;font-weight:500;fill:var(--s300);stroke-width:.5px}
.ztc-ico{font-size:2.3px}
.ztc-z.rare .ztc-p,.ztc-z.rare .ztc-r{fill:var(--s400)}
/* Zone colorée (même trop rare, sous ses hachures) : les deux chiffres à
   l'encre qui contraste le plus avec sa couleur. Le gris des chiffres
   d'une zone sans couleur y tombait à 1,6:1, le petit chiffre sombre à
   3,4:1. */
.ztc-z.clair .ztc-p,.ztc-z.clair .ztc-r{fill:#fff}
.ztc-z.sombre .ztc-p,.ztc-z.sombre .ztc-r{fill:#000;stroke:none}
/* Les six fiches dans la même case, seule la choisie visible : la plus haute
   fixe la hauteur, et passer d'une zone à l'autre ne fait plus sauter la
   suite de la carte (une hauteur minimale de 154 px ne contenait pas la note
   « Rang extrême sans palier » : 35 px de saut sur la Raquette à 390 px). */
.ztc-pile{display:grid;min-width:0}
.ztc-pile>.ztc-info{grid-area:1/1}
.ztc-info.cache{visibility:hidden}
.ztc-info{border:1px solid var(--s800);border-radius:8px;padding:10px 12px;min-width:0}
.ztc-ih{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px;min-width:0}
.ztc-in{font-size:13.5px;font-weight:700;color:var(--s200);min-width:0}
/* Libellés à leur largeur, mais pas plus de la moitié : « Les Timberwolves
   concèdent » ne laissait qu'une soixantaine de pixels aux valeurs à 320 px,
   et le mot du ton en sortait. */
.ztc-dl{display:grid;grid-template-columns:fit-content(50%) minmax(0,1fr);gap:5px 12px;margin:0;font-size:12.5px;line-height:1.4}
.ztc-dl dt{color:var(--s400)}
.ztc-dl dd{margin:0;color:var(--s200);text-align:right;min-width:0}
.ztc-note{font-size:12px;color:var(--s400);margin-top:7px;line-height:1.45}
.ztc-tout{padding:5px 0;min-height:24px;margin-top:8px}
@media(max-width:400px){.ztc-info{padding:9px 10px}.ztc-dl{font-size:12px}}

/* ═══ DUELS ═══ */
.duel-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media(max-width:640px){.duel-g{grid-template-columns:minmax(0,1fr)}}

/* ═══ SCORE DE MATCHUP (palier, ligne de la modale, réglette) ═══
   Vert (favorable) et orange (difficile) ; le sens ne passe jamais par la
   seule couleur : l'icône (▲ / ▼) et le mot le disent aussi. */
.mu-pal{font-weight:600;white-space:nowrap}
.mu-pal.fort{font-weight:800}
/* Score du marché dans l'en-tête de la modale : tête de volet .vstop. */
.mu-ligne{position:relative;margin-top:10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px}
.mu-ligne-g{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0}
.mu-ligne .f{font-size:14px;font-weight:700;color:#fff}
.mu-ligne .f b{font-family:var(--m);font-size:18px;font-weight:800;letter-spacing:-.01em}
.mu-ligne .f small{font-family:var(--m);font-size:11px;font-weight:700;opacity:.75;margin-left:1px}
.mu-ligne-u{font-family:var(--m);font-size:12px;font-weight:700}
.mu-ligne-d{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mu-ligne .t-trig{align-self:center}
.mu-ligne.vide{font-size:13px;color:var(--s400);justify-content:flex-start}
/* Réglette du score sous le titre de la liste */
.reglette{position:relative;margin:0 0 16px;max-width:560px}
.reglette-t{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.reglette-n{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--s500);display:inline-flex;align-items:center}
.reglette-a{font-size:12px;font-weight:500;color:var(--em)}
.reglette-a:hover{text-decoration:underline}
.reglette-b{display:flex;height:6px;border-radius:99px;overflow:hidden;gap:2px}
.reglette-s{display:block;height:100%}
.reglette-l{display:flex;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;margin-top:5px;font-family:var(--m);font-size:10.5px;line-height:1.2;white-space:nowrap}
.reglette-l span{flex:0 0 auto!important}
/* Les défenses en face (en-tête du match choisi dans la liste) */
.mu-eq{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--s300);padding:12px 16px;margin:0 0 16px;border:1px solid var(--s800);border-radius:.75rem;background:var(--s900)}
.mu-eq-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--s500)}
.mu-eq-i{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mu-eq-i b{color:#fff;font-weight:700}
.mu-eq-r{color:var(--s400);font-size:12.5px}
.mu-eq-sep{color:var(--s500);margin-right:4px}
.mu-eq-lien{margin-left:auto;color:var(--em);font-size:12px;font-weight:500;white-space:nowrap}
@media(max-width:560px){.mu-eq-sep{display:none}.mu-eq-i{flex-basis:100%}}
@media(min-width:561px){.mu-eq{column-gap:18px}.mu-eq-sep{display:none}}

/* ═══ DIVERS ═══ */
/* Conteneur qui défile à l'horizontale : dégradé + chevron tant qu'il reste
   du contenu à droite (classe defil-plus posée par le composant Defilant). */
.defil{position:relative;max-width:100%;min-width:0}
.defil>*:first-child{max-width:100%}
.defil::after{content:'';position:absolute;top:0;bottom:0;right:0;width:44px;pointer-events:none;opacity:0;transition:opacity .15s;
  background:linear-gradient(90deg,rgba(10,10,12,0),rgba(10,10,12,.92) 70%);border-radius:0 99px 99px 0}
.defil-fl{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:20px;line-height:1;color:var(--em);pointer-events:none;opacity:0;transition:opacity .15s}
.defil.defil-plus::after,.defil.defil-plus .defil-fl{opacity:1}
.defil-seg{display:inline-block;vertical-align:top}
/* Bandeaux d'état des données (BandeauDonnees) : l'encadré .info du tennis
   (vert) en bandeau pour l'intersaison, la démonstration, le début de saison ;
   l'ambre #fbbf24 du tennis seulement pour un avertissement (.warn : données
   en retard, blessures indisponibles) ; l'encadré .warning du tennis (rouge)
   pour une erreur. */
.osbanner{background:rgba(251,191,36,.08);border-bottom:1px solid rgba(251,191,36,.2);color:#fbbf24;font-size:13px;text-align:center;padding:9px 16px;font-weight:600;line-height:1.5}
.osbanner strong{font-weight:800}
.osbanner.info{background:rgba(74,222,128,.05);border-bottom-color:rgba(74,222,128,.2);color:#4ade80}
.osbanner.err{background:rgba(239,68,68,.08);border-bottom-color:rgba(232,96,80,.2);color:#ef4444}
.osretry{margin-left:10px;border:1px solid currentColor;background:transparent;color:inherit;border-radius:8px;padding:3px 12px;font:inherit;font-weight:700;cursor:pointer}
.osretry:hover,.osretry:focus-visible{background:rgba(255,255,255,.08)}
.majstamp{font-size:12px;color:var(--s500);margin-top:6px}
/* Bouton « ↑ » (haut de page) des pages longues : celui de trackrecord.html,
   archetypes.html et methodologie.html du tennis, valeur pour valeur (rond
   vert de 44 px à 24 px du bas et de la droite, au-dessus du contenu, visible
   au-delà de 400 px de défilement : haut.js). Contour de focus en plus. */
#scrollTop{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:#4ade80;color:#000;border:none;cursor:pointer;font-weight:700;display:none;align-items:center;justify-content:center;z-index:90;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:all .2s;font-size:18px}
#scrollTop:focus-visible{outline:2px solid var(--em);outline-offset:2px}
/* En bas de page, le bouton cachait la fin de la ligne légale du pied de page
   (« … non affilié à la NBA ni à ses équipes »), et la page ne pouvait pas
   défiler plus bas. Le pied de page des pages qui l'ont garde sa place sous
   sa dernière ligne : 24 px sous le bouton, ses 44 px, 16 px d'air. */
body:has(#scrollTop) .me-footer{padding-bottom:84px}
/* Sous-onglets de la section Défenses (Défense vs poste · Les 30 équipes) :
   l'interrupteur .ssw du tennis, en liens. */
.sous-onglets{display:inline-flex;border:1px solid var(--s700);border-radius:8px;overflow:hidden;margin:18px 0 0;max-width:100%}
.sous-onglets a{background:transparent;color:var(--s400);padding:8px 16px;font-size:13px;font-weight:600;font-family:var(--f);white-space:nowrap}
.sous-onglets a:hover{color:var(--s300)}
.sous-onglets a[aria-current="page"]{background:var(--s800);color:#e8e8ea}
.sous-onglets a:focus-visible{outline:2px solid var(--em);outline-offset:-2px}
/* Pages légales : mentions-legales.html du tennis (titre, sommaire, sections
   numérotées à filet vert, avertissement). */
.legal{max-width:760px;margin:0 auto;padding:48px 24px 80px;font-size:16px;color:#e8e8ea}
.legal h1{font-size:28px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.legal .sub{font-size:15px;color:var(--s500);margin-bottom:48px}
.legal h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:40px 0 16px;color:var(--em);padding-top:16px;border-top:1px solid #1e2028}
.legal h3{font-size:16px;font-weight:600;margin:24px 0 8px}
.legal p,.legal li{font-size:14px;color:var(--s400);line-height:1.8;margin-bottom:12px}
.legal ul{padding-left:20px;margin-bottom:16px}
.legal strong{color:#e8e8ea}
.legal a{color:var(--em)}
.legal .warning{background:rgba(239,68,68,.08);border:1px solid rgba(232,96,80,.2);border-radius:10px;padding:20px 24px;margin:24px 0}
.legal .warning p{color:var(--red);font-weight:600;margin:0}
/* Mentions encore à remplir : en ambre, tant qu'elles ne le sont pas. */
.legal .a-completer{color:#fbbf24;font-weight:700}
.toc{background:var(--s900);border:1px solid #1e2028;border-radius:12px;padding:24px;margin-bottom:40px}
.toc-title{font-size:14px;font-weight:600;color:#e8e8ea;margin-bottom:12px}
.toc a{display:block;font-size:13px;color:var(--em);padding:4px 0}
.toc a:hover{text-decoration:underline}
.toc a:focus-visible{outline:2px solid var(--em);outline-offset:2px;border-radius:4px}

/* ─ Performance vs style adverse (StyleCard) ─
   Réplique de la carte « 🎯 Performance vs style adverse » de MatchUp Tennis
   (tabArch d'app.html). Les règles .sec, .sec h3, .grid2, .ssw ci-dessus sont
   désormais celles de toutes les cartes ; restent ici ses derniers matchs. */
/* Derniers matchs : barre repliable sur téléphone, liste toujours visible à
   partir de 640 px. */
.va-wrap .va-toggle{display:flex;align-items:center;padding:10px 12px;cursor:pointer;border:1px solid var(--s800);border-radius:8px;background:var(--s900);transition:.15s}
.va-wrap .va-toggle:hover{border-color:var(--s700)}
.va-wrap .va-list{display:none}
.va-wrap.open .va-list{display:block}
.va-wrap.open .va-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
@media(min-width:640px){
  .va-wrap .va-toggle{display:none}
  .va-wrap .va-list{display:block!important;margin-top:0!important}
}
/* Les <div> cliquables du tennis sont ici de vrais boutons (clavier,
   aria-expanded) : mise à zéro de leur style de bouton, rendu identique. */
button.va-toggle{width:100%;margin:0;font:inherit;color:inherit;text-align:start}
.va-toggle:focus-visible,.va-rb:focus-visible{outline:2px solid var(--em);outline-offset:-2px}

/* Équipe (EqBadge) : un rond à ses couleurs, le sigle dedans, puis le nom. Sans logo. */
.eq-b{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;vertical-align:middle;font-weight:700;color:#fff}
.eq-rond{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;
  border:2px solid;box-sizing:border-box;font-size:7.5px;font-weight:800;letter-spacing:-.02em;line-height:1}
.mhd-ctx .eq-b{font-size:12px}.mhd-ctx .eq-rond{width:20px;height:20px;font-size:6.5px}
/* En-tête de match des volets : les deux équipes, l'heure, le joueur offert */
.tg-lib{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tg-lib .eq-b{font-size:15px}.tg-lib .eq-rond{width:26px;height:26px;font-size:8px}
.tg-at{color:var(--s500);font-weight:600;font-size:13px}
.tg-h{color:var(--s400);font-weight:600;font-size:12.5px}
.tg-off{font-size:11.5px;font-weight:700;color:var(--em);background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.3);border-radius:99px;padding:2px 9px}
.tg.tg-offert{border-color:rgba(74,222,128,.35)}
@media(max-width:480px){.tg-lib{gap:5px}.tg-lib .eq-b{font-size:14px;gap:5px}.tg-lib .eq-rond{width:22px;height:22px;font-size:7px}}
/* D'où il tire, version simple (ZonesSimple) : un chiffre par zone, trois couleurs */
.zs-n{font-family:var(--m);font-size:3.3px;font-weight:800;fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none;
  paint-order:stroke;stroke:rgba(0,0,0,.3);stroke-width:.45px}
.zs-n.sombre{stroke:rgba(255,255,255,.25)}
.zs-n.sombre{fill:#0a0a0c}
.zs-lg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:10px 0 4px;font-size:12.5px;color:var(--s300)}
.zs-lg-i{display:inline-flex;align-items:center;gap:6px}
.zs-sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.zs-detail{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--s200);text-align:center}
.zs-detail b{color:#fff}

/* Type de shoot, version simplifiée (ShootSimple, ex-essai D) */
.ptd{display:flex;flex-direction:column;gap:12px}
.ptd-h{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;margin-bottom:5px}
.ptd-n{font-size:13px;font-weight:600;color:var(--s200);min-width:0}
.ptd-b{display:flex;align-items:center;gap:8px}
.ptd-b .bar-track{flex:1}
.ptd-p{font-family:var(--m);font-size:13px;font-weight:700;color:#fff;min-width:44px;text-align:right}
.ptd-autres .ptd-n,.ptd-autres .ptd-p{color:var(--s500)}