/* ============================================================
   MODALE DE CARRIÈRE — feuille partagée
   ------------------------------------------------------------
   Chargée par stats.html ET draftActif.html, en dernier dans les
   deux cas afin de spécialiser sans recourir à !important.

   Cette modale existait en double : mêmes identifiants, mêmes
   fonctions, mais deux jeux de styles qui divergeaient. Trois
   bugs en sont venus (valeurs tronquées à 110px, logo d'équipe
   à sa taille naturelle, vignette masquée à tort). Un seul
   fichier fait désormais foi.

   Les jetons (--primary, --card…) viennent de index.css.
   ============================================================ */

/* ============================================================
   10. MODALE DE CARRIÈRE
   ============================================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 12px;
  overflow-y: auto;
  background: var(--overlay-dark);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-content {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 16px auto;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  animation: modalSlideIn .28s ease;
}
.career-modal { max-width: 1100px; }

/* Vit désormais dans .cmh-name-banner (rangée flex), tout à droite —
   plus une superposition en position absolute sur .modal-content. */
.close-modal {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  color: var(--text-main);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.close-modal:hover { background: rgba(0, 0, 0, .45); transform: rotate(90deg); }

.modal-content h2 { margin-bottom: 6px; font-size: 1.3rem; color: var(--text-main); }
.modal-content h3 {
  margin-bottom: 14px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ---------- Bandeau du nom, aux couleurs de l'équipe ----------
   Nouvelle première rangée de la carte, au-dessus de .career-modal-header
   — c'est donc elle qui porte les coins arrondis du haut désormais.
   --team-primary / --team-secondary sont posées en ligne par JS via
   getTeamColors() (teamColors.js) : même source que les cartes de
   repêchage (voir DESIGN.md, « Real Teams Only Rule ») — jamais de
   couleur inventée, et le repli neutre de getTeamColors() couvre déjà le
   joueur sans équipe courante. Fond uni + liseré bas dans la secondaire :
   même convention que --team-accent sur la carte de choix.
   Le blanc du nom est littéral (demande explicite), avec une ombre portée
   sombre pour rester lisible même sur les couleurs primaires claires
   (BOS/NSH/PIT jaune, VGK doré, UTA bleu pâle) où un blanc nu manquerait
   de contraste.
   Rangée flex : le bouton de fermeture (.close-modal) vit maintenant ici,
   après le nom dans le HTML, poussé tout à droite par `justify-content:
   space-between` plutôt que superposé en position absolute sur toute la
   carte. */
.cmh-name-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -20px -20px 0;
  padding: 12px 20px 10px;
  border-radius: 18px 18px 0 0;
  background: var(--team-primary, var(--bg-gray-light));
  border-bottom: 3px solid var(--team-secondary, var(--border-light));
}
.cmh-name-banner h2 {
  margin: 0;
  min-width: 0;
  font-family: 'Bebas Neue', 'Segoe UI', sans-serif;
  font-size: 1.5rem;
  font-weight: 400; /* Bebas Neue est nativement grasse */
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .3);
  overflow-wrap: break-word;
}

.career-modal-header {
  margin: 0 -20px 14px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(0, 212, 255, .14), rgba(0, 212, 255, 0) 65%),
    var(--bg);
  border-bottom: 1px solid var(--border-light);
}
/* ---------- Identité : photo agrandie + nom, une seule rangée ---------- */
.cmh-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.player-headshot-container {
  flex: 0 0 auto;
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-gray-light);
  border: 2px solid var(--primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.player-headshot-container img { width: 100%; height: 100%; object-fit: cover; }
.player-headshot-container .no-photo { color: var(--text-light-gray); font-size: 2rem; }

.cmh-ident-text { flex: 1; min-width: 0; }
.cmh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.cmh-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 212, 255, .13);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-main);
}
.cmh-chip:empty { display: none; }
/* rgb(168,168,176) = --text-secondary (#A8A8B0) actuel ; littéral pour la
   même raison qu'ailleurs (color-mix() indisponible sur d'assez vieux
   mobiles), donc pas mis à jour automatiquement par la palette. */
.cmh-chip-team { background: rgba(168, 168, 176, .16); }
/* Le JS injecte le logo de l'équipe dans #careerPlayerTeam. index.css le
   dimensionnait via `.player-position-team img`, sélecteur qui ne
   s'applique plus ici : sans cette règle, l'image s'affiche à sa taille
   naturelle et fait exploser la hauteur de l'en-tête. */
