/* ====================================================================
   Classement — habillage éditorial (Claude Design "Classement Pool NHL
   v3"). Posé en couche par-dessus classement.css, jamais l'inverse — voir
   draftActif-premium.css / trade.css pour le même principe : ce fichier ne
   redéclare pas :root, tout est scopé sous body.fz-classement pour ne pas
   fuir vers les pages non reskinnées.

   Le mockup d'origine ne couvrait que le niveau 2 d'un pool cumulatif
   (classement + temple de la renommée). L'onglet Classement d'un pool H2H
   a été repris depuis (bloc en fin de fichier). La liste de pools, la
   fiche d'équipe et les autres onglets H2H gardent leur habillage existant
   (classement.css), volontairement pas touchés ici.
   ==================================================================== */

body.fz-classement {
  /* Palette Apple (DESIGN.md, « Colors ») : chaque rôle pointe sur le jeton
     global d'index.css, qui bascule déjà avec le thème. Plusieurs anciens
     paliers se confondent — l'échelle d'Apple n'a rien entre deux marches. */
  --fzc-bg: var(--bg-gray-light);
  --fzc-bg-alt: var(--bg-gray-light);
  --fzc-bg-page: var(--bg-page);
  --fzc-surface: var(--card);
  --fzc-ink: var(--text-main);
  --fzc-text: var(--text-main);
  --fzc-text-muted: var(--text-secondary);
  --fzc-text-faint: var(--text-secondary);
  /* Tertiaire : icônes, séparateurs, pastille « nul » — jamais un texte à lire. */
  --fzc-text-fainter: var(--text-light-gray);
  --fzc-border: var(--border-light);
  --fzc-border-strong: var(--border-light);
  --fzc-border-soft: var(--border-light);
  --fzc-border-input: var(--border-gray);
  --fzc-accent: var(--primary-text);
  /* Survol d'un lien rouge : il n'existe pas de troisième rouge texte. */
  --fzc-accent-dark: var(--primary-text);
  --fzc-tile: var(--bg-gray-light);
  --fzc-gold: var(--warning);
  --fzc-good-bg: color-mix(in srgb, var(--success) 10%, var(--card));
  --fzc-good: var(--success);
  --fzc-bad-bg: color-mix(in srgb, var(--primary) 10%, var(--card));
  --fzc-bad: var(--primary-text);
  --fzc-flat-bg: var(--bg-gray-light);
  --fzc-leader-bg: color-mix(in srgb, var(--warning) 8%, var(--card));
  /* Le rouge en APLAT (blanc dessus à 4,55:1) ; --fzc-accent est le rouge
     en TEXTE. Deux rôles, deux jetons. */
  --fzc-accent-fill: var(--primary);
  --fzc-on-accent: var(--on-primary);
  /* L'aplat « encre » s'inverse avec le thème : #1D1D1F sous libellé blanc
     en clair, #F5F5F7 sous libellé noir en sombre (bloc suivant). */
  --fzc-solid: var(--text-main);
  --fzc-on-solid: #FFFFFF;
  --fzc-on-solid-muted: #A1A1A6;
  --fzc-on-solid-gold: #FFD60A;


  margin: 0;
  min-height: 100vh;
  background: var(--fzc-bg-page);
  color: var(--fzc-text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* ============================================================ */
/* THÈME SOMBRE                                                  */
/* ------------------------------------------------------------ */
/* Les jetons ci-dessus suivent déjà le thème par index.css ;    */
/* seuls les libellés posés sur l'aplat inversé --fzc-solid      */
/* (#F5F5F7 en sombre) changent ici.                             */
/* ============================================================ */
html[data-theme="dark"] body.fz-classement {
  --fzc-on-solid: #000000;
  --fzc-on-solid-muted: #6E6E73;
  --fzc-on-solid-gold: #B25000;
}

body.fz-classement * { box-sizing: border-box; }
body.fz-classement a { color: var(--fzc-accent); text-decoration: none; }
body.fz-classement a:hover { color: var(--fzc-accent-dark); }
body.fz-classement button { font-family: inherit; }

/* La barre du haut et le rail des pools sont partagés avec le reste du
   site — sans ce correctif ils hériteraient de la police/couleur
   éditoriale ci-dessus. Copié tel quel depuis draftActif-premium.css. */
body.fz-classement .navbar,
body.fz-classement #fzSidebar,
body.fz-classement #fzDrawer {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-dark);
}
body.fz-classement nav a { color: var(--text-secondary); }
body.fz-classement nav a:hover { color: var(--text-main); }
body.fz-classement nav a.active:hover,
body.fz-classement nav a.is-active:hover { color: var(--primary-text); }

body.fz-classement .container {
  max-width: 960px;
  padding: 40px 32px 60px;
}

/* ==================== TITRE / FIL D'ARIANE ==================== */
body.fz-classement .page-title {
  text-align: left;
  font: 700 28px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fzc-ink);
  margin: 0 0 24px;
}
body.fz-classement .breadcrumb {
  padding: 0;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--fzc-text-faint);
}
body.fz-classement .breadcrumb-item:hover,
body.fz-classement .breadcrumb-item.active { color: var(--fzc-accent); }
body.fz-classement .breadcrumb-separator { color: var(--fzc-text-fainter); }

/* ==================== TABLEAU (DESKTOP) ==================== */
body.fz-classement .standings-table-container {
  border: 1px solid var(--fzc-border);
  border-radius: 12px;
  background: var(--fzc-surface);
  overflow: hidden;
}
body.fz-classement #standingsTable {
  min-width: 620px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body.fz-classement #standingsTable thead th {
  background: var(--fzc-bg-alt);
  border-bottom: 1px solid var(--fzc-border-strong);
  color: var(--fzc-text-muted);
  font: 600 10px/1 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: .09em;
}
body.fz-classement #standingsTable th.points-column { color: var(--fzc-accent); }
body.fz-classement #standingsTable th.sortable:hover,
body.fz-classement #standingsTable th.sortable:focus-visible {
  background: var(--fzc-bg);
  color: var(--fzc-ink);
}
body.fz-classement #standingsTable th.is-sorted {
  background: var(--fzc-bg);
  color: var(--fzc-accent);
}
body.fz-classement #standingsTable th.sortable:focus-visible { outline-color: var(--fzc-ink); }

