/* Palette de couleurs */
:root {
  --primary-color: #fff;
  --background-color: #161514;
  --text-color: #fbfbfb;
  --accent-color: #ccc;
  --border-color: #5a5a5a;
  --field-color: #2f2f2f;
  --shadow-color: #000;
  --wnba-color: #FA4616;
  --lightwnba-color: #f7954d;
  --ncaaw-color: #009CDE;
  --lightncaaw-color: #6fd4ff;

  /* ─── Largeur uniforme des pages ───
     80% de la viewport, plafonné à 1600px (= 100rem à font-size 16px,
     = largeur max historique de .league-page). Appliqué à .league-page /
     .team-page / .player-page / .players-page pour cohérence visuelle. */
  --page-width:     80%;
  --page-max-width: 100rem;
}


/* Réinitialisation des styles de base */

* {
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────
   A11y helper : .sr-only — visible uniquement par les screen readers.
   Utilisé pour les <label> des sélecteurs de saison ("Saison" caché
   visuellement mais lu par le SR via for="...Season..."). Pattern WCAG
   standard (= same que Tailwind sr-only).
   ───────────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* HEADER & MENU INDEX */

.header {
  z-index: 1000;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 52px;
  background: var(--background-color);
  box-shadow: 0 0 0.5rem 0 var(--shadow-color);
  padding-left: 1.75rem;
}

.header-container {
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
}

.logo,
.logo:hover {
  padding: 0.35rem 1rem 0.3rem 0;
  width: 125px;
}

.btn {
  background-color: transparent;
  border: 1px solid var(--text-color);
  border-radius: 0.1rem;
  color: var(--text-color);
  padding: 0.6rem 1.2rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 160px;
  text-align: center;
}

.btn:hover {
  background-color: var(--text-color);
  color: var(--background-color);
}

/* HEADER & MENU PBP/STATS */

.tools-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: .4rem;
}

.left-header {
  display: flex;
  align-items: center;
  /* Largeur auto pour accommoder logo + sublogo + nav inline. */
}

.left-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 1rem;
}

.right-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding-right: 1.5rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Header global search (centre)
   Input + dropdown 4 résultats max. Index préchargé via /league/search-index.
   ════════════════════════════════════════════════════════════════════════ */
.header-search-wrap {
  position: relative;
  flex: 0 1 320px;
  max-width: 360px;
  min-width: 200px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #2f2f2f;
  border-radius: 3px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.header-search-wrap:focus-within {
  border-color: #5a5a5a;
  background: rgba(255, 255, 255, 0.06);
}
.header-search-icon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  pointer-events: none;
}
.header-search-wrap:focus-within .header-search-icon {
  color: #ccc;
}
.header-search-input {
  width: 100% !important;     /* override global button{width:100%} cascade */
  background: transparent !important;
  border: none !important;
  padding: 0.45rem 0.6rem 0.45rem 2rem !important;
  margin: 0 !important;
  color: var(--text-color);
  font-family: 'Switzer', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  outline: none;
}
.header-search-input::placeholder {
  color: #6a6a6a;
  font-weight: 400;
}
.header-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Dropdown résultats : absolu sous l'input */
.header-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #161616;
  border: 1px solid #2f2f2f;
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow: hidden;
}
.header-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  color: var(--text-color);
  text-decoration: none;
  font-family: 'Switzer', sans-serif;
  font-size: 0.82rem;
  border-bottom: 1px solid #1f1f1f;
  transition: background 0.1s ease;
  cursor: pointer;
}
.header-search-result:last-child { border-bottom: none; }
.header-search-result:hover,
.header-search-result.is-active {
  background: rgba(250, 70, 22, 0.10);
  color: var(--text-color);
}
.header-search-result-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.header-search-result-name mark {
  background: transparent;
  color: var(--wnba-color);
  font-weight: 700;
}
.header-search-result-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.header-search-kind {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.4rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  color: #888;
}
.header-search-kind-team  { color: #6cc24a; }
.header-search-kind-wnba  { color: var(--wnba-color); }
.header-search-kind-ncaaw { color: #5fa6e0; }
.header-search-sub {
  font-size: 0.7rem;
  color: #888;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.04em;
}

/* Responsive : sous 980px on cache le search (focus sur la nav) */
@media (max-width: 980px) {
  .header-search-wrap { display: none; }
}

/* Label "refresh à HHhMM le JJ/MM/AA" à gauche du bouton Infos data.
   Discret, gris, monospace pour les chiffres → cohérent avec un indicateur
   technique. Caché tant que le fetch /league/health-refresh n'a pas répondu
   (attribut `hidden` en HTML). */
.header-refresh-label {
  font-family: 'Switzer', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #888;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: none;
}

/* ──────────────── Marque "metrics" (wordmark Switzer, remplace l'ancien PNG) ─
   Hiérarchie typo : `metrics` > sublogos `WNBA`/`NCAAW`. Le brand est
   donc plus gros (1.4rem vs 1.2rem) et un peu moins dense (700 vs 800).
   Lowercase + letter-spacing serré = style wordmark moderne (à la Stripe).
   Hover = couleur WNBA pour rappeler la marque sportive. */
.header-brand {
  font-family: 'Switzer', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
letter-spacing: -0.1rem;
  color: var(--text-color, #ddd);
  text-transform: lowercase;
  text-decoration: none;
  line-height: 1;
  user-select: none;
padding: 0 0 0.6rem;
  transition: color 0.2s ease;
}
.header-brand:hover {
  color: var(--text-color);
}

/* ──────────────── Sous-logo WNBA (orange) ────────────────────────────────── */
.header-sublogo {
  font-family: 'Switzer', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.08rem;
    text-transform: uppercase;
    line-height: 1;
    user-select: none;
    margin: 0 -0.3rem;
}

#title-wnba {color: var(--wnba-color);}
#title-ncaaw {color: var(--ncaaw-color);}

/* ──────────────── Séparateurs (· entre brand et WNBA, | entre WNBA et nav) ─ */
.header-sep {
  color: #555;
  font-family: 'Switzer', sans-serif;
  font-size: 0.85rem;
  user-select: none;
  line-height: 1;
}
.header-sep-pipe {
  font-weight: 300;
  margin-left: 0.1rem;
}

/* ──────────────── Nav inline header (PBP / League / Teams / Players) ─────── */
.header-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.header-nav-btn {
  /* hérite déjà de .tools-btn (uppercase, Inter 0.68rem, sharp 2px) */
  text-decoration: none;
  display: inline-block;
}
.header-nav-btn:hover {
  border-bottom-style: solid;  /* éviter dotted hover global sur les <a> */
}

/* ──────────────── Bouton "Infos data" droite du header ──────────────── */
.header-info-btn {
  /* hérite de .tools-btn ; aucune surcharge nécessaire */
}

/* ──────────────── Dialog "Infos data" (popup descriptive) ──────────────── */
/* Réutilise les classes .glossary-dialog du glossaire stats-league pour
   le style de base. Ajustements spécifiques en dessous. */
.header-info-dialog {
  /* Popup élargie pour mieux respirer (avant : 520px). */
  max-width: 720px;
  width: 92vw;
}
.header-info-dialog .glossary-dialog-inner {
  padding: 2rem 2.2rem;
}
.header-info-dialog .glossary-dialog-header h2 {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  margin-bottom: 1.4rem;
}
.header-info-list-simple {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.header-info-list-simple li {
  font-family: 'Switzer', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #ddd;
  padding: 0.4rem 0;
}
.header-info-list-simple strong {
  color: var(--wnba-color);
  font-weight: 800;
  font-size: 1.05rem;
  margin-right: 0.35rem;
  letter-spacing: 0.02em;
}
.header-info-sep {
  color: #555;
  margin: 0 0.45rem 0 0.25rem;
}
.header-info-h3 {
  margin: 1.4rem 0 0.6rem 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wnba-color);
  border-left: 3px solid var(--wnba-color);
  padding-left: 0.6rem;
  line-height: 1.2;
}
.header-info-h3:first-of-type {
  margin-top: 0.6rem;
}

/* ─── Sections "Infos data" (popup header) — état live + process ─── */
.header-info-section {
  margin-bottom: 1.4rem;
}
.header-info-section:last-of-type {
  margin-bottom: 0;
}
.header-info-last {
  font-family: 'Switzer', sans-serif;
  font-size: 1rem;
  margin: 0.3rem 0 0.35rem 0;
  color: #f0f0f0;
  line-height: 1.4;
}
.header-info-last strong {
  font-weight: 700;
  color: #fff;
}
.header-info-age {
  color: #888;
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.header-info-sub {
  margin: 0.4rem 0 0.5rem 0;
  color: #aaa;
  font-size: 0.85rem;
  line-height: 1.55;
}
.header-info-loading {
  color: #777;
  font-style: italic;
  font-size: 0.85rem;
}
.header-info-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.header-info-list > div {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) 1.5fr;
  gap: 0.7rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.header-info-list > div:last-child {
  border-bottom: none;
}
.header-info-list dt {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-color, #ddd);
  font-family: 'Switzer', sans-serif;
}
.header-info-list dd {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #aaa;
}
.header-info-list dd code {
  background: rgba(255, 255, 255, 0.06);
  padding: 0.05rem 0.3rem;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: #ddd;
}
/* BODY */

body {
  background: var(--background-color);
  color: var(--text-color);
  line-height: 1.3;
  font-size: 0.90em;
  margin: 0;
  /* Sticky footer pattern : body en colonne pleine hauteur, le <main>
     prend tout l'espace dispo, le <footer> reste collé en bas même
     quand le contenu est court. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main#appBody {
  flex: 1 0 auto;
}

a {
  color: var(--text-color);
  text-decoration: none;
  padding: 0.8rem 1rem 0.8rem 1rem;
}

a:hover,
a:focus {
  color: var(--background-color);
  text-align: center;
  transition: filter 0.3s ease;
}

/* FIX layout tableau : la règle `a { padding: 0.8rem 1rem }` ci-dessus est
   appliquée globalement et fait exploser la hauteur des cellules de
   tableau (liens joueuses, liens équipes héritent de ~13/16px de padding).
   On l'annule sur les <a> dans les tableaux pour préserver une mise en
   page propre. */
.league-table a {
  padding: 0;
}

/* Titres */

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: 'Switzer', sans-serif;
  letter-spacing: -0.01rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-color);
  display: inline-block;
}

h3 {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Switzer', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-color);
  display: inline-block;
}

h5 {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.04rem;
    color: #888;
    font-style: normal;
    text-transform: uppercase;
    font-style: italic;
    text-align: center;
}

/* Paragraphes */
p {
  margin-bottom: 0.8rem;
  font-size: 0.85rem;
  font-weight: 400;
}

/* Étiquettes */
label {
  display: block;
  font-family: 'Switzer', sans-serif;
  font-weight: 400;
}

#metrics {
  color: #dbdbdb;
  font-size: 11rem;
}

/*MISE EN FORME CONTENU TOOLS */

.tools-main-container {
  flex: 1;
  top: 0;
  left: 0;
  height: 87vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.tools-title-container {
  text-align: justify;
  padding-bottom: 1rem;
}

.tools-main-text {
  font-family: 'Switzer', sans-serif;
font-size: 4.9rem;
    letter-spacing: -0.3rem;
    color: var(--text-color);
    margin: 0;
    line-height: 5.5rem;
    word-spacing: 1rem;
}

.tools-text-container {
  width: 42.5rem;
  margin-left: 0.5rem;
  text-align: justify;
  font-size: 1rem;
  font-weight: 100;
  font-family: "Inter", sans-serif;
  color: #c5c5c5;
  border-top: 1px solid var(--wnba-color);
}

/* MISE EN FORME CONTENU PBP */

.pbp-container {
  z-index: 1;
  position: relative;
  left: 0;
  display: flex;
  max-width: 100%;
  height: 87vh;
  margin: 0 3rem 0 3rem;
}

.pbp-left-pane {
  width: 40%;
  margin: 0;
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  padding-right: 2rem;
}

/* (Le toggle Mode Joueuse / Mode Match a été retiré — le mode "By Match"
   est supprimé en mai 2026 à cause du manque trop fréquent de vidéos.
   Cf historique git si besoin de restaurer.) */

.pbp-right-pane {
  width: 60%;
  overflow-y: auto;
  padding-left: 2rem;
}

.pbp-left-pane,
.pbp-right-pane {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
}

.pbp-left-pane::-webkit-scrollbar,
.pbp-right-pane::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari et Opera */
}


/* MOTEUR PBP */

/* navigation lecteur */
#pbp {
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid;
  border-left: 0;
  border-image: linear-gradient(90deg, #FFB200, #EB5B00, #D91656, #640D5F) 1;
}

/* Leagues */
#pbpSubmit {
  background-color: var(--wnba-color);
}

#pbpSubmit:hover {
  background-color: var(--lightwnba-color);
}

/* MOTEUR */

moteur {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  transition: all 0.2s ease;
}

/* Champs de formulaire */
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
button {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.1rem;
  background-color: var(--field-color);
  color: var(--text-color);
  border: none;
  border-radius: 0.1rem;
  transition: border 0.2s ease;
  cursor: pointer;
  font-size: 0.90em;
  font-family: 'Switzer', sans-serif;
}

input[type="email"] {
  margin-bottom: 1.5rem;
}

select:focus,
input:focus,
button:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Groupes de champs */
fieldset {
  border: 1px solid var(--border-color);
  padding: 1rem;
  border-radius: 0.1rem;
  margin-bottom: 1.5rem;
}

legend {
  padding: 0.5rem 0.8rem 0.4rem 0.8rem;
  font-weight: 600;
  font-size: 1.1rem;
  font-family: 'Switzer', sans-serif;
  color: var(--text-color);
  text-transform: uppercase;
}

#focusExplained {
  font-family: 'Switzer', sans-serif;
}

/* Boutons */
.launch {
  background-color: var(--background-color);
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-top: -1.5rem;
  margin-bottom: 1.5rem;
  padding: 0.8rem;
  display: block;
  width: 100%;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Switzer', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.1rem;
  word-spacing: 0.15rem;
  border-radius: 0.1rem;
}

.launch:hover {
  background-color: var(--field-color);
}

#toggleAOF {
  background-color: var(--text-color);
  color: var(--background-color);
}

#toggleAOF:hover {
  background-color: var(--accent-color);
}

#fromDate,
#toDate {
  font-family: 'Switzer', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  padding: 0.3rem;
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

#center {
  display: flex;
  justify-content: center;
  align-items: center;

}

/* Lecteur vidéo et playlist */
#loadingText {
  font-size: 0.3rem;
  font-family: 'Switzer', sans-serif;
  line-height: 0.5rem;
  text-align: center;
}

#mainVideo {
  position: relative;
  z-index: 1;
}

#videoDescription {
  padding-top: -1rem;
  font-style: italic;
  font-size: 1em;
  font-family: "JetBrains", monospace;
  margin: 0.8rem;
  text-align: center;
}

.carousel-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  margin-top: 1rem;
}

.carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1;
}

.carousel-arrow,
.carousel-arrow:active,
.carousel-arrow:focus {
  color: white;
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 0.1rem;
  cursor: pointer;
}

/* (hover global thead retiré — pas de feedback bg sur les en-têtes.) */

th {
  padding-bottom: 0.3rem;
  border-bottom: 2px dotted var(--text-color);
}

td {
  padding: 0.6rem 0.3rem 0.6rem 0.3rem;
  /* FIX (#2 retours beta) : cursor: pointer retiré du selector global td.
     Avant : TOUTES les cellules de tableau avaient le curseur 'pointer'
     même quand elles n'étaient pas cliquables (= illusion visuelle).
     Maintenant : seuls les éléments cliquables (.player-link, .team-link,
     th[data-sort], tr.is-selectable, etc.) gardent cursor: pointer. */
  border-bottom: 2px dotted var(--border-color);
  font-size: 0.90rem;
}

tr {
  text-align: center;
  max-width: 20px;
}

tr:hover,
tr:active {
  background-color: #383838;
  border-radius: 0.1rem;
}

/* Override : pas de hover sur les sur-titres de groupe (NET/OFFENSE/
   DEFENSE dans Overall, RIM/SMR/LMR/3P dans Offense/Defense, …).
   Ce sont des labels de groupe, pas des rangées interactives. */
.zone-group-row:hover,
.zone-group-row:active {
  background-color: transparent;
}

thead {
  font-family: 'Switzer', sans-serif;
  padding-bottom: 0.2rem;
  text-transform: uppercase;
}

tbody {
  font-family: 'Switzer', sans-serif;
}

#playlist-items {
  font-family: "JetBrains", monospace;
  width: 100%;
}

#close-column {
  padding-bottom: 8rem;
}



/* FOOTER */

footer {
  /* Flow normal — poussé en bas par le `flex: 1` du <main> (sticky
     footer pattern). Plus de position:fixed (qui causait le footer
     "qui remonte" en l'absence de bottom:0). */
  width: 100%;
  flex-shrink: 0;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  border-top: 1px solid var(--border-color);
  padding: 0 0 0 3rem;
  background: var(--background-color);
  height: 3.5rem;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 3rem 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.footer-legal-links a {
  color: #555;
  text-decoration: none;
  padding: 0 !important;
  transition: color 0.15s ease;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus {
  color: #aaa;
}

.textfooter {
  font-weight: 300;
  font-family: 'Switzer', sans-serif;
  font-size: 0.75rem;
  word-spacing: 0.15rem;
  color: #777;
  transition: color 0.2s ease;
  z-index: 1;
}

/* Containers pendant Loading */
#loadingResults {
  display: none;
  width: 40%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  padding: 2rem;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid;
  border-left: 0;
  border-image: linear-gradient(90deg, #FFB200, #EB5B00, #D91656, #640D5F) 1;
  box-shadow: 0 0 0.5rem 0 var(--shadow-color);
  background-color: rgb(69, 69, 69);
  z-index: 2001;
  font-family: 'Switzer', sans-serif;
  color: var(--text-color);
  background: var(--background-color);
}
#videoDesc {
  width: 100%;
}

#loadingResults>div {
  display: inline-block;
  width: 32%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
}

#videoDesc>div {
  display: inline-block;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  height: 3.5rem;
  width: 20%;
  flex-shrink: 0;
}

#videoDesc>p {
  display: inline-block;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  width: 50%;
}

#loadingResults img {
  height: 5rem;
  width: auto;
}

#videoDesc>div>img {
  height: 3.5rem;
  margin: auto;
}

/* Pour le titre playlist + toggle autoplay */
.titre-autoplay {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
}

.toggleCheckbox {
  display: none;
}

.toggleContainer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 2rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.3rem;
  background: #343434;
  cursor: pointer;
  font-weight: bold;
  color: white;
  overflow: hidden;
  border: 3px solid #343434;
  letter-spacing: 0.05rem;
}

.toggleContainer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--accent-color);
  transition: all 0.3s ease;
  z-index: 0;
}

.toggleContainer div {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.toggleCheckbox:checked+.toggleContainer::before {
  left: 50%;
  background: var(--wnba-color);
}

#reset-password {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: 0.5rem;
  top: 0;
}
#reset-popup, #newPwd-popup, #createPwd-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  width: 35%;
  padding: 2rem;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid;
  border-left: 0;
  border-image: linear-gradient(90deg, #FFB200, #EB5B00, #D91656, #640D5F) 1;
  box-shadow: 0 0 0.5rem 0 var(--shadow-color);
  background-color: rgb(69, 69, 69);
  z-index: 2001;
  font-family: 'Switzer', sans-serif;
  color: var(--text-color);
  background: var(--background-color);
}

#popupBackground, #loadingBackground {
  display: none;
  position: fixed;
  top:0px;
  left: 0;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(6px);
  z-index: 2000;
}

/* ===========================================================================
   LEAGUE STATS PAGE
   =========================================================================== */
.league-page {
  padding: 2rem 2.5rem 4rem 2.5rem;
  color: var(--text-color);
  font-family: 'Switzer', sans-serif;
  width: var(--page-width);
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.league-page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

.league-page-title {
  font-family: 'Switzer', sans-serif;
  font-size: 2rem;
  letter-spacing: -0.06rem;
  margin: 0;
  font-weight: 700;
}

.league-page-subtitle {
  color: #888;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.75rem;
  font-family: 'Switzer', sans-serif;
}

.league-page-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.league-page-controls select {
  background: var(--field-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 0.35rem 0.6rem;
  font-family: 'Switzer', sans-serif;
}

.cache-badge {
  font-size: 0.8rem;
  color: #999;
  font-style: italic;
  margin-left: 0.5rem;
}

.error-banner {
  background: rgba(250, 70, 22, 0.15);
  border-left: 3px solid var(--wnba-color);
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem 0;
  font-size: 0.9rem;
}

.league-section {
  margin-bottom: 2rem;
}

.league-section h2 {
  font-family: 'Switzer', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02rem;
  margin: 0;
  border-left: 4px solid var(--wnba-color);
  padding-left: 0.7rem;
  display: inline-block;
}

/* ----- Tabs (Team Stats : Per Game / Opponent / Advanced) --------------- */
.tab-nav {
  display: flex;
  gap: 0.25rem;
  margin: 0;
}

/* Quand la nav est dans le <summary> de la section, on la colle juste
   à droite du h2 et on laisse le chev se pousser à l'extrême droite via
   le margin-left:auto sur .chev. */
.collapsible-section > summary .tab-nav {
  margin-left: 1.25rem;
  margin-right: 0;
}

.collapsible-section > summary .chev {
  margin-left: auto;
}

.tab-btn {
  background: none;
  border: 1px solid #444;
  padding: 0.35rem 0.85rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01rem;
  color: #888;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.tab-btn + .tab-btn {
  margin-left: 0.4rem;
}

/* Séparateur visuel entre groupes d'onglets : point médian discret.
   Marqueur sémantique uniquement (aria-hidden), pas cliquable. */
.tab-sep {
  display: inline-flex;
  align-items: center;
  margin: 0 0.5rem;
  color: #555;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* Dans le contexte des contrôles du <summary>, le parent a déjà un
   `gap: 0.7rem` entre items ; on supprime le margin propre du séparateur
   pour ne pas doubler l'espacement. */
.summary-controls .tab-sep {
  margin: 0;
}

.tab-btn:hover {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.04);
  border-color: #666;
}

.tab-btn.active {
  color: var(--text-color);
  font-weight: 600;
  border-color: var(--wnba-color);
}

.tab-panel[hidden] {
  display: none;
}

/* ----- Glossary button + dialog ---------------------------------------- */
.glossary-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: #aaa;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  font-style: italic;
  padding: 0.3rem 0.7rem;
  margin: 0 0 1rem 0;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.glossary-btn:hover {
  color: var(--text-color);
  border-color: var(--text-color);
  background: rgba(255, 255, 255, 0.04);
}

.glossary-dialog {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--background-color);
  color: var(--text-color);
  padding: 0;
  max-width: 520px;
  width: calc(100% - 2rem);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.glossary-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.glossary-dialog-inner {
  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
}

.glossary-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.glossary-dialog-header h2 {
  margin: 0;
  font-family: 'Switzer', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01rem;
}

.glossary-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s ease, background 0.15s ease;
}

.glossary-close:hover {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.05);
}