/* Même traitement dans le jeton d'équipe, mais à taille réduite : la
   pastille doit rester compacte à côté du nom du joueur. */
.cmh-chip img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-gray);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  padding: 1px;
  object-fit: contain;
  vertical-align: middle;
}
.cmh-chip > span { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Libellé minuscule commun ---------- */
.cmh-mini-lbl {
  display: block;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-gray);
}

/* ---------- Liste compacte des informations secondaires ----------
   Remplace l'ancienne grille de cellules (.cmh-grid/.cmh-cell) : deux
   colonnes (.cmh-stats-col) côte à côte plutôt qu'une pile pleine
   largeur — même nombre de faits, environ moitié moins de hauteur.
   Libellé au-dessus de la valeur dans chaque rangée (pas côte à côte) :
   une fois la largeur coupée en deux, une rangée libellé/valeur sur une
   ligne n'a plus la place de respirer. Vit sous .cmh-chips, dans la
   même colonne que le nom, à côté de la photo agrandie. */
.cmh-stats {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border-light);
}
.cmh-stats-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cmh-stat-row { min-width: 0; }
.cmh-stat-row .cmh-mini-lbl { margin-bottom: 1px; }
.cmh-stat-val {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
  overflow-wrap: break-word;
}
.cmh-stat-sep { color: var(--text-main); font-weight: 700; margin: 0 4px 0 0; }
/* Repêchage : chaîne plus longue que les autres rangées (année, tour,
   choix, équipe) — un cran plus petit pour rester sur une seule ligne. */
#playerDraft { font-size: .64rem; }
/* Lieu : une seule ligne, jamais de retour. L'état/province est déjà
   abrégé côté JS (PROV_ABBR dans draftActif.js/index.js — Ontario → ON) ;
   ceci tronque la ville avec des points de suspension si le résultat ne
   tient toujours pas (grandes villes, pays sans abréviation connue). */
#playerBirthPlace {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Faits saillants de la saison en cours ----------
   Pleine largeur, sous .cmh-identity (photo + colonne d'identité) plutôt
   qu'à côté — trois chiffres ont besoin de respirer, pas d'être coincés
   contre la vignette. Peuplé par JS depuis `currentStats` ; masqué au
   repos et si le joueur n'a pas de ligne dans les statistiques courantes
   (voir le commentaire au-dessus de #careerSeasonHighlight dans le HTML). */
.cmh-season-highlight {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.cmh-season-label {
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-gray);
  margin-bottom: 4px;
}
.cmh-season-tiles {
  display: flex;
}
.cmh-season-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 6px;
  text-align: center;
}
.cmh-season-tile + .cmh-season-tile { border-left: 1px solid var(--border-light); }
.cmh-season-tile .cmh-mini-lbl { text-align: center; }
.cmh-season-val {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-main);
}
.cmh-season-rank {
  font-size: .62rem;
  font-weight: 600;
  color: var(--text-gray);
  white-space: nowrap;
}

.loading-spinner {
  padding: 34px 16px;
  text-align: center;
  font-size: .95rem;
  color: var(--text-secondary);
}