body.fz-classement #standingsTable th.rank-col,
body.fz-classement #standingsTable td.rank-col,
body.fz-classement #standingsTable th.player-col,
body.fz-classement #standingsTable td.player-col {
  background: var(--fzc-surface);
}
body.fz-classement #standingsTable tbody tr {
  background: var(--fzc-surface);
  border-bottom: 1px solid var(--fzc-border-soft);
}
body.fz-classement #standingsTable tbody tr.is-leader,
body.fz-classement #standingsTable tbody tr.is-leader td.rank-col,
body.fz-classement #standingsTable tbody tr.is-leader td.player-col {
  background: var(--fzc-leader-bg);
}
body.fz-classement #standingsTable tbody tr.is-clickable:hover,
body.fz-classement #standingsTable tbody tr.is-clickable:focus-visible,
body.fz-classement #standingsTable tbody tr.is-clickable:hover td.rank-col,
body.fz-classement #standingsTable tbody tr.is-clickable:hover td.player-col,
body.fz-classement #standingsTable tbody tr.is-clickable:focus-visible td.rank-col,
body.fz-classement #standingsTable tbody tr.is-clickable:focus-visible td.player-col {
  background: var(--fzc-bg);
}
body.fz-classement #standingsTable tbody tr.is-clickable::after { background: var(--fzc-accent-fill); }
body.fz-classement #standingsTable tbody tr.is-leader.is-clickable::after { background: var(--fzc-gold); }
body.fz-classement #standingsTable tbody tr.is-clickable:focus-visible { outline-color: var(--fzc-accent); }

body.fz-classement #standingsTable td {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--fzc-text-muted);
}
body.fz-classement #standingsTable td.points-column {
  font: 700 15px/1 'Oswald', sans-serif;
  color: var(--fzc-ink);
}
body.fz-classement #standingsTable td.st-period-col { color: var(--fzc-text-faint); }

body.fz-classement .st-rank-badge {
  font: 700 14px/1 'Oswald', sans-serif;
}
body.fz-classement .st-rank-badge.gold,
body.fz-classement .st-rank-badge.silver,
body.fz-classement .st-rank-badge.bronze { color: var(--fzc-accent); }
body.fz-classement .st-rank-badge:not(.gold):not(.silver):not(.bronze) { color: var(--fzc-text-faint); }

body.fz-classement .st-participant { gap: 10px; }
body.fz-classement .st-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--fzc-tile);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
body.fz-classement .st-avatar img { width: 18px; height: 18px; object-fit: contain; }
body.fz-classement .st-avatar-fallback {
  font: 600 9.5px/1 'Oswald', sans-serif;
  color: var(--fzc-text-muted);
}
body.fz-classement .st-name {
  font: 600 13px/1 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--fzc-ink);
  max-width: none;
}

/* ==================== BADGE D'ÉVOLUTION DE RANG ==================== */
body.fz-classement .st-evo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 6px;
  font: 700 10.5px/1 'Helvetica Neue', Helvetica, sans-serif;
}
body.fz-classement .st-evo svg { flex-shrink: 0; }
body.fz-classement .st-evo-up { background: var(--fzc-good-bg); color: var(--fzc-good); }
body.fz-classement .st-evo-up svg { fill: var(--fzc-good); }
body.fz-classement .st-evo-down { background: var(--fzc-bad-bg); color: var(--fzc-bad); }
body.fz-classement .st-evo-down svg { fill: var(--fzc-bad); }
body.fz-classement .st-evo-flat { background: var(--fzc-flat-bg); color: var(--fzc-text-faint); }
body.fz-classement td.st-evo-col { text-align: right; }

body.fz-classement #standingsTable tfoot .standings-avg-row td {
  background: var(--fzc-bg-alt);
  color: var(--fzc-text-muted);
  border-top: 2px solid var(--fzc-border-strong);
}
body.fz-classement .standings-avg-label { color: var(--fzc-text-muted); }

body.fz-classement .st-empty-title { color: var(--fzc-ink); }
body.fz-classement .st-empty-hint { color: var(--fzc-text-faint); }

/* ==================== TABLEAU (MOBILE : cartes) ==================== */
/* Le mockup montre une vue "phone" distincte, pas juste le même tableau
   qui déborde : sous 680px on bascule sur des lignes en carte plutôt que
   de scroller le tableau horizontalement. */
body.fz-classement .st-mobile-list { display: none; }

@media (max-width: 680px) {
  body.fz-classement .standings-table-container { display: none; }
  /* La maquette « Classement » va droit à la liste, sans tuile de synthèse. */
  body.fz-classement #standingsList .st-summary { display: none; }
  /* Une bande d'un bord à l'autre, rangées de 76px et rond de 52px : les
     mesures de la liste des joueurs d'une équipe (classement.css,
     .roster-row). */
  body.fz-classement .st-mobile-list {
    display: flex;
    flex-direction: column;
    margin-inline: -32px;
    border-top: 1px solid var(--rr-line);
    border-bottom: 1px solid var(--rr-line);
    background: var(--rr-surface);
    color: var(--rr-ink);
    font-variant-numeric: tabular-nums;
  }
  body.fz-classement .st-mobile-row {
    display: grid;
    grid-template-columns: 22px 52px minmax(0, 1fr) auto 14px;
    align-items: center;
    column-gap: 8px;
    min-height: 76px;
    padding: 6px 10px 6px 12px;
    cursor: pointer;
    transition: background .15s ease;
  }
  body.fz-classement .st-mobile-row + .st-mobile-row { border-top: 1px solid var(--rr-line); }
  body.fz-classement .st-mobile-row:hover,
  body.fz-classement .st-mobile-row:focus-visible { background: var(--rr-hover); }
  body.fz-classement .st-mobile-row:first-child { box-shadow: inset 3px 0 0 var(--fzc-accent-fill); }
  body.fz-classement .st-mobile-rank {
    font-size: 14px;
    font-weight: 700;
    color: var(--rr-muted);
    text-align: center;
  }
  body.fz-classement .st-mobile-row:nth-child(-n+3) .st-mobile-rank { color: var(--fzc-accent); }
  body.fz-classement .st-mobile-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--rr-line);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.fz-classement .st-mobile-logo img { width: 34px; height: 34px; object-fit: contain; }
  body.fz-classement .st-mobile-logo .st-avatar-fallback {
    font-size: 15px; font-weight: 700; color: var(--rr-num);
  }
  body.fz-classement .st-mobile-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  body.fz-classement .st-mobile-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font: 600 14.5px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--rr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.fz-classement .st-mobile-name-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.fz-classement .st-mobile-name .st-evo { flex: none; }
  body.fz-classement .st-mini-row { display: flex; min-width: 0; }
  body.fz-classement .st-mini,
  body.fz-classement .st-mobile-avg,
  body.fz-classement .st-mobile-pts {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
  }
  body.fz-classement .st-mini { flex: 0 1 30px; min-width: 24px; padding: 1px 0; }
  body.fz-classement .st-mini.has-sep { border-left: 1px solid var(--rr-line); }
  body.fz-classement .st-mini-v { font-size: 12.5px; color: var(--rr-num); }
  body.fz-classement .st-mini.is-zero .st-mini-v { color: var(--rr-dim); }
  body.fz-classement .st-mini-l { font-size: 9.5px; color: var(--rr-dim); }
  body.fz-classement .st-mobile-pts { min-width: 40px; }
  body.fz-classement .st-mobile-pts-v {
    font: 700 20px/1.1 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--rr-strong);
  }
  body.fz-classement .st-mobile-pts .st-mini-l { color: var(--rr-muted); }
  body.fz-classement .st-mobile-chev {
    font-size: 16px;
    color: var(--rr-chev);
    text-align: center;
  }
}
@media (max-width: 380px) {
  body.fz-classement .st-mini { flex-basis: 26px; min-width: 22px; }
}
/* Les plus petits téléphones (320px) : le rond rend 8px au nom et aux
   mini-colonnes, comme la photo de la liste des joueurs. Mêmes colonnes
   qu'elle partout ailleurs : rang, rond et nom s'alignent d'une liste à
   l'autre. */