.glossary-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.glossary-list > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.glossary-list dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--wnba-color);
  font-weight: 500;
}

.glossary-list dd {
  margin: 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-color);
}

/* ----- Column tooltips (au survol des en-têtes de tableaux) ------------ */
.col-tooltip {
  position: absolute;
  background: #1a1a1a;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 0.45rem 0.65rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
  max-width: 240px;
  border-radius: 4px;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* ----- Card / Collapsible (HTML5 <details>/<summary>) ------------------- */
.league-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.league-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: var(--field-color);
  border-bottom: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.league-card > summary::-webkit-details-marker { display: none; }
.league-card > summary::marker { content: ""; }

/* (hover bg sur summary retiré — feedback uniquement via cursor:pointer.) */

.league-card[open] > summary {
  border-bottom-color: var(--border-color);
}

/* Chevron en CSS pur (border tricks) — pas d'Unicode, compatible Windows. */
.league-card .chev {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid currentColor;
  opacity: 0.65;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

.league-card[open] > summary .chev {
  transform: rotate(180deg);
}

/* Mention "à jour à HHhMM aujourd'hui" / "mises à jour tous les jours à 14h"
   à côté du titre des sections (CLASSEMENT, LEAGUE STATS). Style discret,
   en italique, légèrement effacé. */
.section-updated-at {
  font-family: 'Switzer', sans-serif;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-left: 0.7rem;
  align-self: center;
  white-space: nowrap;
}
.section-updated-at:empty {
  display: none;
}

.card-body {
  padding: 1rem;
}

.card-body.scrollable {
  max-height: 520px;
  overflow-y: auto;
  padding: 0;
}

.card-body.scrollable .league-table {
  border: none;
}

.card-body.scrollable .table-wrap,
.card-body .table-wrap {
  border: none;
  border-radius: 0;
}

/* Section-level collapsible (sections 2-4: full-width tables) */
.collapsible-section {
  padding: 0;
}

.collapsible-section > summary {
  padding: 0.95rem 1.2rem;
}

.collapsible-section > summary h2 {
  font-size: 1.1rem;
}

.collapsible-section .card-body {
  padding: 1rem 1.2rem 1.2rem 1.2rem;
}

/* ----- Section 1 — Overview grid (Standings | Scoreboard) ---------------
   Ratio Standings:Schedule = 2:1 (Standings ~66%, Schedule ~33%). Le
   Schedule étant compact (5 cellules par row), on lui laisse moins de
   place et on donne plus à Standings pour accueillir la colonne « Forme ».
   La hauteur du card-body Schedule est synchronisée en JS sur celle de
   Standings (voir `syncOverviewHeights` dans stats-league.js). */
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

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

/* Standings table specifics — sticky header inside scrollable card */
.standings-table thead th {
  background: var(--field-color);
}

/* ----- Colonne « Form » (5 derniers résultats) -------------------------- */
.standings-table td.col-form {
  text-align: center;
  white-space: nowrap;
}

.form-dots {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.form-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: #555;            /* fallback gris (état inconnu) */
}
/* FIX (#4 retours beta) : les modificateurs --w / --l n'étaient pas définis
   → dots invisibles. Couleurs : vert WNBA pour W, rouge pour L. */
.form-dot.form-dot--w {
  background: #6cc24a;         /* vert (= "pos" dans la palette) */
  border-color: rgba(108, 194, 74, 0.45);
}
.form-dot.form-dot--l {
  background: #ff6b6b;         /* rouge (= "neg" dans la palette) */
  border-color: rgba(255, 107, 107, 0.45);
}

.form-empty {
  color: #555;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.78rem;
}

.game-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  padding: 0.15rem 0;
}

.game-row.winner {
  font-weight: 600;
  color: var(--text-color);
}

.game-row:not(.winner) {
  color: #bbb;
}

.team-abbr {
  font-family: 'Switzer', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04rem;
  color: var(--wnba-color);
}

.team-name {
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 2.2rem;
  text-align: right;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 2px;
}

.league-table {
  /* width: auto → la table prend sa taille intrinsèque (largeur des cellules
     selon leur contenu). max-width: 100% pour ne pas déborder du .table-wrap
     côté layout, mais .table-wrap a overflow-x: auto qui activera un scroll
     si les colonnes refusent de se réduire au-delà de min-content.
     margin: 0 auto centre la table dans le wrap quand elle est plus étroite. */
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-family: 'Switzer', sans-serif;
}

.league-table thead th {
  background: var(--field-color);
  color: var(--text-color);
  font-weight: 600;
  text-align: right;
  padding: 0.55rem 0.6rem;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
  position: sticky;
  top: 0;
  user-select: none;
}

.league-table thead th.col-team {
  text-align: left;
}

/* (hover bg sur thead retiré — feedback uniquement via cursor:pointer.) */

.league-table thead th.sort-asc::after { content: " ▲"; font-size: 0.75em; }
.league-table thead th.sort-desc::after { content: " ▼"; font-size: 0.75em; }

.league-table tbody td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid #444;
  text-align: right;
  white-space: nowrap;
}

.league-table tbody td.col-team {
  text-align: left;
  font-weight: 500;
}

.league-table tbody td.rank {
  text-align: center;
  color: #aaa;
  width: 2.5rem;
}

.league-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

.league-table tbody tr:hover td {
  background: rgba(250, 70, 22, 0.08);
}

.league-table tbody td.num {
  font-variant-numeric: tabular-nums;
}

.league-table tbody td.pos { color: #6cc24a; }
.league-table tbody td.neg { color: #ff6b6b; }

/* Anciennes règles `.rk` retirées : le badge rang LEAGUE utilise désormais
   les mêmes classes `.pct.pct-{hi,mhi,mid,mlo,lo}` que les centiles joueuses
   (cf bloc plus bas + withRankBadge dans utils.js). Single source of truth. */

/* Un peu de respiration verticale dans les cellules avec badge sous la valeur */
.league-table tbody td.num {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.league-table .empty-row {
  text-align: center;
  color: #888;
  padding: 1.5rem;
  font-style: italic;
}

.league-footnote {
  text-align: center;
  color: #777;
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 2rem;
}

/* ===========================================================================
   REFONTE V2 — Sportstats look & feel
   ---------------------------------------------------------------------------
   Override CSS only. Layout, grid, et palette de couleurs préservés.
   Objectif : densité, précision, mono numerics, hiérarchie typographique
   plus marquée — type ESPN / play-by-play.
   =========================================================================== */

/* -- Page wrapper : un poil plus dense, accent top sur le titre ----------- */
.league-page {
  padding: 1.6rem 2.2rem 3.5rem 2.2rem;
}

.league-page-header {
  margin-bottom: 1.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--wnba-color);
  position: relative;
}

.league-page-header::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 2px;
  background: var(--text-color);
}

.league-page-title {
  font-family: 'Switzer', sans-serif;
  font-size: 1.2rem;
  letter-spacing: -0.04rem;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
}

/* "League." en accent */
.league-page-title::first-letter {
  /* no-op, tutoiement de Webkit */
}

.league-page-subtitle {
  color: #9a9a9a;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  margin-left: 0;
  font-family: 'Switzer', sans-serif;
  border-left: 1px solid #555;
  padding-left: 0.85rem;
}

.cache-badge {
  font-size: 0.7rem;
  color: #888;
  font-style: normal;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.04rem;
  margin-left: 0.4rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid #444;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
}

.league-page-controls {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  color: #aaa;
  font-weight: 600;
}

.league-page-controls select {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #555;
  border-radius: 2px;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  letter-spacing: 0.04rem;
  text-transform: none;
  color: var(--text-color);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.league-page-controls select:hover,
.league-page-controls select:focus {
  border-color: var(--wnba-color);
  outline: none;
}

/* -- Section / Card : crispier, plus de contraste ------------------------- */
.league-card {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid #3d3d3d;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}

.league-card > summary {
  padding: 0.7rem 1rem;
  background: #252525;
  border-bottom: 1px solid #2a2a2a;
}

/* (hover bg sur summary retiré — feedback uniquement via cursor:pointer.) */

.league-card[open] > summary {
  border-bottom: 1px solid #2a2a2a;
}

.league-section h2,
.collapsible-section > summary h2,
.section-title {
  font-family: 'Switzer', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  border-left: 3px solid var(--wnba-color);
  padding-left: 0.7rem;
  line-height: 1.2;
}

/* `.section-title` — variante utilisable en standalone (= sur n'importe
   quel h2 hors d'une .league-section / .collapsible-section). Hérite des
   mêmes règles via le sélecteur multiple ci-dessus, et reset un margin
   bas raisonnable pour servir de titre de bloc autonome. */
.section-title {
  margin: 2.5rem 0 1rem 0;
  font-size: 1.2rem;
}

.league-card .chev {
  font-size: 0.7rem;
  color: #888;
}

.collapsible-section > summary {
  padding: 0.85rem 1.1rem;
}

/* -- Tabs : sportstats look (sharper) ------------------------------------- */
.tab-btn {
  border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border: 1px solid #3f3f3f;
      border-top-color: rgb(63, 63, 63);
      border-right-color: rgb(63, 63, 63);
      border-bottom-color: rgb(63, 63, 63);
      border-left-color: rgb(63, 63, 63);
color: #a9a9a9;
    background: rgba(0, 0, 0, 0.15);
}

.tab-btn:hover {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.04);
  border-color: #5a5a5a;
}

.tab-btn.active {
  color: var(--text-color);
  background: rgba(250, 70, 22, 0.1);
  border-color: var(--wnba-color);
}

/* ──────────────── Skeleton loader (chargement tableaux) ────────────────
   Pattern : on injecte des <tr class="skeleton-row"> avec des <td><span
   class="skeleton-cell"> pendant le fetch. Le shimmer CSS donne l'effet
   "lecture en cours" sans afficher de valeurs incomplètes. Les tables
   réelles ne s'affichent qu'au swap final, atomique (Promise.all).
   Le skeleton réutilise la même hauteur de ligne que les rows joueuses
   (38px via .players-section-player-stats td) pour éviter tout layout
   shift au remplacement.
*/
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.league-table tbody tr.skeleton-row td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid #2a2a2a;
}
.skeleton-cell {
  display: inline-block;
  width: 100%;
  max-width: 60px;
  height: 0.85rem;
  vertical-align: middle;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 2px;
}
/* Variante 1ère cellule (col-team) : barre plus large pour matcher un nom. */
.league-table tbody tr.skeleton-row td.col-team .skeleton-cell {
  max-width: 120px;
}
/* Tableau en mode loading : cache toute interaction (cursor + clics) sur
   les rows skeleton pour éviter les hover bleus parasites. */
.league-table tbody tr.skeleton-row {
  pointer-events: none;
}
.league-table tbody tr.skeleton-row td {
  background: transparent !important;
}

/* -- Tables : densité + mono numerics ------------------------------------- */
.table-wrap {
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  /* Scroll interne : thead + ligne d'agrégat (LIGUE/TEAM) restent visibles
     pendant qu'on scrolle dans le corps du tableau. La hauteur max ~70vh
     évite que les très gros tableaux (50+ lignes joueuses) débordent.
     overflow:auto active à la fois scroll-y et scroll-x si la table déborde. */
  max-height: 70vh;
  overflow: auto;
}

/* LEAGUE Team stats — 15 franchises max + ligne LIGUE → ~17 lignes total.
   Pas de scroll vertical pour que tout soit visible d'un coup.
   overflow-x: auto conservé pour les tables très larges (Shooting 24 cols).
   Cible : les .table-wrap contenant un <table id="team-…-table"> (Basics,
   Overall, Net, Offense, Defense, Shooting, Opp Shooting). */
.table-wrap:has(> table[id^="team-"][id$="-table"]) {
  max-height: none;
  overflow-y: visible;
}

/* ═════════════════════════════════════════════════════════════════════════
   STICKY HORIZONTAL — colonnes # (Rank) + Team (page LEAGUE)
   ─────────────────────────────────────────────────────────────────────────
   Même mécanique que sur PLAYERS (cf bloc plus bas) : largeurs fixes +
   position:sticky + backgrounds opaques + z-index hiérarchique. Couvre
   les 7 tableaux League stats (#team-*-table). PAS la Standings (qui a
   sa propre structure et ne déborde pas horizontalement).
   ═════════════════════════════════════════════════════════════════════════ */
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) th[data-sort="rank"],
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) td.rank {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  position: sticky;
  left: 0;
  background: var(--background-color);
  z-index: 2;
}
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) th.col-team,
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) td.col-team {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  position: sticky;
  left: 44px;
  background: var(--background-color);
  z-index: 2;
  box-shadow: inset -1px 0 0 #2f2f2f;
}
/* Even row + hover : backgrounds opaques (cf bloc PLAYERS pour le détail). */
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) tbody tr:nth-child(even) td.rank,
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) tbody tr:nth-child(even) td.col-team {
  background: #1a1918;
}
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) tbody tr:hover td.rank,
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) tbody tr:hover td.col-team {
  background: #232220;
}
/* Thead : sticky vertical + horizontal (coin haut-gauche, z=4). */
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) thead th[data-sort="rank"],
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) thead th.col-team {
  z-index: 4;
  background: #363636;
}

.league-table {
  font-size: 0.82rem;
}

.league-table thead th {
  background: #363636;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08rem;
  font-weight: 700;
  color: #cfcfcf;
  /* Hauteur déterministe (line-height + padding) → 30px total.
     Permet à la ligne LIGUE/TEAM (sticky à top:30px sur thead 1 ligne,
     top:56px sur thead 2 lignes) de se caler pile sous le thead, sans gap
     ni overlap. */
  line-height: 14px;
  padding: 8px 0.55rem 7px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  /* z-index 3 → reste au-dessus de la ligne LIGUE/TEAM (z-index 2) qui
     stick aussi en haut quand le tableau scrolle en interne. */
  z-index: 3;
  white-space: nowrap;
}
/* Thead à 2 lignes (zone-group-row sur Overall / Offense / Defense / Shooting) :
   - 1ère ligne (groupes) sticky à top:0
   - 2ème ligne (colonnes) sticky en dessous, à top:26px (≈ hauteur zone-group-row) */
.league-table thead .zone-group-row th {
  top: 0;
  z-index: 4;
}
.league-table:has(thead .zone-group-row) thead tr:not(.zone-group-row) th {
  top: 25px;
}

.league-table thead th.col-team {
  letter-spacing: 0.12rem;
}

.league-table.sortable thead th[data-sort] {
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

/* Hover sur les titres de colonnes triables : feedback subtil pour
   indiquer la cliquabilité (tri ascendant/descendant). */
.league-table.sortable thead th[data-sort]:hover {
  background: linear-gradient(180deg, #4a4a4a 0%, #3c3c3c 100%);
  color: #fff;
}

.league-table thead th.sort-asc::after,
.league-table thead th.sort-desc::after {
  font-size: 0.65em;
  margin-left: 0.2rem;
  color: var(--wnba-color);
}

.league-table tbody td {
  padding: 0.42rem 0.55rem;
  border-bottom: 1px solid #5d5d5d;
  font-variant-numeric: tabular-nums;
}

.league-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.018);
}

.league-table tbody tr:hover td {
  background: rgba(153, 153, 153, 0.07);
  box-shadow: inset 1px 0 0 #7D7D7D;
}

/* ──────────────── Hover de colonne (cell-coverage) ────────────────
   FIX (#5 retours beta) : on a retiré le `background` global appliqué à
   toute la colonne — il donnait l'illusion que la ligne du dessus de la
   cellule hover était aussi highlighted (= effet moustache verticale).
   Maintenant : juste 2 bordures verticales légères pour identifier la
   colonne ; le fond ne s'allume que sur la cellule au croisement
   ligne × colonne (= focal point). */
.league-table tbody td.is-col-hover,
.league-table thead th.is-col-hover {
  box-shadow: inset 1px 0 0 #555, inset -1px 0 0 #555;
}
/* Combo hover ligne × colonne : seul la cellule au croisement a un fond. */
.league-table tbody tr:hover td.is-col-hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 1px 0 0 #888, inset -1px 0 0 #888;
}

.league-table tbody tr:hover td:first-child {
  /* le hover-bar ne se dédouble pas sur la 1ère colonne */
}

.league-table tbody td.col-team {
  font-family: 'Switzer', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01rem;
  font-size: 0.85rem;
  border-right: 1px solid #2c2c2c;
}

.league-table tbody td.num {
  /* Inter avec font-variant-numeric: tabular-nums → alignement colonne
     impeccable des chiffres (largeur fixe par glyphe), sans tomber dans
     le look "code" d'une mono pure. Switzer fallback si Inter pas chargé. */
  font-family: 'Inter', 'Switzer', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "lnum";
  font-size: 0.98rem;
  letter-spacing: -0.005rem;
  font-weight: 500;
}

.league-table tbody td.rank {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.80rem;
  color: #999;
  font-weight: 600;
}

/* Top-3 standings bling */
.standings-table tbody tr:nth-child(1) td.rank {
  color: var(--wnba-color);
  font-weight: 700;
}
.standings-table tbody tr:nth-child(2) td.rank,
.standings-table tbody tr:nth-child(3) td.rank {
  color: var(--lightwnba-color);
}

/* ─────────────────────────────────────────────────────────────────────────
   Percentile badges (joueuses + rangs équipes) — affichés sous chaque
   valeur stat. Style commun via la classe `.pct` ; le contenu varie
   selon le contexte :
     - PLAYERS / NCAAW : centile 0..100 (5 buckets selon valeur)
     - LEAGUE          : rang 1..N (5 buckets selon position dans le classement)
   Aligné via withPctBadge / withRankBadge dans utils.js — mêmes classes.
   ─────────────────────────────────────────────────────────────────────────
   Affichés sous chaque valeur stat des lignes joueuses (PLAYERS WNBA,
   PLAYERS NCAAW, et lignes joueuses des tableaux TEAM). Remplace l'ancien
   ─────────────────────────────────────────────────────────────────────────
   Affichés sous chaque valeur stat des lignes joueuses (PLAYERS WNBA,
   PLAYERS NCAAW, et lignes joueuses des tableaux TEAM). Remplace l'ancien
   rang 1-N. Couleur par quintile :
     ≥80 vert | 60-80 vert clair | 40-60 neutre | 20-40 orange | <20 rouge
*/
.league-table tbody td .pct {
  display: block;
  margin-top: 0.18rem;
  font-family: 'Inter', 'Switzer', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "lnum";
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  /* Aligné à droite comme la valeur stat au-dessus (cells .num en right). */
  text-align: right;
}
/* Couleurs par quintile. */
.league-table tbody td .pct.pct-hi  { color: #6cc24a; }
.league-table tbody td .pct.pct-mhi { color: #a3c855; }
.league-table tbody td .pct.pct-mid { color: #999;    }
.league-table tbody td .pct.pct-mlo { color: #f7a96c; }
.league-table tbody td .pct.pct-lo  { color: #ff6b6b; }

.team-abbr {
  font-family: 'Switzer', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06rem;
  color: var(--wnba-color);
}

.team-name {
  font-size: 0.86rem;
  font-weight: 500;
  color: #d6d6d6;
}

.game-row.winner .team-name,
.game-row.winner .team-score {
  color: var(--text-color);
}

.game-row:not(.winner) .team-name {
  color: #8a8a8a;
}

.team-score {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02rem;
  min-width: 2.4rem;
}

/* -- Misc polishing ------------------------------------------------------- */
.error-banner {
  border-left-width: 3px;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02rem;
}

.league-table .empty-row {
  font-style: normal;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
  color: #777;
  text-transform: uppercase;
}

.league-footnote {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.04rem;
  color: #6a6a6a;
  text-transform: uppercase;
  margin-top: 2.5rem;
  border-top: 1px solid #333;
  padding-top: 1rem;
}

/* Glossary : aligne typographique avec le reste */
.glossary-btn {
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 2px;
  padding: 0.32rem 0.7rem;
  border-color: #4a4a4a;
}

.glossary-btn:hover {
  border-color: var(--wnba-color);
  color: var(--wnba-color);
  background: rgba(250, 70, 22, 0.05);
}

/* Sticky-header polish in scrollable cards */
.card-body.scrollable {
  max-height: 540px;
}

/* Standings : nombre d'équipes fixe (15) — pas besoin de scroll, on
   ajuste pile à la hauteur du contenu (sinon une scrollbar fantôme de
   ~10 px apparaît à cause du max-height ci-dessus). */
.card-body.scrollable:has(.standings-table) {
  max-height: none;
  overflow-y: visible;
}

.card-body.scrollable::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.card-body.scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.card-body.scrollable::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 3px;
}
.card-body.scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--wnba-color);
}

/* -- Team logos ----------------------------------------------------------- */
/* Logo inline à côté du nom d'équipe dans les tableaux et game cards.
   Servi via le CDN officiel WNBA (cdn.wnba.com), avec fallback display:none
   piloté par l'attribut onerror du <img>. */
.team-logo {
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 0.7rem;
  object-fit: contain;
  /* léger filter pour rester lisible sur le fond sombre — la majorité des
     logos WNBA ont déjà un contour blanc, mais pour ceux qui n'en ont pas
     une fine drop-shadow blanche aide à les détacher. */
  filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.4));
}

.league-table tbody td.col-team .team-logo {
  width: 40px;
  height: 40px;
  margin-right: 0.75rem;
}

/* Standings : taille compacte initiale (densité d'info élevée — 12 lignes
   dans une card étroite, on garde 20px pour ne pas dominer la cellule). */
.standings-table tbody td.col-team .team-logo {
  width: 20px;
  height: 20px;
}

/* (Anciennes règles .team-logo--game / .game-row supprimées —
   le composant Schedule a été refondu avec son propre namespace .scd-*
   en bas du fichier, totalement autonome.) */


