/* =============================================================================
   TIGRE BOIS — components.css
   -----------------------------------------------------------------------------
   Bibliothèque visuelle : boutons, badges, avatars, tableau de classement,
   podium, sélecteur de saison, carrousel, bandeau de synchro, carte joueur,
   états de chargement et d'erreur.

   Toutes les couleurs proviennent de css/tokens.css. Aucune valeur de palette
   n'est réécrite ici : on ne fait que composer (color-mix) à partir des jetons.

   Chaque composant existe en deux variantes réellement traitées :
     .tb-xxx--clair   sur fond ivoire
     .tb-xxx--sombre  sur fond vert Masters / vert profond

   MÉCANIQUE D'APPARITION — ELLE N'APPARTIENT PAS À CETTE FEUILLE
   -----------------------------------------------------------------------------
   Un seul moteur pour tout le site : css/motion.css et js/motion.js.
   Cette feuille ne pose donc AUCUN `opacity:0` et AUCUNE largeur de barre à
   zéro : ces états initiaux vivent dans motion.css, préfixés par `html.tb-js`,
   pour que le contenu reste visible quand le JavaScript est absent.

   Ce que les composants posent, et que motion.js reprend :
     [data-reveal] / [data-reveal-group] / [data-reveal-delai]  apparitions
     [data-barre="0.72"]          barre de points en fond de ligne (largeur)
     [data-barre-verticale="0.4"] mini-barre de saison (hauteur — la seule dont
                                  la géométrie est décrite ici, motion.css ne
                                  connaissant que les barres horizontales)
   La classe `.tb-barre-pleine` et la propriété `--tb-barre` sont écrites par
   motion.js. Tout est neutralisé sous prefers-reduced-motion, en fin de fichier.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. Réglages locaux et utilitaires
   -------------------------------------------------------------------------- */

/* Deux tons composés, tous deux à partir de jetons de tokens.css — aucune
   couleur nouvelle n'est inventée, seulement un dosage.
   Motif : `--tb-creme-70` (opacité .72) atteint 4,45:1 sur le cadre translucide
   d'un tableau en variante sombre, et 3,72:1 sur une ligne survolée — sous le
   seuil AA de 4,5:1 pour du petit texte. La même crème à 86 % remonte ces deux
   cas à 4,6:1 et 6,1:1 tout en restant nettement en retrait du texte courant,
   qui est en `--tb-creme` plein. */
:root {
  --tb-creme-lisible: color-mix(in srgb, var(--tb-creme) 86%, transparent);

  /* Même motif pour l'or : `--tb-or-clair` seul ne fait que 4,3:1 sur une ligne
     paire de tableau sombre et 4,1:1 sur une ligne survolée. Éclairci d'un peu
     de crème, il remonte à 5,3:1 et 4,7:1 — et reste le ton le plus lumineux
     de la ligne, donc toujours la colonne la plus forte. */
  --tb-or-lisible: color-mix(in srgb, var(--tb-or-clair) 52%, var(--tb-creme));
}

.tb-classement,
.tb-podium,
.tb-carrousel,
.tb-carte-joueur,
.tb-saisons,
.tb-synchro,
.tb-etat,
.tb-squelette {
  /* Métaux composés une seule fois, réutilisés par les médaillons et pastilles. */
  --tb-metal-or: linear-gradient(145deg, var(--tb-or-clair) 0%, var(--tb-or) 52%, #8A6A1C 100%);
  --tb-metal-argent: linear-gradient(145deg, #E9EDEF 0%, var(--tb-argent) 54%, #6E787E 100%);
  --tb-metal-bronze: linear-gradient(145deg, #E3B78D 0%, var(--tb-bronze) 54%, #7C4E27 100%);
}

/* Contenu réservé aux lecteurs d'écran. Redéclaré ici pour que la
   bibliothèque reste autonome si base.css évolue. */
.tb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus visible commun à tous les éléments interactifs de la bibliothèque. */
.tb-classement :focus-visible,
.tb-podium :focus-visible,
.tb-carrousel :focus-visible,
.tb-carte-joueur :focus-visible,
.tb-saisons :focus-visible,
.tb-synchro :focus-visible,
.tb-etat :focus-visible {
  outline: 2px solid var(--tb-orange);
  outline-offset: 2px;
  border-radius: var(--tb-r1);
}

/* -----------------------------------------------------------------------------
   1. Boutons
   -------------------------------------------------------------------------- */

.tb-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tb-e2);
  min-height: 44px;
  padding: var(--tb-e3) var(--tb-e5);
  border: 1px solid transparent;
  border-radius: var(--tb-rond);
  font-family: var(--tb-font-texte);
  font-size: var(--tb-t-petit);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  background: var(--tb-vert);
  color: var(--tb-creme);
  transition:
    background-color var(--tb-d1) var(--tb-ease),
    color var(--tb-d1) var(--tb-ease),
    border-color var(--tb-d1) var(--tb-ease),
    transform var(--tb-d1) var(--tb-ease),
    box-shadow var(--tb-d1) var(--tb-ease);
}

.tb-bouton:hover { background: var(--tb-vert-clair); transform: translateY(-1px); }
.tb-bouton:active { transform: translateY(0); }
.tb-bouton:disabled { opacity: .55; cursor: default; transform: none; }

.tb-bouton--principal { background: var(--tb-orange); color: var(--tb-blanc); }
.tb-bouton--principal:hover { background: color-mix(in srgb, var(--tb-orange) 85%, black); }

.tb-bouton--fantome {
  background: transparent;
  color: var(--tb-vert);
  border-color: var(--tb-ligne-forte);
}
.tb-bouton--fantome:hover { background: var(--tb-vert-pale); border-color: var(--tb-vert-clair); }

/* Variante sombre : sur fond vert, le bouton fantôme s'éclaircit. */
.tb-etat--sombre .tb-bouton--fantome,
.tb-classement--sombre .tb-bouton--fantome {
  color: var(--tb-creme);
  border-color: var(--tb-ligne-claire);
}
.tb-etat--sombre .tb-bouton--fantome:hover,
.tb-classement--sombre .tb-bouton--fantome:hover {
  background: rgba(255, 255, 255, .10);
  border-color: var(--tb-or-clair);
}

/* -----------------------------------------------------------------------------
   2. Badges
   -------------------------------------------------------------------------- */

.tb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tb-e1);
  padding: 4px 10px;
  border-radius: var(--tb-rond);
  font-family: var(--tb-font-texte);
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tb-badge--neutre {
  background: color-mix(in srgb, var(--tb-encre) 6%, transparent);
  color: var(--tb-encre-70);
  border-color: var(--tb-ligne);
}
.tb-badge--vert {
  background: var(--tb-vert-pale);
  color: var(--tb-vert);
  border-color: color-mix(in srgb, var(--tb-vert) 18%, transparent);
}
.tb-badge--orange {
  background: var(--tb-orange-pale);
  color: color-mix(in srgb, var(--tb-orange) 72%, var(--tb-encre));
  border-color: color-mix(in srgb, var(--tb-orange) 32%, transparent);
}
.tb-badge--or {
  background: color-mix(in srgb, var(--tb-or-clair) 30%, var(--tb-blanc));
  color: #6E520F;
  border-color: color-mix(in srgb, var(--tb-or) 45%, transparent);
}
.tb-badge--argent {
  background: color-mix(in srgb, var(--tb-argent) 22%, var(--tb-blanc));
  color: #4E585E;
  border-color: color-mix(in srgb, var(--tb-argent) 45%, transparent);
}
.tb-badge--bronze {
  background: color-mix(in srgb, var(--tb-bronze) 20%, var(--tb-blanc));
  color: #6E4526;
  border-color: color-mix(in srgb, var(--tb-bronze) 45%, transparent);
}
.tb-badge--sombre {
  background: rgba(255, 255, 255, .10);
  color: var(--tb-creme);
  border-color: var(--tb-ligne-claire);
}