@media (max-width: 339px) {
  body.fz-classement .st-mobile-row { grid-template-columns: 22px 44px minmax(0, 1fr) auto 14px; }
  body.fz-classement .st-mobile-logo { width: 44px; height: 44px; }
  body.fz-classement .st-mobile-logo img { width: 28px; height: 28px; }
}

/* ==================== TEMPLE DE LA RENOMMÉE ==================== */
/* Une tuile par période : le record en or devant, le pire en une ligne
   discrète dessous. Étroit (téléphone, carte H2H) : les tuiles s'empilent
   dans un seul cadre, le chiffre à gauche pour qu'ils s'alignent en
   colonne. Large : trois tuiles côte à côte. La bascule suit la largeur du
   bloc, pas celle de l'écran — le même temple vit en pleine largeur en
   cumulatif et en demi-colonne en H2H. */
body.fz-classement .hall-of-fame {
  container: hof / inline-size;
  margin-top: 44px;
  padding-top: 0;
  border-top: none;
}
body.fz-classement .hof-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
body.fz-classement .hof-title {
  margin: 0;
  font: 600 13px/1 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fzc-ink);
}
/* En H2H, la mention reprend celle des autres cartes (.fz-card-note). */
body.fz-classement .standings-insights:not(.is-h2h) .hof-season {
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid var(--fzc-border);
  border-radius: 999px;
  background: var(--fzc-surface);
  font: 600 10.5px/1 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--fzc-text-muted);
  white-space: nowrap;
}
body.fz-classement .standings-insights:not(.is-h2h) .hall-of-fame .fz-empty {
  border: 1px solid var(--fzc-border);
  border-radius: 12px;
  background: var(--fzc-surface);
}

body.fz-classement .hof-grid {
  display: grid;
  border: 1px solid var(--fzc-border);
  border-radius: 12px;
  background: var(--fzc-surface);
  overflow: hidden;
}
body.fz-classement .hof-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}
body.fz-classement .hof-tile + .hof-tile { border-top: 1px solid var(--fzc-border-soft); }
body.fz-classement .hof-tile-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font: 700 10px/1 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fzc-text-muted);
}
body.fz-classement .hof-icon { fill: currentColor; flex: none; width: 13px; height: 13px; }
body.fz-classement .hof-tile-label .hof-icon { color: var(--fzc-gold); }

/* -------------------- Le record -------------------- */
body.fz-classement .hof-record {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
body.fz-classement .hof-pts {
  flex: none;
  min-width: 98px;
  font: 700 28px/1 'Oswald', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--fzc-gold);
}
body.fz-classement .hof-pts small,
body.fz-classement .hof-low-pts small {
  margin-left: 3px;
  font: 600 10px/1 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fzc-text-faint);
}
body.fz-classement .hof-record.is-empty .hof-pts { color: var(--fzc-text-fainter); }
body.fz-classement .hof-who {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* Le nom d'équipe ouvre sa fiche, comme une rangée du classement : un
   bouton habillé en texte, rouge au survol. */
body.fz-classement .hof-team,
body.fz-classement .hof-low-team {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
body.fz-classement .hof-team {
  font: 600 13.5px/1.25 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--fzc-ink);
}
body.fz-classement .hof-team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .15s ease;
}
body.fz-classement .hof-team.is-link,
body.fz-classement .hof-low-team.is-link { cursor: pointer; }
body.fz-classement .hof-team.is-link:hover .hof-team-name,
body.fz-classement .hof-low-team.is-link:hover .hof-team-name {
  color: var(--fzc-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.fz-classement .hof-team.is-link:focus-visible,
body.fz-classement .hof-low-team.is-link:focus-visible {
  outline: 2px solid var(--fzc-accent-fill);
  outline-offset: 2px;
  border-radius: 4px;
}
body.fz-classement .hof-avatar {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fzc-tile);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.fz-classement .hof-avatar .st-avatar-fallback {
  font: 700 8.5px/1 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--fzc-text-muted);
}
body.fz-classement .hof-me {
  flex: none;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fzc-accent-fill) 12%, var(--fzc-surface));
  color: var(--fzc-accent);
  font: 700 9px/1.2 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.fz-classement .hof-when,
body.fz-classement .hof-low-when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 11.5px/1.2 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--fzc-text-faint);
  white-space: nowrap;
}
/* Une semaine ou un mois pas fini : le record peut encore tomber. */
body.fz-classement .hof-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 9.5px/1 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fzc-good);
}
body.fz-classement .hof-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* -------------------- Le pire, en retrait -------------------- */
body.fz-classement .hof-low {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  font: 400 12px/1.2 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--fzc-text-muted);
}
body.fz-classement .hof-low-label {
  font: 700 9.5px/1 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fzc-text-faint);
}
body.fz-classement .hof-low-pts {
  font: 600 13px/1 'Oswald', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--fzc-text-muted);
  white-space: nowrap;
}
body.fz-classement .hof-low-pts small { margin-left: 2px; font-size: 9px; }
body.fz-classement .hof-low-team {
  font: 500 12px/1.2 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--fzc-text-muted);
}
body.fz-classement .hof-low-team .hof-me { font-size: 8.5px; }