.game-row .team-abbr {
  grid-column: 2;
}

.game-row .team-name {
  grid-column: 3;
}

.game-row .team-score {
  grid-column: 4;
}


/* =========================================================================
   REFONTE V2 — PBP sportstats look
   --------------------------------------------------------------------------
   Aligne la page Play-by-Play sur la même grammaire visuelle que la page
   League (densité, JetBrains Mono pour les chiffres, gradients sobres,
   bordures à 2px de border-radius, accents orange légers). On ne touche
   pas à la disposition (left-pane / right-pane), uniquement aux skins.
   ========================================================================= */

/* -- Container & panes ---------------------------------------------------- */
.pbp-container {
  margin: 0 2.5rem;
  gap: 0;
}

.pbp-left-pane {
  border-right: 0px;
  padding-right: 1.5rem;
}

.pbp-right-pane {
padding: 0 1.5rem 0;
background-color: #0b0b0b;
}

/* -- Champs de formulaire (select, input, button par défaut) -------------- */
moteur select,
moteur input[type="text"],
moteur input[type="email"],
moteur input[type="password"],
moteur input[type="number"],
moteur input[type="date"] {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #3a3a3a;
  color: var(--text-color);
  border-radius: 2px;
  padding: 0.5rem 0.6rem;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

moteur select {
  font-family: 'Switzer', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02rem;
}

moteur select:hover,
moteur input:hover {
  border-color: #5a5a5a;
}

moteur select:focus,
moteur input:focus {
  outline: none;
  border-color: var(--wnba-color);
  background: rgba(0, 0, 0, 0.4);
}

/* -- Fieldsets : carrés, sobres, accent orange à gauche ------------------- */
moteur fieldset {
  border: 1px solid #3a3a3a;
  border-left: 2px solid #3a3a3a;
  border-radius: 2px;
  padding: 0.85rem 1rem 0.95rem 1rem;
  margin-bottom: 1.25rem;
  background: rgba(255, 255, 255, 0.012);
  transition: border-left-color 0.18s ease;
}

moteur fieldset:hover {
  border-left-color: var(--wnba-color);
}

moteur legend {
  font-family: 'Switzer', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  color: #cfcfcf;
  padding: 0 0.5rem;
  border-left: 3px solid var(--wnba-color);
  padding-left: 0.55rem;
  margin-left: -0.1rem;
}

#focusExplained {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04rem;
  color: #888;
  font-style: normal;
  text-transform: uppercase;
}

/* -- Bouton Launch : grand, propre, accent orange au hover ---------------- */
/* Background flat (sans linear-gradient) pour aligner sur l'identité visuelle
   des pages de stats (LEAGUE/TEAM/PLAYERS) qui utilisent des surfaces solides
   #363636 / #2a2a2a. L'ancien dégradé 180deg #2a2a2a → #1f1f1f était un
   héritage des premières versions, retiré pour cohérence. */
.launch {
  background: #2a2a2a;
  border: 1px solid #3f3f3f;
  border-radius: 2px;
  padding: 0.75rem 1rem;
  font-family: 'Switzer', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16rem;
  color: var(--text-color);
  text-transform: uppercase;
  transition: all 0.18s ease;
  margin-top: -0.6rem;
  margin-bottom: 1.4rem;
}

.launch:hover {
  background: rgba(250, 70, 22, 0.12);
  border-color: var(--wnba-color);
  color: var(--wnba-color);
}

/* -- Toggle Advanced Optional Filters : style tab pill -------------------- */
#toggleAOF {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #3f3f3f;
  border-radius: 2px;
  color: #aaa;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  transition: all 0.15s ease;
}

#toggleAOF:hover {
  border-color: var(--wnba-color);
  color: var(--wnba-color);
  background: rgba(250, 70, 22, 0.06);
}

/* -- Inputs date du AOF --------------------------------------------------- */
#fromDate,
#toDate {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  font-size: 0.72rem;
  padding: 0.45rem 0.6rem;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-color);
  border: 1px solid #3a3a3a;
  border-radius: 2px;
}

#fromDate:focus,
#toDate:focus {
  border-color: var(--wnba-color);
  outline: none;
}

/* -- Bouton league pill (#pbpSubmit dans #pbp) -------------------------- */
#pbp {
  border-bottom: 1px solid #2c2c2c;
  border-image: none;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

#pbp button,
#pbpSubmit {
  display: inline-block;
  border-radius: 2px;
  font-family: 'Switzer', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  border: 1px solid transparent;
  margin: 1.2rem 0.4rem;
  transition: all 0.15s ease;
}

#pbpSubmit {
  background-color: var(--wnba-color);
  border-color: var(--wnba-color);
}
#pbpSubmit:hover {
  background-color: var(--lightwnba-color);
  border-color: var(--lightwnba-color);
}

/* -- Lecteur vidéo -------------------------------------------------------- */
.titre-autoplay {
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16rem;
  color: #888;
  margin-bottom: 0.4rem;
}

#mainVideo {
  border: 1px solid #2c2c2c;
  border-radius: 2px;
  background: #000;
}

#videoDescription,
#videoDesc {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.02rem;
  color: #b8b8b8;
  text-align: center;
  margin: 0.7rem 0.4rem;
  padding: 0.5rem 0.6rem;
  border-left: 2px solid #3a3a3a;
  border-right: 2px solid #3a3a3a;
}

#loadingText {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: #888;
  text-align: center;
  margin: 0.4rem 0;
}

/* -- Carousel ------------------------------------------------------------- */
.carousel-container {
  margin-top: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid #2c2c2c;
  border-bottom: 1px solid #2c2c2c;
}

.carousel-arrow {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #3a3a3a !important;
  color: #aaa;
  font-size: 1.1rem;
  padding: 0.5rem 0.7rem;
  border-radius: 2px;
  width: auto;
  transition: all 0.15s ease;
}

.carousel-arrow:hover {
  border-color: var(--wnba-color) !important;
  color: var(--wnba-color);
  background: rgba(250, 70, 22, 0.06);
}

/* -- Table playlist (#playsTable / #playlist-items) ----------------------- */
/* table-layout: fixed + width contraint sur les colonnes Date / Matchup /
   Period évite que la colonne Description (souvent longue, parfois sans
   espaces : "FT Free Throw 1 of 2 by Allyson...") force le tableau à
   déborder du conteneur. La colonne Description prend ce qui reste et
   wrap proprement via overflow-wrap. */
#playsTable {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 1rem;
  font-size: 0.8rem;
}

#playsTable thead {
  font-family: 'Switzer', sans-serif;
  text-transform: uppercase;
}

#playsTable thead th {
  /* Background flat aligné sur le style des pages de stats — l'ancien
     linear-gradient 180deg #2c2c2c → #232323 était un héritage retiré
     pour cohérence visuelle. */
  background: #2c2c2c;
  font-size: 0.66rem;
  letter-spacing: 0.1rem;
  font-weight: 700;
  color: #cfcfcf;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--wnba-color);
  border-top: 1px solid #2c2c2c;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

/* Widths fixes des 3 colonnes étroites — Description prend le reste. */
#playsTable thead th:nth-child(1) { width: 5.5rem; }   /* Date */
#playsTable thead th:nth-child(2) { width: 7rem; }     /* Matchup */
#playsTable thead th:nth-child(3) { width: 3.5rem; }   /* Period */
/* (Description = 4ème colonne : prend la largeur restante.) */

#playsTable tbody td,
#playlist-items td {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.01rem;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid #2a2a2a;
  font-variant-numeric: tabular-nums;
  color: #d6d6d6;
  cursor: pointer;
  /* Permet aux mots longs (ex. "AllysonLopezSenechal") de couper proprement
     pour rester dans la cellule au lieu de pousser le tableau. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Header Date cliquable pour trier asc/desc — feedback hover + indicateur ▲▼. */
#playsTable thead th.sortable-date {
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease, background 0.12s ease;
}
#playsTable thead th.sortable-date:hover {
  color: var(--wnba-color);
  background: #353535;
}
#playsTable thead th.sortable-date.sort-asc::after { content: " ▲"; font-size: 0.7em; color: var(--wnba-color); }
#playsTable thead th.sortable-date.sort-desc::after { content: " ▼"; font-size: 0.7em; color: var(--wnba-color); }

#playsTable tbody tr:nth-child(even) td,
#playlist-items tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.018);
}

#playsTable tbody tr:hover td,
#playlist-items tr:hover td {
  background: rgba(250, 70, 22, 0.07);
  box-shadow: inset 3px 0 0 var(--wnba-color);
  color: var(--text-color);
}

#playsTable tbody tr.active td,
#playlist-items tr.active td {
  background: rgba(250, 70, 22, 0.12);
  box-shadow: inset 3px 0 0 var(--wnba-color);
  color: var(--text-color);
}

/* Re-skin générique pour les autres tables qui pourraient hériter du
   défaut PBP — on garde la cohérence sportstats. */
table:not(.league-table):not(.standings-table) thead th {
  border-bottom: 1px solid var(--wnba-color);
  font-family: 'Switzer', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  font-size: 0.68rem;
  color: #cfcfcf;
}

/* -- Scrollbars custom pour les panes PBP --------------------------------- */
.pbp-left-pane,
.pbp-right-pane {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a transparent;
}

.pbp-left-pane::-webkit-scrollbar,
.pbp-right-pane::-webkit-scrollbar {
  display: block;
  width: 4px;
  height: 4px;
}

.pbp-left-pane::-webkit-scrollbar-track,
.pbp-right-pane::-webkit-scrollbar-track {
  background: transparent;
}

.pbp-left-pane::-webkit-scrollbar-thumb,
.pbp-right-pane::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 2px;
}

.pbp-left-pane::-webkit-scrollbar-thumb:hover,
.pbp-right-pane::-webkit-scrollbar-thumb:hover {
  background: var(--wnba-color);
}

/* -- #center : tagline / texte central ------------------------------------ */
#center {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: #888;
}

/* (Anciennes règles Schedule .schedule-* / .sched-* supprimées —
   refonte complète en namespace .scd-* autonome en bas du fichier.) */

/* ─────────────────────────────────────────────────────────────────────────
   League stats — Contrôles dans le <summary>
   (toggle TEAM/OPP + bouton Glossaire poussés tout à droite, juste avant
   le chevron de collapse).
   ───────────────────────────────────────────────────────────────────────── */