/* Sur fond vert, les badges neutres et verts s'inversent automatiquement. */
.tb-classement--sombre .tb-badge--neutre,
.tb-carte-joueur--sombre .tb-badge--neutre,
.tb-podium--sombre .tb-badge--neutre {
  background: rgba(255, 255, 255, .08);
  color: var(--tb-creme-lisible);
  border-color: var(--tb-ligne-claire);
}

/* -----------------------------------------------------------------------------
   3. Avatar monogramme et bloc joueur
   -------------------------------------------------------------------------- */

.tb-avatar {
  display: block;
  border-radius: 50%;
  flex: 0 0 auto;
  /* Le médaillon est un SVG : il reste net de 28 px à 120 px. */
  box-shadow: 0 1px 3px rgba(18, 32, 26, .22);
}

.tb-joueur {
  display: inline-flex;
  align-items: center;
  gap: var(--tb-e3);
  min-width: 0;
}

.tb-joueur__avatar { display: inline-flex; flex: 0 0 auto; }

.tb-joueur__textes {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tb-joueur__nom {
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: .002em;
  color: var(--tb-encre);
  overflow-wrap: anywhere;
}

.tb-joueur__exaequo,
.tb-joueur__secondaire {
  font-size: var(--tb-t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tb-encre-70);
  font-weight: 600;
}

.tb-joueur__exaequo::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--tb-orange);
  vertical-align: middle;
  opacity: .7;
}

/* Variante sombre */
.tb-classement--sombre .tb-joueur__nom,
.tb-podium--sombre .tb-podium__nom { color: var(--tb-creme); }
.tb-classement--sombre .tb-joueur__exaequo,
.tb-classement--sombre .tb-joueur__secondaire { color: var(--tb-creme-lisible); }

/* -----------------------------------------------------------------------------
   4. Pastille de rang
   -------------------------------------------------------------------------- */

.tb-pastille {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tb-rond);
  font-family: var(--tb-font-texte);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1;
  border: 1px solid var(--tb-ligne);
  background: var(--tb-ivoire-alt);
  color: var(--tb-encre-70);
  flex: 0 0 auto;
}

.tb-pastille__valeur { display: block; }

.tb-pastille--medaille { border-color: transparent; color: var(--tb-encre); }

.tb-pastille--or {
  width: 42px;
  height: 42px;
  font-size: 1.125rem;
  background: var(--tb-metal-or);
  color: var(--tb-encre);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 0 0 3px color-mix(in srgb, var(--tb-or) 20%, transparent),
    0 4px 12px color-mix(in srgb, var(--tb-or) 38%, transparent);
}

.tb-pastille--argent {
  background: var(--tb-metal-argent);
  color: var(--tb-encre);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 0 0 2px color-mix(in srgb, var(--tb-argent) 20%, transparent),
    0 2px 8px color-mix(in srgb, var(--tb-argent) 32%, transparent);
}

.tb-pastille--bronze {
  background: var(--tb-metal-bronze);
  color: var(--tb-encre);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 0 2px color-mix(in srgb, var(--tb-bronze) 20%, transparent),
    0 2px 8px color-mix(in srgb, var(--tb-bronze) 30%, transparent);
}

.tb-pastille--vide { background: transparent; color: var(--tb-encre-70); border-style: dashed; }

.tb-classement--sombre .tb-pastille--neutre {
  background: rgba(255, 255, 255, .07);
  color: var(--tb-creme-lisible);
  border-color: var(--tb-ligne-claire);
}
.tb-classement--sombre .tb-pastille--vide { background: transparent; color: var(--tb-creme-lisible); }

/* -----------------------------------------------------------------------------
   5. TABLEAU DE CLASSEMENT — pièce maîtresse
   -------------------------------------------------------------------------- */

.tb-classement { position: relative; display: block; }

/* --- Cadre ---------------------------------------------------------------- */
.tb-classement__cadre {
  position: relative;
  border-radius: var(--tb-r3);
  border: 1px solid var(--tb-ligne);
  background: var(--tb-blanc);
  box-shadow: var(--tb-ombre2);
  overflow: hidden; /* détoure les coins arrondis, aucun défilement induit */
}

/* Filet supérieur or → orange : la signature éditoriale du tableau. */
.tb-classement__cadre::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tb-or-clair) 0%, var(--tb-or) 34%, var(--tb-orange) 100%);
  z-index: 3;
}

.tb-classement--sombre .tb-classement__cadre {
  background: rgba(255, 255, 255, .045);
  border-color: var(--tb-ligne-claire);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
}

/* --- Table ---------------------------------------------------------------- */
.tb-classement__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--tb-font-texte);
  font-size: var(--tb-t-corps);
  color: var(--tb-encre);
}

.tb-classement--sombre .tb-classement__table { color: var(--tb-creme); }

/* --- En-tête -------------------------------------------------------------- */
.tb-classement__thead { background: var(--tb-vert); }
/* Sur fond vert Masters, l'en-tête descend d'un ton pour rester détaché. */
.tb-classement--sombre .tb-classement__thead { background: var(--tb-vert-profond); }

.tb-classement__th {
  padding: 0;
  text-align: left;
  vertical-align: middle;
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tb-creme-lisible);
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  white-space: nowrap;
}

.tb-classement__th--nombre { text-align: right; }
.tb-classement__th--rang { width: 1%; }

/* Sans tri : le libellé porte lui-même la marge. */
.tb-classement__th > .tb-tri__libelle {
  display: block;
  padding: var(--tb-e4) var(--tb-e4);
}
.tb-classement__th--nombre > .tb-tri__libelle { text-align: right; }

/* --- Bouton de tri -------------------------------------------------------- */
.tb-tri {
  display: flex;
  align-items: center;
  gap: var(--tb-e2);
  width: 100%;
  min-height: 44px;
  padding: var(--tb-e4);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: background-color var(--tb-d1) var(--tb-ease), color var(--tb-d1) var(--tb-ease);
}
.tb-tri:hover { background: rgba(255, 255, 255, .10); color: var(--tb-creme); }

/* En direction inverse, `flex-start` correspond au bord droit : le libellé
   se cale donc sous les valeurs, l'icône de tri à sa gauche. */
.tb-classement__th--nombre .tb-tri { flex-direction: row-reverse; justify-content: flex-start; }

.tb-tri__libelle { display: inline-block; }

.tb-tri__icone {
  width: 10px;
  height: 14px;
  flex: 0 0 auto;
  fill: currentColor;
  opacity: .38;
  transition: opacity var(--tb-d1) var(--tb-ease);
}
.tb-tri__haut, .tb-tri__bas { transition: opacity var(--tb-d1) var(--tb-ease); }
.tb-tri:hover .tb-tri__icone { opacity: .7; }

/* Colonne active : la flèche de direction s'allume, l'autre s'efface. */
.tb-classement__th[data-tri] { color: var(--tb-creme); background: rgba(0, 0, 0, .18); }
.tb-classement__th[data-tri] .tb-tri__icone { opacity: 1; }
.tb-classement__th[data-tri='asc'] .tb-tri__bas,
.tb-classement__th[data-tri='desc'] .tb-tri__haut { opacity: .18; }
.tb-classement__th[data-tri='asc'] .tb-tri__haut { fill: var(--tb-or-clair); }
.tb-classement__th[data-tri='desc'] .tb-tri__bas { fill: var(--tb-or-clair); }