/* ---------- Filtres de carrière ---------- */
.career-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}
.filter-group-career {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.filter-group-career label {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
}
.filter-group-career select {
  padding: 6px 9px;
  min-height: 34px;
  border: 1px solid var(--border-gray);
  border-radius: 9px;
  background: var(--bg-gray-light);
  color: var(--text-main);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.filter-group-career select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Compteur de saisons retiré : il répétait ce que le tableau montre déjà,
   et sur téléphone il occupait à lui seul une rangée entière du bloc de
   filtres — 40px pris sur la hauteur du tableau.

   L'élément reste dans le DOM : filterCareerStats() et showGameLog() y
   écrivent, et ces fonctions vivent dans du JS minifié côté draftActif.

   `!important` est ici le seul recours : en passant à l'historique de match,
   handleViewChange() applique `statsCountBadge.style.display = "block"`, et
   une déclaration inline l'emporte sur toute règle de classe. */
.stats-count-badge { display: none !important; }

/* ---------- Tableau de carrière ---------- */
#careerStatsTable {
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-light);
  border-radius: 12px;
}
#careerStatsTable table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}
#careerStatsTable th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Densité « nano » : le tableau est le contenu principal de la modale,
     on lui rend la hauteur économisée sur l'en-tête. */
  padding: 6px 6px;
  background: rgba(0, 212, 255, .35);
  color: var(--text-main);
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-align: center;
  white-space: nowrap;
}
#careerStatsTable td {
  padding: 4px 6px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-dark);
  white-space: nowrap;
}
#careerStatsTable tbody tr { height: 32px; }
#careerStatsTable tbody tr:hover { background: rgba(0, 212, 255, .07); }
#careerStatsTable tr.nhl-season { background: rgba(0, 212, 255, .05); }
#careerStatsTable tr.current-season { background: rgba(0, 212, 255, .12); font-weight: 800; }
#careerStatsTable .season-col { font-weight: 800; color: var(--text-main); }
#careerStatsTable .league-col { font-size: .76rem; color: var(--text-secondary); }
/* Le JS construit `teams/${e.team}.png` où e.team est le NOM COMPLET
   renvoyé par l'API (« Anaheim Ducks ») et non l'abréviation : le fichier
   n'existe pas et l'image tombe sur son texte alternatif. Défaut de
   données antérieur, dans du JS minifié — non corrigé ici.
   On borne donc les vrais logos par la hauteur (largeur libre) et on rend
   le texte alternatif lisible sur une seule ligne : le nom de l'équipe
   reste affiché, sans gonfler la rangée. */
#careerStatsTable td.team-col img {
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-secondary);
}
/* Colonne « Ligue » masquée quand le filtre vaut « NHL seulement » : toutes
   les lignes y afficheraient la même valeur. Elle réapparaît dès qu'on
   élargit le filtre (Toutes les ligues / Autres ligues).

   Fait en CSS pur via :has() plutôt qu'en modifiant filterCareerStats(),
   qui vit dans du JS minifié. #careerFilters précède #careerStatsTable
   parmi ses frères, d'où le combinateur ~.

   Si :has() n'est pas reconnu, la règle est ignorée et la colonne reste
   visible — dégradation sans casse. */
#careerFilters:has(#leagueFilter option[value="nhl"]:checked)
  ~ #careerStatsTable .league-col {
  display: none;
}

.career-totals-row { background: rgba(0, 212, 255, .14); font-weight: 800; }
.career-totals-row td { border-top: 2px solid var(--primary); color: var(--text-main); }
.career-totals-label { text-align: left; text-transform: uppercase; letter-spacing: .5px; }

/* La modale ne défile pas : elle tient dans la fenêtre et c'est le tableau
   qui défile en son sein. Auparavant `.modal-content` débordait de sa
   hauteur maximale et c'était le calque de fond qui prenait le défilement,
   emportant l'en-tête du joueur hors de vue.

   La hauteur maximale retranche le rembourrage du calque (12px) ET la marge
   de `.modal-content` (16px), en haut comme en bas : les compter pour rien
   laissait 56px de débordement. */
.career-modal {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: calc(100dvh - 56px);
  overflow: hidden;
}
.cmh-name-banner, .career-modal-header { flex: 0 0 auto; }
/* `flex: 0 1 auto` : le tableau se rétracte quand la place manque, mais ne
   s'étire jamais — une seule saison ne doit pas occuper la hauteur de dix.
   `min-height: 0` autorise cette rétraction en contexte flex, sans quoi la
   taille du contenu ferait plancher et le débordement reviendrait. */
#careerStatsTable {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
}