/* -------------------- Chargement (hofChargementHTML) --------------------
   La tuile chargée, des os à la place des données : titre et « Pire »
   restent lisibles, estompés ; le trophée attend son or. */
body.fz-classement .hof-tile.is-loading .hof-tile-label { opacity: .55; }
body.fz-classement .hof-tile.is-loading .hof-tile-label .hof-icon { color: currentColor; }
body.fz-classement .hof-tile.is-loading .hof-low-label { opacity: .7; }
/* À la largeur du chiffre chargé (min-width de .hof-pts) : l'équipe ne
   se décale pas à l'arrivée. */
body.fz-classement .hof-sk-pts { flex: none; width: 58px; height: 26px; margin-right: 40px; border-radius: 5px; }
body.fz-classement .hof-avatar.fz-bone { border-radius: 50%; }
body.fz-classement .hof-sk-name { width: 80px; height: 12px; }
body.fz-classement .hof-sk-when { width: 64px; height: 9px; margin-top: 2px; }
body.fz-classement .hof-sk-low-pts { width: 26px; height: 10px; }
body.fz-classement .hof-sk-low-team { width: 110px; max-width: 100%; height: 10px; }
body.fz-classement .hof-sk-low-when { width: 60px; height: 10px; }

/* -------------------- Bloc large : trois tuiles -------------------- */
@container hof (min-width: 600px) {
  body.fz-classement .hof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  body.fz-classement .hof-tile,
  body.fz-classement .hof-tile + .hof-tile {
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--fzc-border);
    border-radius: 12px;
    background: var(--fzc-surface);
  }
  body.fz-classement .hof-record {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  body.fz-classement .hof-pts { min-width: 0; font-size: 34px; }
  body.fz-classement .hof-sk-pts { width: 72px; height: 34px; margin-right: 0; }
  /* Le pire se cale en bas : les trois lignes s'alignent d'une tuile à
     l'autre, quelle que soit la longueur des noms au-dessus. */
  body.fz-classement .hof-low {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--fzc-border-soft);
  }
  body.fz-classement .standings-insights.is-h2h .hof-grid { padding: 14px 15px; }
}

@media (max-width: 380px) {
  body.fz-classement .hof-tile { padding-inline: 14px; }
  body.fz-classement .hof-record { gap: 12px; }
  body.fz-classement .hof-pts { min-width: 84px; font-size: 24px; }
  body.fz-classement .hof-sk-pts { margin-right: 26px; }
}

/* ==================== SKELETON (chargement) ==================== */
body.fz-classement .skeleton,
body.fz-classement .skeleton-avatar {
  background: linear-gradient(90deg, var(--fzc-border-soft) 25%, var(--fzc-tile) 50%, var(--fzc-border-soft) 75%);
  background-size: 200% 100%;
}

/* ==================== SQUELETTE DU CLASSEMENT ====================
   Claude Design, « Classement Skeleton » (#standingsSkeleton,
   classement.html). Le squelette reprend les classes du classement
   chargé — tableau sur bureau, bande sur téléphone — et n'ajoute que
   ses os.

   Un os (.fz-bone) est un aplat translucide (--rr-bone, classement.css).
   Son reflet est fixé à l'écran (background-attachment: fixed) : un seul
   balayage traverse tous les os à la fois, de gauche à droite, au lieu
   d'un reflet par os qui scintille chacun de son côté. Les os secondaires
   (pastille, tendance, dates) restent mats : l'œil va d'abord à ce qui
   brille. Les rangées montent l'une après l'autre (--i, 45 ms d'écart). */