/* --- Lignes --------------------------------------------------------------- */
.tb-classement__ligne {
  /* Référence de positionnement pour la barre de points et le liseré. */
  position: relative;
  background: var(--tb-blanc);
  transition:
    background-color var(--tb-d1) var(--tb-ease),
    transform var(--tb-d2) var(--tb-ease-sort);
}

.tb-classement__tbody .tb-classement__ligne:nth-child(even) { background: var(--tb-ivoire); }

.tb-classement__ligne:hover,
.tb-classement__ligne:focus-within { background: var(--tb-vert-pale); }

.tb-classement--sombre .tb-classement__ligne { background: transparent; }
.tb-classement--sombre .tb-classement__tbody .tb-classement__ligne:nth-child(even) {
  background: rgba(255, 255, 255, .038);
}
.tb-classement--sombre .tb-classement__ligne:hover,
.tb-classement--sombre .tb-classement__ligne:focus-within {
  background: rgba(255, 255, 255, .085);
}

/* Liseré orange qui grandit depuis le centre.
   La première cellule reste `static` : le pseudo-élément se positionne donc
   par rapport à la LIGNE, et couvre toute sa hauteur. */
.tb-classement__ligne > :first-child { position: static; }

.tb-classement__ligne > :first-child::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--tb-orange);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform var(--tb-d1) var(--tb-ease);
  z-index: 2;
}
.tb-classement__ligne:hover > :first-child::before,
.tb-classement__ligne:focus-within > :first-child::before { transform: scaleY(1); }

/* --- Barre de points en fond de ligne -------------------------------------
   AUCUNE largeur ici : elle appartient à motion.css, qui la met à zéro sous
   `html.tb-js` puis la relâche à `--tb-barre` quand la ligne entre en vue.
   Sans JavaScript, `--tb-barre` est déjà écrite en style en ligne par
   components.js et la barre s'affiche pleine, sans animation. */
.tb-classement__barre {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  max-width: 100%;
  z-index: 0;                 /* strictement derrière le contenu des cellules */
  pointer-events: none;
  border-radius: 0 var(--tb-rond) var(--tb-rond) 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tb-vert-clair) 26%, transparent) 0%,
    color-mix(in srgb, var(--tb-vert-clair) 14%, transparent) 58%,
    transparent 100%
  );
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--tb-vert-clair) 46%, transparent);
}

/* Sur fond vert, la barre s'éclaircit pour rester lisible. */
.tb-classement--sombre .tb-classement__barre {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tb-vert-clair) 82%, transparent) 0%,
    color-mix(in srgb, var(--tb-vert-clair) 34%, transparent) 58%,
    transparent 100%
  );
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--tb-or-clair) 55%, transparent);
}

/* La ligne de tête reçoit un soupçon d'or dans sa barre. */
.tb-classement__ligne[data-rang='1'] .tb-classement__barre {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tb-or) 24%, transparent) 0%,
    color-mix(in srgb, var(--tb-vert-clair) 14%, transparent) 62%,
    transparent 100%
  );
}

/* --- Cellules ------------------------------------------------------------- */
.tb-classement__cell {
  padding: var(--tb-e3) var(--tb-e4);
  vertical-align: middle;
  border-bottom: 1px solid var(--tb-ligne);
  font-weight: 400;
  text-align: left;
}

.tb-classement--sombre .tb-classement__cell { border-bottom-color: var(--tb-ligne-claire); }

.tb-classement__tbody > .tb-classement__ligne:last-child > .tb-classement__cell {
  border-bottom: 0;
}

.tb-classement__cell--nombre { text-align: right; }
.tb-classement__cell--rang { width: 1%; white-space: nowrap; }
.tb-classement__cell--joueur { min-width: 0; }

/* Le contenu passe au-dessus de la barre de points. */
.tb-classement__cell > .tb-joueur,
.tb-classement__cell > .tb-pastille,
.tb-classement__cell > .tb-classement__valeur {
  position: relative;
  z-index: 1;
}

.tb-classement__valeur {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--tb-encre-70);
  letter-spacing: .01em;
}

.tb-classement__valeur--forte {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tb-vert);
}

.tb-classement--sombre .tb-classement__valeur { color: var(--tb-creme-lisible); }
.tb-classement--sombre .tb-classement__valeur--forte { color: var(--tb-or-lisible); }

/* --- Lignes en sourdine (non classés) ------------------------------------- */
.tb-classement__ligne--sourdine { background: transparent; }
.tb-classement__ligne--sourdine .tb-joueur__nom { color: var(--tb-encre-70); font-variation-settings: 'wght' 500; }
.tb-classement__ligne--sourdine .tb-classement__valeur { color: var(--tb-encre-70); }
/* Sur fond vert, l'encre de ces deux règles serait du sombre sur du sombre
   (1,5:1 mesuré) : la variante sombre reprend la main. */
.tb-classement--sombre .tb-classement__ligne--sourdine .tb-joueur__nom,
.tb-classement--sombre .tb-classement__ligne--sourdine .tb-classement__valeur {
  color: var(--tb-creme-lisible);
}
.tb-classement--sombre .tb-classement__ligne--sourdine .tb-classement__valeur--forte {
  color: var(--tb-creme-lisible);
}
.tb-classement__ligne--sourdine .tb-avatar { filter: grayscale(.72); opacity: .68; }
.tb-classement__ligne--sourdine > :first-child::before { content: none; }

/* --- Bloc « Non classés cette saison » ------------------------------------ */
.tb-classement__nonclasses {
  margin-top: var(--tb-e4);
  border: 1px dashed var(--tb-ligne-forte);
  border-radius: var(--tb-r2);
  background: color-mix(in srgb, var(--tb-ivoire-alt) 70%, transparent);
  overflow: hidden;
}

.tb-classement--sombre .tb-classement__nonclasses {
  border-color: var(--tb-ligne-claire);
  background: rgba(0, 0, 0, .16);
}

.tb-classement__nonclasses-titre {
  display: flex;
  align-items: center;
  gap: var(--tb-e3);
  min-height: 46px;
  padding: var(--tb-e3) var(--tb-e4);
  cursor: pointer;
  list-style: none;
  font-size: var(--tb-t-petit);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tb-encre-70);
  transition: background-color var(--tb-d1) var(--tb-ease), color var(--tb-d1) var(--tb-ease);
}
.tb-classement__nonclasses-titre::-webkit-details-marker { display: none; }
.tb-classement__nonclasses-titre::marker { content: ''; }
.tb-classement__nonclasses-titre:hover { background: var(--tb-vert-pale); color: var(--tb-vert); }

.tb-classement--sombre .tb-classement__nonclasses-titre { color: var(--tb-creme-lisible); }
.tb-classement--sombre .tb-classement__nonclasses-titre:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--tb-creme);
}

/* Intitulé du bloc replié : il occupe la place restante, le compteur et le
   chevron restent calés à droite. */
.tb-classement__nonclasses-libelle { min-width: 0; overflow-wrap: anywhere; }

.tb-classement__nonclasses-compte {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--tb-rond);
  background: color-mix(in srgb, var(--tb-encre) 8%, transparent);
  color: var(--tb-encre-70);
  font-variant-numeric: tabular-nums;
  font-size: var(--tb-t-micro);
}
.tb-classement--sombre .tb-classement__nonclasses-compte {
  background: rgba(255, 255, 255, .12);
  color: var(--tb-creme);
}