.collapsible-section > summary .summary-controls {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

/* Quand summary-controls est présent, le chev n'a plus besoin du
   margin-left:auto par défaut ; il vient juste après le wrapper. */
.collapsible-section > summary .summary-controls + .chev {
  margin-left: 0.7rem;
}

/* Le glossary-btn dans la summary : pas de margin (le wrapper gère le gap). */
.collapsible-section > summary .glossary-btn {
  margin: 0;
}

/* Le tableau colle aux onglets : on retire le padding-top du card-body
   uniquement pour les sections qui ont des contrôles dans le <summary>
   (plus de toolbar entre les deux). */
.collapsible-section:has(.summary-controls) > .card-body {
  padding-top: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Zone TOOLS — barre auxiliaire (Glossaire à droite, badges informatifs).
   Le filtre vs Top 5 / vs Bottom 5 a été déplacé dans la nav du dessus
   (cf. .tools-toggle dans .summary-controls). La barre TOOLS contient
   désormais : badge informatif à gauche (quand mode filtré sur onglet
   non-filtrable) et Glossaire à droite.
   ───────────────────────────────────────────────────────────────────────── */
.tools-bar {
  display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0rem;
    margin: 0 0 0.6rem;
  border-bottom: 1px solid #2a2a2a;
}

.tools-group {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

/* Pousse le bloc à droite (Glossaire) à l'extrême droite, indépendamment
   de la présence du badge à gauche. */
.tools-group-right {
  margin-left: auto;
}

/* ─── Glossaire en zone tools (FIX #11 retours beta) ───
   Le Glossaire est désormais un .tools-btn standard dans tools-group-right.
   Pas de styling spécifique nécessaire — il hérite simplement de la
   typographie/couleur/hover des autres tools-btn. La classe
   .tools-glossary-btn est laissée comme hook si on veut le mettre en
   évidence (= sera utilisé pour un accent subtil dégradé orange).
   L'ancienne .league-card-footer (= bouton tout en bas) est conservée
   comme legacy non utilisée (= 0 occurrence dans le markup actuel). */
.league-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid #2e2e2e;
}
.league-card-footer .glossary-btn {
  margin: 0;
  width: auto;
}
/* Accent subtil sur le Glossaire en tools-bar pour qu'il soit findable
   (= un peu plus marqué que les autres tools-btn neutres). Texte orange
   discret pour signaler que c'est une aide / documentation. */
.tools-glossary-btn {
  color: var(--accent-orange, #FA4616);
  border-color: rgba(250, 70, 22, 0.35);
}
.tools-glossary-btn:hover {
  background: rgba(250, 70, 22, 0.08);
  border-color: rgba(250, 70, 22, 0.6);
}

/* Badge informatif (visible en mode filtré sur Offense/Defense/Shooting). */
.tools-note {
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  font-style: italic;
  color: #888;
  line-height: 1.35;
}
.tools-note strong {
  color: #ddd;
  font-weight: 600;
  font-style: normal;
}

/* ─────────────────────────────────────────────────────────────────────────
   Filtres TOOLS — chips, bouton "+ Ajouter filtre", Reset, popover.
   Aligné sur le design system existant :
     - sharp 2px border-radius (cf .tools-btn, .tab-btn)
     - Inter 0.65-0.7rem, weight 600-700, letter-spacing 0.08-0.1rem
     - palette #3f3f3f / #888 / #aaa pour les neutres
     - var(--wnba-color) pour les états actifs/danger
   ───────────────────────────────────────────────────────────────────────── */
.tools-filters-group {
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.4rem;
}

.tools-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

/* Chip = un filtre actif. Même grammaire visuelle que .tools-btn mais
   non-cliquable globalement (la croix interne est l'action). */
.tools-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid #3f3f3f;
  border-radius: 2px;
  padding: 0.3rem 0.55rem 0.3rem 0.7rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: var(--text-color);
  line-height: 1;
  white-space: nowrap;
}

/* Croix de retrait dans une chip — micro-bouton discret. */
.tools-chip-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 0.6;
  padding: 0 0.15rem;
  opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.tools-chip-close:hover { opacity: 1; }
.tools-chip-close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 1px;
  opacity: 1;
}

/* Cluster "FILTRE [+]" : duo visuel inséparable où FILTRE est un
   label inert (non cliquable, pas de hover) et "+" est le seul trigger.
   Espacement minimal entre les deux pour signaler qu'ils forment un
   seul élément fonctionnel — à la manière d'un onglet + son icone. */
.tools-filter-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Label inline pour les contrôles dans .summary-controls
   (ex: "Min poss" avant l'input numérique du bloc Lineups). Aligné
   visuellement sur .tools-filter-label, légèrement adapté pour suivre
   un input. */
.tools-inline-label {
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #888;
  line-height: 1;
  cursor: default;
  user-select: none;
  margin-right: 0.4rem;
}

/* ===== Rotation heatmap (page TEAM, bloc collapsible "Rotation · Heatmap") =====
   Viz SVG bicouche : opacité=présence × teinte=usage par joueuse × segment.
   Pilotée par team-rotation.js. Le SVG est généré dynamiquement avec
   les classes ci-dessous. */
/* Toolbar globale du bloc TENDANCES : sélecteur de stat qui pilote
   à la fois la sparkline et la heatmap. Posée au-dessus des 2 cols. */
.rotation-global-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Layout 2 colonnes du bloc TENDANCES : 50/50.
   Pattern aligné sur `.team-three-cols` du bloc INFOS. Séparateur
   vertical marqué entre les 2 colonnes (border-left sur la droite).
   Sur écrans étroits (< 900px), reflow vertical via media query. */
.rotation-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 50/50 strict */
  gap: 2rem;
  align-items: start;
  margin-top: 0.5rem;
}
.rotation-col {
  display: flex;
  flex-direction: column;
  min-width: 0;     /* permet au SVG enfant de réduire/scroller */
}
.rotation-col-trends {
  padding-left: 2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
/* Reflow en stack vertical sur écrans étroits (< 900px). */
@media (max-width: 900px) {
  .rotation-two-cols {
    grid-template-columns: 1fr;
  }
  .rotation-col-trends {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 1rem;
  }
}

/* Header par colonne : titre + toolbar contextuelle (controls propres à la col). */
.rotation-col-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.rotation-col-header .team-col-title {
  margin: 0;
  flex: 0 0 auto;
}
.rotation-col-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  white-space: nowrap;
}
/* Boutons Period (10 derniers / Saison) — version compacte fine. */
.rotation-col-toolbar .tab-nav {
  flex-wrap: nowrap;
}
.rotation-col-toolbar .tab-btn {
  padding: 0.25rem 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Les 2 wrappers (heatmap + trends) sont responsive : le SVG prend la
   largeur du conteneur (calculée en JS via clientWidth). Pour la heatmap,
   ça ajuste la largeur des cells. Si l'espace devient trop petit
   (< CELL_MIN), un scroll horizontal s'active. */
.rotation-heatmap-wrap,
.rotation-trends-wrap {
  padding-bottom: 0.5rem;
  overflow-x: auto;
}
.rotation-heatmap-wrap > svg,
.rotation-trends-wrap > svg {
  display: block;
  /* Pas de `width: 100%` ici : la largeur précise est posée en JS via
     l'attribut `width` du <svg>, qui correspond à clientWidth du wrap.
     Comme ça le viewBox = pixel mapping est 1:1 (pas de scaling). */
}
.rotation-heatmap {
  display: block;
  /* Pas de min-width: 100% — on garde la taille intrinsèque du SVG
     (width/height en pixels posés en JS). Le scroll horizontal du
     wrap parent prendra le relai si la heatmap dépasse la largeur. */
  font-family: 'Switzer', sans-serif;
  font-size: 0.85rem;   /* unité de référence pour les rem des <text> enfants */
}
/* Couches A (fond gris) et B (overlay orange) : pas de stroke par
   défaut (le hover passe par la hitbox).
   `rx`/`ry` : border-radius natif SVG (supporté en CSS moderne) — appliqué
   aux 3 couches pour qu'elles aient toutes les coins arrondis. */
.rotation-heatmap .rot-cell-bg,
.rotation-heatmap .rot-cell-usage {
  pointer-events: none;
  rx: 2px;
  ry: 2px;
}
/* Hitbox transparente : reçoit le hover. */
.rotation-heatmap .rot-cell-hit {
  stroke: transparent;
  stroke-width: 1;
  cursor: pointer;
  transition: stroke 0.12s ease, stroke-width 0.12s ease;
  rx: 2px;
  ry: 2px;
}
.rotation-heatmap .rot-cell-hit:hover {
  stroke: var(--wnba-color, #FA4616);
  stroke-width: 1.5;
}
/* Noms joueuses : hérite du `font-size` du parent `.rotation-heatmap`
   (= 0.85rem, aligné sur `.league-table`). */
.rotation-heatmap .rot-player-label {
  font-weight: 500;
  fill: var(--text-color, #fbfbfb);
}
/* FIX (#13 retours beta) : nom cliquable dans la heatmap rotation
   → wrap SVG <a> autour du <text>. Hover : orange WNBA. */
.rotation-heatmap .rot-player-link {
  cursor: pointer;
  text-decoration: none;
}
.rotation-heatmap .rot-player-link:hover .rot-player-label {
  fill: var(--wnba-color, #FA4616);
  text-decoration: underline;
}
/* Header QT/OT : aligné sur la taille des noms (0.75rem). */
.rotation-heatmap .rot-qt-label {
  font-size: 0.75rem;
  font-weight: 600;
  fill: var(--text-color, #fbfbfb);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rotation-heatmap .rot-qt-label.rot-ot-label {
  fill: var(--wnba-color, #FA4616);
}
/* ───── Panneau sparkline (col gauche : SAISON) ─────
   Mono-graph multi-courbes : toutes les joueuses superposées dans la
   même zone Y, labels noms à gauche, hover bidirectionnel. */

/* Box englobante de la zone graphique : très discrète, juste un cadre. */
.rotation-heatmap .rot-spark-box {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}
/* Header (label de la stat + league avg numérique). */
.rotation-heatmap .rot-spark-head {
  font-size: 0.72rem;
  font-weight: 600;
  fill: var(--text-color, #fbfbfb);
  letter-spacing: 0.03em;
}
/* Courbes individuelles : gris translucide par défaut.
   - `fill: none` essentiel sur les <path> (sinon Bezier ferme la forme)
   - pointer-events sur le tracé seulement pour permettre de hover
     précisément une courbe parmi N qui se croisent. */
.rotation-heatmap .rot-spark-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  cursor: pointer;
  pointer-events: visibleStroke;
  transition: stroke 0.12s ease, stroke-width 0.12s ease;
}
.rotation-heatmap .rot-spark-line.is-hover {
  stroke: var(--wnba-color, #FA4616);
  stroke-width: 3.2;
}
/* Ligne horizontale league avg (1 seule pour toute la zone). */
.rotation-heatmap .rot-spark-avg {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 0.8;
  stroke-dasharray: 3 3;
}
/* Grille (lignes horizontales aux ticks Y, verticales aux ticks X). */
.rotation-heatmap .rot-spark-grid {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}
.rotation-heatmap .rot-spark-grid-x {
  stroke-dasharray: 1 3;
}
/* Labels des ticks numériques. */
.rotation-heatmap .rot-spark-axis-y,
.rotation-heatmap .rot-spark-axis-x {
  font-size: 0.62rem;
  fill: #888;
  letter-spacing: 0.02em;
}

/* Séparateurs verticaux pointillés entre les QTs. Visible mais discret. */
.rotation-heatmap .rot-quarter-divider {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.rotation-heatmap .rot-quarter-divider.rot-reg-ot-divider {
  /* Frontière regulation → OT plus marquée, en orange */
  stroke: var(--wnba-color, #FA4616);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

/* Tooltip flottant. Positionné en JS au mousemove. */
.rotation-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: rgba(15, 15, 15, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  color: #eee;
  min-width: 11em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
.rotation-tooltip .rot-tip-name {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.15em;
}
.rotation-tooltip .rot-tip-seg {
  color: #aaa;
  font-size: 0.72rem;
  margin-bottom: 0.4em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rotation-tooltip .rot-tip-stat {
  color: #ccc;
  line-height: 1.3;
}
.rotation-tooltip .rot-tip-stat strong {
  color: var(--wnba-color, #FA4616);
}
/* Mention discrète "échantillon faible" dans le tooltip USG */
.rotation-tooltip .rot-tip-warn {
  color: #999;
  font-style: italic;
  font-weight: 400;
  font-size: 0.72rem;
}

/* Méta-info dynamique (ex: "27 / 232 lineups" mis à jour aria-live).
   Style discret pour ne pas voler la vedette aux contrôles. */
.tools-meta {
  font-family: 'Switzer', sans-serif;
  font-size: 0.72rem;
  color: #888;
  letter-spacing: 0.02rem;
  white-space: nowrap;
}

/* Label "FILTRE" — visuel uppercase aligné sur les autres labels de
   contrôles (cf .tab-btn) mais NON CLIQUABLE. */
.tools-filter-label {
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: #888;
  line-height: 1;
  cursor: default;
  user-select: none;
}

/* Toggle PERIODE : ouvre la date-popover. Hérite intégralement de
   .tools-btn (sharp 2px, Inter 0.68rem, weight 600, letter-spacing
   0.08rem, uppercase). `width: auto` neutralise le `button { width:
   100% }` global qui rendrait le bouton pleine largeur. */
.tools-date-btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.tools-date-btn .tools-date-range {
  /* Mini-affichage compact de la plage active, à droite du label. */
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.62rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}
.tools-date-btn.has-range {
  color: var(--wnba-color);
  background: rgba(250, 70, 22, 0.08);
  border-color: var(--wnba-color);
}
.tools-date-btn.has-range:hover {
  background: rgba(250, 70, 22, 0.14);
}
.tools-date-btn[aria-expanded="true"] {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.1);
  border-color: #888;
}

/* Bouton "+" qui ouvre la popover : compact (icone), même grammaire
   visuelle que les autres .tools-btn (sharp 2px, padding réduit,
   typo agrandie pour aligner le "+"). */
.tools-add-btn {
  padding: 0.3rem 0.55rem;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.8;
  text-transform: none;
  min-width: 1.8rem;
}
.tools-add-btn[aria-expanded="true"] {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.1);
  border-color: #888;
}

/* COMPARER / CHARTS : toggles activés → accent WNBA. */
.tools-compare-btn.active,
.tools-chart-btn.active {
  color: var(--wnba-color);
  background: rgba(250, 70, 22, 0.08);
  border-color: var(--wnba-color);
}
.tools-compare-btn.active:hover,
.tools-chart-btn.active:hover {
  background: rgba(250, 70, 22, 0.14);
}

/* PLAYOFFS : bascule RS ↔ PO. Style identique aux toggles COMPARER/CHARTS
   actifs (accent WNBA) pour la cohérence visuelle des outils. */
.tools-po-btn.active,
.tools-po-btn[aria-pressed="true"] {
  color: var(--wnba-color);
  background: rgba(250, 70, 22, 0.08);
  border-color: var(--wnba-color);
}
.tools-po-btn.active:hover,
.tools-po-btn[aria-pressed="true"]:hover {
  background: rgba(250, 70, 22, 0.14);
}

/* ─────────────────────────────────────────────────────────────────────────
   CHARTS — scatter plot SVG sous le tableau.
   En mode CHARTS actif, les en-têtes de colonnes filtrables (data-chart-key)
   deviennent cliquables et changent de curseur. Premier clic = X, second = Y.
   ───────────────────────────────────────────────────────────────────────── */
.league-table thead th.chart-pickable {
  cursor: cell;
  position: relative;
}
.league-table thead th.chart-pickable:hover {
  color: var(--wnba-color);
}
.league-table thead th.chart-axis-x,
.league-table thead th.chart-axis-y {
  color: var(--wnba-color);
  /* Fond opaque obligatoire : la cellule est sticky en haut du conteneur
     scrollable. Avec rgba(…, 0.08) on voyait les lignes joueuses défiler
     derrière. Mix précalculé : #363636 (thead bg) + 8% de #FA4616. */
  background: #463833;
}
.league-table thead th.chart-axis-x::after { content: " X"; font-size: 0.7em; opacity: 0.85; }
.league-table thead th.chart-axis-y::after { content: " Y"; font-size: 0.7em; opacity: 0.85; }

/* Chart dialog : popup fond blanc / texte noir (cassure volontaire avec
   le thème sombre — facilite la lecture du chart et le rendu en PNG). */
.chart-dialog {
  border: none;
  padding: 0;
  background: #ffffff;
  color: #111;
  max-width: 880px;
  width: 92vw;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.chart-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}
.chart-dialog-inner {
  padding: 1rem 1.2rem 1.2rem;
}
.chart-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.7rem;
  margin-bottom: 0.85rem;
}
/* (variant header-bare retiré : on est revenu au header avec titre HTML.) */
.chart-dialog-title {
  margin: 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  color: #111;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.chart-title-brand { color: #111; }
.chart-title-accent { color: var(--wnba-color); }
.chart-title-sep { color: #888; font-weight: 400; }
.chart-title-axes { color: #111; letter-spacing: 0.1rem; }
.chart-dialog-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.chart-dialog-download,
.chart-dialog-close {
  background: transparent;
  border: 1px solid #999;
  color: #111;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 2px;
  cursor: pointer;
  width: auto;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chart-dialog-download:hover,
.chart-dialog-close:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}
.chart-dialog-close {
  font-size: 1rem;
  font-weight: 400;
  padding: 0.2rem 0.55rem;
  line-height: 1;
}
/* Bouton de téléchargement réduit à une icône. */
.chart-dialog-download {
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.2rem 0.55rem;
  line-height: 1;
  letter-spacing: 0;
}

.chart-dialog-body {
  background: #ffffff;
  position: relative;
  width: 100%;
}
.chart-dialog-body svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  background: #ffffff;
}
.chart-empty-hint {
  padding: 2rem 1rem;
  color: #555;
  font-style: italic;
  text-align: center;
}

/* Popover "Ajouter un filtre" — même grammaire que la card (sharp 2px,
   bordure #3f3f3f). Fond plus clair que le body pour bien se décoller
   visuellement (le #0c0c0c initial était trop proche du body sombre). */
.filter-popover {
  position: absolute;
  z-index: 50;
  min-width: 290px;
  background: #2c2c2c;
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  padding: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.filter-popover[hidden] { display: none; }

.filter-popover-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.filter-popover-row-inline {
  flex-direction: row;
  align-items: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.filter-popover label {
  font-family: 'Switzer', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  color: #888;
}

/* Inputs/selects : background plus sombre que la popover pour garder
   du contraste (les champs ressortent sur le fond #2c2c2c). */
.filter-popover-select,
.filter-popover-input {
  background: #1a1a1a;
  border: 1px solid #4a4a4a;
  color: var(--text-color);
  padding: 0.35rem 0.5rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.75rem;
  border-radius: 2px;
  min-width: 0;
  line-height: 1.1;
  transition: border-color 0.15s ease;
}
.filter-popover-select:hover,
.filter-popover-input:hover {
  border-color: #6a6a6a;
}
.filter-popover-select:focus,
.filter-popover-input:focus {
  outline: none;
  border-color: var(--wnba-color);
}
.filter-popover-op { width: 3.6rem; flex: 0 0 auto; }
.filter-popover-input { flex: 1 1 2.2rem; min-width: 4rem; }
.filter-popover-unit {
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #888;
  min-width: 0.8rem;
  padding-bottom: 0.35rem;
}

.filter-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.filter-popover-cancel,
.filter-popover-add {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid #3f3f3f;
  border-radius: 2px;
  padding: 0.35rem 0.9rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #888;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.filter-popover-cancel:hover {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.04);
  border-color: #5a5a5a;
}
.filter-popover-add {
  color: var(--wnba-color);
  border-color: rgba(250, 70, 22, 0.55);
}
.filter-popover-add:hover {
  color: var(--wnba-color);
  border-color: var(--wnba-color);
  background: rgba(250, 70, 22, 0.08);
}

/* Lien sur le nom d'équipe (cellules .col-team de Standings et League).
   Hérite la couleur du parent (pas de couleur de hover), au survol
   on souligne en pointillés pour signaler la cliquabilité.
   En mode COMPARER, le lien est désactivé pour permettre de cocher
   les lignes sans déclencher de navigation. */
.team-link {
  color: inherit;
  text-decoration: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}
.team-link:hover,
.team-link:focus {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.is-compare-mode .team-link {
  pointer-events: none;
  cursor: inherit;
  color: inherit;
  text-decoration: none;
}

/* Lien sur le nom d'une joueuse (cellules .col-team avec slug BBR exposé).
   Même comportement que .team-link : couleur héritée, soulignement
   pointillé orange (.--wnba-color) au survol. Le mode COMPARER désactive
   le lien (cohérent avec .team-link). */
.player-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s ease;
  cursor: pointer;
}
.player-link:hover,
.player-link:focus {
  color: inherit;
  border-bottom-color: var(--wnba-color);
}
body.is-tps-compare-mode .player-link,
body.is-compare-mode .player-link {
  pointer-events: none;
  cursor: inherit;
  color: inherit;
  border-bottom-color: transparent;
}

/* Lignes sélectionnées : background WNBA semi-transparent + barre
   verticale gauche accent. Cohérent avec la chip "N équipes sélectionnées". */
.league-table tbody tr.is-selectable {
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.league-table tbody tr.is-selectable:hover:not(.is-selected) {
  background: rgba(255, 255, 255, 0.025);
}
.league-table tbody tr.is-selected {
  background: rgba(250, 70, 22, 0.08) !important;
  box-shadow: inset 3px 0 0 var(--wnba-color);
}
.league-table tbody tr.is-selected:hover {
  background: rgba(250, 70, 22, 0.13) !important;
}

.tools-toggle {
  display: inline-flex;
  gap: 0.35rem;
}

.tools-btn {
  background: rgba(0, 0, 0, 0.18);
    border: 1px solid #3f3f3f;
    border-radius: 2px;
    padding: 0.3rem 0.7rem;
    font-family: 'Switzer', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    color: #a9a9a9;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.tools-btn:hover:not(.active) {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.04);
  border-color: #5a5a5a;
}

.tools-btn.active {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.1);
  border-color: #888;
}

.tools-btn:focus-visible {
  outline: 1px solid #888;
  outline-offset: 2px;
}

/* Stub désactivé — bouton dont la feature n'est pas encore branchée
   (ex : Compare / Filter+ sur la page PLAYER). Visuellement grisé,
   cursor not-allowed, opacity réduite. Le tooltip natif `title=` du
   bouton explique "Coming soon". */
.tools-btn.is-stub-disabled,
.tools-btn[disabled].is-stub-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto;  /* On garde pointer-events pour que le tooltip
                            natif title= s'affiche au hover. */
}
.tools-btn.is-stub-disabled:hover {
  color: #a9a9a9;        /* pas de hover state, on reste sur la couleur de base */
  background: rgba(0, 0, 0, 0.18);
  border-color: #3f3f3f;
}

/* -- Side toggle (TEAM / OPP) & Scale toggle (Per Game / Per 100) --------
   Calés sur le style des .tab-btn (sharp, uppercase, 0.7rem) mais en
   gradient gris clair / gris foncé pour rester neutres (pas d'orange,
   ce ne sont pas des onglets — juste des toggles de perspective). */
.side-toggle,
.scale-toggle,
.adj-toggle {
  display: inline-flex;
  gap: 0.4rem;
}

/* L'attribut `hidden` doit primer sur `display: inline-flex`. La règle
   de classe a la même spécificité que [hidden] (0,1,0) et étant définie
   après le UA stylesheet, elle l'écrase. On remet `display: none` quand
   l'élément est `hidden` pour rétablir le bon comportement. */
.side-toggle[hidden],
.scale-toggle[hidden],
.adj-toggle[hidden],
.tools-toggle[hidden],
.tools-sep[hidden] {
  display: none;
}

.side-btn,
.scale-btn,
.adj-btn {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid #3f3f3f;
  border-radius: 2px;
  padding: 0.35rem 0.85rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #888;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  line-height: 1;
  white-space: nowrap;
}

.side-btn:hover:not(.active),
.scale-btn:hover:not(.active),
.adj-btn:hover:not(.active) {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.04);
  border-color: #5a5a5a;
}

.side-btn.active,
.scale-btn.active,
.adj-btn.active {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.1);
  border-color: #888;
}

.side-btn:focus-visible,
.scale-btn:focus-visible,
.adj-btn:focus-visible {
  outline: 1px solid #888;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Shot zone column groups (Offense / Defense tabs)
   ───────────────────────────────────────────────────────────────────────── */
.zone-group-row th.zone-group {
  text-align: center;
  font-family: 'Switzer', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  color: #aaa;
  /* Hauteur déterministe (line-height + padding) → 26px total. La rangée
     des colonnes (top:26px) se cale pile dessous, sans gap transparent. */
  line-height: 14px;
  padding: 6px 0.4rem 5px;
  border-bottom: 1px solid #3a3a3a;
  /* Fond opaque obligatoire : la ligne est sticky en haut du conteneur
     scrollable (.table-wrap, max-height:70vh). Sans bg, le contenu des
     lignes joueuses transparaît derrière les titres de groupes. */
  background: #363636;
}

.zone-group-row th.zone-empty {
  /* Même raison que ci-dessus — pas de transparence en mode sticky.
     Et même calage de hauteur (26px) pour rester aligné sur les autres. */
  line-height: 14px;
  padding: 6px 0.4rem 5px;
  background: #363636;
  border-bottom: none;
}

/* Mini-bandes colorées au-dessus des groupes pour distinguer Rim/SMR/LMR/3P
   à l'œil (alignées sur le look minimaliste sportstats). */
.zone-group-row th.zone-rim {
  color: #f7c46c;
  border-bottom-color: rgba(247, 196, 108, 0.5);
}
.zone-group-row th.zone-smr {
  color: #7ad6c2;
  border-bottom-color: rgba(122, 214, 194, 0.5);
}
.zone-group-row th.zone-lmr {
  color: #9bc8f0;
  border-bottom-color: rgba(155, 200, 240, 0.5);
}
/* Mid (agrégé Short Mid + Mid + Long Mid, catalogue 2.0 LEAGUE/ATTAQUE).
   Bleu-vert neutre, à mi-chemin entre SMR (teal) et LMR (bleu pâle). */
.zone-group-row th.zone-mid {
  color: #8ed1d6;
  border-bottom-color: rgba(142, 209, 214, 0.5);
}
.zone-group-row th.zone-three {
  color: #f78a8a;
  border-bottom-color: rgba(247, 138, 138, 0.5);
}

/* Sous-groupes de l'onglet Overall : OFFENSE / DEFENSE.
   Vert pour Offense (build), rouge orangé pour Defense (block). */
.zone-group-row th.zone-off {
  color: #7ed957;
  border-bottom-color: rgba(126, 217, 87, 0.5);
}
.zone-group-row th.zone-def {
  color: #f7a96c;
  border-bottom-color: rgba(247, 169, 108, 0.5);
}

/* Cellules de la zone : background ultra-discret juste pour grouper l'œil. */
.zone-cell.zone-rim {
  background: rgba(247, 196, 108, 0.02);
}
.zone-cell.zone-smr {
  background: rgba(122, 214, 194, 0.02);
}
.zone-cell.zone-lmr {
  background: rgba(155, 200, 240, 0.02);
}
.zone-cell.zone-mid {
  background: rgba(142, 209, 214, 0.02);
}
.zone-cell.zone-three {
  background: rgba(247, 138, 138, 0.02);
}
.zone-cell.zone-off {
  background: rgba(126, 217, 87, 0.02);
}
.zone-cell.zone-def {
  background: rgba(247, 169, 108, 0.02);
}

/* Override pour les .zone-cell.* du thead : le tint rgba ultra-transparent
   (alpha 0.02–0.025) laisse les lignes joueuses transparaître en mode
   sticky-scroll. On force le bg standard du thead (#363636) — les tints
   colorés restent visibles côté tbody, là où ils servent. */
.league-table thead th.zone-cell {
  background: #363636;
}

/* Sur-titres Shooting : 5 catégories distinctes avec liserets colorés.
   Couleurs pensées thématiquement :
     - FGA Distribution : violet (distribution = neutre/structurel)
     - FG% by Distance  : vert  (efficacité produite)
     - Ast'd            : magenta rosé (création / passing)
     - Layups           : jaune (échos zone-rim, proximité du panier)
     - Corner           : rouge (échos zone-three, longue distance) */
.zone-group-row th.zone-fga {
  color: #bda4f0;
  border-bottom-color: rgba(189, 164, 240, 0.5);
}
.zone-group-row th.zone-fgp {
  color: #7ed957;
  border-bottom-color: rgba(126, 217, 87, 0.5);
}
.zone-group-row th.zone-corner {
  color: #f78a8a;
  border-bottom-color: rgba(247, 138, 138, 0.5);
}
/* FIX (#10 retours beta) : zone Top 3 (= Above-the-Break 3).
   Couleur dérivée de zone-corner (= même famille 3PT mais saumon-orangé
   pour distinction visuelle). */
.zone-group-row th.zone-top3 {
  color: #f5b46e;
  border-bottom-color: rgba(245, 180, 110, 0.5);
}
/* FIX R2 P3 #H : zone CS 3 (= Catch-and-Shoot 3pt) et Pull-up 3.
   CS = bleu clair (= shot facile / passé), Pull-up = violet
   (= création perso / off-the-dribble). */
.zone-group-row th.zone-cs {
  color: #8ab4f8;
  border-bottom-color: rgba(138, 180, 248, 0.5);
}
.zone-group-row th.zone-pu {
  color: #c39bd3;
  border-bottom-color: rgba(195, 155, 211, 0.5);
}

/* Backgrounds discrets sur les cells body des nouveaux groupes Shooting
   (Corner). FGA et FG% by Distance n'ont pas de bg propre
   car leurs cells sont déjà colorées par leur bucket distance (rim/smr/lmr/three). */
.zone-cell.zone-corner {
  background: rgba(247, 138, 138, 0.02);
}
.zone-cell.zone-top3 {
  background: rgba(245, 180, 110, 0.02);
}
.zone-cell.zone-cs {
  background: rgba(138, 180, 248, 0.025);
}
.zone-cell.zone-pu {
  background: rgba(195, 155, 211, 0.025);
}

/* ─── Shot Charts (R2 P4 #I — Ghis) ───
   Bloc rétractable page Player : 2 SVG shot charts côte à côte.
   - shot-charts-hint : ligne d'explication en haut
   - shot-charts-grid : grid 2 colonnes 50/50
   - shot-charts-col  : container d'1 chart (titre + svg)
   - shot-chart-svg   : SVG demi-terrain, max 100% de sa colonne
*/
/* Tools-bar dédiée au bloc shot charts (= sélecteur saison + popover dates).
   Plus compact que la tools-bar des tableaux Stats (= rangée unique). */
.shot-charts-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #2e2e2e;
  border-radius: 4px;
  background: #161616;
  position: relative;  /* anchor pour le popover */
}
.shot-charts-tools-label {
  font-family: 'Switzer', sans-serif;
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.shot-charts-season-select {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.85rem;
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  color: #eee;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
}
.shot-charts-season-select:hover {
  border-color: #FA4616;
}

.shot-charts-hint {
  font-family: 'Switzer', sans-serif;
  font-size: 0.85rem;
  color: #888;
  margin: 0 0 1rem 0;
  text-align: center;
}
.shot-charts-legend {
  font-size: 0.75rem;
  color: #666;
  margin-left: 0.5rem;
}
.shot-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
/* Variante 1×3 quand le bloc contient le tableau Networks à droite (=
   shot taken | shot assisted | partner table). */
.shot-charts-grid-1x3 {
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 1.5rem;
}
.shot-charts-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;     /* permet aux enfants width:100% de respecter la grid */
}
/* Cellule Networks : alignement stretch pour que le tableau prenne toute
   la largeur de sa colonne (= pas centré comme les shot charts). */
.shot-charts-grid-1x3 .player-networks-col-table {
  align-items: stretch;
}
/* Stack en 1 colonne sous 1100px (= 3 cols deviennent trop étroites). */
@media (max-width: 1100px) {
  .shot-charts-grid-1x3 { grid-template-columns: 1fr; }
}
.shot-chart-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shot-chart-title {
  font-family: 'Switzer', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ccc;
  margin: 0 0 0.2rem 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.shot-chart-subtitle {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.75rem;
  color: #888;
  margin: 0 0 0.7rem 0;
}
.shot-chart-svg {
  max-width: 100%;
  height: auto;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 4px;
}
/* Mobile : passer en 1 colonne sous 720px (= les charts deviennent trop
   petits côte à côte) */
@media (max-width: 720px) {
  .shot-charts-grid {
    grid-template-columns: 1fr;
  }
}

/* Cellule de rang dans les tableaux Overall/Offense/Defense */
.league-table td.rank {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: #888;
  text-align: center;
  width: 2rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   SCHEDULE — composant autonome
   ─────────────────────────────────────────────────────────────────────────
   Toutes les règles sont préfixées `.scd-` et ne dépendent d'aucune classe
   de tableau (`.league-table` notamment). Modifier ce bloc n'a strictement
   aucun impact sur standings / basics / overall / offense / defense.

   Structure de la table (5 colonnes) :
     [VIS team]  [vis pts]  [hom pts]  [HOM team]  [STATUS]

   Day header (colspan="5") : SAMEDI 12 MAI · [TODAY badge]
   ───────────────────────────────────────────────────────────────────────── */

/* -- Scroller : container du composant. -------------------------------- */
.scd-scroller {
  scroll-behavior: smooth;
}

/* -- Table : layout fixe, full width, pas d'héritage du look général. -- */
.scd-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: 'Switzer', sans-serif;
}

.scd-table thead { display: none; }

.scd-table td {
  padding: 0.55rem 0.5rem;
  border: none;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* -- Empty state ------------------------------------------------------- */
.scd-empty {
  text-align: center;
  color: #888;
  font-style: italic;
  padding: 1.5rem !important;
}

/* -- Day header (date sub-row) ----------------------------------------- */
.scd-day td {
  background: #2b2b2b;
    border-top: 1px solid #2e2e2e;
    border-bottom: 1px solid #2e2e2e;
}

.scd-day-label {
  font-family: 'Switzer', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* TODAY (jour courant dans le schedule) : on garde la mise en avant
   uniquement via la couleur du libellé (lightwnba). Pas de background
   ni de bordures orange — l'effet reste discret. */
.scd-day.is-today .scd-day-label {
  color: var(--lightwnba-color);
  font-weight: 700;
}

/* -- Game row ----------------------------------------------------------
   Chaque game-row a UNE SEULE <td.scd-game-cell> qui fait office de
   container flex. Les sous-éléments (.scd-vis, .scd-score, .scd-at,
   .scd-hom) sont des flex items contigus, centrés autour du @ par
   `justify-content: center` + un gap court. Plus de largeurs en %
   qui étirent les cellules — tout est compact au centre. */
.scd-game td {
  border-bottom: 1px solid #2a2a2a;
    padding: 0.5rem !important;
}

.scd-game:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.scd-game-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  /* Padding vertical 0.6rem — swap demandé avec les date rows. */
  padding: 0.6rem 0.6rem;
  min-width: 0;
}

/* -- Équipes (flex items) : nom + logo alignés horizontalement --------
   `flex: 0 0 <fixed>` au lieu de `0 1 auto` → chaque slot a une LARGEUR
   FIXE peu importe le contenu. Ça garantit que les scores à 2 chiffres
   (87) vs 3 chiffres (107) ne décalent jamais le @ ni les équipes : tout
   reste rigoureusement aligné sur le même centre vertical. */
.scd-vis,
.scd-hom {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 5.5rem; /* largeur fixe : logo 26px + gap + 3 lettres */
  min-width: 0;
}

.scd-vis { justify-content: flex-end; }
.scd-hom { justify-content: flex-start; }

.scd-name {
  font-family: 'Switzer', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: var(--text-color);
  white-space: nowrap;
  min-width: 0;
}
/* FIX (#12 retours beta) : nom équipe cliquable dans les tableaux Schedule.
   Hérite du style .scd-name + comportement .team-link (soulignement au hover). */
.scd-team-link {
  font-family: 'Switzer', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: var(--text-color);
  white-space: nowrap;
  min-width: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s ease;
}
.scd-team-link:hover,
.scd-team-link:focus {
  color: var(--wnba-color, #FA4616);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.scd-logo {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: block;
}

/* Winner : nom plus gras + couleur pleine ; loser : grisé + logo translucide */
.scd-vis.is-winner .scd-name,
.scd-hom.is-winner .scd-name {
  font-weight: 700;
}

.scd-vis.is-loser .scd-name,
.scd-hom.is-loser .scd-name {
  font-weight: 700;
  color: #bbb;
}


/* -- Scores (flex items à largeur fixe pour alignement strict) -------
   `flex-basis: 2.4rem` : large enough pour "100" en mono sans étirer.
   Les scores à 2 chiffres ou 3 chiffres prennent la même largeur,
   donc le @ et tout le reste restent strictement au même endroit. */
.scd-score {
  flex: 0 0 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scd-pts {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.90rem;
  font-weight: 700;
  color: #ccc;
  letter-spacing: 0.02rem;
  line-height: 1;
}

.scd-pts.is-win {
  color: var(--text-color);
  font-weight: 800;
}

.scd-pts.is-pending {
  color: #555;
  font-weight: 400;
  font-size: 0.85rem;
}

/* -- Cellule centrale @ + status mini-label sous le @ -----------------
   `flex-basis: 2rem` : largeur fixe assez large pour "FINAL" et "LIVE"
   en dessous sans tasser. Le @ reste pile centré. */
.scd-at {
  flex: 0 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.scd-at-sep {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: #777;
  line-height: 1;
}

/* -- Status mini-label sous le @ (dans .scd-at) ----------------------- */
.scd-status {
  display: block;
  margin-top: 0.22rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  color: #888;
  line-height: 1;
  white-space: nowrap;
}

.scd-status.is-live {
  color: #ff5252;
}

.scd-live-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff5252;
  margin-right: 0.25rem;
  vertical-align: middle;
  box-shadow: 0 0 4px rgba(255, 82, 82, 0.8);
  animation: livepulse 1.5s ease-in-out infinite;
}

/* -- Accent à gauche selon l'état ------------------------------------- */
.scd-game.is-live td:first-child {
  box-shadow: inset 3px 0 0 #ff5252;
}

.scd-game.is-final td:first-child {
  box-shadow: inset 3px 0 0 #3a3a3a;
}

.scd-game.is-pre td:first-child {
  box-shadow: inset 3px 0 0 transparent;
}

/* -- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .scd-name   { font-size: 0.78rem; }
  .scd-pts    { font-size: 0.88rem; }
  .scd-at-sep { font-size: 0.8rem; }
  .scd-game-cell { gap: 0.5rem; }
}

@media (max-width: 720px) {
  .scd-game-cell { gap: 0.4rem; padding: 0.55rem 0.35rem; }
  .scd-day td   { padding: 0.95rem 0.5rem !important; }
  .scd-vis, .scd-hom { gap: 0.35rem; flex-basis: 4.6rem; }
  .scd-score  { flex-basis: 2.1rem; }
  .scd-at     { flex-basis: 1.7rem; }
  .scd-name   { font-size: 0.74rem; letter-spacing: 0.05rem; }
  .scd-logo   { width: 22px; height: 22px; }
  .scd-pts    { font-size: 0.84rem; }
  .scd-at-sep { font-size: 0.78rem; }
  .scd-status { font-size: 0.5rem; }
}


/* ═════════════════════════════════════════════════════════════════════════
   TEAMS — grille de 15 équipes (page teams.html).
   ═════════════════════════════════════════════════════════════════════════ */
.teams-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 1rem 2rem;
}
/* Header commun (League / Teams / Players) — voir bloc Page header
   plus bas. Ici on garde uniquement l'espacement spécifique. */
.teams-page-header { /* hérite du commun */ }
.teams-page-sub {
  margin: 0.4rem 0 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  color: #888;
  font-style: italic;
}

.teams-grid {
  display: grid;
  /* 5 colonnes × 3 lignes = 15 équipes WNBA, exactement. */
  grid-template-columns: repeat(5, 1fr);
  gap: 0.9rem;
}
/* Sur petit écran on dégrade gracieusement : 3 cols puis 2. */
@media (max-width: 900px) {
  .teams-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .teams-grid { grid-template-columns: repeat(2, 1fr); }
}
.teams-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #888;
  font-style: italic;
  padding: 2rem 1rem;
}

/* Card équipe : logo en haut, nom au milieu, abbr en bas. */
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  padding: 1rem 0.8rem;
  text-decoration: none;
  color: var(--text-color);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.team-card:hover {
  border-color: var(--wnba-color);
  background: rgba(250, 70, 22, 0.04);
  transform: translateY(-2px);
  /* Override du `a:hover { color: var(--background-color) }` global :
     on veut un nom en orange WNBA, pas en noir. */
  color: var(--wnba-color);
}
.team-card:hover .team-card-name {
  color: var(--wnba-color);
}
.team-card-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.team-card-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
  border-radius: 2px;
  font-family: 'Switzer', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #888;
}
.team-card-name {
  font-family: 'Switzer', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.team-card-abbr {
  font-family: 'Switzer', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  color: #888;
}


/* ═════════════════════════════════════════════════════════════════════════
   TEAM — page individuelle d'une équipe (team.html).
   ═════════════════════════════════════════════════════════════════════════ */
.team-page {
  width: var(--page-width);
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 1.2rem 1rem 2rem;
}


/* ═════════════════════════════════════════════════════════════════════════
   PLAYERS — page liste joueuses (players.html, placeholder).
   ═════════════════════════════════════════════════════════════════════════ */
.players-page {
  width: var(--page-width);
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 1.2rem 1rem 2rem;
}

/* PLAYER — page joueuse individuelle (player.html). Même contrainte de
   largeur que la page Players globale pour cohérence visuelle entre les
   pages avec tableaux. */
.player-page {
  width: var(--page-width);
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 1.2rem 1rem 2rem;
}

/* ═════════════════════════════════════════════════════════════════════════
   PLAYER CARDS — section wrapper "Infos · Carrière · Contrat" englobant
   3 cards en grid. Le wrapper est un <details> league-card collapsible
   (même style que la section "Classement · Matchs" sur stats-league).
   ═════════════════════════════════════════════════════════════════════════ */
.player-section-cards { margin-bottom: 1.4rem; }
.player-section-cards > .card-body { padding: 0.85rem 1rem 1rem; }

.player-cards {
  display: grid;
  /* Row 1 : INFO · CAREER · CONTRACT (3 cols)
     Row 2 : CAREER HIGHLIGHTS (span 2 cols sous INFO+CAREER) · SALARY (col 3) */
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 2rem 3.6rem;
}
.player-card-highlights {
  grid-column: 1 / span 2;
}
@media (max-width: 1100px) {
  .player-cards { grid-template-columns: 1fr 1fr; }
  .player-card-contract { grid-column: 1 / -1; }
  .player-card-highlights { grid-column: 1 / -1; }
  .player-card-salary-history { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .player-cards { grid-template-columns: 1fr; }
  .player-card-contract,
  .player-card-highlights,
  .player-card-salary-history { grid-column: auto; }
}

/* Chaque card est un simple bloc sans bordure (le <details> parent en a
   déjà une). Séparation visuelle via le grid gap et les h3 (typo
   standard du site, ligne décorative WNBA en bordure-gauche). */
.player-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.player-card > h3 {
  margin: 0 0 0.7rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--wnba-color);
  /* Reste de la typo h3 hérité du global (cf. styles.css §h3). */
}
.player-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1 1 auto;
}

/* ─── Infos : portrait + meta ─── */
.player-card-identity .player-card-body {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}
/* Placeholder photo joueuse : zone neutre sans cercle/dégradé. Les
   initiales servent juste de stand-in pour quand on aura un mapping
   slug → NBA player_id et qu'on pourra afficher la vraie headshot. */
.player-identity-portrait {
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-portrait-initials {
  font-family: 'Switzer', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  color: #888;
}
/* Headshot officiel via /league/player-headshot/{pid}. Fallback : si
   l'img a `onerror`, elle se cache via display:none → le span initials
   en dessous reprend la main. L'image remplit la zone 86x86. */
.player-headshot-img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  object-position: top center;
  border-radius: 2px;
  /* Couvre le span initials par positionnement (le span est en
     background-fallback dans le même conteneur flex). */
  position: absolute;
  z-index: 1;
}
.player-identity-portrait {
  position: relative;       /* pour le z-index de .player-headshot-img */
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
}
.player-identity-meta {
  flex: 1 1 auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Cellule équipe : logo + abbr alignés. */
.player-team-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.35rem;
}
.player-team-abbr {
  vertical-align: middle;
  letter-spacing: 0.04rem;
}

/* ─── Listes clé / valeur (Identité, Carrière, Contrat) ─── */
.player-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.32rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
}
.player-meta-row:last-child { border-bottom: none; }
.player-meta-row dt {
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  font-size: 0.7rem;
  white-space: nowrap;
}
.player-meta-row dd {
  margin: 0;
  color: var(--text-color);
  font-weight: 500;
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

/* Sous-titre interne (Palmarès, Salaire par saison) — légèrement plus
   discret que h3, prend la suite visuellement. */
h4.player-subtitle {
  margin: 0 0 0.5rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: #888;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.8rem;
}

.player-honors-text {
  margin: 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  color: var(--text-color);
  line-height: 1.5;
}
.player-honors-text.empty { color: #888; font-style: italic; }
/* Game Log : col Result colorée selon W/L. Conserve la taille numérique
   du tableau (= cohérent avec les autres cells .num). */
.league-table td.result-w { color: #4ade80; font-weight: 600; }
.league-table td.result-l { color: #f87171; font-weight: 600; }
.game-log-count {
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  color: #888;
  letter-spacing: 0.04rem;
}

/* ===== Career row sticky-footer (page PLAYER, audit D) =====
   Row "Career" en bas de Basics et Overall (= sum/avg pondérés par GP).
   Visuel distinct : background plus marqué, border-top renforcé, font-weight
   accentué — cohérent avec la ligue-row sticky de la page PLAYERS. */
.league-table tr.is-career-row {
  background: rgba(250, 70, 22, 0.06);
  border-top: 2px solid rgba(250, 70, 22, 0.4);
  font-weight: 600;
}
.league-table tr.is-career-row td {
  border-top: 2px solid rgba(250, 70, 22, 0.4);
}
.league-table tr.is-career-row:hover {
  background: rgba(250, 70, 22, 0.1);
}

/* ===== Career milestones bandeau (page PLAYER, audit D) =====
   Bandeau compact entre les cards et la section Player Stats. Affiche
   les career highs single-game + counts remarquables. Layout horizontal
   wrap-friendly avec séparateurs verticaux. */
/* Career highlights : depuis l'audit, intégré comme une CARD à part
   entière dans la grille `.player-cards` (= sous INFO+CAREER, span 2
   cols). Plus de bandeau standalone — réutilise le shell `.player-card`. */
.player-card-highlights[hidden] { display: none; }
.player-milestones-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
}
.player-milestone {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  color: var(--text-color);
}
.milestone-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #888;
}
.milestone-value {
  font-weight: 700;
  font-size: 0.95rem;
  color: #FA4616;
  font-variant-numeric: tabular-nums;
}
.milestone-context {
  font-size: 0.7rem;
  color: #888;
}
.player-milestone-count .milestone-value {
  color: var(--text-color);
}

/* ===== Lineups featuring this player (page PLAYER, audit I) =====
   Cards stack vertical, 5 noms + stats horizontal. Le nom de la joueuse
   est mis en exergue (couleur orange). */
.player-lineups-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.player-lineup-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 0.6rem 0.8rem;
}
.player-lineup-names {
  font-family: 'Switzer', sans-serif;
  font-size: 0.85rem;
  color: var(--text-color);
  margin-bottom: 0.3rem;
}
.lineup-player {
  display: inline-block;
}
.lineup-player-self {
  color: #FA4616;
  font-weight: 700;
}
.player-lineup-stats {
  display: flex;
  gap: 1rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.72rem;
  color: #888;
  letter-spacing: 0.04rem;
}
.lineup-stat { font-variant-numeric: tabular-nums; }
.lineup-net.pos { color: #4ade80; font-weight: 600; }
.lineup-net.neg { color: #f87171; font-weight: 600; }

/* ===== Pair-level chemistry (page PLAYER, audit CH7) =====
   Top/bottom 3 coéquipières par NetRtg partagé. 2 colonnes côte à côte
   au-dessus de la liste des lineups. */
.player-pair-chemistry {
  margin-bottom: 1rem;
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid #2a2a2a;
  border-radius: 2px;
}
.player-pair-chemistry-title {
  margin: 0 0 0.5rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  color: #888;
}
.player-pair-chemistry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.player-pair-col-title {
  margin: 0 0 0.3rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06rem;
  color: var(--text-color);
}
.player-pair-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.player-pair-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.3rem 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.82rem;
  color: var(--text-color);
  border-bottom: 1px solid #1f1f1f;
}
.player-pair-item:last-child { border-bottom: none; }
.player-pair-stats {
  display: flex;
  gap: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.player-pair-mins {
  font-size: 0.7rem;
  color: #888;
}
.player-pair-net {
  font-weight: 700;
  font-size: 0.88rem;
}
.player-pair-net.pos { color: #4ade80; }
.player-pair-net.neg { color: #f87171; }
.player-pair-hint {
  margin: 0.6rem 0 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.68rem;
  color: #888;
  text-align: center;
}
.player-lineups-section-title {
  margin: 0.6rem 0 0.4rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  color: #888;
}

/* ===== Profile radar tab (page PLAYER, audit G) =====
   Une carte par saison où la joueuse a joué, layout responsive grid.
   Chaque carte = header season+team+gp/min + radar SVG centré. */
.player-profile-grid {
  display: grid;
  /* FIX labels tronqués : minmax aligné sur la nouvelle largeur du SVG
     (380px viewBox étendu) → les cards laissent assez de place pour les
     labels axes complets ("Playmaking", "Efficiency"...). */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1rem;
  margin: 0.4rem 0;
}
.player-profile-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 0.8rem;
}
.player-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.player-profile-season {
  font-family: 'Switzer', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-color);
}
.player-profile-team .team-link {
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #FA4616;
}
.player-profile-meta {
  font-family: 'Switzer', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #888;
}

/* ═════════════════════════════════════════════════════════════════════════
   PAGE PLAYER — header sticky horizontal
   ─────────────────────────────────────────────────────────────────────────
   Layout : [photo 44px] · NOM PRÉNOM · meta (position · logo · team name)
   tout sur UNE ligne horizontale.
   Position : sticky top:52px (juste sous .header global z=1000, height 52px).
   z-index 50 = au-dessus des thead sticky (z=3-4) mais sous la nav globale.
   ═════════════════════════════════════════════════════════════════════════ */
.player-page-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  position: sticky;
  top: 52px;
  z-index: 50;
  background: var(--background-color);
  padding: 0.55rem 0;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid #2a2a2a;
}
/* Portrait circulaire — photo CDN WNBA si player_id dispo, sinon
   initiales en fallback. Pas de bordure colorée pour rester minimaliste. */
.player-header-portrait {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  flex-shrink: 0;
  position: relative;
}
.player-header-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Décalage vers le haut pour bien cadrer le visage (les headshots WNBA
     ont la tête dans le tiers haut). */
  object-position: center 22%;
}
.player-header-initials {
  font-family: 'Switzer', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #ccc;
  letter-spacing: 0.05em;
}
/* Quand l'image a chargé (JS ajoute .has-img), on cache les initiales. */
.player-header-portrait.has-img .player-header-initials {
  display: none;
}
/* Nom — en uppercase comme les autres titres de page. */
.player-header-name {
  font-family: 'Switzer', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02rem;
  margin: 0;
  line-height: 1;
}
/* Meta : position + séparateur + logo + nom équipe — inline. */
.player-header-meta {
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #cfcfcf;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* Léger trait gauche en séparateur visuel avec le nom. */
  padding-left: 0.85rem;
  border-left: 1px solid #2a2a2a;
  margin-left: 0.25rem;
}
/* Logo équipe + nom complet (sub-element du meta). */
.team-link-with-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.team-link-logo-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Réduit l'espace au-dessus du header (était hérité de .league-page-header
   via .league-page padding-top). */
.player-page {
  padding-top: 0.4rem;
}
.player-profile-radar {
  display: flex;
  justify-content: center;
  align-items: center;
}
.player-profile-radar svg {
  width: 100%;
  height: auto;
  /* FIX labels tronqués : le viewBox SVG fait 380×320 (= 280 + 50px de
     marge horizontale + 20px verticale pour les labels axes). On augmente
     proportionnellement le max-width pour que le polygone garde la même
     taille visuelle qu'avant et que les labels aient leur marge complète. */
  max-width: 380px;
}
.player-profile-loading {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-profile-legend {
  margin: 0.8rem 0 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.75rem;
  color: #888;
  line-height: 1.5;
}
.player-profile-legend strong { color: var(--text-color); }
.player-profile-compare-legend {
  display: block;
  margin-top: 0.4rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  color: #3b82f6;
  letter-spacing: 0.04rem;
}
.player-profile-compare-legend strong { color: #3b82f6; font-weight: 700; }

/* ===== Compare picker dialog (page PLAYER, audit CH6) =====
   Dialog avec input search + liste de suggestions filtrée live. Style
   cohérent avec le Chart dialog. */
.compare-picker .chart-dialog-inner {
  min-width: 400px;
  max-width: 520px;
}
.compare-picker-input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #3f3f3f;
  border-radius: 2px;
  font-family: 'Switzer', sans-serif;
  font-size: 0.9rem;
  color: var(--text-color);
  box-sizing: border-box;
  margin-bottom: 0.6rem;
}
.compare-picker-input:focus {
  outline: 1px solid #FA4616;
  outline-offset: 0;
  border-color: #FA4616;
}
.compare-picker-suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
}
.compare-picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.7rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.85rem;
  color: var(--text-color);
  cursor: pointer;
  border-bottom: 1px solid #1f1f1f;
}
.compare-picker-item:last-child { border-bottom: none; }
.compare-picker-item:hover,
.compare-picker-item.is-focus {
  background: rgba(250, 70, 22, 0.12);
  color: #FA4616;
}
.compare-picker-meta {
  font-size: 0.65rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #888;
}
.compare-picker-item:hover .compare-picker-meta,
.compare-picker-item.is-focus .compare-picker-meta { color: #c9c9c9; }
.compare-picker-empty {
  padding: 1rem 0.7rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.85rem;
  color: #888;
  text-align: center;
}
.compare-picker-hint {
  margin: 0.6rem 0 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  color: #888;
  text-align: center;
}
.compare-picker-hint kbd {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #3f3f3f;
  border-radius: 2px;
  padding: 0.05rem 0.3rem;
  font-family: 'Switzer', monospace;
  font-size: 0.65rem;
  color: var(--text-color);
}

/* ===== Season Trends grid (page PLAYER, audit E) =====
   Sparklines intra-saison : une mini-carte par saison, layout
   responsive en grid auto-fill. */
.player-trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8rem;
  margin-top: 0.4rem;
}
.player-trend-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 0.6rem 0.8rem;
}
.player-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.2rem;
}
.player-trend-season {
  font-family: 'Switzer', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-color);
}
.player-trend-meta {
  font-family: 'Switzer', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #888;
}
.player-trend-spark {
  display: block;
  margin: 0.2rem 0 0.4rem;
}
.player-trend-svg {
  width: 100%;
  height: auto;
  display: block;
}
.player-trend-footer {
  display: flex;
  gap: 0.8rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  color: #888;
}
.player-trend-stat {
  font-variant-numeric: tabular-nums;
}

/* Honors parsés en liste structurée (un <li> par distinction).
   Bullets en accent orange, pas d'indentation hors marge. */
.player-honors-list {
  margin: 0;
  padding: 0 0 0 0.9rem;
  list-style: none;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  color: var(--text-color);
  line-height: 1.5;
}
.player-honors-list li {
  position: relative;
  padding-left: 0;
}
.player-honors-list li::before {
  content: "·";
  color: #FA4616;
  font-weight: 700;
  position: absolute;
  left: -0.9rem;
}

/* Mini-table contrat : ressemble visuellement au tableau .league-table
   mais plus compacte (3 colonnes, font plus petite). */
.player-contract-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Switzer', sans-serif;
  font-size: 0.75rem;
}
.player-contract-table thead th {
  text-align: left;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  color: #888;
  padding: 0.32rem 0.4rem;
  border-bottom: 1px solid var(--border-color);
}
.player-contract-table thead th:not(:first-child) { text-align: right; }
.player-contract-table tbody td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  color: var(--text-color);
}
.player-contract-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.player-contract-table tbody tr:last-child td { border-bottom: none; }
.player-contract-table .empty-row { color: #888; font-style: italic; text-align: center; }
/* ──────────────── Colonne Team (logo + abbr) ──────────────── */
.players-col-team {
  /* Logo 35px + abbr 3 lettres + gap + padding-right généreux pour séparer
     du nom de joueuse. Largeur ~90px. */
  text-align: left !important;
  padding-left: 0.6rem !important;
  padding-right: 1.25rem !important;
  white-space: nowrap;
}
.players-team-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.players-team-link:hover { opacity: 0.75; }
.players-team-logo {
  /* 35×35 — taille demandée par l'utilisateur. La compaction des lignes
     se fait via le padding vertical des td (cf. plus bas), pas via la
     taille des icônes. */
  width: 35px;
  height: 35px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.players-team-abbr {
  display: inline-block;
}
/* Header "Team" aligné en gauche (cohérent avec le contenu logo+abbr). */
.players-section-player-stats .league-table th[data-sort="team"] {
  text-align: left;
  padding-left: 0.6rem;
  padding-right: 1.25rem;
}

/* ──────────────── Colonne Position (NCAAW Basics/Advanced/Shooting) ────────────────
   Étroite, centrée, uppercase grise — sert juste à indiquer G/F/C. */
.players-section-player-stats .league-table th.col-pos,
.players-section-player-stats .league-table td.col-pos {
  width: 1px;            /* shrink-to-content */
  text-align: center;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.players-section-player-stats .league-table td.col-pos {
  color: #999;
  font-weight: 500;
}
.players-section-player-stats .league-table .player-pos {
  display: inline-block;
}

/* v1 scouting NCAAW : colonne Class (Fr / So / Jr / Sr / Gr).
   Même look que Pos : étroite, monospace-ish, gris discret. Tooltip natif
   pour le nom complet (Freshman, Sophomore...) au hover. */
.players-section-player-stats .league-table th.col-class,
.players-section-player-stats .league-table td.col-class {
  width: 1px;
  text-align: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #999;
  font-weight: 500;
}
.players-section-player-stats .league-table .player-class {
  display: inline-block;
  cursor: help;
}
.players-section-player-stats .league-table .player-class.is-empty {
  color: #555;
  cursor: default;
}
/* v4 scouting NCAAW : classes inférées (regressed depuis roster courant OU
   heuristique earliest-year) rendues en italique discret pour qu'on voie
   d'un coup d'œil qu'on a deviné. Le tooltip explique la source. */
.players-section-player-stats .league-table .player-class.is-derived {
  font-style: italic;
  color: #888;
}

/* v3 scouting NCAAW PLAYER : Profile radar tab — layout SVG + legend table. */
.ncaaw-player-profile-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1rem;
}
.ncaaw-player-profile-radar {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ncaaw-player-radar-svg {
  width: 100%;
  max-width: 360px;
  height: auto;
}
.ncaaw-player-profile-legend table {
  font-size: 0.85rem;
}
@media (max-width: 760px) {
  .ncaaw-player-profile-wrap {
    grid-template-columns: 1fr;
  }
}
/* v3 scouting NCAAW PLAYER — fixes visuels Phase 1+2+3.
   Le portrait conteneur a maintenant overflow:hidden pour éviter que les
   headshots ESPN (haute résolution) débordent. Le tableau Basics utilise
   layout fluide pour bien remplir le panel parent. */
.ncaaw-player-page .player-identity-portrait {
  overflow: hidden;
}
.ncaaw-player-page .player-identity-portrait img {
  max-width: 100%;
  max-height: 100%;
}
/* Les 3 tabs Basics/Advanced/Shooting de NCAAW player n'ont que 4 colonnes —
   on force 100% pour éviter le rendu centré "table petite". */
.ncaaw-player-page .league-table {
  width: 100%;
}
.ncaaw-player-page .table-wrap {
  width: 100%;
  overflow-x: auto;
}
/* Grille des cards Info+Career — 2 colonnes 1fr/1fr au lieu du 3-cols WNBA
   (qui prévoit aussi une card Contract qu'on n'a pas en NCAAW). */
.ncaaw-player-page .player-cards {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .ncaaw-player-page .player-cards { grid-template-columns: 1fr; }
}
/* Bouton Glossary aligné à droite dans sa rangée tools-bar (cohérent
   avec le pattern WNBA tools-group-right). */
.ncaaw-player-page .tools-bar-row-actions {
  justify-content: flex-end;
}
/* Badges centile sur la page NCAAW PLAYER — utilisent la même convention que
   players/team-stats : .pct + .pct-hi/.pct-mhi/.pct-mid/.pct-mlo/.pct-lo
   (cf. règles globales §2112). Pas de styling spécifique requis ici. */

/* Separator row dans les tables Player Stats (Shooting tab By zone). */
.players-section-player-stats .league-table tr.separator-row td {
  background: rgba(255,255,255,0.03);
  color: #888;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
/* Tag discret pour la source class_year dans la card Info. */
.players-section-player-stats .player-meta-src {
  font-size: 0.7rem;
  color: #777;
  font-style: italic;
}

/* ──────────────── Cellule Player (portrait + nom) ──────────────── */
.players-section-player-stats .league-table td.col-team,
.players-section-player-stats .league-table th.col-team {
  padding: 0.5rem;
}
/* Portrait joueuse : photo CDN WNBA si player_id dispo, sinon avatar
   initiales (fallback). Cercle 35px aligné avec le logo équipe. */
.players-section-player-stats .player-portrait,
.players-section-player-stats .player-avatar {
  display: inline-block;
  width: 50px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.55rem;
  background: #1d1d1d;
  border: 1px solid #2a2a2a;
  flex-shrink: 0;
}
.players-section-player-stats .player-portrait {
  object-fit: cover;
  object-position: center 22%;
}
/* Logo WNBA dans la ligne LIGUE : SVG entier visible, pas de crop visage. */
.players-section-player-stats .player-portrait.league-logo {
  object-fit: contain;
  object-position: center;
  background: transparent;
  border-color: transparent;
}
.players-section-player-stats .player-avatar {
  /* Fallback initiales : texte centré (line-height = diam - 2px border). */
  text-align: center;
  line-height: 33px;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ccc;
  letter-spacing: 0.04em;
}
.players-section-player-stats .player-name {
  vertical-align: middle;
}

/* Lignes ULTRA-fines : padding vertical minimal sur les cellules.
   La hauteur est dominée par le portrait/logo 35px + 2px de border-bottom
   → ~38px par ligne. Plus court sans tronquer les images. */
.players-section-player-stats .league-table tbody td {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  line-height: 1.1;
  /* Hauteur de ligne minimale (= 35px portrait + padding). En layout table
     CSS, `height` sur <td> agit comme min-height : la cellule peut grandir
     si le contenu déborde (ex. cellule avec badge centile), mais ne tombe
     plus en dessous quand le portrait ne charge pas (CORS NCAAW, etc.).
     Garantit des rangées de hauteur identique entre PLAYERS WNBA et NCAAW. */
  height: 38px;
}

/* ──────────────── Load more (charger les 50 suivantes) ──────────────── */
.players-loadmore {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Espace généreux entre la dernière ligne du tableau et le bouton. */
  margin: 2.2rem 0 1rem;
  padding: 0;
}
.players-loadmore[hidden] {
  display: none;
}
/* Le bouton hérite du style .tools-btn (uppercase Inter 0.68rem, weight
   600, letter-spacing 0.08rem, bordure sharp 2px). On force `width: auto`
   au cas où une règle button {width:100%} traînerait quelque part. */
#playersLoadMoreBtn.tools-btn {
  width: auto;
  display: inline-block;
}


/* ═════════════════════════════════════════════════════════════════════════
   PAGE HEADERS — style commun League / Teams / Players.
   Titre uppercase épuré + bordure inférieure orange WNBA + accent
   court (64px) en variant blanc juste au-dessus de la bordure.
   ═════════════════════════════════════════════════════════════════════════ */
.league-page-header,
.teams-page-header {
  margin-bottom: 1.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--wnba-color);
  position: relative;
}
.league-page-header::before,
.teams-page-header::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 2px;
  background: var(--text-color);
}

/* Titres : on ne touche pas au .league-page-title (déjà en flex avec
   subtitle inline + cache badge). Pour Teams & Players, on aligne sur
   la typo de référence. */
.teams-page-title {
  margin: 0;
  font-family: 'Switzer', sans-serif;
  font-size: 1.2rem;
  letter-spacing: -0.04rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-color);
}


/* ═════════════════════════════════════════════════════════════════════════
   TEAM PAGE — header league-style + 3 colonnes (Identity / Roster / Schedule)
   ═════════════════════════════════════════════════════════════════════════ */

/* Header local (peut surcharger .league-page-header si besoin). */
.team-page-league-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* Section INFOS (parent <details>) — le <summary> h2 cliquable pilote le
   collapse global. Aucun bouton séparé. Style hérité de .league-section.
   On retire juste les marges internes pour densifier. */
.team-section-info > summary {
  /* Style standard collapsible-section (déjà défini plus haut), pas
     besoin de spec ici. */
}

/* Grille 3 sous-cols (Franchise / Roster / Matchs) à l'intérieur du
   <details> parent. Roster prend la part principale (5 colonnes texte,
   peu compactables), Matchs garde de l'espace pour la grille
   .scd-game-grid centrée, Franchise se contente d'une colonne compacte. */
.team-three-cols {
  display: grid;
  /* Franchise / Roster / Matchs.
     Roster réduit pour donner plus d'espace aux gaps entre colonnes. */
  grid-template-columns: 0.8fr 1.40fr 1.15fr;
  gap: 2.5rem;
  align-items: start;
  padding: 0.65rem 0.85rem 0.8rem;
}
@media (max-width: 1100px) {
  .team-three-cols { grid-template-columns: 1fr 1fr; }
  .team-col-schedule { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .team-three-cols { grid-template-columns: 1fr; }
  .team-col-schedule { grid-column: auto; }
}

/* Chaque sous-col est un simple <div>. Pas de bordure (le <details>
   parent en a déjà une), juste un espacement interne et une séparation
   verticale par le grid gap. */
.team-col {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Sous-titre Franchise / Roster / Matchs — mêmes propriétés que le h2
   des league-section (cf. ligne 1744), simplement plus petit. */
.team-col-title {
  margin: 0 0 0.55rem 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  border-left: 3px solid var(--wnba-color);
  padding-left: 0.7rem;
  line-height: 1.2;
}

/* Card-body interne aux sous-cols : pas de padding additionnel
   (déjà géré par le grid parent). */
.team-col > .card-body {
  padding: 0;
}

/* Logo dans la col Franchise : compact, centré. */
.team-identity-logo-wrap {
  display: flex;
  justify-content: center;
  padding: 0.2rem 0 0.6rem;
}
.team-identity-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

/* Liste clé/valeur compacte. */
.team-identity-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.team-identity-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.22rem 0;
  border-bottom: 1px dotted #2e2e2e;
}
.team-identity-list > div:last-child { border-bottom: none; }
.team-identity-list dt {
  font-family: 'Switzer', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: #888;
  margin: 0;
}
.team-identity-list dd {
  margin: 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-color);
  text-align: right;
}

/* Séparateur entre infos contextuelles et stats clés. */
.team-identity-sep {
  border: none;
  border-top: 1px solid #3a3a3a;
  margin: 0.6rem 0 0.45rem;
}

/* Bloc stats : typo mono pour les valeurs. */
.team-identity-stats dd {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.84rem;
  font-weight: 700;
}

/* Tableaux stats individuelles (Per Game / Advanced, full-width). */
.team-section {
  margin: 1rem 0 0;
}
.team-section > summary { padding: 0.5rem 0.85rem; cursor: default; }
.team-section > summary h2 { font-size: 0.92rem; }
.team-section > .card-body { padding: 0.65rem 0.85rem 0.8rem; }

/* Roster : la table fait toute la largeur de sa colonne. */
.team-col-roster .league-table { width: 100%; }
.team-col-roster .league-table tbody td.col-team { text-align: left; }
/* +10% sur le padding vertical pour aérer les lignes. */
.team-col-roster .league-table thead th,
.team-col-roster .league-table tbody td { padding: 0.35rem 0.4rem; }
.team-col-roster .league-table tbody td { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* Colonne # (numéro maillot) : étroite, mono, gris discret. */
.team-col-roster .league-table th.col-num,
.team-col-roster .league-table td.col-num {
  width: 2.4rem;
  text-align: right;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.72rem;
  color: #888;
  font-weight: 700;
}

/* Cellules contrat/salaire/%cap pas encore branchées : visuellement
   discrètes pour signaler que la donnée arrive plus tard (Spotrac). */
.roster-tbd {
  color: #555;
  font-style: italic;
}

/* Schedule dans la col Matchs : hérite intégralement du CSS .scd-*
   défini pour la page League. Le scroller a sa propre hauteur max +
   overflow-y pour ne pas pousser la page entière en hauteur. */
.team-schedule-scroller {
  max-height: 560px;
  overflow-y: auto;
  padding-top: 0 !important;
}
.team-schedule-scroller::-webkit-scrollbar {
  width: 6px;
}
.team-schedule-scroller::-webkit-scrollbar-track {
  background: transparent;
}
.team-schedule-scroller::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 3px;
}
.team-schedule-scroller::-webkit-scrollbar-thumb:hover {
  background: var(--wnba-color);
}

/* ====================== Player Stats card (page Team) ======================
   La card "Player Stats" clone fidèlement "League stats" de la page League.
   Les styles globaux .league-table / .tab-btn / .filter-popover / etc.
   s'appliquent tels quels. Ces overrides ciblent uniquement :
     - la cellule Player (col-team) : avatar initiales + nom
     - le scope du sélecteur .is-tps-compare-mode (équivalent du compare-mode
       côté league)
*/
.team-section-player-stats {
  margin: 1rem 0 0;
}
.team-section-player-stats .player-avatar,
.team-section-player-stats .player-portrait {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #2a2a2a;
  border: 1px solid #2a2a2a;
  vertical-align: middle;
  flex-shrink: 0;
}
.team-section-player-stats .player-avatar {
  /* Avatar fallback (initiales) — flex centering + monospace. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e6e6e6;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.team-section-player-stats .player-portrait {
  /* Portrait photo : object-fit pour cadrer le visage proprement. */
  object-fit: cover;
  object-position: center 22%;
}
.team-section-player-stats .player-name {
  vertical-align: middle;
}

/* ═════════════════════════════════════════════════════════════════════════
   Ligne TEAM agrégée (sticky top sur les 8 tableaux joueuses)
   ═════════════════════════════════════════════════════════════════════════
   - Position sticky sous le thead (qui est lui-même sticky via thead th).
   - Background distinct + bordure orange basse → visuellement détaché.
   - Pointer-events: none sur la cellule Player (pas de click sur "TEAM").
   - Pas de hover effect (= pas d'interaction utile).
*/
.team-section-player-stats tr.is-team-row td {
  background: #1f1d1c !important;
  color: #f0f0f0;
  font-weight: 700;
  border-bottom: 2px solid var(--wnba-color);
  border-top: 1px solid #2a2a2a;
  /* Sticky directement sur les <td> (pas sur le <tr>) — plus stable avec
     border-collapse:collapse. Sticky sur <tr> est connu pour glitcher dans
     Chromium (ligne qui "saute" ou disparaît au scroll).
     top = hauteur cumul du thead (1 ligne par défaut ~30px ; override à 56px
     pour les thead à 2 lignes via :has() plus bas). */
  position: sticky;
  top: 30px;
  z-index: 2;
}
.team-section-player-stats tr.is-team-row:hover td {
  /* Désactive le hover pour la team row. */
  background: #1f1d1c !important;
}
.team-section-player-stats tr.is-team-row .team-aggregate-label {
  color: var(--wnba-color);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* ═════════════════════════════════════════════════════════════════════════
   Ligne LIGUE agrégée sur PLAYERS (sticky top — baseline ligue).
   Même mécanique que la ligne TEAM côté TEAM, mais sur PLAYERS où elle
   représente la moyenne ligue (= 2× les 15 équipes agrégées).
   ═════════════════════════════════════════════════════════════════════════ */
.players-section-player-stats tr.is-league-row td {
  background: #1f1d1c !important;
  color: #f0f0f0;
  font-weight: 700;
  border-bottom: 2px solid var(--wnba-color);
  border-top: 1px solid #2a2a2a;
  /* Sticky directement sur les <td> (pas sur le <tr>) — plus stable avec
     border-collapse:collapse. Sticky sur <tr> est connu pour glitcher dans
     Chromium (ligne qui "saute" ou disparaît au scroll).
     Défaut = 1 ligne (~30px) ; override à 56px pour thead à 2 lignes via
     :has() plus bas. */
  position: sticky;
  top: 30px;
  z-index: 2;
}
/* Overrides pour les tableaux dont le thead a 2 lignes (zone-group-row) :
   la ligne sticky d'agrégat doit descendre de la hauteur du groupe (~26px).
   Sélecteur sur td maintenant que le sticky est porté par la cellule. */
.players-section-player-stats .league-table:has(thead .zone-group-row) tbody tr.is-league-row td,
.team-section-player-stats .league-table:has(thead .zone-group-row) tbody tr.is-team-row td {
  top: 56px;
}
.players-section-player-stats tr.is-league-row:hover td {
  background: #1f1d1c !important;
}
.players-section-player-stats tr.is-league-row .league-aggregate-label {
  color: var(--wnba-color);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
/* Col Team vide en mode league row (= juste un tiret centré, pas de logo). */
.players-section-player-stats tr.is-league-row .players-col-team-league {
  color: #666;
  text-align: center;
}
/* Désactive l'éventuelle interactivité de la cellule player en mode compare
   (cohérent avec .is-compare-mode .team-link sur la page League). */
body.is-tps-compare-mode .team-section-player-stats tr[data-player-id] {
  cursor: pointer;
}
body.is-tps-compare-mode .team-section-player-stats .player-name {
  pointer-events: none;
}


/* ═════════════════════════════════════════════════════════════════════════
   STICKY HORIZONTAL — colonnes PLAYER / POS / TEAM (page PLAYERS)
   ─────────────────────────────────────────────────────────────────────────
   Les 3 premières colonnes restent visibles pendant le scroll horizontal
   des stats (tableaux larges 20-30 cols). Combiné au sticky vertical du
   thead et de la ligne LIGUE, on obtient un effet "freeze panes" type
   Excel.

   Mécanique :
   - Largeurs fixes obligatoires (sinon les offsets `left` cumulés ne
     correspondent à rien). Mesurés sur le rendu actuel : 220 / 48 / 88px.
   - `box-sizing: border-box` OBLIGATOIRE : par défaut les <td> sont en
     content-box → padding s'ajoute à width → la largeur effective est
     ~16-30px de plus que width:Xpx, donc les offsets `left: 220px` /
     `left: 268px` sont décalés et le sticky cache 1-2 caractères de la
     première stat après les sticky.
   - Backgrounds opaques obligatoires (sinon les cellules en-dessous
     restent visibles à travers les sticky pendant le scroll).
   - z-index hiérarchique :
       z=4  thead × sticky-col (coin haut-gauche, doit passer au-dessus de tout)
       z=3  thead × non-sticky-col  (sticky vertical uniquement)
       z=3  is-league-row × sticky-col (sticky vertical + horizontal)
       z=2  is-league-row × non-sticky-col (sticky vertical uniquement)
       z=2  tbody td × sticky-col (sticky horizontal uniquement)
   ═════════════════════════════════════════════════════════════════════════ */

/* FIX espace à gauche : la règle globale `.league-table { margin: 0 auto;
   width: auto }` centre la table dans son wrap quand son contenu est plus
   étroit. Combiné aux sticky cells (qui collent à `left: 0` du wrap),
   ça crée un écart visuel à gauche entre la sticky cell et le reste de
   la table. On force `margin: 0` + `width: max-content` pour que la table
   commence pile au bord gauche du wrap. */
.players-section-player-stats .league-table,
.team-section-player-stats .league-table,
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]),
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) {
  margin: 0;
  width: max-content;
  max-width: none;
}

/* FIX largeur : box-sizing border-box sur TOUTES les sticky cells (toutes
   les pages). Sans ça les largeurs nominales width:Npx + padding causent
   un débordement de 16-30px qui décale les offsets `left` cumulés. */
.players-section-player-stats .league-table th.col-team,
.players-section-player-stats .league-table td.col-team,
.players-section-player-stats .league-table th.col-pos,
.players-section-player-stats .league-table td.col-pos,
.players-section-player-stats .league-table th.col-team-logo,
.players-section-player-stats .league-table td.col-team-logo,
.team-section-player-stats .league-table th.col-team,
.team-section-player-stats .league-table td.col-team,
.team-section-player-stats .league-table th.col-pos,
.team-section-player-stats .league-table td.col-pos,
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) th[data-sort="rank"],
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) td.rank,
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) th.col-team,
.table-wrap > table[id^="team-"][id$="-table"]:not([id*="players"]):not([id*="lineups"]) td.col-team,
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) th.col-season,
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) td.col-season,
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) th.col-team,
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) td.col-team {
  box-sizing: border-box;
}