body.fz-classement .fz-bone {
  display: block;
  border-radius: 4px;
  background: linear-gradient(100deg, var(--rr-bone) 40%, var(--rr-bone-shine) 50%, var(--rr-bone) 60%) fixed;
  background-size: 300% 100%;
  animation: fzOsReflet 1.6s linear infinite;
}
body.fz-classement .hof-sk-flat,
body.fz-classement .st-sk-pill,
body.fz-classement .st-sk-evo {
  display: block;
  border-radius: 5px;
  background: var(--rr-bone);
}
@keyframes fzOsReflet {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
@keyframes fzOsMonte {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

body.fz-classement .st-sk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Titre et fil d'Ariane, avant que le pool soit connu : l'image (32px,
   arrondie à 8px) et le nom, aux mesures de showPoolStandings. */
body.fz-classement .st-sk-pool-img {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 8px;
  vertical-align: middle;
}
body.fz-classement .st-sk-pool-name {
  display: inline-block;
  width: 150px;
  max-width: 50vw;
  height: 22px;
  border-radius: 6px;
  vertical-align: middle;
}
body.fz-classement .st-sk-crumb {
  display: inline-block;
  width: 72px;
  height: 9px;
  border-radius: 3px;
  vertical-align: middle;
}

body.fz-classement .st-sk { position: relative; }
body.fz-classement .st-sk-table tbody tr,
body.fz-classement .st-sk-list .st-mobile-row {
  opacity: 0;
  animation: fzOsMonte .35s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
body.fz-classement .st-sk-insights {
  opacity: 0;
  animation: fzOsMonte .35s ease-out .32s forwards;
}

/* La tuile « où en suis-je » (bureau) : neutre tant qu'on ne sait pas. */
body.fz-classement .st-summary.st-sk-summary { border-left-color: var(--fzc-border); }
body.fz-classement .st-sk-sum-rank { flex: none; width: 52px; height: 38px; border-radius: 6px; }
body.fz-classement .st-sk-sum-name { width: 120px; height: 13px; margin: 2px 0; }
body.fz-classement .st-sk-sum-detail { width: 240px; max-width: 100%; height: 11px; margin: 5px 0 2px; }

/* Le tableau (bureau), aux mesures de #standingsTable — qui défait comme
   lui les réglages globaux des tables (index.css : colonnes fixes, en-tête
   collant, flouté et ombré). */
body.fz-classement .st-sk-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: auto;
}
body.fz-classement .st-sk-table thead { position: static; }
body.fz-classement .st-sk-table th {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 10px;
  background: var(--fzc-bg-alt);
  border-bottom: 1px solid var(--fzc-border-strong);
  color: var(--fzc-text-muted);
  font: 600 10px/1 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
body.fz-classement .st-sk-table th.points-column { color: var(--fzc-accent); }
body.fz-classement .st-sk-table td {
  padding: 9px 10px;
  background: var(--fzc-surface);
  text-align: center;
}
body.fz-classement .st-sk-table tbody tr {
  background: var(--fzc-surface);
  border-bottom: 1px solid var(--fzc-border-soft);
  cursor: default;
}
body.fz-classement .st-sk-table tbody tr:last-child { border-bottom: 0; }
body.fz-classement .st-sk-table .rank-col { width: 40px; padding-inline: 4px; }
body.fz-classement .st-sk-table .player-col { min-width: 110px; padding-left: 12px; text-align: left; }
body.fz-classement .st-sk-table .st-evo-col { text-align: right; }
body.fz-classement .st-sk-who { display: flex; align-items: center; gap: 10px; }
body.fz-classement .st-sk-av { flex: none; width: 26px; height: 26px; border-radius: 50%; }
body.fz-classement .st-sk-name { flex: none; width: var(--w); height: 12px; }
body.fz-classement .st-sk-n { width: var(--w); height: 10px; margin: 0 auto; border-radius: 3px; }
body.fz-classement .st-sk-total { width: 26px; height: 14px; margin: 0 auto; }
body.fz-classement .st-sk-evo { width: 34px; height: 18px; margin-left: auto; border-radius: 6px; }

/* La bande (téléphone) : les rangées chargées, des os à la place des
   chiffres. Les hauteurs d'os égalent celles des lignes de texte qu'ils
   remplacent : la rangée garde ses 64px. */
body.fz-classement .st-sk-list .st-mobile-logo.fz-bone { border-radius: 50%; }
body.fz-classement .st-sk-mname {
  flex: 0 1 auto;
  width: var(--w);
  max-width: calc(100% - 28px);
  height: 13px;
  margin: 2px 0;
}
body.fz-classement .st-sk-pill { flex: none; width: 22px; height: 14px; }
body.fz-classement .st-sk-mv { width: var(--w); height: 9px; margin: 2.5px 0; border-radius: 3px; }
body.fz-classement .st-sk-mpts { width: 22px; height: 18px; margin: 2px 0; }
body.fz-classement .st-sk-list .st-mini-l,
body.fz-classement .st-sk-list .st-mobile-chev { opacity: .65; }

body.fz-classement .st-sk-legend summary { opacity: .5; }

/* La fiche d'équipe (#rosterSkeleton, rosterSqueletteHTML) : les rangées
   de la liste, des os aux hauteurs des lignes qu'ils remplacent — la
   rangée garde ses 76px, la photo ses 52px. */
body.fz-classement .rr-sk .roster-row {
  opacity: 0;
  animation: fzOsMonte .35s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
body.fz-classement .rr-sk .rr-avatar.fz-bone { border-radius: 50%; }
body.fz-classement .rr-sk .rr-name-line { align-items: center; }
body.fz-classement .rr-sk-name {
  flex: 0 1 auto;
  width: var(--w);
  max-width: calc(100% - 40px);
  height: 12px;
  margin: 2.5px 0;
}
body.fz-classement .rr-sk-meta {
  flex: none;
  display: block;
  width: 34px;
  height: 9px;
  border-radius: 3px;
  background: var(--rr-bone);
}
body.fz-classement .rr-sk-v { width: var(--w); height: 9px; margin: 2.5px 0; border-radius: 3px; }
body.fz-classement .rr-sk-pts { width: 22px; height: 16px; margin: 2px 0; }
body.fz-classement .rr-sk .rr-l,
body.fz-classement .rr-sk .rr-chev { opacity: .65; }

@media (max-width: 680px) {
  body.fz-classement #standingsSkeleton .st-summary { display: none; }
  body.fz-classement .st-sk-list .st-mobile-row { cursor: default; }
  /* Le filet rouge du meneur attend de savoir qui mène. */
  body.fz-classement .st-sk-list .st-mobile-row:first-child { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.fz-classement .fz-bone { animation: none; }
  body.fz-classement .st-sk-table tbody tr,
  body.fz-classement .st-sk-list .st-mobile-row,
  body.fz-classement .st-sk-insights,
  body.fz-classement .rr-sk .roster-row { opacity: 1; animation: none; }
}

/* ==================== FICHE D'ÉQUIPE : liste pleine largeur ====================
   Sur téléphone, la bande des joueurs (.roster-rows, classement.css) va d'un
   bord à l'autre de l'écran, comme dans le mockup : laissée dans les 32px de
   marge de .container, la colonne du nom n'a plus la place des quatre
   stats. L'en-tête garde la marge. */
@media (max-width: 680px) {
  body.fz-classement .roster-rows { margin-inline: -32px; }
}

/* ==================== TÉLÉPHONE : EN-TÊTE ====================
   Le fil d'Ariane (« Accueil > Pool > Équipe », des liens de 12px) ne sert
   à rien sur téléphone : l'accueil est dans la barre du bas, le pool dans
   la pastille du haut. Il s'efface — !important parce que classement.js
   l'affiche en style en ligne. La fiche prend à la place une barre de
   navigation : retour à gauche, nom de l'équipe (et sa liste) au centre,
   l'étiquette « Mettre en vente » à droite ; rang · bilan · actifs centrés
   dessous. Deux colonnes de 44px de part et d'autre : le nom reste au
   centre, même sans le bouton de vente (l'équipe d'un autre). La marge du
   haut de 40px, faite pour le bureau, repoussait tout le contenu sous la
   ligne de flottaison. */
@media (max-width: 680px) {
  body.fz-classement .container { padding-top: 16px; }
  body.fz-classement .breadcrumb { display: none !important; }
  body.fz-classement .roster-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas:
      "back title sale"
      "sub  sub   sub";
    column-gap: 8px;
    margin-bottom: 14px;
  }
  /* Le chevron sur le bord du contenu ; la zone de toucher de 44px
     déborde un peu dans la marge. */
  body.fz-classement .rh-back {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    justify-self: start;
    width: 44px;
    height: 44px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--fzc-accent);
    cursor: pointer;
  }
  body.fz-classement .rh-back:active { background: var(--fzc-tile); }
  body.fz-classement .rh-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
  body.fz-classement .rh-title { justify-self: center; }
  body.fz-classement .rh-name { font-size: 20px; }
  /* L'étiquette seule, dans un rond ; son nom vient d'aria-label
     (renderRosterHeader, refreshSaleMarks). Le compte passe en pastille
     sur le coin. */
  body.fz-classement .rh-sale {
    position: relative;
    justify-self: end;
    justify-content: center;
    width: 40px;
    min-height: 40px;
    height: 40px;
    padding: 0;
  }
  body.fz-classement .rh-sale svg { width: 18px; height: 18px; }
  body.fz-classement .rh-sale-long { display: none; }
  body.fz-classement .rh-sale-count {
    position: absolute;
    top: -4px;
    right: -4px;
    box-shadow: 0 0 0 2px var(--bg);
  }
  body.fz-classement .rh-sub { justify-self: center; margin-top: -2px; text-align: center; }
}

/* ====================================================================
   H2H — ONGLET CLASSEMENT
   --------------------------------------------------------------------
   Le mockup d'origine s'arrêtait au pool cumulatif (voir la note en tête
   de fichier) ; l'onglet Classement d'un pool H2H est maintenant couvert
   lui aussi. Il se lit en trois temps : une bande de tuiles de contexte,
   la table de saison dans une carte titrée, puis deux cartes côte à côte
   (temple de la renommée, derniers résultats).

   Tout est scopé : `.st-card` pour la table H2H, `.standings-insights
   .is-h2h` pour le bas de page. Un pool cumulatif ne traverse aucune de
   ces règles et garde exactement l'habillage précédent.
   ==================================================================== */

/* -------------------- Sous-titre du pool -------------------- */
/* Le titre donne le nom du pool ; cette ligne dit de quelle ligue il
   s'agit et où en est la saison — les deux questions qu'on se pose avant
   de lire un classement. */
body.fz-classement .pool-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 20px;
}
body.fz-classement .phm-line {
  margin: 0;
  font: 400 12.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fzc-text-faint);
}
body.fz-classement .phm-badge {
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--fzc-accent-fill) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fzc-accent-fill) 10%, var(--fzc-surface));
  color: var(--fzc-accent);
  font: 600 10.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* -------------------- Onglets H2H -------------------- */