.tb-classement__chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: 0 0 auto;
  transition: transform var(--tb-d1) var(--tb-ease);
}
.tb-classement__nonclasses[open] .tb-classement__chevron { transform: rotate(180deg); }

.tb-classement__cadre--secondaire {
  border: 0;
  border-top: 1px solid var(--tb-ligne);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.tb-classement__cadre--secondaire::before { content: none; }
.tb-classement--sombre .tb-classement__cadre--secondaire { border-top-color: var(--tb-ligne-claire); }

.tb-classement__thead--secondaire { background: transparent; }
.tb-classement__thead--secondaire .tb-classement__th {
  padding: var(--tb-e3) var(--tb-e4);
  color: var(--tb-encre-70);
  border-bottom: 1px solid var(--tb-ligne);
}
.tb-classement--sombre .tb-classement__thead--secondaire .tb-classement__th {
  color: var(--tb-creme-lisible);
  border-bottom-color: var(--tb-ligne-claire);
}

.tb-classement__table--secondaire .tb-classement__cell { padding-block: var(--tb-e2); }

/* --- Mobile : le tableau devient des cartes empilées ----------------------
   display:block sur tous les éléments de tableau, <thead> masqué, libellés
   réinjectés depuis data-libelle. Aucun défilement horizontal, à aucune
   largeur : rien ici n'a de largeur minimale fixe. */
@media (max-width: 767.98px) {

  .tb-classement__cadre {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .tb-classement__cadre::before { content: none; }

  .tb-classement__table,
  .tb-classement__thead,
  .tb-classement__tbody,
  .tb-classement__ligne,
  .tb-classement__cell {
    display: block;
    width: auto;
  }

  /* L'en-tête disparaît : l'information vit dans data-libelle. */
  .tb-classement__thead { display: none; }

  .tb-classement__tbody { display: block; }

  .tb-classement__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tb-e2) var(--tb-e3);
    margin-bottom: var(--tb-e3);
    padding: var(--tb-e4);
    border: 1px solid var(--tb-ligne);
    border-radius: var(--tb-r3);
    background: var(--tb-blanc);
    box-shadow: var(--tb-ombre1);
    overflow: hidden;
  }

  .tb-classement__tbody .tb-classement__ligne:nth-child(even) { background: var(--tb-blanc); }

  .tb-classement--sombre .tb-classement__ligne,
  .tb-classement--sombre .tb-classement__tbody .tb-classement__ligne:nth-child(even) {
    background: rgba(255, 255, 255, .05);
    border-color: var(--tb-ligne-claire);
    box-shadow: none;
  }

  .tb-classement__cell {
    padding: 0;
    border-bottom: 0;
    min-width: 0;
  }

  /* Rang, joueur et points dominent la carte. */
  .tb-classement__cell--rang { flex: 0 0 auto; width: auto; }
  .tb-classement__cell--joueur,
  .tb-classement__cell--champion { flex: 1 1 58%; }
  .tb-classement__cell--points,
  .tb-classement__cell--total {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  /* Libellé de la colonne réinjecté au-dessus du grand chiffre. */
  .tb-classement__cell--points::before,
  .tb-classement__cell--total::before {
    content: attr(data-libelle);
    font-size: var(--tb-t-micro);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tb-encre-70);
  }
  .tb-classement--sombre .tb-classement__cell--points::before,
  .tb-classement--sombre .tb-classement__cell--total::before { color: var(--tb-creme-lisible); }
  .tb-classement__cell--points .tb-classement__valeur,
  .tb-classement__cell--total .tb-classement__valeur { font-size: 1.5rem; line-height: 1.1; }

  /* Statistiques secondaires : une petite ligne partagée, sous un filet. */
  .tb-classement__cell--secondaire {
    flex: 1 1 30%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--tb-e2);
    margin-top: var(--tb-e1);
    border-top: 1px solid var(--tb-ligne);
    text-align: left;
    font-size: var(--tb-t-petit);
  }
  .tb-classement--sombre .tb-classement__cell--secondaire { border-top-color: var(--tb-ligne-claire); }

  /* Libellé de colonne réinjecté. */
  .tb-classement__cell--secondaire::before {
    content: attr(data-libelle);
    font-size: var(--tb-t-micro);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tb-encre-70);
  }
  .tb-classement--sombre .tb-classement__cell--secondaire::before { color: var(--tb-creme-lisible); }
  .tb-classement__cell--secondaire .tb-classement__valeur { font-size: var(--tb-t-corps); }

  /* Le liseré de survol devient un filet supérieur sur la carte. */
  .tb-classement__ligne > :first-child::before {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
    border-radius: 0;
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform var(--tb-d1) var(--tb-ease);
  }
  .tb-classement__ligne:hover > :first-child::before,
  .tb-classement__ligne:focus-within > :first-child::before { transform: scaleX(1); }

  /* En carte, la barre de points devient un filet de pied, franc et lisible. */
  .tb-classement__barre,
  .tb-classement--sombre .tb-classement__barre {
    top: auto;
    bottom: 0;
    height: 4px;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(
      90deg,
      var(--tb-vert-clair) 0%,
      color-mix(in srgb, var(--tb-vert-clair) 40%, transparent) 100%
    );
  }
  .tb-classement__ligne[data-rang='1'] .tb-classement__barre {
    background: linear-gradient(90deg, var(--tb-or) 0%, var(--tb-orange) 100%);
  }
  .tb-classement--sombre .tb-classement__ligne[data-rang='1'] .tb-classement__barre {
    background: linear-gradient(90deg, var(--tb-or-clair) 0%, var(--tb-or) 100%);
  }

  .tb-classement__nonclasses { margin-top: var(--tb-e2); }
  .tb-classement__thead--secondaire { display: none; }
  .tb-classement__cadre--secondaire { border-top: 0; padding: 0 var(--tb-e3) var(--tb-e3); }
  .tb-classement__table--secondaire .tb-classement__ligne { box-shadow: none; }
}

/* -----------------------------------------------------------------------------
   6. PODIUM
   -------------------------------------------------------------------------- */

.tb-podium {
  --tb-socle-min: 78px;
  --tb-socle-max: 188px;
  display: block;
}

.tb-podium__titre {
  margin: 0 0 var(--tb-e6);
  text-align: center;
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: var(--tb-t-h3);
  color: var(--tb-vert);
}
.tb-podium--sombre .tb-podium__titre { color: var(--tb-creme); }

.tb-podium__marches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--tb-e4);
  align-items: flex-end;
  justify-content: center;
}

.tb-podium__marche {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  text-align: center;
  /* Apparition : c'est motion.css qui la pilote, via le [data-reveal] posé sur
     chaque marche par la cascade de <ol data-reveal-group>. */
}

.tb-podium__bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tb-e2);
  padding-bottom: var(--tb-e4);
  min-width: 0;
}

.tb-podium__joueurs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tb-e2);
  min-width: 0;
}
.tb-podium__joueurs--multiple {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tb-e3);
}

.tb-podium__joueur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tb-e2);
  min-width: 0;
  max-width: 190px;
}
.tb-podium__marche--1 .tb-podium__joueur { max-width: 280px; }
.tb-podium__joueurs--multiple .tb-podium__joueur { max-width: 150px; }

.tb-podium__avatar { display: inline-flex; }
.tb-podium__avatar .tb-avatar { box-shadow: 0 6px 18px rgba(18, 32, 26, .22); }

.tb-podium__nom {
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--tb-encre);
  overflow-wrap: anywhere;
}
.tb-podium__marche--1 .tb-podium__nom { font-size: var(--tb-t-h3); }
.tb-podium__joueurs--multiple .tb-podium__nom { font-size: 1rem; }