/* Largeurs déterministes — sans ça, position:sticky + left:Xpx ne marche pas. */
.players-section-player-stats .league-table th.col-team,
.players-section-player-stats .league-table td.col-team {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}
.players-section-player-stats .league-table th.col-pos,
.players-section-player-stats .league-table td.col-pos {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}
.players-section-player-stats .league-table th.col-team-logo,
.players-section-player-stats .league-table td.col-team-logo {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
}

/* Sticky horizontal — base. Backgrounds opaques sur la même teinte que le
   body (--background-color = #161514) pour masquer ce qui défile derrière. */
.players-section-player-stats .league-table th.col-team,
.players-section-player-stats .league-table td.col-team {
  position: sticky;
  left: 0;
  background: var(--background-color);
  z-index: 2;
}
.players-section-player-stats .league-table th.col-pos,
.players-section-player-stats .league-table td.col-pos {
  position: sticky;
  left: 220px;
  background: var(--background-color);
  z-index: 2;
}
.players-section-player-stats .league-table th.col-team-logo,
.players-section-player-stats .league-table td.col-team-logo {
  position: sticky;
  left: 268px;     /* 220 + 48 */
  background: var(--background-color);
  z-index: 2;
  /* Séparateur visuel à droite — marque le bord du "freeze pane" et
     évite l'effet "coupe nette" pendant le scroll. */
  box-shadow: inset -1px 0 0 #2f2f2f;
}