.career-filters {
  overflow: visible;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.career-filters > * { min-width: 0; }
.filter-group-career { flex: 1 1 132px; min-width: 0; }
@media (min-width: 600px) {
  /* Sans `flex-grow: 0`, deux groupes suffisent à remplir la ligne et
     repoussent le troisième sur une seconde rangée. */
  .filter-group-career { flex: 0 1 200px; }
}

@media (min-width: 600px) {
  .player-headshot-container { width: 152px; height: 152px; border-radius: 18px; }
  .player-headshot-container .no-photo { font-size: 2.6rem; }
  .cmh-name-banner { padding: 14px 20px 12px; }
  .cmh-name-banner h2 { font-size: 1.9rem; letter-spacing: .6px; }
  .cmh-identity { gap: 18px; }
  .cmh-chip { font-size: .7rem; padding: 3px 9px; }
  .cmh-stats { gap: 22px; margin-top: 10px; padding-top: 9px; }
  .cmh-stats-col { gap: 6px; }
  .cmh-stat-row .cmh-mini-lbl { font-size: .62rem; }
  .cmh-stat-val { font-size: .82rem; }
  #playerDraft { font-size: .72rem; }
  .cmh-season-highlight { margin-top: 12px; padding-top: 10px; }
  .cmh-season-label { font-size: .6rem; margin-bottom: 6px; }
  .cmh-season-val { font-size: 1.6rem; }
  .cmh-season-rank { font-size: .7rem; }
}

@media (min-width: 1024px) {
  .modal { padding: 26px; }
  .modal-content { margin: 24px auto; padding: 24px; }
  .career-modal-header { margin: 0 -24px 16px; padding: 24px; }
  /* Rembourrage et marge changent ici : la hauteur maximale suit. */
  .career-modal { max-height: calc(100dvh - 100px); }
  .player-headshot-container { width: 184px; height: 184px; border-radius: 18px; border-width: 3px; }
  .player-headshot-container .no-photo { font-size: 3.2rem; }
  .cmh-name-banner { margin: -24px -24px 0; padding: 16px 24px 14px; }
  .cmh-name-banner h2 { font-size: 2.3rem; letter-spacing: .8px; }
  .cmh-identity { gap: 22px; }
  .cmh-season-val { font-size: 1.9rem; }
}

/* ---- Logo d'équipe dans le tableau de carrière ----
   Posé par careerTeamLogo.js, partagé par les deux pages. */
#careerStatsTable td.team-col {
  white-space: nowrap;
}
/* Pastille blanche cerclée, comme les badges d'équipe du reste du site.
   Sans ce fond, les logos sombres (Oilers, Bruins, Kings…) étaient
   illisibles sur le thème sombre.
   Le `position: absolute; bottom/right` du modèle d'origine n'est pas
   repris : là-bas le logo est un badge posé sur une photo, ici il est dans
   le flux d'une cellule de tableau et sortirait de la mise en page. */
#careerStatsTable .career-team-logo {
  width: var(--d-photo-logo);
  height: var(--d-photo-logo);
  border-radius: 50%;
  border: 2px solid var(--border-gray);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  padding: 2px;
  object-fit: contain;
  vertical-align: middle;
}
#careerStatsTable .career-team-name {
  vertical-align: middle;
  font-size: .74rem;
}

/* ============================================================
   SQUELETTE DE CHARGEMENT
   ------------------------------------------------------------
   Il calque la structure réelle de la modale : en-tête à fond
   débordant, grille d'informations, filtres, tableau à en-tête.

   Le squelette générique de skeleton-loader.css ne correspondait à
   rien de ce qui s'affiche ensuite — avatar rond de 120px là où la
   photo est un carré arrondi de 48px, six cellules sur une seule
   colonne là où la grille en compte quatre sur deux, aucun
   emplacement pour les filtres ni pour l'en-tête du tableau. La
   modale sautait de 345px à l'arrivée des données sur draftActif
   en 390px.

   Les valeurs ci-dessous reprennent celles des sélecteurs réels
   plus haut dans ce fichier ; toute retouche de l'un doit suivre
   dans l'autre.

   Le squelette reste en `display: block` : le JS des deux pages
   l'affiche par `style.display = "block"`, qui l'emporterait sur
   toute autre valeur posée ici.
   ============================================================ */