.tb-podium__exaequo,
.tb-podium__reste {
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tb-encre-70);
}
.tb-podium--sombre .tb-podium__exaequo,
.tb-podium--sombre .tb-podium__reste { color: var(--tb-creme-lisible); }

.tb-podium__points {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.tb-podium__valeur {
  font-family: var(--tb-font-texte);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tb-vert);
}
.tb-podium__marche--1 .tb-podium__valeur { font-size: 2.25rem; }
.tb-podium__unite {
  font-size: var(--tb-t-petit);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tb-encre-70);
}
.tb-podium--sombre .tb-podium__valeur { color: var(--tb-or-clair); }
.tb-podium--sombre .tb-podium__unite { color: var(--tb-creme-lisible); }

/* --- Socle ---------------------------------------------------------------- */
.tb-podium__socle {
  position: relative;
  width: 100%;
  height: calc(var(--tb-socle-min) + (var(--tb-socle-max) - var(--tb-socle-min)) * var(--tb-part, .5));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--tb-e1);
  padding-top: var(--tb-e5);
  border-radius: var(--tb-r3) var(--tb-r3) 0 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tb-vert) 92%, white) 0%,
    var(--tb-vert) 46%,
    var(--tb-vert-profond) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 12px 28px rgba(18, 32, 26, .18);
  overflow: hidden;
}

/* Bandes de tonte du green, très discrètes, sur le socle. */
.tb-podium__socle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    118deg,
    rgba(255, 255, 255, .05) 0 10px,
    transparent 10px 20px
  );
  pointer-events: none;
}

.tb-podium__marche--1 .tb-podium__socle {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tb-vert) 82%, var(--tb-or)) 0%,
    var(--tb-vert) 42%,
    var(--tb-vert-profond) 100%);
  box-shadow:
    inset 0 2px 0 var(--tb-or-clair),
    0 16px 36px rgba(18, 32, 26, .26);
}

/* Sur fond vert, le socle descend vers le vert profond pour ne pas se fondre
   dans la section, et garde un filet clair sur l'arête supérieure. */
.tb-podium--sombre .tb-podium__socle {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tb-vert-profond) 74%, black) 0%,
    var(--tb-vert-profond) 100%);
  box-shadow:
    inset 0 1px 0 var(--tb-ligne-claire),
    0 14px 32px rgba(0, 0, 0, .34);
}
.tb-podium--sombre .tb-podium__marche--1 .tb-podium__socle {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tb-vert-profond) 60%, var(--tb-vert)) 0%,
    var(--tb-vert-profond) 100%);
  box-shadow:
    inset 0 2px 0 var(--tb-or-clair),
    0 18px 42px rgba(0, 0, 0, .42);
}

.tb-podium__medaille { position: relative; z-index: 1; display: inline-flex; }
.tb-medaille { display: block; }

/* Chiffre gravé dans la médaille : à l'encre, jamais dans le métal foncé —
   mesuré à 2,3:1 auparavant, à 7,6:1 maintenant, pour un glyphe de 8 à 13 px. */
.tb-medaille__chiffre { fill: var(--tb-encre); }

.tb-podium__rang {
  position: relative;
  z-index: 1;
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 700;
  font-size: var(--tb-t-petit);
  letter-spacing: .06em;
  color: var(--tb-creme-lisible);
}
.tb-podium__marche--1 .tb-podium__rang {
  color: var(--tb-or-clair);
  font-size: var(--tb-t-corps);
}

/* --- Ordre visuel 2 – 1 – 3 au-dessus de 768 px --------------------------- */
@media (min-width: 768px) {
  .tb-podium__marche { flex: 1 1 0; max-width: 300px; }
  .tb-podium__marche--1 { order: 2; flex-grow: 1.35; max-width: 400px; }
  .tb-podium__marche--2 { order: 1; }
  .tb-podium__marche--3 { order: 3; }

  /* Podium à quatre ex æquo au rang 1 : la marche haute prend toute la place. */
  .tb-podium[data-marches='1'] .tb-podium__marche--1 { max-width: 720px; flex-grow: 1; }
  .tb-podium[data-marches='1'] .tb-podium__marches { justify-content: center; }
}

@media (min-width: 1024px) {
  .tb-podium { --tb-socle-min: 92px; --tb-socle-max: 226px; }
  .tb-podium__marches { gap: var(--tb-e5); }
}

/* --- Mobile : marches empilées 1 – 2 – 3 en cartes horizontales ----------- */
@media (max-width: 767.98px) {
  .tb-podium__marches { flex-direction: column; align-items: stretch; gap: var(--tb-e3); }

  .tb-podium__marche {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: var(--tb-e4);
    padding: var(--tb-e4);
    border: 1px solid var(--tb-ligne);
    border-radius: var(--tb-r3);
    background: var(--tb-blanc);
    box-shadow: var(--tb-ombre1);
    overflow: hidden;
  }
  .tb-podium--sombre .tb-podium__marche {
    background: rgba(255, 255, 255, .06);
    border-color: var(--tb-ligne-claire);
    box-shadow: none;
  }

  /* Part de points : filet coloré en pied de carte. */
  .tb-podium__marche::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: calc(var(--tb-part, .5) * 100%);
    background: linear-gradient(90deg, var(--tb-or) 0%, var(--tb-orange) 100%);
  }

  /* Le socle devient un simple bloc médaille + rang, sans marche dessinée.
     La sélection cite la marche 1 et la variante sombre pour l'emporter sur
     les règles plus spécifiques du mode bureau. */
  .tb-podium__socle,
  .tb-podium__marche--1 .tb-podium__socle,
  .tb-podium--sombre .tb-podium__socle,
  .tb-podium--sombre .tb-podium__marche--1 .tb-podium__socle {
    order: -1;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    padding-top: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    gap: 0;
  }
  .tb-podium__socle::after { content: none; }
  .tb-podium__rang { color: var(--tb-encre-70); }
  .tb-podium--sombre .tb-podium__rang { color: var(--tb-creme-lisible); }
  .tb-podium__marche--1 .tb-podium__rang {
    /* Or assombri à l'encre : lisible sur la carte ivoire (WCAG AA). */
    color: color-mix(in srgb, var(--tb-or) 55%, var(--tb-encre));
    font-size: var(--tb-t-petit);
  }
  .tb-podium--sombre .tb-podium__marche--1 .tb-podium__rang { color: var(--tb-or-clair); }

  .tb-podium__bloc {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tb-e3);
    padding-bottom: 0;
    text-align: left;
  }

  .tb-podium__joueurs { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tb-podium__joueur { flex-direction: row; align-items: center; gap: var(--tb-e2); max-width: none; }
  .tb-podium__marche--1 .tb-podium__nom,
  .tb-podium__nom { font-size: 1.0625rem; }
  .tb-podium__marche--1 .tb-podium__valeur { font-size: 1.75rem; }
  .tb-podium__points { margin-left: auto; }
}

/* -----------------------------------------------------------------------------
   7. SÉLECTEUR DE SAISON
   -------------------------------------------------------------------------- */

.tb-saisons {
  display: flex;
  align-items: center;
  gap: var(--tb-e4);
  flex-wrap: wrap;
}

.tb-saisons__libelle {
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tb-encre-70);
}
.tb-saisons--sombre .tb-saisons__libelle { color: var(--tb-creme-lisible); }