/* Even rows : très légère teinte (alignée sur la base rgba transparent du
   reste de la table). Comme la sticky cell doit être opaque, on hardcode
   la résultante de la superposition #161514 + rgba(255,255,255,0.018). */
.players-section-player-stats .league-table tbody tr:nth-child(even) td.col-team,
.players-section-player-stats .league-table tbody tr:nth-child(even) td.col-pos,
.players-section-player-stats .league-table tbody tr:nth-child(even) td.col-team-logo {
  background: #1a1918;
}

/* Hover : background plus marqué pour matcher le hover du reste de la
   table. tr:hover td affiche rgba(153,153,153,0.07) sur les cellules
   normales ; on hardcode l'équivalent opaque ici. */
.players-section-player-stats .league-table tbody tr:hover td.col-team,
.players-section-player-stats .league-table tbody tr:hover td.col-pos,
.players-section-player-stats .league-table tbody tr:hover td.col-team-logo {
  background: #232220;
}

/* Row LIGUE : sticky vertical + sticky horizontal. Le z-index doit
   dépasser celui des autres cellules sticky horizontales pour rester
   visible quand on scrolle dans le corps du tableau. */
.players-section-player-stats .league-table tbody tr.is-league-row td.col-team,
.players-section-player-stats .league-table tbody tr.is-league-row td.col-pos,
.players-section-player-stats .league-table tbody tr.is-league-row td.col-team-logo {
  z-index: 3;
  /* Background hérité de .is-league-row td (= #1f1d1c !important) → OK. */
}