body.fz-classement .h2h-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--fzc-surface);
  border: 1px solid var(--fzc-border);
  border-radius: 12px;
}
body.fz-classement .h2h-tab {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--fzc-text-muted);
  font: 600 12.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.fz-classement .h2h-tab-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
body.fz-classement .h2h-tab:hover {
  background: var(--fzc-bg);
  color: var(--fzc-ink);
}
body.fz-classement .h2h-tab.active {
  background: color-mix(in srgb, var(--fzc-accent-fill) 10%, var(--fzc-surface));
  border-color: color-mix(in srgb, var(--fzc-accent-fill) 45%, transparent);
  color: var(--fzc-accent);
  box-shadow: none;
}
body.fz-classement .h2h-tab:focus-visible {
  outline: 2px solid var(--fzc-accent);
  outline-offset: -2px;
}

/* -------------------- Bande de tuiles -------------------- */
/* Cinq tuiles tiennent de front sur grand écran ; en dessous la bande
   défile latéralement plutôt que de casser en grille — c'est une frise de
   contexte, pas un contenu à parcourir. */
body.fz-classement .h2h-strip {
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.fz-classement .h2h-strip::-webkit-scrollbar { display: none; }

body.fz-classement .h2h-strip-card {
  flex: 1 0 166px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--fzc-border);
  border-radius: 12px;
  background: var(--fzc-surface);
  min-width: 0;
}
body.fz-classement .h2h-strip-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fzc-tile);
  color: var(--fzc-accent);
}
body.fz-classement .h2h-strip-icon svg { width: 16px; height: 16px; }
body.fz-classement .h2h-strip-icon img { width: 20px; height: 20px; object-fit: contain; }
body.fz-classement .h2h-strip-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.fz-classement .h2h-strip-label,
body.fz-classement .h2h-strip-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Le sous-titre est le seul texte libre de la tuile — « Aujourd'hui —
   mercredi 8 sept. » ne tient pas sur une ligne de 110 px. Il passe donc à
   la ligne plutôt que de se couper ; les tuiles étant étirées sur la même
   hauteur, la bande ne bouge pas pour autant. */
body.fz-classement .h2h-strip-sub {
  overflow: hidden;
  overflow-wrap: anywhere;
}
body.fz-classement .h2h-strip-label {
  font: 600 9px/1.1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fzc-text-faint);
}
body.fz-classement .h2h-strip-value {
  font: 700 17px/1.15 'Oswald', sans-serif;
  color: var(--fzc-ink);
}
body.fz-classement .h2h-strip-sub {
  font: 400 10px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fzc-text-faint);
}

/* -------------------- En-tête de carte partagé -------------------- */
/* Les classes fz-* voyagent avec le balisage du temple de la renommée,
   qui sert aux deux modes de pool. Leur mise en page n'est donc appliquée
   que dans les contextes H2H — un pool cumulatif ne voit ni l'icône ni le
   titre en casse normale. */
body.fz-classement .st-card .fz-card-head,
body.fz-classement .standings-insights.is-h2h .fz-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 15px;
  border-bottom: 1px solid var(--fzc-border-soft);
}
body.fz-classement .st-card .fz-card-icon,
body.fz-classement .standings-insights.is-h2h .fz-card-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--fzc-accent);
}
body.fz-classement .fz-card-icon svg { width: 16px; height: 16px; display: block; }
body.fz-classement .standings-insights:not(.is-h2h) .fz-card-icon { display: none; }

body.fz-classement .fz-card-title { margin: 0; color: var(--fzc-ink); }
body.fz-classement .st-card .fz-card-title,
body.fz-classement .standings-insights.is-h2h .fz-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 12.5px/1.25 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
body.fz-classement .standings-insights.is-h2h .fz-card-note {
  flex-shrink: 0;
  margin-left: auto;
  font: 400 9.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fzc-text-faint);
  white-space: nowrap;
}
body.fz-classement .fz-card-link {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fzc-accent);
  font: 600 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  cursor: pointer;
}
body.fz-classement .fz-card-link:hover { color: var(--fzc-accent-dark); }

/* -------------------- État vide de carte -------------------- */
body.fz-classement .fz-empty {
  padding: 34px 18px;
  text-align: center;
}
body.fz-classement .standings-insights.is-h2h .fz-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.fz-classement .fz-empty-icon {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 12px;
  color: var(--fzc-text-fainter);
}
body.fz-classement .fz-empty-icon svg { width: 30px; height: 30px; display: block; }
body.fz-classement .fz-empty-title {
  margin: 0 0 5px;
  font: 600 12.5px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fzc-text-muted);
}
body.fz-classement .fz-empty-hint {
  margin: 0;
  font: 400 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fzc-text-faint);
}