.tb-saisons__piste {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  max-width: 100%;
  border-radius: var(--tb-rond);
  border: 1px solid var(--tb-ligne);
  background: color-mix(in srgb, var(--tb-ivoire-alt) 80%, var(--tb-blanc));
  box-shadow: inset 0 1px 2px rgba(18, 32, 26, .05);
  overflow-x: auto;              /* défilement contenu, jamais celui de la page */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tb-saisons__piste::-webkit-scrollbar { display: none; }

.tb-saisons--sombre .tb-saisons__piste {
  background: rgba(0, 0, 0, .22);
  border-color: var(--tb-ligne-claire);
  box-shadow: none;
}

/* Indicateur glissant sous l'option active. */
.tb-saisons__indicateur {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--tb-ind-l, 0px);
  transform: translateX(var(--tb-ind-x, 0px));
  border-radius: var(--tb-rond);
  background: var(--tb-vert);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tb-vert) 32%, transparent);
  transition:
    transform var(--tb-d2) var(--tb-ease),
    width var(--tb-d2) var(--tb-ease);
  pointer-events: none;
}
.tb-saisons--sombre .tb-saisons__indicateur {
  background: var(--tb-or);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--tb-or) 42%, transparent);
}

.tb-saisons__option {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 var(--tb-e4);
  border: 0;
  border-radius: var(--tb-rond);
  background: transparent;
  color: var(--tb-encre-70);
  font-family: var(--tb-font-texte);
  font-size: var(--tb-t-petit);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--tb-d1) var(--tb-ease);
}
/* Le libellé est un span dédié : il porte le rendu tabulaire des millésimes. */
.tb-saisons__texte { display: inline-block; font-variant-numeric: tabular-nums; }

.tb-saisons__option:hover { color: var(--tb-vert); }
.tb-saisons__option[data-actif] { color: var(--tb-creme); }

.tb-saisons--sombre .tb-saisons__option { color: var(--tb-creme-lisible); }
.tb-saisons--sombre .tb-saisons__option:hover { color: var(--tb-creme); }
.tb-saisons--sombre .tb-saisons__option[data-actif] { color: var(--tb-vert-profond); }

/* -----------------------------------------------------------------------------
   8. CARROUSEL
   -------------------------------------------------------------------------- */

.tb-carrousel {
  --tb-carrousel-carte: clamp(258px, 76vw, 336px);
  --tb-carrousel-pad: 0px;
  --tb-carrousel-gap: var(--tb-e5);
  display: block;
  position: relative;
}

.tb-carrousel__piste {
  display: flex;
  gap: var(--tb-carrousel-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--tb-carrousel-pad);
  padding-inline-start: var(--tb-carrousel-pad);
  /* Marge de fin : garantit que la dernière carte peut s'aligner à gauche. */
  padding-inline-end: max(
    var(--tb-carrousel-pad),
    calc(100% - var(--tb-carrousel-carte) - var(--tb-carrousel-pad))
  );
  padding-block: var(--tb-e2) var(--tb-e5);
  scrollbar-width: none;
  cursor: grab;
  scroll-behavior: smooth;
}
.tb-carrousel__piste::-webkit-scrollbar { display: none; }
.tb-carrousel__piste:focus-visible { outline-offset: -2px; }

.tb-carrousel[data-glisse='oui'] .tb-carrousel__piste {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;         /* l'accrochage revient au relâchement */
  user-select: none;
}
.tb-carrousel[data-glisse='oui'] .tb-carrousel__item { pointer-events: none; }

.tb-carrousel__item {
  flex: 0 0 var(--tb-carrousel-carte);
  max-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Apparition en cascade : pilotée par motion.css depuis le [data-reveal-group]
     posé sur la piste. */
}
.tb-carrousel__item:focus-within { outline: 2px solid var(--tb-orange); outline-offset: 3px; border-radius: var(--tb-r3); }

/* --- Commandes ------------------------------------------------------------ */
.tb-carrousel__commandes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tb-e4);
  padding-inline: var(--tb-carrousel-pad);
  flex-wrap: wrap;
}

.tb-carrousel__fleches { display: flex; gap: var(--tb-e2); order: 2; }

.tb-carrousel__fleche {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--tb-rond);
  border: 1px solid var(--tb-ligne-forte);
  background: var(--tb-blanc);
  color: var(--tb-vert);
  cursor: pointer;
  transition:
    background-color var(--tb-d1) var(--tb-ease),
    border-color var(--tb-d1) var(--tb-ease),
    color var(--tb-d1) var(--tb-ease),
    opacity var(--tb-d1) var(--tb-ease),
    transform var(--tb-d1) var(--tb-ease);
}
.tb-carrousel__fleche svg { width: 20px; height: 20px; }
.tb-carrousel__fleche:hover:not(:disabled) {
  background: var(--tb-vert);
  border-color: var(--tb-vert);
  color: var(--tb-creme);
  transform: translateY(-1px);
}
.tb-carrousel__fleche:disabled { opacity: .32; cursor: default; }

.tb-carrousel--sombre .tb-carrousel__fleche {
  background: rgba(255, 255, 255, .08);
  border-color: var(--tb-ligne-claire);
  color: var(--tb-creme);
}
.tb-carrousel--sombre .tb-carrousel__fleche:hover:not(:disabled) {
  background: var(--tb-or);
  border-color: var(--tb-or);
  color: var(--tb-vert-profond);
}

.tb-carrousel__points { display: flex; align-items: center; gap: 6px; order: 1; flex-wrap: wrap; }

.tb-carrousel__point {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}
.tb-carrousel__point::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--tb-rond);
  background: color-mix(in srgb, var(--tb-encre) 24%, transparent);
  transition:
    width var(--tb-d1) var(--tb-ease),
    background-color var(--tb-d1) var(--tb-ease);
}
.tb-carrousel__point:hover::before { background: color-mix(in srgb, var(--tb-encre) 45%, transparent); }
.tb-carrousel__point[data-actif='oui']::before { width: 22px; background: var(--tb-orange); }

.tb-carrousel--sombre .tb-carrousel__point::before { background: rgba(242, 239, 230, .32); }
.tb-carrousel--sombre .tb-carrousel__point[data-actif='oui']::before { background: var(--tb-or-clair); }

/* -----------------------------------------------------------------------------
   9. BANDEAU DE SYNCHRONISATION
   -------------------------------------------------------------------------- */

.tb-synchro {
  display: flex;
  align-items: center;
  gap: var(--tb-e3);
  flex-wrap: wrap;
  padding: var(--tb-e2) var(--tb-e3);
  border-radius: var(--tb-rond);
  border: 1px solid var(--tb-ligne);
  background: color-mix(in srgb, var(--tb-blanc) 70%, transparent);
  font-family: var(--tb-font-texte);
  font-size: var(--tb-t-petit);
  color: var(--tb-encre-70);
}

.tb-synchro--sombre {
  background: rgba(255, 255, 255, .06);
  border-color: var(--tb-ligne-claire);
  color: var(--tb-creme-lisible);
}

.tb-synchro__textes { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-synchro__texte { margin: 0; font-weight: 500; }
.tb-synchro__detail { margin: 0; font-size: var(--tb-t-micro); color: var(--tb-encre-70); }
.tb-synchro--sombre .tb-synchro__detail { color: var(--tb-creme-lisible); }

/* --- Pastille d'état ------------------------------------------------------ */
.tb-synchro__pastille {
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tb-vert-clair);
}
.tb-synchro__pastille::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: var(--tb-vert-clair);
  opacity: 0;
}

.tb-synchro[data-source='live'] .tb-synchro__pastille::after {
  animation: tb-pulsation 2.4s var(--tb-ease) infinite;
}