/* thead : sticky vertical + sticky horizontal sur les 3 premières cols
   (coin haut-gauche). z-index max pour passer au-dessus de tout. Le
   background du thead est #363636 (cf .league-table thead th plus haut),
   on l'override ici pour les cellules sticky. */
.players-section-player-stats .league-table thead th.col-team,
.players-section-player-stats .league-table thead th.col-pos,
.players-section-player-stats .league-table thead th.col-team-logo {
  z-index: 4;
  background: #363636;
}


/* ═════════════════════════════════════════════════════════════════════════
   STICKY HORIZONTAL — colonnes Player + Pos (page TEAM)
   ─────────────────────────────────────────────────────────────────────────
   Même mécanique que PLAYERS, mais sur 2 colonnes seulement (pas de Team
   car la page TEAM concerne UNE équipe — toutes les joueuses sont de la
   même équipe, redondant). Largeurs : 220 (Player) + 48 (Pos).
   ═════════════════════════════════════════════════════════════════════════ */
.team-section-player-stats .league-table th.col-team,
.team-section-player-stats .league-table td.col-team {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  position: sticky;
  left: 0;
  background: var(--background-color);
  z-index: 2;
}
.team-section-player-stats .league-table th.col-pos,
.team-section-player-stats .league-table td.col-pos {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  position: sticky;
  left: 220px;
  background: var(--background-color);
  z-index: 2;
  box-shadow: inset -1px 0 0 #2f2f2f;
}
/* Even row + hover */
.team-section-player-stats .league-table tbody tr:nth-child(even) td.col-team,
.team-section-player-stats .league-table tbody tr:nth-child(even) td.col-pos {
  background: #1a1918;
}
.team-section-player-stats .league-table tbody tr:hover td.col-team,
.team-section-player-stats .league-table tbody tr:hover td.col-pos {
  background: #232220;
}
/* Ligne TEAM (équivalent is-league-row sur PLAYERS) sticky vertical : z=3. */
.team-section-player-stats .league-table tbody tr.is-team-row td.col-team,
.team-section-player-stats .league-table tbody tr.is-team-row td.col-pos {
  z-index: 3;
}
/* Thead × sticky col : z=4. */
.team-section-player-stats .league-table thead th.col-team,
.team-section-player-stats .league-table thead th.col-pos {
  z-index: 4;
  background: #363636;
}


/* ═════════════════════════════════════════════════════════════════════════
   STICKY HORIZONTAL — colonnes Season + Team (page PLAYER, Career tables)
   ─────────────────────────────────────────────────────────────────────────
   Cible : les 8 tableaux Career (Basics, Overall, Net, Offense, Defense,
   Playmaking, Shooting, Opp Shooting). Pas le Game Log (structure
   différente : Date+Season+Team+Opp+Result, scope hors demande).
   Sélecteur : id^="player-" et id$="-table" et exclut "gamelog".
   ═════════════════════════════════════════════════════════════════════════ */
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) th.col-season,
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) td.col-season {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
  position: sticky;
  left: 0;
  background: var(--background-color);
  z-index: 2;
}
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) th.col-team,
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) td.col-team {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
  position: sticky;
  left: 70px;
  background: var(--background-color);
  z-index: 2;
  box-shadow: inset -1px 0 0 #2f2f2f;
}
/* Even row + hover */
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) tbody tr:nth-child(even) td.col-season,
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) tbody tr:nth-child(even) td.col-team {
  background: #1a1918;
}
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) tbody tr:hover td.col-season,
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) tbody tr:hover td.col-team {
  background: #232220;
}
/* Thead × sticky col : z=4. */
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) thead th.col-season,
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) thead th.col-team {
  z-index: 4;
  background: #363636;
}
/* Career row : préserve la teinte orange (rgba(250,70,22,0.06) sur fond
   #161514 ≈ #241814 en opaque). Sans cet override, les cellules sticky
   col-season/col-team affichent le background neutre var(--background-color)
   et la row Career perd son liseré visuel. */
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) tbody tr.is-career-row td.col-season,
.table-wrap > table[id^="player-"][id$="-table"]:not([id*="gamelog"]) tbody tr.is-career-row td.col-team {
  background: #241814;
}


/* ═════════════════════════════════════════════════════════════════════════
   TOOLS-BAR EMPILÉE (2 lignes) — League stats / Roster Stats / Players Stats
   ─────────────────────────────────────────────────────────────────────────
   Les cards de stats (League/Players/Roster) ont maintenant les onglets
   (Basics/Overall/Offense/Defense/Shooting) et les toggles
   (Per Game/Per 100, %/Adj, Team/Opp, vs Top 5) déplacés du <summary> vers
   la barre TOOLS. La barre se présente désormais en 2 lignes séparées par
   un divider pointillé léger :
     • Ligne 1 (.tools-bar-row-controls) : tabs (gauche) + toggles (droite)
     • Ligne 2 (.tools-bar-row-actions)  : filtres période/colonne (gauche)
                                            + Playoffs/Charts/Comparer (droite)
   On garde le padding/margin horizontal du .tools-bar mais on bascule
   flex-direction:column pour empiler les 2 lignes + le divider.
   ═════════════════════════════════════════════════════════════════════════ */
.tools-bar-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.tools-bar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}
/* Ligne 1 : tabs alignés à gauche, toggles poussés à droite via
   `margin-left: auto` sur `.summary-controls` (cf. règle ci-dessous). */
.tools-bar-row-controls {
  justify-content: space-between;
  padding: 0.2rem 0;
}
/* Ligne 2 : layout d'origine (justify-content: space-between géré par les
   2 groupes flex enfants, comme avant le refactor). */
.tools-bar-row-actions {
  justify-content: space-between;
  padding: 0.2rem 0;
}
/* Divider pointillé léger entre les 2 lignes. */
.tools-bar-divider {
  border: none;
  border-top: 1px dotted rgba(255, 255, 255, 0.08);
  margin: 0.5rem 0;
  width: 100%;
}
/* Override du display par défaut de .tab-nav / .summary-controls quand
   ils ne sont plus enfants directs d'un <summary> flex.
   Les anciennes règles `.collapsible-section > summary .tab-nav` et
   `.collapsible-section > summary .summary-controls` ne s'appliquent
   plus car le sélecteur descendant n'est plus satisfait — on doit donc
   redéfinir leur display flex ici. */
.tools-bar-row-controls .tab-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.tools-bar-row-controls .summary-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-left: auto;  /* pousse les toggles à droite */
}

/* IMPORTANT : la règle globale `button { width: 100% }` (ligne ~597) écrase
   la largeur naturelle des .tab-btn / .scale-btn / .adj-btn / .side-btn
   quand ils sont à l'intérieur d'un flex container — ce qui les force
   chacun sur leur propre ligne. Dans le <summary> d'origine, le contexte
   flex de summary les gardait inline malgré ça. Maintenant qu'on est dans
   la tools-bar, il faut explicitement remettre width:auto. */
.tools-bar-row button {
  width: auto;
}

/* ──────────────── Cards verrouillées ouvertes (no toggle) ──────────────── */
/* `is-locked-open` désactive le toggle natif du <details> : visuellement
   le summary ne montre plus de chevron ni de cursor pointer, et un global
   handler dans router.js intercepte le click pour preventDefault le toggle.
   Sert pour les cards League stats / Roster Stats / Players Stats qui ne
   doivent jamais se fermer. */
.is-locked-open > summary {
  cursor: default;
  list-style: none;
}
.is-locked-open > summary::-webkit-details-marker,
.is-locked-open > summary::marker {
  display: none;
}
.is-locked-open > summary .chev {
  display: none;
}

/* ──────────────── Section "Classement · Matchs" (mergée) ──────────────── */
/* Card unique qui héberge 2 sous-tableaux côte à côte dans une grid 2-cols.
   On ajoute un padding au container .overview-grid pour décoller les
   sous-cols du bord de la card parent (sinon .overview-grid colle aux
   bords du <details>). */
.overview-section > .overview-grid {
  padding: 0.6rem 1.2rem 1.2rem 1.2rem;
}
.overview-col {
  min-width: 0;
}
/* Les .card-body internes aux sous-cols : padding réduit (déjà encapsulés
   par le padding de .overview-grid). */
.overview-col > .card-body {
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PBP filter pane — éléments manquants : "Match selection" / "Advanced filters".
   Les autres styles (grid, selects, tabs) héritent déjà des règles `moteur`
   existantes plus haut dans le fichier. On rajoute juste ici les classes
   qui n'avaient aucun fallback.
   ═══════════════════════════════════════════════════════════════════════════ */

/* En-tête de section : "MATCH SELECTION" / "PLAY FILTER" — typo Switzer
   10px/700 uppercase + liseré orange 3px à gauche (équivalent visuel des
   <legend> du site mais sans la box de fieldset). */
.pbp-section-header {
  font-family: 'Switzer', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 0.7rem 0;
  padding-left: 0.55rem;
  border-left: 3px solid var(--wnba-color);
  line-height: 1.1;
}

/* Espace entre deux sections successives (la 2e Section Header obtient un
   margin-top via le sélecteur de fratrie). */
.pbp-field-grid + .pbp-section-header,
.pbp-checkbox-row + .pbp-section-header,
.pbp-help + .pbp-section-header {
  margin-top: 1.1rem;
}

/* Advanced filters — <details>/<summary> collapsible. Border top/bottom
   léger pour démarquer la zone sans en faire un gros bouton. */
.pbp-advanced {
  margin: 0.6rem 0 1.1rem 0;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
}
.pbp-advanced > summary,
.pbp-advanced-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0;
  font-family: 'Switzer', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s ease;
}
.pbp-advanced > summary:hover {
  color: var(--text-color);
}
.pbp-advanced > summary::-webkit-details-marker,
.pbp-advanced > summary::marker {
  display: none;
}
/* Marker "i" pour les notes d'aide PBP (= remplace l'ancien Unicode ⓘ). */
.pbp-help-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: 'Switzer', sans-serif;
  font-size: 0.65rem;
  font-style: italic;
  font-weight: 700;
  opacity: 0.7;
}

/* Chevron pbp en CSS pur (pointe à droite, rotate 90° quand open). */
.pbp-advanced-chev {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #666;
  margin-right: 0.4rem;
  transition: transform 0.18s ease, border-left-color 0.18s ease;
  vertical-align: middle;
}
.pbp-advanced[open] .pbp-advanced-chev {
  transform: rotate(90deg);
  border-left-color: var(--wnba-color);
}
.pbp-advanced-opt {
  color: #555;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-left: auto;
  text-transform: lowercase;
}
.pbp-advanced > .pbp-field-grid {
  padding: 0.2rem 0 0.85rem 0.85rem;
  border-left: 1px solid #2a2a2a;
  margin-left: 0.2rem;
}


/* ─────────────────────────────────────────────────────────────────────────
   Bouton Sync (header) + toast de retour
   ───────────────────────────────────────────────────────────────────── */
.header-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.5rem;
}
.header-sync-icon {
  font-size: 0.9rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.3s ease;
}
.header-sync-btn.is-syncing .header-sync-icon {
  animation: header-sync-spin 0.9s linear infinite;
}
@keyframes header-sync-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.header-sync-btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

.header-sync-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 3000;
  max-width: 380px;
  padding: 0.7rem 1rem;
  border-radius: 4px;
  font-family: 'Switzer', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-color);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
  opacity: 1;
}
.header-sync-toast.is-ok {
  background: rgba(63, 175, 89, 0.95);
  color: #fff;
}
.header-sync-toast.is-err {
  background: rgba(216, 76, 76, 0.95);
  color: #fff;
}


/* ─────────────────────────────────────────────────────────────────────────
   Setup onboarding dialog — popup au 1er lancement / data manquante.
   Cohérent avec le style chart-dialog / glossary-dialog (dark theme +
   accent WNBA orange).
   ───────────────────────────────────────────────────────────────────── */
.setup-dialog {
  border: 1px solid #5a5a5a;
  border-radius: 4px;
  background: #1f1f1f;
  color: var(--text-color);
  max-width: 640px;
  width: 90vw;
  padding: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}
.setup-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
}

.setup-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.setup-dialog-header {
  padding: 1.1rem 1.4rem 0.6rem;
  border-bottom: 1px solid #3a3a3a;
}
.setup-dialog-title {
  margin: 0;
  font-family: 'Switzer', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
}
.setup-dialog-subtitle {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  color: var(--wnba-color);
}

.setup-dialog-body {
  padding: 1rem 1.4rem;
  overflow: auto;
  flex: 1;
  font-family: 'Switzer', sans-serif;
  font-size: 0.85rem;
  line-height: 1.55;
}
.setup-dialog-body p {
  margin: 0 0 0.85rem;
  color: #d4d4d4;
}

.setup-steps {
  margin: 0.4rem 0 0.6rem 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.setup-steps li {
  font-size: 0.85rem;
  color: #d4d4d4;
}
.setup-steps li strong {
  color: var(--text-color);
}

.setup-bundle-link {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.4rem 0.85rem;
  background: var(--wnba-color);
  color: #fff;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04rem;
  text-decoration: none;
  transition: background 120ms ease;
}
.setup-bundle-link:hover {
  background: var(--lightwnba-color);
}

.setup-path {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.18rem 0.5rem;
  background: #161514;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.78rem;
  color: var(--lightwnba-color);
}

.setup-missing {
  margin-top: 1rem;
  padding: 0.75rem 0.95rem;
  background: #161514;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
}
.setup-missing-title {
  margin: 0 0 0.5rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  color: #999;
}
.setup-missing-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.setup-missing-list li {
  font-size: 0.8rem;
  color: #d4d4d4;
}
.setup-missing-pattern {
  margin-left: 0.4rem;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.7rem;
  color: #999;
}
.setup-missing-desc {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: #999;
}

.setup-feedback {
  margin-top: 0.9rem;
  padding: 0.55rem 0.85rem;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 500;
}
.setup-feedback.is-ok {
  background: rgba(63, 175, 89, 0.15);
  border: 1px solid rgba(63, 175, 89, 0.4);
  color: #b6e3c3;
}
.setup-feedback.is-err {
  background: rgba(216, 76, 76, 0.15);
  border: 1px solid rgba(216, 76, 76, 0.4);
  color: #f1b4b4;
}

.setup-dialog-footer {
  padding: 0.85rem 1.4rem 1.1rem;
  border-top: 1px solid #3a3a3a;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}
.setup-btn-skip,
.setup-btn-primary {
  padding: 0.5rem 1rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.setup-btn-skip {
  background: transparent;
  border: 1px solid #5a5a5a;
  color: #d4d4d4;
}
.setup-btn-skip:hover {
  background: #2c2c2c;
  border-color: #888;
}
.setup-btn-primary {
  background: var(--wnba-color);
  border: 1px solid var(--wnba-color);
  color: #fff;
}
.setup-btn-primary:hover {
  background: var(--lightwnba-color);
  border-color: var(--lightwnba-color);
}
.setup-btn-primary:disabled {
  background: #444;
  border-color: #444;
  cursor: wait;
}


/* ─────────────────────────────────────────────────────────────────────────
   Loading overlay : bouton cancel (× en haut à droite)
   Ex-`<p onclick>` migré vers `<button>` pour accessibilité clavier (QW5).
   Garde les styles visuels d'origine (cursor pointer, position fixed).
   ───────────────────────────────────────────────────────────────────── */
.loading-cancel {
  position: fixed;
  top: 1.2rem;
  right: 2rem;
  margin: auto;
  background: transparent;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.45rem;
  border-radius: 2px;
}
.loading-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
}


/* ─────────────────────────────────────────────────────────────────────────
   A11y : focus visible global (QW4)
   Les nombreux `outline: none` du fichier sont conservés (sinon les
   borders custom orange sont écrasées au clic souris). Mais on rétablit
   un ring de focus VISIBLE pour la navigation clavier via :focus-visible
   (qui ne se déclenche QUE au keyboard tab, pas au mouse click).
   Le sélecteur global *:focus-visible vient en fin de fichier pour
   garantir une priorité de cascade haute. Outline avec offset pour ne
   pas masquer la border existante du contrôle.
   ───────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--wnba-color);
  outline-offset: 2px;
  /* Glow discret pour les contrôles dark mode (= renforce sur fond sombre). */
  box-shadow: 0 0 0 1px rgba(250, 70, 22, 0.25);
}
/* Variante bleue pour les contrôles NCAAW (ex : page NCAAW). Optionnel,
   l'orange WNBA reste safe par défaut sur tout le site. */
.ncaaw-players-page :focus-visible {
  outline-color: var(--ncaaw-color);
  box-shadow: 0 0 0 1px rgba(0, 156, 222, 0.25);
}


/* ═════════════════════════════════════════════════════════════════════════
   GAMES — page liste mensuelle des matchs
   ─────────────────────────────────────────────────────────────────────────
   Layout 50/50 calendrier (gauche) | liste matchs du jour (droite).
   Style inspiré du Calendar Apple : épuré, fond très sombre, peu de
   bordures, cells carrées avec gros numéro de jour, today en cercle
   plein orange, weekends légèrement atténués, out-of-month en gris.
   ═════════════════════════════════════════════════════════════════════════ */
.games-page {
  width: var(--page-width);
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 1.2rem 1rem 2rem;
}
.games-page-header {
  border-bottom: none;
  padding-bottom: 0.5rem;
  margin-bottom: 1.2rem;
}
.games-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
@media (max-width: 920px) {
  .games-layout { grid-template-columns: 1fr; }
}

/* ──────────────── Colonne gauche : calendrier ──────────────── */
.games-calendar-card {
  /* Bg aligné sur .league-card mais border plus discrète (#2a2a2a) pour
     une délimitation moins agressive autour des deux grandes cards. */
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 1.4rem 1.4rem 1.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Toolbar : grand label mois + flèches discrètes + sélecteur rapide. */
.games-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
}
.games-cal-nav {
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  color: #888;
  font-size: 1.5rem;
  font-weight: 300;
  cursor: pointer;
  font-family: 'Switzer', sans-serif;
  line-height: 1;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.games-cal-nav:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--wnba-color);
}
/* Label mois : style Apple — "May 2026" en gros, cliquable pour
   ouvrir le popover sélecteur. */
.games-cal-month {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-color);
  font-family: 'Switzer', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02rem;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  text-align: center;
  border-radius: 4px;
  transition: background 0.15s;
}
.games-cal-month:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ─── Popover sélecteur mois/année rapide ─── */
.games-cal-picker {
  position: absolute;
  top: 4.2rem;
  left: 1.4rem;
  right: 1.4rem;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 1rem;
  z-index: 10;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.8);
}
.games-cal-picker[hidden] { display: none; }
.games-cal-picker-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.games-cal-picker-row label {
  font-family: 'Switzer', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  color: #888;
  width: 50px;
}
.games-cal-picker-select {
  flex: 1;
  background: #0e0e0e;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: var(--text-color);
  padding: 0.4rem 0.6rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.9rem;
}
.games-cal-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.games-cal-picker-cancel,
.games-cal-picker-apply {
  background: transparent;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: #cfcfcf;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
}
.games-cal-picker-apply {
  background: var(--wnba-color);
  border-color: var(--wnba-color);
  color: #fff;
}
.games-cal-picker-apply:hover {
  filter: brightness(1.1);
}

/* ─── Grille calendrier — style Apple Calendar ─── */
.games-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: #666;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #1f1f1f;
}
.games-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* 6 rangs max — certains mois s'étalent sur 6 semaines. Auto-rows pour
     que chaque rangée prenne sa part proportionnelle. */
  grid-auto-rows: 1fr;
  gap: 4px;
  flex: 1;
  min-height: 380px;
}
/* Une cellule jour. Fond très subtil pour ressortir à peine sur la card,
   border discrète. Layout : badge nb matchs en haut, gros numéro du
   jour en bas à DROITE. */
.games-cal-cell {
  position: relative;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 0.5rem 0.65rem;
  font-family: 'Switzer', sans-serif;
  color: #d6d6d6;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;       /* numéro et badge alignés à droite */
  transition: background 0.15s, border-color 0.15s;
}
.games-cal-cell:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: #4a4a4a;
}
/* Numéro du jour : bold, en bas à droite. Taille modérée pour laisser la
   place au badge "XX games" en haut (signal principal du calendrier). */
.games-cal-day-num {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01rem;
}
/* Out-of-month : jours du mois précédent/suivant pour aligner la 1ère/dernière
   semaine. Très estompés. */
.games-cal-cell.is-out {
  color: #3a3a3a;
  cursor: default;
}
.games-cal-cell.is-out:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: #2a2a2a;
}
/* Weekend : légère atténuation. */
.games-cal-cell.is-weekend .games-cal-day-num {
  color: #999;
}
.games-cal-cell.is-out.is-weekend .games-cal-day-num {
  color: #2e2e2e;
}
/* Aujourd'hui — cercle plein orange autour du numéro (style Apple).
   Taille proportionnée au numéro 1.1rem → cercle 1.6rem. */