/* -------------------- Table de saison (carte) -------------------- */
body.fz-classement .st-card {
  border: 1px solid var(--fzc-border);
  border-radius: 12px;
  background: var(--fzc-surface);
  overflow: hidden;
}
/* La carte porte déjà le cadre : le conteneur de table redevient un simple
   plan de défilement horizontal. */
body.fz-classement .st-card .standings-table-container {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
}
body.fz-classement .st-card #standingsTable { min-width: 560px; }

/* La colonne PTS est la réponse à « qui mène » : une bande continue la
   sort du bloc de chiffres, en-tête compris. */
body.fz-classement .st-card #standingsTable th.points-column,
body.fz-classement .st-card #standingsTable td.points-column {
  background: var(--fzc-bg-alt);
}
body.fz-classement .st-card #standingsTable tbody tr.is-leader,
body.fz-classement .st-card #standingsTable tbody tr.is-leader td.rank-col,
body.fz-classement .st-card #standingsTable tbody tr.is-leader td.player-col {
  background: color-mix(in srgb, var(--fzc-accent-fill) 6%, var(--fzc-surface));
}
body.fz-classement .st-card #standingsTable tbody tr.is-leader td.points-column {
  background: color-mix(in srgb, var(--fzc-accent-fill) 34%, var(--fzc-surface));
  color: var(--fzc-ink);
}
/* Le meneur d'un pool H2H se marque en rouge, pas en or : ici l'or ne dit
   rien de plus que le rang 1 déjà lisible à gauche. */
body.fz-classement .st-card #standingsTable tbody tr.is-leader.is-clickable::after {
  background: var(--fzc-accent-fill);
  opacity: 1;
}
body.fz-classement .st-card #standingsTable td.st-diff-col { color: var(--fzc-text-faint); }

/* V/D/N : trois colonnes triables sur grand écran, une seule colonne
   « V - D - N » sur téléphone. Le rendu produit toujours les deux, seul
   l'affichage bascule — pas de re-rendu au redimensionnement. */
body.fz-classement .st-vdn-col { display: none; }

/* -------------------- Colonne Forme -------------------- */
body.fz-classement th.st-form-col,
body.fz-classement td.st-form-col { text-align: center; }
body.fz-classement .st-form {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.fz-classement .st-form-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--fzc-flat-bg);
}
body.fz-classement .st-form-dot.is-w { background: var(--fzc-good); }
body.fz-classement .st-form-dot.is-l { background: var(--fzc-bad); }
body.fz-classement .st-form-dot.is-t { background: var(--fzc-text-fainter); }

/* -------------------- Bas de page : deux cartes -------------------- */
body.fz-classement .standings-insights.is-h2h {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
/* Les cartes s'alignent en haut ET en bas : leur contenu est de longueur
   très inégale (un état vide contre trois semaines de résultats), et deux
   hauteurs différentes se voient plus que le vide gagné. */
body.fz-classement .standings-insights.is-h2h > div {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding-top: 0;
  border: 1px solid var(--fzc-border);
  border-radius: 12px;
  background: var(--fzc-surface);
  overflow: hidden;
}
/* La carte porte déjà le cadre : les tuiles du temple s'y empilent à plat. */
body.fz-classement .standings-insights.is-h2h .hof-grid {
  border: 0;
  border-radius: 0;
  background: none;
}

/* -------------------- Derniers résultats -------------------- */
body.fz-classement .h2h-res-list { padding: 0 15px; }
body.fz-classement .h2h-res-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--fzc-border-soft);
}
body.fz-classement .h2h-res-row:last-child { border-bottom: none; }
body.fz-classement .h2h-res-when {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.fz-classement .h2h-res-week {
  font: 600 12.5px/1.1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fzc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.fz-classement .h2h-res-dates {
  font: 400 10.5px/1.1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fzc-text-faint);
  white-space: nowrap;
}
body.fz-classement .h2h-res-score {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
body.fz-classement .h2h-res-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
body.fz-classement .h2h-res-pts {
  font: 700 14px/1 'Oswald', sans-serif;
  color: var(--fzc-text-muted);
}
body.fz-classement .h2h-res-pts.is-top { color: var(--fzc-good); }
body.fz-classement .h2h-res-team {
  max-width: 64px;
  font: 400 9.5px/1.1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fzc-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.fz-classement .h2h-res-sep {
  padding-top: 2px;
  font: 400 12px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fzc-text-fainter);
}
body.fz-classement .h2h-res-badge {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font: 700 12px/1 'Oswald', sans-serif;
}
body.fz-classement .h2h-res-badge.is-win { background: var(--fzc-good-bg); color: var(--fzc-good); }
body.fz-classement .h2h-res-badge.is-loss { background: var(--fzc-bad-bg); color: var(--fzc-bad); }
body.fz-classement .h2h-res-badge.is-tie,
body.fz-classement .h2h-res-badge.is-none { background: var(--fzc-flat-bg); color: var(--fzc-text-faint); }

body.fz-classement .h2h-res-more {
  display: block;
  width: 100%;
  padding: 12px 15px;
  border: none;
  border-top: 1px solid var(--fzc-border-soft);
  background: transparent;
  color: var(--fzc-accent);
  font: 600 11.5px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: left;
  cursor: pointer;
}
body.fz-classement .h2h-res-more:hover { color: var(--fzc-accent-dark); }

/* -------------------- Téléphone -------------------- */
@media (max-width: 680px) {
  /* Le bloc "TABLEAU (MOBILE : cartes)" plus haut masque la table au profit
     de .st-mobile-list, qui n'existe qu'en cumulatif. Un pool H2H garde donc
     sa table — comme le mockup —, en la faisant défiler si besoin. */
  body.fz-classement .st-card .standings-table-container {
    display: block;
    overflow-x: auto;
  }
  body.fz-classement .st-card #standingsTable { min-width: 340px; }
  body.fz-classement .st-card #standingsTable th,
  body.fz-classement .st-card #standingsTable td {
    padding-left: 5px;
    padding-right: 5px;
  }
  body.fz-classement .st-card #standingsTable td:not(.player-col),
  body.fz-classement .st-card #standingsTable th:not(.player-col):not(.rank-col) {
    min-width: 0;
  }
  body.fz-classement .st-card #standingsTable th.player-col,
  body.fz-classement .st-card #standingsTable td.player-col { min-width: 92px; }
  body.fz-classement .st-card .st-name { font-size: 12px; }
  body.fz-classement .st-card .st-avatar { width: 22px; height: 22px; }
  body.fz-classement .st-card .st-avatar img { width: 15px; height: 15px; }

  body.fz-classement .st-card .st-wlt-col { display: none; }
  body.fz-classement .st-card .st-vdn-col { display: table-cell; }
  body.fz-classement .st-form { gap: 4px; }
  body.fz-classement .st-form-dot { width: 7px; height: 7px; }

  body.fz-classement .h2h-tabs { gap: 2px; padding: 3px; }
  body.fz-classement .h2h-tab {
    gap: 5px;
    padding: 9px 3px;
    font-size: 10px;
  }
  body.fz-classement .h2h-tab-icon { width: 13px; height: 13px; }

  body.fz-classement .h2h-strip-card { flex: 0 0 172px; }
  body.fz-classement .standings-insights.is-h2h { gap: 12px; }
}