.tb-synchro[data-source='snapshot'] .tb-synchro__pastille { background: var(--tb-or); }
.tb-synchro[data-source='snapshot'] .tb-synchro__pastille::after {
  color: var(--tb-or);
  opacity: .45;
  animation: none;
}

@keyframes tb-pulsation {
  0%   { transform: scale(.6); opacity: .85; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- Bouton d'actualisation ----------------------------------------------- */
.tb-synchro__bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--tb-e2);
  min-height: 34px;
  margin-left: auto;
  padding: 0 var(--tb-e3);
  border: 1px solid var(--tb-ligne-forte);
  border-radius: var(--tb-rond);
  background: transparent;
  color: var(--tb-vert);
  font-family: var(--tb-font-texte);
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--tb-d1) var(--tb-ease),
    border-color var(--tb-d1) var(--tb-ease),
    color var(--tb-d1) var(--tb-ease);
}
.tb-synchro__bouton:hover:not(:disabled) { background: var(--tb-vert-pale); border-color: var(--tb-vert-clair); }
.tb-synchro__bouton:disabled { opacity: .7; cursor: default; }
.tb-synchro__icone { width: 16px; height: 16px; flex: 0 0 auto; }
.tb-synchro__bouton-texte { display: inline-block; }
/* Sous 360 px, seule l'icône subsiste : le bouton reste une cible de 44 px. */
@media (max-width: 359.98px) {
  .tb-synchro__bouton-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

.tb-synchro--sombre .tb-synchro__bouton { color: var(--tb-creme); border-color: var(--tb-ligne-claire); }
.tb-synchro--sombre .tb-synchro__bouton:hover:not(:disabled) {
  background: rgba(255, 255, 255, .10);
  border-color: var(--tb-or-clair);
}

/* L'icône tourne pendant le chargement. */
.tb-synchro[data-chargement] .tb-synchro__icone { animation: tb-rotation 900ms linear infinite; }
.tb-synchro[data-chargement] .tb-synchro__pastille { animation: tb-clignote 900ms var(--tb-ease) infinite; }

@keyframes tb-rotation { to { transform: rotate(360deg); } }
@keyframes tb-clignote { 50% { opacity: .35; } }

/* Cible tactile confortable sur petit écran. */
@media (max-width: 480px) {
  .tb-synchro { width: 100%; }
  .tb-synchro__bouton { min-height: 44px; margin-left: 0; width: 100%; justify-content: center; }
}

/* -----------------------------------------------------------------------------
   10. CARTE JOUEUR — aucune photo de personne
   -------------------------------------------------------------------------- */

.tb-carte-joueur {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tb-e5);
  padding: var(--tb-e6);
  border-radius: var(--tb-r4);
  border: 1px solid var(--tb-ligne);
  background: var(--tb-blanc);
  box-shadow: var(--tb-ombre1);
  overflow: hidden;
  transition:
    box-shadow var(--tb-d1) var(--tb-ease),
    border-color var(--tb-d1) var(--tb-ease);
}

/* La carte porte [data-reveal] : la règle d'apparition de motion.css remplace
   la transition ci-dessus, `transition` étant une propriété unique. On la
   recompose donc ici, avec les mêmes jetons, pour garder le retour au survol.
   Spécificité (0,3,1) : elle l'emporte sur `html.tb-js [data-reveal]` (0,2,1). */
html.tb-js .tb-carte-joueur[data-reveal] {
  transition:
    opacity      var(--tb-reveal-fondu, var(--tb-d2)) var(--tb-ease)      var(--tb-retard, 0ms),
    transform    var(--tb-reveal-duree, var(--tb-d3)) var(--tb-ease-sort) var(--tb-retard, 0ms),
    box-shadow   var(--tb-d1) var(--tb-ease),
    border-color var(--tb-d1) var(--tb-ease);
}

.tb-carte-joueur:hover {
  box-shadow: var(--tb-ombre2);
  border-color: color-mix(in srgb, var(--tb-vert) 24%, transparent);
}

.tb-carte-joueur[data-actif='non'] { background: color-mix(in srgb, var(--tb-ivoire-alt) 60%, var(--tb-blanc)); }
.tb-carte-joueur[data-actif='non'] .tb-avatar { filter: grayscale(.5); }

.tb-carte-joueur--sombre {
  background: rgba(255, 255, 255, .06);
  border-color: var(--tb-ligne-claire);
  box-shadow: none;
}
.tb-carte-joueur--sombre .tb-carte-joueur__nom { color: var(--tb-creme); }

/* Voile de fairway très discret en fond de carte. */
.tb-carte-joueur::before {
  content: '';
  position: absolute;
  inset: auto -30% -40% auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--tb-vert-clair) 12%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
}

/* --- Distinction Grand Chelem --------------------------------------------- */
.tb-carte-joueur__distinction {
  display: inline-flex;
  align-items: center;
  gap: var(--tb-e2);
  align-self: flex-start;
  margin: 0;
  padding: 5px 12px 5px 9px;
  border-radius: var(--tb-rond);
  background: var(--tb-metal-or);
  color: var(--tb-encre);
  font-size: var(--tb-t-micro);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 10px color-mix(in srgb, var(--tb-or) 36%, transparent);
}
.tb-carte-joueur__distinction svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* --- En-tête -------------------------------------------------------------- */
.tb-carte-joueur__entete { display: flex; align-items: center; gap: var(--tb-e4); min-width: 0; }
.tb-carte-joueur__avatar { display: inline-flex; flex: 0 0 auto; }
.tb-carte-joueur__identite { display: flex; flex-direction: column; gap: var(--tb-e2); min-width: 0; }

.tb-carte-joueur__nom {
  margin: 0;
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: var(--tb-t-h3);
  line-height: 1.15;
  color: var(--tb-vert);
  overflow-wrap: anywhere;
}

.tb-carte-joueur__badges { display: flex; flex-wrap: wrap; gap: var(--tb-e1); }

.tb-carte-joueur__entree {
  margin: 0;
  font-size: var(--tb-t-micro);
  color: var(--tb-encre-70);
}
.tb-carte-joueur--sombre .tb-carte-joueur__entree { color: var(--tb-creme-lisible); }

/* --- Statistiques --------------------------------------------------------- */
.tb-carte-joueur__stats {
  /* Flex plutôt que grid : quel que soit le nombre de statistiques, la ligne
     se répartit également et ne laisse jamais un chiffre orphelin. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-e3) var(--tb-e2);
  margin: 0;
  padding: var(--tb-e4) 0;
  border-top: 1px solid var(--tb-ligne);
  border-bottom: 1px solid var(--tb-ligne);
}
.tb-carte-joueur--sombre .tb-carte-joueur__stats {
  border-color: var(--tb-ligne-claire);
}

.tb-carte-joueur__stat {
  flex: 1 1 58px;
  min-width: 58px;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  text-align: center;
}

.tb-carte-joueur__valeur {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tb-encre);
}
.tb-carte-joueur__stat--points .tb-carte-joueur__valeur { color: var(--tb-vert); }
.tb-carte-joueur--sombre .tb-carte-joueur__valeur { color: var(--tb-creme); }
.tb-carte-joueur--sombre .tb-carte-joueur__stat--points .tb-carte-joueur__valeur { color: var(--tb-or-lisible); }

.tb-carte-joueur__libelle {
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tb-encre-70);
}
.tb-carte-joueur--sombre .tb-carte-joueur__libelle { color: var(--tb-creme-lisible); }

/* --- Mini-barres par saison ----------------------------------------------- */
.tb-carte-joueur__saisons { display: flex; flex-direction: column; gap: var(--tb-e3); }

.tb-carte-joueur__saisons-titre {
  margin: 0;
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tb-encre-70);
}
.tb-carte-joueur--sombre .tb-carte-joueur__saisons-titre { color: var(--tb-creme-lisible); }