.games-cal-cell.is-today .games-cal-day-num {
  background: var(--wnba-color);
  color: #fff;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Sélectionné — bordure orange. Ne supplante PAS le today (les 2 peuvent
   coexister, ex. quand on clique sur today). */
.games-cal-cell.is-selected {
  border-color: var(--wnba-color);
  background: rgba(250, 70, 22, 0.06);
}
/* Badge nb matchs — en haut, aligné à gauche pour ne pas concurrencer
   visuellement le gros numéro en bas à droite. Blanc par défaut pour
   rester sobre, orange uniquement sur le jour J pour l'unifier au
   cercle today. */
.games-cal-games-count {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04rem;
  color: #fff;
  text-transform: uppercase;
  align-self: flex-start;       /* badge à gauche, day-num à droite */
}
.games-cal-cell.is-today .games-cal-games-count {
  color: var(--wnba-color);
}
.games-cal-cell.is-out .games-cal-games-count {
  display: none;
}
.games-cal-loading {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'Switzer', sans-serif;
  font-size: 0.85rem;
  color: #666;
  padding: 2rem 0;
}

/* ──────────────── Colonne droite : matchs du jour ──────────────── */
.games-day-card {
  /* Même bg/border que la card calendrier — border #2a2a2a discrète. */
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 1.4rem 1.4rem 1.6rem;
}
.games-day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #1f1f1f;
  margin-bottom: 1.2rem;
}
.games-day-title {
  font-family: 'Switzer', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02rem;
  margin: 0;
  color: var(--text-color);
}
.games-day-meta {
  font-family: 'Switzer', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #666;
}
.games-day-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8rem;
}
.games-day-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'Switzer', sans-serif;
  font-size: 0.9rem;
  color: #555;
  padding: 3rem 0;
}

/* ──────────────── Card match individuelle (colonne droite) ──────────────── */
.games-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 0.9rem 0.9rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: background 0.15s, border-color 0.15s;
}
.games-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: #4a4a4a;
}
.games-card-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  font-family: 'Switzer', sans-serif;
}
.games-card-team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
.games-card-team:first-child {
  justify-content: flex-start;
}
.games-card-team:last-child {
  justify-content: flex-end;
}
.games-card-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.games-card-logo-placeholder {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.04em;
}
.games-card-abbr {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #d6d6d6;
}
.games-card-score {
  font-family: 'Inter', 'Switzer', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: -0.02em;
}
.games-card-sep {
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: #666;
  letter-spacing: 0.04em;
}
.games-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}
.games-card-status {
  color: #888;
  font-weight: 600;
}
.games-card-status.is-live {
  color: var(--wnba-color);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.games-card-live-dot {
  width: 6px;
  height: 6px;
  background: var(--wnba-color);
  border-radius: 50%;
  animation: gamesCardLivePulse 1.4s ease-in-out infinite;
}
@keyframes gamesCardLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.games-card-time {
  color: #666;
}
.games-card-cta {
  display: block;
  text-align: center;
  font-family: 'Switzer', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfcfcf;
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.games-card-cta:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: #5a5a5a;
  color: var(--text-color);
}

/* ─── Flow chart : courbe écart de score home − away ─── */
.games-card-flow {
  width: 100%;
  height: 70px;
  display: block;
}
.games-card-flow-empty,
.games-card-flow-loading {
  height: 70px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  color: #444;
  letter-spacing: 0.06em;
}
.games-card-flow-loading::after {
  content: "loading…";
  text-transform: uppercase;
  font-weight: 600;
  color: #444;
}

/* ─── Top performers par équipe (2 colonnes : away | home) ─── */
.games-card-tops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.games-card-tops-loading {
  height: 72px;
}
.games-card-top {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.games-card-top-team {
  font-family: 'Switzer', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wnba-color);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 0.1rem;
}
.games-card-top-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  gap: 0.4rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.74rem;
}
.games-card-top-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #666;
  text-transform: uppercase;
}
.games-card-top-name {
  color: #d6d6d6;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.games-card-top-val {
  font-family: 'Inter', 'Switzer', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: -0.01em;
}
.games-card-top-empty {
  color: #444;
  font-size: 0.7rem;
}

/* ─── PRE-GAME : Season series (H2H) ─── */
.games-card-h2h {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.6rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  font-family: 'Switzer', sans-serif;
}
.games-card-h2h-head {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfcfcf;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 0.15rem;
}
/* Récap en dessous du title — police plus fine, ni uppercase ni bold, pour
   contraste visuel avec le titre Season series. */
.games-card-h2h-summary {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #aaa;
  margin-bottom: 0.25rem;
}
.games-card-h2h-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.76rem;
}
.games-card-h2h-date {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #777;
  font-variant-numeric: tabular-nums;
}
.games-card-h2h-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  justify-content: flex-end;
  color: #d6d6d6;
}
.games-card-h2h-tm {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #999;
}
.games-card-h2h-pts {
  font-family: 'Inter', 'Switzer', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-color);
}
.games-card-h2h-sep {
  color: #555;
  font-size: 0.7rem;
}

/* ─── PRE-GAME : Form (2 cols away | home) ─── */
.games-card-forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.games-card-form {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.games-card-form-team {
  font-family: 'Switzer', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfcfcf;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #2a2a2a;
}
.games-card-form-pills {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.games-card-form-pill {
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-family: 'Switzer', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  background: #2a2a2a;
  color: #999;
  cursor: help;
}
.games-card-form-pill.is-win {
  background: rgba(108, 194, 74, 0.18);
  color: #6cc24a;
}
.games-card-form-pill.is-loss {
  background: rgba(255, 107, 107, 0.18);
  color: #ff6b6b;
}
.games-card-form-empty {
  color: #444;
  font-size: 0.72rem;
}

/* ═════════════════════════════════════════════════════════════════════════
   GAME — page détail d'un match
   ═════════════════════════════════════════════════════════════════════════ */
.game-page {
  width: var(--page-width);
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 1.2rem 1rem 2rem;
}

/* ─── Header match : layout 3 colonnes (away · center · home) ─── */
.game-page-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 1.8rem;
}
.game-header-team {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.game-header-team-away { justify-content: flex-end; }
.game-header-team-home { justify-content: flex-start; }
.game-header-team-logo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-header-team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.game-header-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 50%;
  font-family: 'Switzer', sans-serif;
  font-weight: 700;
  color: #888;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.game-header-team-name {
  font-family: 'Switzer', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #d6d6d6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-header-team-score {
  font-family: 'Inter', 'Switzer', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-color);
}
.game-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Switzer', sans-serif;
}
.game-header-status {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wnba-color);
}
.game-header-at {
  font-size: 1.1rem;
  font-weight: 500;
  color: #666;
}
.game-header-date {
  font-size: 0.82rem;
  font-weight: 500;
  color: #cfcfcf;
}
.game-header-venue {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #777;
  text-align: center;
}

/* ─── Sections génériques ─── */
.game-section {
  margin-bottom: 1.8rem;
}
.game-section-title {
  font-family: 'Switzer', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #cfcfcf;
  margin: 0 0 0.8rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--wnba-color);
}

/* ─── Period scores ─── */
.game-periods-table {
  width: auto;
  border-collapse: collapse;
  font-family: 'Switzer', sans-serif;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid #2a2a2a;
}
.game-periods-table th,
.game-periods-table td {
  padding: 0.5rem 1rem;
  text-align: center;
  border-bottom: 1px solid #1f1f1f;
  font-size: 0.85rem;
}
.game-periods-table th {
  background: #1a1a1a;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
}
.game-periods-table tbody tr:last-child td {
  border-bottom: none;
}
.game-periods-abbr {
  font-weight: 700;
  text-align: left !important;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d6d6d6;
}
.game-periods-total {
  font-family: 'Inter', 'Switzer', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-color);
  border-left: 1px solid #2a2a2a;
}
/* Sprint 3.7 : colorisation des totaux selon win/loss. */
.game-periods-total.is-win  { color: #6cc24a; }
.game-periods-total.is-loss { color: #ff6b6b; }
/* Sprint 3.7 : indicateur "qui a gagné ce quart" — petit dot orange en
   bottom-right pour les quarts gagnés. Discret pour ne pas alourdir. */
.game-periods-table tbody td.qt-win {
  position: relative;
}
.game-periods-table tbody td.qt-win::after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wnba-color);
}
/* Abbr cliquable vers TEAM. */
.game-periods-abbr .team-link {
  color: inherit;
  text-decoration: none;
  padding: 0;
}
.game-periods-abbr .team-link:hover {
  color: var(--wnba-color);
}

/* ─── Four Factors comparison ─── */
.game-ff-table {
  width: 100%;
  max-width: 540px;
  border-collapse: collapse;
  font-family: 'Switzer', sans-serif;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid #2a2a2a;
}
.game-ff-table th,
.game-ff-table td {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid #1f1f1f;
  font-size: 0.88rem;
}
.game-ff-table tbody tr:last-child td {
  border-bottom: none;
}
.game-ff-table th {
  background: #1a1a1a;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
}
.game-ff-team-col {
  width: 28%;
}
.game-ff-stat-col {
  width: 44%;
}
.game-ff-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
}
.game-ff-val {
  text-align: center;
  font-family: 'Inter', 'Switzer', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #d6d6d6;
}
.game-ff-val.is-better {
  color: var(--wnba-color);
  font-weight: 700;
}

/* ─── Grid 3 cols : Period scores · Flow chart · Top performers ─── */
.game-top-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, 2fr) minmax(220px, 1fr);
  gap: 1.2rem;
  margin-bottom: 1.8rem;
}
@media (max-width: 980px) {
  .game-top-grid { grid-template-columns: 1fr; }
}
.game-top-card {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.game-top-card .game-section-title {
  margin: 0;
  padding-left: 0.4rem;
  border-left: 3px solid var(--wnba-color);
  font-size: 0.78rem;
}

/* Period scores (compact dans la carte) */
.game-top-card .game-periods-table {
  width: 100%;
  border: none;
  background: transparent;
}
.game-top-card .game-periods-table th,
.game-top-card .game-periods-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid #1f1f1f;
}
.game-top-card .game-periods-table th {
  background: transparent;
}

/* Game flow chart SVG */
.game-flow-chart-wrap {
  width: 100%;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.game-flow-svg {
  width: 100%;
  height: auto;
  max-height: 180px;
  display: block;
}
.game-flow-empty {
  text-align: center;
  font-family: 'Switzer', sans-serif;
  font-size: 0.8rem;
  color: #666;
  padding: 2rem 0;
}
.game-flow-legend {
  display: flex;
  justify-content: flex-end;
  font-family: 'Switzer', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
}
.game-flow-legend-final.is-home { color: var(--wnba-color); }
.game-flow-legend-final.is-away { color: #cfcfcf; }

/* Top performers block (2 cols away | home) */
.game-top-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.game-top-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.game-top-team {
  font-family: 'Switzer', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wnba-color);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #2a2a2a;
}
.game-top-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  gap: 0.4rem;
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
}
.game-top-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #666;
  text-transform: uppercase;
}
.game-top-name {
  color: #d6d6d6;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-top-val {
  font-family: 'Inter', 'Switzer', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: -0.01em;
}
.game-top-empty {
  color: #555;
  font-size: 0.75rem;
}

/* ─── Overall stats table (LEAGUE-style, 2 lignes) ─── */
.game-overall-table .col-team {
  text-align: left !important;
  white-space: nowrap;
  font-size: 0.88rem;
  min-width: 200px;
}
.game-overall-team {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--text-color);
}
.game-overall-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
}
.game-overall-logo-placeholder {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #2f2f2f;
  border-radius: 50%;
  color: #888;
  flex-shrink: 0;
}
.game-overall-team-name {
  letter-spacing: 0.01em;
}
.game-overall-score {
  font-family: 'Inter', 'Switzer', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
}
.game-overall-score.is-win  { color: #6cc24a; }
.game-overall-score.is-loss { color: #ff6b6b; }

/* ─── Box scores side-by-side avec onglets ─── */
.game-box-toolbar {
  margin-bottom: 0.8rem;
}
.game-box-toolbar .tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
/* Neutralise le `button { width: 100% }` global qui ferait stacker
   les tabs verticalement dans le flex container. */
.game-box-toolbar .tab-nav .tab-btn {
  width: auto;
  margin-left: 0;          /* coupe le .tab-btn + .tab-btn margin-left:0.4rem
                              car on gère via gap */
}
.game-box-toolbar .tab-nav .tab-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Centiles : on réutilise les .pct badges globaux (cf bloc principal
   ligne ~1983) déjà utilisés par PLAYERS / TEAM / NCAAW. Les badges sont
   injectés par MetricsUtils.withPctBadge depuis game.js → .league-table
   tbody td .pct s'applique automatiquement.
   Override local : la table game-box-table a une font plus petite (0.75rem)
   que LEAGUE/PLAYERS, donc le badge par défaut à 0.78rem paraît énorme.
   On le tamponne à 0.6rem pour rester proportionné. */
.game-box-table tbody td .pct {
  font-size: 0.6rem;
  margin-top: 0.08rem;
  font-weight: 500;
}

/* Petit % SOUS le M-A dans la vue SHOOTING (display: block stacké).
   Sinon "2-3 66.7%" sur une ligne fait des cellules trop larges et écrase
   la colonne nom à 0px. Avec stacking on garde le cell compact. */
.game-box-pct {
  display: block;
  font-size: 0.62rem;
  color: #888;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-top: 0.1rem;
}

/* ─── Sprint 3.5 : Sort par colonne (boxscores) ─── */
.game-box-table th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color 0.12s ease, background 0.12s ease;
}
.game-box-table th.sortable:hover {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.03);
}
.game-box-table th.sortable.sorted-desc::after {
  content: " ▼";
  font-size: 0.55rem;
  color: var(--wnba-color);
  margin-left: 0.2rem;
  vertical-align: middle;
}
.game-box-table th.sortable.sorted-asc::after {
  content: " ▲";
  font-size: 0.55rem;
  color: var(--wnba-color);
  margin-left: 0.2rem;
  vertical-align: middle;
}
.game-box-table th.sortable.sorted-asc,
.game-box-table th.sortable.sorted-desc {
  color: var(--text-color);
}

/* ─── Sprint 3.6 : hover row highlight dans les boxscores ─── */
.game-box-table tbody tr:not(.game-box-totals):not(.game-box-dnp):hover td {
  background: rgba(255, 255, 255, 0.025);
}
.game-box-table tbody tr.game-box-totals {
  /* TEAM row : pas de hover effect (pas de sens). */
  pointer-events: none;
}

/* ─── Sprint 3.4 : navigation cliquable (boxscore name + Overall + Top) ─── */
/* Player link dans les boxscores : underline subtil au hover. */
.game-box-table .player-link {
  color: inherit;
  text-decoration: none;
  padding: 0;
}
.game-box-table .player-link:hover {
  color: var(--wnba-color);
}
/* Team link dans OVERALL et header. */
.game-overall-table .team-link,
.game-page-header .team-link {
  color: inherit;
  text-decoration: none;
  padding: 0;
  transition: opacity 0.12s ease;
}
.game-overall-table .team-link:hover,
.game-page-header .team-link:hover {
  opacity: 0.78;
}
/* Top performers : noms cliquables. */
.game-top-block .player-link {
  color: inherit;
  text-decoration: none;
  padding: 0;
}
.game-top-block .player-link:hover {
  color: var(--wnba-color);
}
.game-boxes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
@media (max-width: 980px) {
  .game-boxes-grid { grid-template-columns: 1fr; }
}
.game-box-col {
  min-width: 0;
}
.game-box-team-title {
  font-family: 'Switzer', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #d6d6d6;
  margin: 0 0 0.5rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--wnba-color);
}

/* ─── Boxscore tables (densité ajustée pour 2 cols side-by-side) ─── */
/* width: 100% pour que les 2 tables side-by-side remplissent toujours
   exactement leur container (sinon `width: auto` du global .league-table
   fait des largeurs intrinsèques différentes entre away/home).
   On garde `table-layout: auto` : avec 11–14 colonnes étroites, fixed
   donnait des cellules trop petites pour les valeurs "XX.X%" qui se
   chevauchaient visuellement entre USG% / TS% / eFG%. Auto laisse le
   navigateur dimensionner selon le contenu de chaque colonne. */
.game-box-table {
  width: 100% !important;
  margin: 0 !important;
}
.game-box-table th,
.game-box-table td {
  font-size: 0.75rem;
}
.game-box-table thead th {
  padding: 0.4rem 0.35rem;
}
.game-box-table tbody td {
  padding: 0.4rem 0.35rem;
}
.game-box-table th.num,
.game-box-table td.num {
  /* Garantit que chaque cellule numérique réserve un peu d'air à gauche
     pour ne pas coller au voisin de droite quand les valeurs sont serrées
     (ex : "15.2%" + "38.8%" + "33.3%" en USG/TS/eFG). */
  white-space: nowrap;
}
/* Nom joueuse : min-width fixé pour qu'elle ne soit JAMAIS écrasée à 0
   quand les cellules de droite portent un contenu large (cas SHOOTING avec
   M-A + %). Sinon table-layout: auto rétrécit la colonne nom jusqu'à
   masquer les noms. Si la table déborde du wrap, .table-wrap a
   overflow-x: auto → scroll horizontal. */
.game-box-table th.game-box-name,
.game-box-table td.game-box-name {
  min-width: 110px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-box-name {
  text-align: left !important;
  font-family: 'Switzer', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 0.85rem;
  white-space: nowrap;
}
.game-box-starter {
  color: var(--wnba-color);
  margin-left: 0.25rem;
  font-weight: 700;
}
.game-box-dnp {
  color: #555;
}
.game-box-dnp td {
  color: #555;
}
.game-box-totals td {
  background: rgba(250, 70, 22, 0.06);
  border-top: 2px solid rgba(250, 70, 22, 0.4);
  font-weight: 700;
}
.game-box-totals .game-box-name {
  color: var(--wnba-color);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Notice (no data / error) ─── */
.game-page-notice {
  font-family: 'Switzer', sans-serif;
  font-size: 0.9rem;
  color: #888;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed #3a3a3a;
  border-radius: 2px;
  padding: 1rem;
  text-align: center;
  margin-top: 1.5rem;
}

/* Responsive : header s'empile en colonne sur mobile */
@media (max-width: 720px) {
  .game-page-header {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .game-header-team {
    justify-content: center !important;
  }
  .game-header-team-score {
    font-size: 2.4rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PLAYER · Networks tab (assist network OUT)
   Layout 2 cols : tableau partenaires à gauche, graph constellation
   SVG à droite. Stack en single-col sous 900px.
   ════════════════════════════════════════════════════════════════════════ */
.player-networks-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 900px) {
  .player-networks-grid { grid-template-columns: 1fr; }
}
.player-networks-col { min-width: 0; }
.player-networks-header {
  margin-bottom: 0.7rem;
}
.player-networks-title {
  font-family: 'Switzer', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-color);
  margin: 0;
  padding-left: 0.6rem;
  border-left: 3px solid var(--wnba-color);
}
.player-networks-title-graph {
  margin-bottom: 0.6rem;
}
.player-networks-subtitle {
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #888;
  text-transform: none;
}
.player-networks-meta {
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  color: #8a8a8a;
  margin: 0.4rem 0 0 0;
  letter-spacing: 0.02em;
}
.player-networks-empty {
  font-family: 'Switzer', sans-serif;
  font-size: 0.78rem;
  color: #666;
  text-align: center;
  padding: 2rem 0;
}
/* Graph SVG constellation */
.player-networks-graph-wrap {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 0.5rem;
}
.player-networks-svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Les textes (initiales fallback, badge count, nom labels) n'interceptent
   pas les pointer events pour que le <title> du <g> parent fonctionne. */
.player-networks-node text,
.player-networks-node image,
.player-networks-node-center text,
.player-networks-node-center image {
  pointer-events: none;
}
/* Le <g> entier capture le hover → curseur "?" + tooltip natif <title>. */
.player-networks-node,
.player-networks-node-center {
  cursor: help;
}
.player-networks-node > circle:first-child {
  transition: stroke-width 0.12s ease, filter 0.12s ease;
}
.player-networks-node:hover > circle:first-child {
  stroke: #888;
  stroke-width: 1.5;
}
.player-networks-edge {
  cursor: help;
  transition: stroke-opacity 0.12s ease, stroke-width 0.12s ease;
}
.player-networks-edge:hover {
  stroke-opacity: 1 !important;
}
/* Tableau Networks : noms cliquables — hover orange. */
#player-networks-table .player-link {
  color: inherit;
  text-decoration: none;
  padding: 0;
}
#player-networks-table .player-link:hover {
  color: var(--wnba-color);
}
/* Force un layout fixed avec widths explicites pour éviter les conflits
   avec les rules sticky/col-team héritées de .league-table sur d'autres
   pages. Sans ça, le AST count chevauchait le nom + il y avait une col
   fantôme entre # et Partner. */
#player-networks-table {
  table-layout: fixed;
  width: 100% !important;
  margin: 0 !important;
}
#player-networks-table th.player-networks-th-rank,
#player-networks-table td.player-networks-rank {
  width: 38px;
  text-align: right !important;
}
#player-networks-table th.player-networks-th-name,
#player-networks-table td.player-networks-name {
  text-align: left !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 0.5rem;
  /* Override toute règle sticky héritée des autres pages. */
  position: static !important;
  left: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}
#player-networks-table th:nth-child(3),
#player-networks-table td:nth-child(3) { width: 58px; }
#player-networks-table th:nth-child(4),
#player-networks-table td:nth-child(4),
#player-networks-table th:nth-child(5),
#player-networks-table td:nth-child(5) { width: 90px; }
/* Hover sur une ligne → cursor "loupe" pour signaler le drill-down. */
#player-networks-table tbody tr[data-partner-id] {
  cursor: zoom-in;
  transition: background 0.1s ease;
}
/* Row focusée (= shot chart filtrée sur cette partenaire). On souligne
   avec un fond orange transparent + une bordure gauche pour rappeler
   la connexion avec la chart à côté. */
#player-networks-table tbody tr.is-network-focused td {
  background: rgba(250, 70, 22, 0.10);
}
#player-networks-table tbody tr.is-network-focused td:first-child {
  box-shadow: inset 3px 0 0 var(--wnba-color);
}