.career-skeleton {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ---- Bandeau du nom : calque .cmh-name-banner ----
   Neutre au chargement (pas encore de couleur d'équipe à afficher) — le
   fond vient de .cs-header .skeleton comme le reste du squelette. */
.cs-name-banner {
  margin: -20px -20px 0;
  padding: 12px 20px 10px;
  border-radius: 18px 18px 0 0;
  border-bottom: 3px solid var(--border-light);
}
.cs-name-bar { height: 20px; width: min(60%, 220px); border-radius: 5px; }

/* ---- En-tête : calque .career-modal-header ---- */
.cs-header {
  margin: 0 -20px 14px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(0, 212, 255, .14), rgba(0, 212, 255, 0) 65%),
    var(--bg);
  border-bottom: 1px solid var(--border-light);
}
/* Le degrade de .skeleton part de --bg, qui est aussi le fond de
   .cs-header : au repos les blocs y disparaissent et seule la lueur qui
   passe les revele. On repart donc du fond des cellules reelles. */
.cs-header .skeleton, .cs-name-banner .skeleton {
  background-image: linear-gradient(90deg,
    var(--bg-odd-row) 0, var(--card-white) 20%, var(--bg-odd-row) 40%, var(--bg-odd-row) 100%);
}
.cs-identity { display: flex; align-items: center; gap: 12px; }
.cs-photo { flex: 0 0 auto; width: 116px; height: 116px; border-radius: 14px; }
.cs-ident-text { flex: 1; min-width: 0; }
.cs-chips { display: flex; gap: 5px; margin-top: 6px; }
.cs-chip { width: 46px; height: 20px; border-radius: 5px; }

/* ---- Liste d'informations : calque .cmh-stats / .cmh-stats-col ---- */
.cs-stats {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border-light);
}
.cs-stats-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-stat-row { height: 12px; border-radius: 6px; }
.cs-stats-col:nth-child(1) .cs-stat-row:nth-child(1) { width: 75%; }
.cs-stats-col:nth-child(1) .cs-stat-row:nth-child(2) { width: 55%; }
.cs-stats-col:nth-child(2) .cs-stat-row:nth-child(1) { width: 85%; }
.cs-stats-col:nth-child(2) .cs-stat-row:nth-child(2) { width: 65%; }

/* ---- Faits saillants de saison : calque .cmh-season-highlight ---- */
.cs-season {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.cs-season-label { width: 90px; height: 9px; border-radius: 4px; margin-bottom: 8px; }
.cs-season-tiles { display: flex; }
.cs-season-tile {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
}
.cs-season-tile + .cs-season-tile { border-left: 1px solid var(--border-light); }
.cs-season-num { width: 28px; height: 18px; border-radius: 4px; }
.cs-season-rk { width: 40px; height: 9px; border-radius: 4px; }

/* ---- Filtres : calque .career-filters / .filter-group-career ---- */
/* 51px : hauteur mesuree d'un .filter-group-career (etiquette 14 + ecart 3
   + menu 34). */
/* Le rembourrage vertical vient d'une autre feuille appliquee a
   .career-filters (8px, 10px des 600px) : sans lui le squelette est 17px
   trop court. */
.cs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 10px;
}
.cs-filter { flex: 1 1 132px; height: 51px; border-radius: 9px; }

/* ---- Tableau : calque #careerStatsTable ---- */
.cs-table {
  margin-top: 14px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
}
.cs-thead { height: 27px; background: rgba(0, 212, 255, .35); }
.cs-row {
  display: grid;
  grid-template-columns: 1.3fr .9fr repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  height: 38px;
  padding: 0 6px;
  border-bottom: 1px solid var(--border-light);
}
.cs-row:last-child { border-bottom: 0; }
/* Les cellules ne portent pas la classe .skeleton — trop de balisage pour
   neuf colonnes sur six rangées ; le dégradé est repris ici, avec la même
   animation `shimmer` que skeleton-loader.css déclare globalement. */
.cs-row i {
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg) 0, var(--card) 20%, var(--bg) 40%, var(--bg) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

@media (min-width: 600px) {
  .cs-name-banner { padding: 14px 20px 12px; }
  .cs-name-bar { height: 24px; }
  .cs-identity { gap: 18px; }
  .cs-photo { width: 152px; height: 152px; border-radius: 18px; }
  .cs-stats { gap: 22px; margin-top: 10px; padding-top: 9px; }
  .cs-stats-col { gap: 10px; }
  .cs-stat-row { height: 14px; }
  .cs-filters { padding: 10px 0; }
  .cs-filter { flex: 0 1 200px; }
  .cs-row { height: 32px; }
  .cs-season { margin-top: 12px; padding-top: 10px; }
  .cs-season-num { width: 34px; height: 22px; }
}
@media (min-width: 1024px) {
  .cs-name-banner { margin: -24px -24px 0; padding: 16px 24px 14px; }
  .cs-name-bar { height: 28px; }
  .cs-header { margin: 0 -24px 16px; padding: 24px; }
  .cs-identity { gap: 22px; }
  .cs-photo { width: 184px; height: 184px; border-radius: 18px; }
  .cs-season-num { width: 38px; height: 26px; }
}

/* Mouvement réduit : la lueur défilante devient un simple aplat. */
@media (prefers-reduced-motion: reduce) {
  .cs-row i { animation: none; }
}