.tb-carte-joueur__barres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--tb-e2);
}

.tb-carte-joueur__barre-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.tb-carte-joueur__tube {
  position: relative;
  display: block;
  width: 100%;
  height: 64px;
  border-radius: var(--tb-r1);
  background: color-mix(in srgb, var(--tb-encre) 6%, transparent);
  overflow: hidden;
}
.tb-carte-joueur--sombre .tb-carte-joueur__tube { background: rgba(255, 255, 255, .10); }

/* Seule barre du site qui monte au lieu de s'allonger : motion.css ne décrit
   que les largeurs, la géométrie verticale est donc décrite ici — en reprenant
   exactement sa mécanique (`--tb-barre`, `.tb-barre-pleine`, préfixe
   `html.tb-js`), pour que sans JavaScript la barre s'affiche pleine. */
.tb-carte-joueur__barre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tb-barre, 0%);
  border-radius: var(--tb-r1);
  background: linear-gradient(180deg, var(--tb-vert-clair) 0%, var(--tb-vert) 100%);
}
html.tb-js .tb-carte-joueur__barre[data-barre-verticale] {
  height: 0;
  transition: height
    var(--tb-barre-duree, var(--tb-d3))
    var(--tb-ease-sort)
    var(--tb-retard, 0ms);
}
html.tb-js .tb-carte-joueur__barre[data-barre-verticale].tb-barre-pleine {
  height: var(--tb-barre, 0%);
}
.tb-carte-joueur--sombre .tb-carte-joueur__barre {
  background: linear-gradient(180deg, var(--tb-or-clair) 0%, var(--tb-or) 100%);
}

.tb-carte-joueur__barre-libelle {
  font-size: var(--tb-t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--tb-encre-70);
  white-space: nowrap;
}
.tb-carte-joueur--sombre .tb-carte-joueur__barre-libelle { color: var(--tb-creme-lisible); }

/* -----------------------------------------------------------------------------
   11. ÉTATS — vide, chargement, erreur
   -------------------------------------------------------------------------- */

.tb-etat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tb-e3);
  padding: var(--tb-e9) var(--tb-e5);
  text-align: center;
  border-radius: var(--tb-r3);
  border: 1px dashed var(--tb-ligne-forte);
  background: color-mix(in srgb, var(--tb-ivoire-alt) 55%, transparent);
  color: var(--tb-encre-70);
  font-family: var(--tb-font-texte);
}

.tb-etat--sombre {
  border-color: var(--tb-ligne-claire);
  background: rgba(0, 0, 0, .16);
  color: var(--tb-creme-lisible);
}

.tb-etat__icone { width: 34px; height: 34px; opacity: .45; }
.tb-etat__texte { margin: 0; font-size: var(--tb-t-corps); max-width: 46ch; }

.tb-erreur { border-style: solid; border-color: color-mix(in srgb, var(--tb-orange) 40%, transparent); }
.tb-erreur .tb-etat__icone { color: var(--tb-orange); opacity: .85; }
.tb-erreur__titre {
  margin: 0;
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: var(--tb-t-h3);
  color: var(--tb-vert);
}
.tb-etat--sombre.tb-erreur { background: rgba(0, 0, 0, .24); }
.tb-etat--sombre .tb-erreur__titre { color: var(--tb-creme); }
.tb-erreur__action { margin-top: var(--tb-e2); }

/* --- Squelette de chargement ---------------------------------------------- */
.tb-squelette {
  display: flex;
  flex-direction: column;
  gap: var(--tb-e3);
  padding: var(--tb-e5);
  border-radius: var(--tb-r3);
  border: 1px solid var(--tb-ligne);
  background: var(--tb-blanc);
}
.tb-squelette--sombre {
  background: rgba(255, 255, 255, .045);
  border-color: var(--tb-ligne-claire);
}

.tb-squelette__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tb-e4);
  padding-bottom: var(--tb-e4);
  border-bottom: 1px solid var(--tb-ligne);
}
.tb-squelette--sombre .tb-squelette__entete { border-bottom-color: var(--tb-ligne-claire); }

.tb-squelette__ligne {
  display: flex;
  align-items: center;
  gap: var(--tb-e4);
  padding: var(--tb-e2) 0;
}

.tb-squelette__bloc {
  display: block;
  height: 14px;
  border-radius: var(--tb-rond);
  background: color-mix(in srgb, var(--tb-encre) 8%, transparent);
  background-image: linear-gradient(
    100deg,
    transparent 25%,
    color-mix(in srgb, var(--tb-blanc) 85%, transparent) 45%,
    transparent 65%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: tb-balayage 1.5s var(--tb-ease) infinite;
  animation-delay: var(--tb-delai, 0ms);
}
.tb-squelette--sombre .tb-squelette__bloc {
  background-color: rgba(255, 255, 255, .10);
  background-image: linear-gradient(
    100deg,
    transparent 25%,
    rgba(255, 255, 255, .16) 45%,
    transparent 65%
  );
}

.tb-squelette__bloc--titre { width: 40%; height: 20px; }
.tb-squelette__bloc--pilule { width: 92px; height: 26px; }
.tb-squelette__bloc--rond { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.tb-squelette__bloc--large { flex: 1 1 auto; }
.tb-squelette__bloc--court { width: 64px; flex: 0 0 auto; }

@keyframes tb-balayage {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* -----------------------------------------------------------------------------
   12. RESPECT DE prefers-reduced-motion — sans exception
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  /* Aucune transition, aucune animation dans toute la bibliothèque. */
  .tb-classement *,
  .tb-podium *,
  .tb-carrousel *,
  .tb-carte-joueur,
  .tb-carte-joueur *,
  .tb-saisons *,
  .tb-synchro *,
  .tb-etat *,
  .tb-squelette * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  /* Les apparitions elles-mêmes sont neutralisées par motion.css, qui couvre
     tous les [data-reveal] du site sans dépendre de `html.tb-js` ni de `.tb-vu`.
     Filet de sécurité pour les trois composants concernés, au cas où cette
     feuille serait chargée sans motion.css. */
  .tb-podium__marche,
  .tb-carrousel__item,
  .tb-carte-joueur {
    opacity: 1 !important;
    transform: none !important;
  }

  /* La barre horizontale est traitée par motion.css ([data-barre]) ; la barre
     verticale n'existe que dans cette feuille, elle est donc figée ici. */
  .tb-carte-joueur__barre,
  html.tb-js .tb-carte-joueur__barre[data-barre-verticale] {
    height: var(--tb-barre, 0%) !important;
    transition: none !important;
  }

  /* Le carrousel garde l'accrochage mais perd le défilement animé. */
  .tb-carrousel__piste { scroll-behavior: auto !important; }

  /* Le squelette reste lisible sans balayage. */
  .tb-squelette__bloc { background-image: none; }
}

/* -----------------------------------------------------------------------------
   13. IMPRESSION — rien de masqué sur le papier
   -----------------------------------------------------------------------------
   motion.css couvre déjà les [data-reveal] et les [data-barre]. Reste la barre
   verticale de la carte joueur, qui n'existe que dans cette feuille.
   -------------------------------------------------------------------------- */

@media print {
  .tb-carte-joueur__barre,
  html.tb-js .tb-carte-joueur__barre[data-barre-verticale] {
    height: var(--tb-barre, 0%) !important;
    transition: none !important;
  }
  .tb-squelette__bloc { animation: none !important; background-image: none; }
}