/* ==================== LISIBILITÉ DU CLASSEMENT ====================
   1. « Où en suis-je ? » avant le tableau.
   2. Ma rangée repérée dans le tableau.
   3. Une légende repliée : ce que veut dire chaque colonne. */
body.fz-classement .st-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--fzc-border);
  border-left: 4px solid var(--fzc-accent-fill);
  border-radius: 12px;
  background: var(--fzc-surface);
}
body.fz-classement .st-summary-rank {
  flex: none;
  font-family: 'Bebas Neue', system-ui, sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--fzc-ink);
}
body.fz-classement .st-summary-rank small { font-size: 1.1rem; color: var(--fzc-text-faint); }
body.fz-classement .st-summary-rank sup { font-size: .55em; }
body.fz-classement .st-summary-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.fz-classement .st-summary-txt strong { color: var(--fzc-ink); }
body.fz-classement .st-summary-txt span { font-size: .9rem; color: var(--fzc-text); }

body.fz-classement #standingsTable tbody tr.is-me td { background: color-mix(in srgb, var(--fzc-accent-fill) 6%, transparent); }
body.fz-classement #standingsTable tbody tr.is-me td.player-col .st-name { font-weight: 800; color: var(--fzc-ink); }
body.fz-classement #standingsTable tbody tr.is-me td.rank-col { box-shadow: inset 3px 0 0 var(--fzc-accent-fill); }

body.fz-classement .st-legend {
  margin: 4px 0 0;
}
body.fz-classement .st-legend summary {
  padding: 12px 0;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  font: 600 13px/1.3 'Helvetica Neue', Helvetica, sans-serif;
  color: var(--fzc-text-faint);
}
body.fz-classement .st-legend summary:focus-visible { outline: 2px solid var(--fzc-accent); outline-offset: 2px; }
body.fz-classement .st-legend dl {
  display: grid;
  grid-template-columns: minmax(90px, max-content) 1fr;
  gap: 8px 16px;
  margin: 0;
  padding: 0 0 14px;
  font-size: .86rem;
  line-height: 1.45;
}
body.fz-classement .st-legend dt { font-weight: 700; color: var(--fzc-ink); }
body.fz-classement .st-legend dd { margin: 0; color: var(--fzc-text); }
@media (max-width: 520px) {
  body.fz-classement .st-legend dl { grid-template-columns: 1fr; gap: 2px; }
  body.fz-classement .st-legend dd { margin-bottom: 8px; }
}

/* ==================== BANC (TÊTE-À-TÊTE) ==================== */
body.fz-classement .bench-panel {
  width: 100%;
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--fzc-border);
  border-radius: 12px;
  background: var(--fzc-surface);
}
body.fz-classement .bench-title {
  margin: 0 0 4px;
  font: 700 15px/1.2 'Oswald', 'Helvetica Neue', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fzc-ink);
}
body.fz-classement .bench-hint { margin: 0 0 12px; font-size: .86rem; line-height: 1.45; color: var(--fzc-text); }
body.fz-classement .bench-pending {
  margin: 0 0 12px;
  padding: 10px 12px;
  list-style: none;
  border-left: 3px solid var(--fzc-accent-fill);
  border-radius: 8px;
  background: var(--fzc-bg-alt);
  font-size: .86rem;
  color: var(--fzc-text);
}
body.fz-classement .bench-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.fz-classement .bench-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--fzc-border-soft);
  border-radius: 10px;
}
body.fz-classement .bench-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.fz-classement .bench-name { font-weight: 700; color: var(--fzc-ink); }
body.fz-classement .bench-meta { font-size: .8rem; color: var(--fzc-text-muted); }
body.fz-classement .bench-swap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.fz-classement .bench-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body.fz-classement .bench-select {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 0 12px;
  border: 1px solid var(--fzc-border-input);
  border-radius: 10px;
  background: var(--fzc-surface);
  color: var(--fzc-ink);
  font: inherit;
}
body.fz-classement .bench-go {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--fzc-accent-fill);
  color: var(--fzc-on-accent);
  font: 700 .86rem/1 inherit;
  cursor: pointer;
}
body.fz-classement .bench-go:disabled { opacity: .45; cursor: default; }
body.fz-classement .bench-select:focus-visible,
body.fz-classement .bench-go:focus-visible { outline: 2px solid var(--fzc-accent); outline-offset: 2px; }
body.fz-classement .bench-empty { margin: 0; color: var(--fzc-text-faint); }
body.fz-classement .bench-msg { margin: 12px 0 0; font-size: .86rem; font-weight: 600; color: var(--fzc-ink); }
body.fz-classement .bench-msg.is-error { color: var(--fzc-accent); }
@media (max-width: 520px) {
  body.fz-classement .bench-swap { width: 100%; }
  body.fz-classement .bench-select { flex: 1 1 auto; }
}

/* ==================== POINTS DU SOIR ====================
   Ce que les matchs du soir ont ajouté au total, en direct (pointsDirect.js).
   S'allume une fois quand la valeur monte (classement.js, pointsSoirHTML). */
body.fz-classement .st-live-pts {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 100px;
  background: var(--fzc-good-bg);
  color: var(--fzc-good);
  font: 700 11px/1.2 'Oswald', sans-serif;
  letter-spacing: .02em;
  vertical-align: 2px;
  white-space: nowrap;
}
body.fz-classement .st-live-pts.is-new { animation: st-live-bump 1.6s ease-out; }
@keyframes st-live-bump {
  0%   { transform: scale(1.25); box-shadow: 0 0 0 0 color-mix(in srgb, var(--fzc-good) 45%, transparent); }
  60%  { transform: scale(1); box-shadow: 0 0 0 8px transparent; }
  100% { transform: scale(1); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.fz-classement .st-live-pts.is-new { animation: none; }
}