/*
 * Pages statistiques — intensité sobre de la direction « Feuille de match ».
 * Même encre, même papier que le site ; ici la donnée prime : chiffres
 * tabulaires, filets fins, orange réservé au critère trié et au rang.
 * Jetons de couleur et mouvement : styles.css.
 */

/* Typographie de l'app (05-implications §40) : Inter pour le texte, les métas
   et les valeurs ; Inter Tight pour les titres, les contrôles et les grands
   chiffres ; JetBrains Mono pour les seules étiquettes en capitales et les
   monogrammes. L'arabe garde IBM Plex Sans Arabic ; ses chiffres latins
   passent par Inter. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
/* Arial calé sur les métriques d'Inter : l'arrivée de la police ne décale rien. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
:root {
  --inter: 'Inter', 'Inter Fallback', Arial, sans-serif;
}
html[lang='ar'] {
  --inter: 'Inter', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', Tahoma, sans-serif;
}
html:not([lang='ar']) [data-stats-root] {
  font-family: var(--inter);
}
:where(html:not([lang='ar']) [data-stats-root])
  :where(
    h1,
    h2,
    h3,
    button,
    .st-name,
    .st-tabs a,
    .st-seg a,
    .st-chips a,
    .st-search-kind label,
    .st-more-rows,
    .st-pager a
  ) {
  font-family: var(--sans);
}

.st-trap,
.st-beacon {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.st-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) var(--gut) clamp(64px, 8vw, 112px);
}
.st-eyebrow {
  margin: 0 0 12px;
  color: var(--text2);
  font: 700 0.6875rem / 1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[lang='ar'] .st-eyebrow {
  font-family: var(--arabic);
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.st-title {
  max-width: 22ch;
  font-size: var(--fs-h1);
  line-height: 1.02;
}
.st-title.is-hero {
  max-width: 18ch;
}
.st-lede {
  max-width: 62ch;
  margin-top: 16px;
  color: var(--text2);
  font-size: var(--fs-lede);
  line-height: 1.5;
}
.st-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 20px;
}
.st-section-title {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  line-height: 1.1;
}
.st-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--borderStrong);
  text-underline-offset: 0.25em;
}
.st-more:hover {
  text-decoration-color: var(--action);
}
.st-muted {
  color: var(--text2);
  font-size: var(--fs-small);
}
.st-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}
.st-unknown {
  color: var(--text2);
}
.st-scope,
.st-corpus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 16px;
  color: var(--text2);
  font: 500 0.8125rem / 1.5 var(--inter);
}
.st-scope a,
.st-corpus a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--borderStrong);
  text-underline-offset: 0.2em;
}
.st-scope .st-dot,
.st-corpus .st-dot {
  margin-inline-end: 4px;
}
html[lang='ar'] .st-scope,
html[lang='ar'] .st-corpus {
  font-family: var(--arabic);
}
.st-notice {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--warn);
  border-radius: 12px;
  background: var(--warnS);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Fil d'Ariane et retour aux résultats. */
.st-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.st-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text2);
  font-size: var(--fs-small);
}
.st-crumbs li + li::before {
  content: '/';
  margin-inline-end: 8px;
  color: var(--textDis);
}
.st-crumbs a:hover {
  color: var(--text);
  text-decoration: underline;
}
.st-crumbs [aria-current] {
  color: var(--text);
  font-weight: 700;
}
.st-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--borderStrong);
  border-radius: 10px;
  font-size: var(--fs-small);
  font-weight: 700;
}
.st-back::before {
  content: '←';
}
html[lang='ar'] .st-back::before {
  content: '→';
}

/* ─── Accueil des stats ────────────────────────────────────────────────── */

.st-hero {
  padding-bottom: clamp(32px, 5vw, 64px);
}
.st-hero.is-small {
  max-width: 760px;
  padding-block: clamp(24px, 6vw, 72px);
}
.st-search {
  display: grid;
  /* Sans cela, la largeur naturelle du champ élargit la colonne au-delà de l'écran. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 680px;
  margin-top: 28px;
}
.st-search-kind,
.st-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 14px;
  background: var(--surface);
}
.st-search-kind label {
  position: relative;
}
.st-search-kind input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.st-search-kind span,
.st-seg > a,
.st-seg > span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  color: var(--text2);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.st-seg > a:hover,
.st-search-kind span:hover {
  color: var(--text);
}
.st-search-kind input:checked + span,
.st-seg > [aria-current] {
  background: var(--canvas);
  color: var(--text);
  box-shadow: 0 1px 0 var(--border);
}
.st-search-kind input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.st-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--borderStrong);
  border-radius: 18px;
  background: var(--canvas);
  transition: border-color var(--dur-fast) var(--ease-out);
}
html[dir='rtl'] .st-search-field {
  padding: 6px 14px 6px 6px;
}
.st-search-field:focus-within {
  border-color: var(--text);
}
.st-search-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text2);
}
.st-search-field input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  outline: none;
}
.st-search-field input::placeholder {
  color: var(--textDis);
}
.st-search-field input::-webkit-search-cancel-button {
  display: none;
}
.st-search-submit {
  flex: none;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--action);
  border-radius: 13px;
  background: var(--action);
  color: var(--onAction);
  font-weight: 700;
  transition: background-color var(--dur-press-out) var(--ease-out);
}
.st-search-submit:hover {
  background: var(--actionPressed);
}
/* Liste de suggestions, avatars et bulles : suggest.css (partagé avec l'accueil).
   Sur les pages stats, ils gardent Inter. */
.st-suggest-meta,
.st-mark::after,
.st-flag::after {
  font-family: var(--inter);
}

.st-results-block {
  padding-block: clamp(24px, 4vw, 48px);
  border-top: 1px solid var(--border);
}
.st-results-block .st-section-title {
  margin-bottom: 16px;
}
.st-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-row.is-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 64px;
  border-top: 1px solid var(--border);
}
.st-row.is-result:hover .st-row-name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.st-empty-state {
  display: grid;
  gap: 8px;
  max-width: 60ch;
  padding: 24px;
  border: 1px dashed var(--borderStrong);
  border-radius: 18px;
  color: var(--text2);
}
.st-empty-state .st-empty-title {
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
}
.st-empty {
  color: var(--text2);
  font-size: var(--fs-small);
}

.st-previews-block {
  padding-block: clamp(32px, 5vw, 64px);
  border-top: 1px solid var(--border);
}

.st-howto {
  padding-block: clamp(32px, 5vw, 64px);
  border-top: 1px solid var(--border);
}
.st-howto ul {
  display: grid;
  gap: 0 clamp(20px, 3vw, 40px);
  grid-template-columns: minmax(0, 1fr);
  margin: 20px 0 8px;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .st-howto ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.st-howto li {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--borderStrong);
}
.st-howto h3 {
  font-size: 1.0625rem;
  line-height: 1.25;
}
.st-howto p {
  color: var(--text2);
}

/* Bloc « l'app arrive » : jamais un bouton de téléchargement avant la sortie. */
.st-app {
  display: grid;
  gap: 10px;
  margin-top: clamp(32px, 5vw, 56px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}
.st-app .st-eyebrow {
  margin: 0;
}
.st-app-title {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.15;
}
.st-app-body {
  max-width: 56ch;
  color: var(--text2);
}
.st-app-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 0.75rem / 1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.st-app-status .st-dot {
  background: var(--action);
}
html[lang='ar'] .st-app-status {
  font-family: var(--arabic);
  letter-spacing: 0;
}
.st-app.is-compact {
  margin-top: 0;
  padding: 18px;
  border-radius: 18px;
}
.st-app.is-compact .st-app-title {
  font-size: 1.0625rem;
}
.st-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.st-store {
  display: inline-flex;
  border-radius: 10px;
}
.st-store img {
  width: auto;
  height: 44px;
}

/* ─── Classements ──────────────────────────────────────────────────────── */

.st-head {
  padding-bottom: clamp(20px, 3vw, 32px);
}
/* Classement sur mobile : l'en-tête tient en quatre lignes, la liste arrive
   plus haut (maquette « Mobile · classement »). Fil d'Ariane et chapeau
   restent dans le HTML pour les moteurs ; le titre et la date suffisent ici. */
@media (max-width: 759px) {
  .page-stats-leaderboard .st-crumbs,
  .page-stats-leaderboard .st-head .st-lede {
    display: none;
  }
  .page-stats-leaderboard .st-head {
    padding-bottom: 14px;
  }
  .page-stats-leaderboard .st-head .st-title {
    font-size: 1.75rem;
    line-height: 1.05;
  }
  .page-stats-leaderboard .st-head .st-scope {
    margin-top: 8px;
  }
  .page-stats-leaderboard .st-head .st-scope > :nth-child(2),
  .page-stats-leaderboard .st-head .st-scope > :nth-child(3) {
    display: none;
  }
}
.st-filters {
  display: grid;
  /* Colonne bornée : les onglets et les critères défilent dans leur ligne au
     lieu d'élargir la page sur mobile. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-inline: calc(var(--gut) * -1);
  padding: 12px var(--gut);
  border-block: 1px solid var(--border);
  background: var(--navBg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  /* Le flou crée une couche : sans rang, le tableau qui suit (en-tête, drapeaux,
     pictos) passerait par-dessus la liste d'un filtre ouvert. */
  position: relative;
  z-index: 20;
}
/* Collante seulement quand l'écran a la hauteur de la porter sans masquer la liste. */
@media (min-width: 760px) {
  .st-filters {
    position: sticky;
    top: var(--headerH);
  }
}
.st-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.st-tabs::-webkit-scrollbar {
  display: none;
}
.st-tabs a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text2);
  font-weight: 700;
  white-space: nowrap;
}
.st-tabs a:hover {
  color: var(--text);
}
.st-tabs a[aria-current] {
  background: var(--text);
  color: var(--canvas);
}
.st-filters-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.st-filters-top .st-tabs {
  min-width: 0;
}
.st-filters-top .st-seg:not(.st-kind) {
  margin-inline-start: auto;
}
.st-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

/* Filtres nation et plateforme (repris de l'app) : un <details> et de vrais
   liens ; stats.js ajoute la recherche et ferme au clic dehors. */
.st-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}
.st-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borderStrong);
  border-radius: 999px;
}
.st-pick.is-active {
  border-color: var(--text);
}
.st-pick summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.st-pick summary::-webkit-details-marker {
  display: none;
}
.st-pick-short {
  display: none;
}
@media (max-width: 759px) {
  .st-pick-short {
    display: inline;
  }
}
.st-pick details[open] summary {
  background: var(--surface);
  border-radius: 999px;
}
.st-pick.is-active summary {
  padding-inline-end: 4px;
}
.st-pick summary img,
.st-pick-list img {
  display: block;
  border-radius: 2px;
  outline: 1px solid var(--border);
  outline-offset: -1px;
}
.st-pick summary img {
  width: 16px;
  height: 12px;
}
.st-pick-chev {
  width: 12px;
  height: 12px;
}
.st-pick details[open] .st-pick-chev {
  rotate: 180deg;
}
.st-pick-clear {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-inline-end: 4px;
  border-radius: 50%;
}
.st-pick-clear:hover {
  background: var(--surface);
}
.st-pick-clear svg {
  width: 12px;
  height: 12px;
}
.st-pick-pop {
  position: absolute;
  z-index: 25;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  display: grid;
  gap: 6px;
  width: min(360px, calc(100vw - 2 * var(--gut)));
  padding: 10px;
  border: 1px solid var(--borderStrong);
  border-radius: 16px;
  background: var(--canvas);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text) 10%, transparent);
}
.st-pick-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--borderStrong);
  border-radius: 12px;
  color: var(--text2);
}
.st-pick-search[hidden] {
  display: none;
}
.st-pick-search svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.st-pick-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 0.9375rem / 1.3 var(--inter);
  outline: none;
}
.st-pick-list {
  max-height: min(360px, 50vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: none;
}
.st-pick-list::-webkit-scrollbar {
  display: none;
}
.st-pick-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font: 500 0.9375rem / 1.3 var(--inter);
}
.st-pick-list a:hover,
.st-pick-list a:focus-visible {
  background: var(--surface);
}
.st-pick-list a[aria-current] {
  font-weight: 600;
}
.st-pick-list a > span {
  flex: 1;
}
.st-pick-list img {
  flex: none;
  width: 20px;
  height: 15px;
}
.st-pick-list .st-plat-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text2);
}
.st-pick-check {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--action);
}
.st-pick-empty {
  padding: 8px 12px;
  color: var(--text2);
  font-size: var(--fs-small);
}
.st-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.st-sort-k {
  flex: none;
  white-space: nowrap;
  color: var(--text2);
  font: 700 0.6875rem / 1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[lang='ar'] .st-sort-k {
  font-family: var(--arabic);
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.st-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}
.st-chip:hover {
  border-color: var(--borderStrong);
}
.st-chip[aria-current] {
  border-color: var(--action);
  color: var(--actionText);
}

/* Recherche dans le classement : un champ toujours visible dans la barre. Le
   tableau suit la frappe (stats.js) ; sans script, un formulaire GET. */
.st-board-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: clamp(220px, 26vw, 340px);
  min-height: 36px;
  padding-inline: 12px 6px;
  border: 1px solid var(--borderStrong);
  border-radius: 999px;
  color: var(--text2);
}
.st-board-search:focus-within {
  border-color: var(--text);
}
.st-board-search-icon {
  flex: none;
  width: 16px;
  height: 16px;
}
.st-board-search input {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 0.875rem / 1.3 var(--inter);
  outline: none;
}
.st-board-search input::placeholder {
  color: var(--text2);
}
/* La croix du site remplace celle du navigateur : elle marche aussi sans script. */
.st-board-search input::-webkit-search-cancel-button {
  appearance: none;
  display: none;
}
.st-board-search-clear {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text);
}
.st-board-search-clear:hover {
  background: var(--surface);
}
.st-board-search-clear svg {
  width: 12px;
  height: 12px;
}
.st-kbd {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-inline-end: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font: 600 0.75rem / 1 var(--mono);
}
.st-board-search:focus-within .st-kbd {
  visibility: hidden;
}
/* Le morceau du nom qui répond à la recherche. */
.st-row-name mark {
  border-radius: 3px;
  background: color-mix(in srgb, var(--action) 26%, transparent);
  color: inherit;
}
/* Flèche de tri : présente dans chaque en-tête triable pour garder les
   largeurs d'un tri à l'autre ; pleine sur la colonne triée. */
.st-sort-arrow {
  flex: none;
  width: 11px;
  height: 11px;
  opacity: 0;
}
.st-table thead th a:hover .st-sort-arrow {
  opacity: 0.5;
}
.st-table thead th.is-sorted .st-sort-arrow {
  opacity: 1;
}
.st-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 4px;
}
.st-empty-actions a {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tri et filtres. Ordinateur : les filtres dans la barre, le tri par les
   en-têtes ; la feuille n'a pas de boîte. Mobile : un bouton « Filtres » et une
   feuille popover qui monte du bas (render.mjs, filtersSheet). */
.st-filters-btn,
.st-ed-pick,
.st-fsheet-head {
  display: none;
}
@media (min-width: 760px) {
  .st-fsheet {
    display: contents;
  }
  .st-fsheet .st-sort {
    display: none;
  }
}
@media (max-width: 759px) {
  /* Trois lignes avant le premier joueur : recherche et Filtres, Joueurs/Clubs
     et opus, puis les postes. */
  .st-filters-row {
    order: -1;
    flex-wrap: nowrap;
    gap: 8px;
  }
  /* Le champ rétrécit jusqu'au bouton Filtres, jamais au-delà de l'écran. */
  .st-board-search {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 44px;
  }
  .st-board-search input {
    height: 42px;
    font-size: 1rem;
  }
  .st-kbd {
    display: none;
  }
  .st-filters-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--borderStrong);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: 700 0.875rem / 1 var(--inter);
    cursor: pointer;
  }
  .st-filters-btn svg {
    width: 16px;
    height: 16px;
  }
  .st-filters-count {
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--action);
    color: #fff;
    font-size: 0.6875rem;
  }
  .st-filters-top .st-seg:not(.st-kind) {
    display: none;
  }
  .st-filters-top .st-tabs {
    order: 1;
  }
  .st-ed-pick {
    position: relative;
    display: block;
    margin-inline-start: auto;
  }
  .st-ed-pick .st-pick summary {
    min-height: 40px;
  }
  .st-ed-pick .st-pick-pop {
    inset-inline: auto 0;
    width: max-content;
    min-width: 180px;
  }
  .st-fsheet:popover-open {
    position: fixed;
    inset: auto 0 0;
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    margin: 0;
    padding: 8px var(--gut) calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    background: var(--canvas);
    color: var(--text);
    box-shadow: 0 -18px 48px color-mix(in srgb, var(--text) 12%, transparent);
  }
  .st-fsheet::backdrop {
    background: rgb(0 0 0 / 0.45);
  }
  .st-fsheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }
  .st-fsheet-title {
    font-size: 1.125rem;
    font-weight: 700;
  }
  .st-fsheet-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-inline-end: -8px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .st-fsheet-close svg {
    width: 16px;
    height: 16px;
  }
  .st-fsheet .st-sort {
    display: grid;
    gap: 10px;
  }
  .st-fsheet .st-chips {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .st-fsheet .st-chip {
    min-height: 40px;
    padding-inline: 14px;
  }
  .st-fsheet .st-picks {
    display: grid;
    gap: 10px;
  }
  .st-fsheet .st-pick {
    display: flex;
    flex-wrap: wrap;
    border-radius: 14px;
  }
  .st-fsheet .st-pick details {
    flex: 1;
  }
  .st-fsheet .st-pick summary {
    justify-content: space-between;
    min-height: 44px;
    font-size: 0.9375rem;
  }
  .st-fsheet .st-pick-long {
    display: inline;
  }
  .st-fsheet .st-pick-short {
    display: none;
  }
  .st-fsheet .st-pick-pop {
    position: static;
    width: auto;
    padding: 0 4px 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

.st-board {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 20px;
}
@media (min-width: 1360px) {
  .st-board {
    grid-template-columns: minmax(0, 1fr) 400px;
  }
}
.st-rule {
  margin-bottom: 12px;
  color: var(--text2);
  font-size: var(--fs-small);
}

.st-table {
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.st-table thead th {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid var(--borderStrong);
  color: var(--text2);
  font: 700 0.6875rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-align: start;
  text-transform: uppercase;
  white-space: nowrap;
}
html[lang='ar'] .st-table thead th {
  font-family: var(--arabic);
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.st-table thead th a,
.st-table thead th > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Hauteur d'un pictogramme : un critère sans icône ne raccourcit pas l'en-tête. */
  min-height: 15px;
}
.st-table thead th a:hover {
  color: var(--text);
}
.st-table thead th.is-sorted {
  color: var(--actionText);
}
.st-table thead th.is-sorted::after {
  content: '';
  position: absolute;
  inset-inline: 8px;
  bottom: -1px;
  height: 2px;
  background: var(--action);
}
.st-table abbr {
  text-decoration: none;
}
.st-table td,
.st-table tbody th {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: start;
}
.st-table tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out);
}
.st-table tbody tr:hover,
.st-table tbody tr.is-current {
  background: var(--surface);
}
.st-table tbody tr.is-current .c-rank {
  box-shadow: inset 3px 0 0 var(--action);
}
html[dir='rtl'] .st-table tbody tr.is-current .c-rank {
  box-shadow: inset -3px 0 0 var(--action);
}
.st-table tbody tr:target {
  background: color-mix(in srgb, var(--action) 10%, transparent);
}
.c-rank {
  width: 3.5rem;
  white-space: nowrap;
}
.st-rank-n {
  font: 600 0.9375rem / 1 var(--inter);
  font-variant-numeric: tabular-nums;
}
.st-table tbody tr:nth-child(-n + 3) .st-rank-n {
  color: var(--actionText);
}
.st-tie {
  margin-inline-start: 1px;
  color: var(--text2);
  font: 600 0.8125rem / 1 var(--inter);
  font-variant-numeric: tabular-nums;
}
.c-player {
  font-weight: 400;
}
.c-num {
  width: 1%;
  text-align: end !important;
  white-space: nowrap;
  /* `font` remet `font-variant` à zéro : les chiffres tabulaires se redisent. */
  font: 600 0.9375rem / 1.2 var(--inter);
  font-variant-numeric: tabular-nums;
}
.st-table thead th.c-num {
  text-align: end;
}
.st-table thead th.c-num a,
.st-table thead th.c-num > span {
  justify-content: flex-end;
}
/* La colonne triée change de graisse et de couleur d'en-tête, jamais de taille :
   un tri ne décale pas les colonnes voisines. */
.st-table td.c-num.is-sorted {
  font-weight: 700;
}
.st-per {
  display: block;
  margin-top: 3px;
  color: var(--text2);
  font: 500 0.6875rem / 1 var(--inter);
  font-variant-numeric: tabular-nums;
}
/* Chaque colonne comptée réserve la place de sa valeur par match ; seule la
   colonne triée l'affiche. */
.st-table td.c-num:not(.is-sorted) .st-per {
  visibility: hidden;
}
.st-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 48px;
}
.st-row-id {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.st-row-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}
.st-row-name bdi {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.st-row:hover .st-row-name bdi {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.st-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  color: var(--text2);
  font: 500 0.75rem / 1.2 var(--inter);
}
/* Ligne joueur : aucun avatar, comme l'app ; le pseudo prend toute la largeur.
   Seul un joueur rattaché qui a une photo garde la colonne du visuel. */
.st-row.is-bare {
  grid-template-columns: minmax(0, 1fr);
}

/* Plateforme : pictogramme du design system en masque, au ton du texte
   secondaire, puis le libellé court de l'app. */
.st-plat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.st-plat-icon {
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  mask: var(--glyph) center / contain no-repeat;
}
.st-plat-icon.is-playstation {
  --glyph: url('/platforms/playstation.svg');
}
.st-plat-icon.is-xbox {
  --glyph: url('/platforms/xbox.svg');
}
.st-plat-icon.is-switch {
  --glyph: url('/platforms/switch.svg');
}
.st-plat-icon.is-pc {
  --glyph: url('/platforms/pc.svg');
}

/* Nation : drapeau 4:3 du design system après le pseudo, filet 1 px (app 15 × 11). */
.st-flag {
  position: relative;
  display: inline-flex;
  flex: none;
}
.st-flag img,
.st-id-nation img {
  display: block;
  width: 16px;
  height: 12px;
  border-radius: 2px;
  outline: 1px solid var(--border);
  outline-offset: -1px;
}
.st-sub {
  display: none;
}
.st-ico {
  flex: none;
  width: 15px;
  height: 15px;
}

/* Mobile : la même table devient une liste compacte — rang, joueur et critère
   trié ; les autres chiffres passent sous le nom, sans colonnes rétrécies. */
@media (max-width: 759px) {
  .st-table thead th.c-num:not(.is-sorted),
  .st-table td.c-num:not(.is-sorted) {
    display: none;
  }
  .st-table thead th.c-player {
    width: auto;
  }
  .st-table .st-row {
    min-height: 0;
  }
  .st-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 6px;
    color: var(--text2);
    font: 500 0.75rem / 1.3 var(--inter);
    font-variant-numeric: tabular-nums;
  }
  .st-sub span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .st-sub b {
    color: var(--text);
  }
  .st-sub .st-ico {
    width: 13px;
    height: 13px;
  }
  .c-rank {
    width: 2.75rem;
  }
  /* Seul chiffre de la ligne : il garde sa taille de lecture. */
  .st-table td.c-num.is-sorted {
    font-size: 1.0625rem;
  }
  /* Critères de tri sur une seule ligne qui défile : quatre ou cinq critères
     donnent la même hauteur, la liste ne saute pas d'un poste à l'autre. */
  .st-sort {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .st-chips {
    flex-wrap: nowrap;
    min-width: 0;
    margin-block: -2px;
    margin-inline-end: calc(var(--gut) * -1);
    padding-block: 2px;
    padding-inline-end: var(--gut);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .st-chips::-webkit-scrollbar {
    display: none;
  }
  .st-chips li {
    flex: none;
  }
  /* Filtres sous le tri, à gauche ; la liste s'ouvre sur toute la largeur. */
  .st-picks {
    position: relative;
    flex: 1 1 100%;
    margin-inline-start: 0;
  }
  .st-pick {
    position: static;
  }
  .st-pick-pop {
    inset-inline: 0;
    width: auto;
  }
  /* Deux boutons sur une ligne : « Nation », « Plateforme » (libellés de l'app). */
  .st-pick-long {
    display: none;
  }
  .st-filters-top .st-tabs {
    flex: 1 1 100%;
  }
  .st-filters-top .st-seg:not(.st-kind) {
    margin-inline-start: 0;
  }
  /* La suite s'ajoute par le bouton : « Suivante » ferait double emploi. */
  .st-board-list:has(.st-more-rows) .st-pager a[rel='next'] {
    display: none;
  }
}

/* Pagination compacte, dans la barre collante (ordinateur et tablette). */
.st-pager-mini {
  display: none;
}
@media (min-width: 760px) {
  .st-pager-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
  }
  .st-pager-mini a,
  .st-pager-mini > span[aria-hidden] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--borderStrong);
    border-radius: 10px;
  }
  .st-pager-mini a:hover {
    border-color: var(--text);
  }
  .st-pager-mini > span[aria-hidden] {
    border-color: var(--border);
    color: var(--textDis);
  }
  .st-pager-mini > span:not([aria-hidden]) {
    min-width: 4.5rem;
    color: var(--text2);
    font: 600 0.8125rem / 1 var(--inter);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .st-pager-mini svg {
    width: 16px;
    height: 16px;
  }
}
html[dir='rtl'] .st-pager-mini svg {
  transform: scaleX(-1);
}

/* « Afficher les 50 suivants » : mobile seulement, la pagination reste sur ordinateur. */
.st-more-rows {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 16px;
  border: 1px solid var(--borderStrong);
  border-radius: 12px;
  font-weight: 700;
}
.st-more-rows:hover {
  border-color: var(--text);
}
.st-more-rows[aria-busy='true'] {
  color: var(--text2);
  pointer-events: none;
}
@media (min-width: 760px) {
  .st-more-rows {
    display: none;
  }
}

/* Changement sur place : la liste reste à sa hauteur, atténuée, jusqu'à la suivante. */
.st-board-list[aria-busy='true'] .st-table tbody,
.st-board-list[aria-busy='true'] .st-empty-state {
  opacity: 0.6;
}

.st-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  font-weight: 700;
}
.st-pager-side {
  display: flex;
  gap: 8px;
}
.st-pager a,
.st-pager .is-off {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--borderStrong);
  border-radius: 12px;
}
.st-pager a:hover {
  border-color: var(--text);
}
.st-pager .is-off {
  border-color: var(--border);
  color: var(--textDis);
}
.st-pager svg {
  flex: none;
  width: 16px;
  height: 16px;
}
html[dir='rtl'] .st-pager svg {
  transform: scaleX(-1);
}
.st-pager > span {
  color: var(--text2);
  font: 600 0.8125rem / 1 var(--inter);
  font-variant-numeric: tabular-nums;
}
/* Mobile : boutons carrés, picto seul ; le libellé reste leur nom accessible. */
@media (max-width: 759px) {
  .st-pager a,
  .st-pager .is-off {
    justify-content: center;
    width: 44px;
    padding: 0;
  }
  .st-pager a > span,
  .st-pager .is-off > span {
    display: none;
  }
}

.st-inspector {
  display: none;
  align-self: start;
  position: sticky;
  top: calc(var(--headerH) + 132px);
  max-height: calc(100vh - var(--headerH) - 150px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--canvas);
}
@media (min-width: 1360px) {
  .st-inspector {
    display: block;
  }
}
.st-inspector[aria-busy='true'] {
  opacity: 0.6;
}

.st-defs {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--border);
}
.st-defs dl {
  display: grid;
  gap: 0 clamp(20px, 3vw, 40px);
  grid-template-columns: minmax(0, 1fr);
  margin: 16px 0 8px;
}
@media (min-width: 760px) {
  .st-defs dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.st-defs dl > div {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.st-defs dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.st-defs dd {
  margin: 0;
  color: var(--text2);
  font-size: var(--fs-small);
}

/* ─── Fiches ───────────────────────────────────────────────────────────── */

.st-fiche.is-page .st-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 1.125rem;
}
.st-fiche {
  display: grid;
  gap: 20px;
}
.st-id {
  display: flex;
  align-items: center;
  gap: 16px;
}
.st-id-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.st-kicker {
  color: var(--text2);
  font: 700 0.6875rem / 1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[lang='ar'] .st-kicker {
  font-family: var(--arabic);
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.st-name {
  overflow-wrap: anywhere;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.05;
}
.st-fiche.is-page .st-name {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
}
.st-id-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 4px;
  color: var(--text2);
}
.st-id-nation,
.st-id-club {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.st-id-nation img {
  width: 20px;
  height: 15px;
}
.st-id-meta .st-plat {
  gap: 6px;
}
.st-id-meta .st-plat-icon {
  width: 14px;
  height: 14px;
}
.st-name-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.st-id-meta a {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--borderStrong);
  text-underline-offset: 0.2em;
}
.st-id-meta a:hover {
  text-decoration-color: var(--action);
}
.st-fiche .st-seg {
  margin-top: -4px;
}

.st-fiche-grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1040px) {
  .st-fiche-grid {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}
.st-fiche-main,
.st-fiche-side {
  display: grid;
  align-content: start;
  gap: 24px;
}

.st-keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 2px solid var(--text);
}
@media (min-width: 560px) {
  .st-keys {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.st-key {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px 12px 18px 0;
  border-bottom: 1px solid var(--border);
}
.st-key dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
  font: 700 0.6875rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[lang='ar'] .st-key dt {
  font-family: var(--arabic);
  letter-spacing: 0;
  font-size: 0.8125rem;
}
.st-key dd {
  margin: 0;
  font: 700 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem) / 1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.st-key.is-record dd {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  white-space: nowrap;
}
.st-key.is-rating dd {
  color: var(--actionText);
}
/* Panneau et sheet : deux colonnes, chiffres plus compacts. */
.st-fiche.is-panel .st-keys {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.st-fiche.is-panel .st-key dd {
  font-size: 1.75rem;
}
.st-info summary {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  list-style: none;
  cursor: pointer;
}
.st-info summary::-webkit-details-marker {
  display: none;
}
.st-info summary .st-ico {
  inline-size: 16px;
  block-size: 16px;
}
.st-info summary:hover,
.st-info[open] summary {
  color: var(--actionText);
}
.st-info summary:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: 4px;
}
.st-info-pop {
  position: absolute;
  z-index: 4;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  inline-size: min(22rem, calc(100vw - 80px));
  max-block-size: min(26rem, 60vh);
  overflow: auto;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--text);
  color: var(--canvas);
  font: 500 0.8125rem / 1.5 var(--inter);
  text-transform: none;
  letter-spacing: normal;
}
.st-info-pop p {
  margin: 0;
}
.st-info-pop .st-info-source {
  margin-block-start: 10px;
  font-size: 0.75rem;
}
.st-fiche.is-panel .st-facts {
  grid-template-columns: minmax(0, 1fr);
}

.st-block {
  display: grid;
  gap: 12px;
}
.st-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.st-block-head :is(h2, h3) {
  font-size: 1.0625rem;
  line-height: 1.25;
}
.st-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
@media (min-width: 560px) {
  .st-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}
.st-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.st-facts dt {
  color: var(--text2);
  font-size: var(--fs-small);
}
.st-facts dd {
  margin: 0;
  font: 600 0.9375rem / 1.2 var(--inter);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* Rang en pourcentage (10 octobre 2026) : sous une valeur calculée, une jauge
   fine qui se remplit à l'apparition, puis la phrase. */
.st-facts > div.has-pct {
  flex-wrap: wrap;
  row-gap: 6px;
}
.st-facts dd.st-pct {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: 10px;
  color: var(--text2);
  font: 500 0.75rem / 1.3 var(--inter);
  text-align: start;
}
.st-pct-gauge {
  flex: 0 0 64px;
}
.st-pct-gauge .st-record-bar {
  height: 4px;
}
.st-pct-gauge i {
  background: var(--text);
}

/* Totaux et « Calculé par SpotXI » côte à côte sur la page, l'un sous l'autre
   dans le panneau et sur mobile ; chaque bloc est une seule colonne. */
.st-facts-pair {
  display: grid;
  gap: 24px 32px;
}
.st-facts-pair .st-facts {
  grid-template-columns: minmax(0, 1fr);
}
.st-facts-pair .st-facts > div:last-child {
  border-bottom: 1px solid var(--border);
}
@media (min-width: 760px) {
  .st-fiche.is-page .st-facts-pair {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}

/* Forme récente : barres de note (0–10) à la largeur de l'app, légende à côté,
   et le tableau des matchs, qui porte le texte. */
.st-form-chart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 40px;
}
.st-bars {
  display: grid;
  flex: 0 1 344px;
  grid-auto-columns: minmax(0, 29px);
  grid-auto-flow: column;
  justify-content: start;
  gap: 6px;
  height: 96px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-bars-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  color: var(--text2);
  font-size: 0.8125rem;
}
.st-bars-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.st-bars-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--borderStrong);
}
.st-bars-legend i.is-W {
  background: var(--success);
}
.st-bars-legend i.is-L {
  background: var(--danger);
}
.st-bar {
  display: grid;
  align-items: end;
  justify-items: center;
  height: 100%;
}
.st-bar-fill {
  width: 100%;
  min-height: 2px;
  border-radius: 6px 6px 2px 2px;
  background: var(--borderStrong);
}
.st-bar.is-W .st-bar-fill {
  background: var(--success);
}
.st-bar.is-L .st-bar-fill {
  background: var(--danger);
}
.st-mini-table {
  width: 100%;
  font-size: var(--fs-small);
}
.st-mini-table th,
.st-mini-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  text-align: start;
}
.st-mini-table thead th {
  color: var(--text2);
  font: 700 0.6875rem / 1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.st-mini-table .c-num {
  font-size: 0.875rem;
}
.st-mini-table abbr {
  text-decoration: none;
}

/* Ligne de match comme `StatsMatchRow` : visuel de l'adversaire, date et camp,
   score teinté par le résultat, note en pastille ; un zéro reste en retrait. */
.st-matches td {
  height: 58px;
  padding-block: 6px;
  vertical-align: middle;
}
.st-matches th:first-child,
.st-matches td:first-child {
  width: 100%;
  max-width: 0;
}
.st-match {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.st-match-id {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.st-match-opp {
  overflow: hidden;
  font: 600 0.9375rem / 1.3 var(--inter);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-match-opp a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.st-match-meta {
  color: var(--text2);
  font: 500 0.75rem / 1.3 var(--inter);
}
.st-matches .c-score {
  text-align: center;
}
.st-score {
  display: inline-block;
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--surface);
  font: 600 0.9375rem / 1.3 var(--inter);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
/* Comme `StatsMatchRow` de l'app : le score porte la couleur du résultat, la
   teinte n'est qu'un appui (en clair, elle ne se distingue presque plus du papier). */
.st-score.is-W {
  background: var(--successS);
  color: var(--success);
}
.st-score.is-L {
  background: var(--dangerS);
  color: var(--danger);
}
.st-matches .c-num {
  font: 500 0.9375rem / 1.3 var(--inter);
}
.st-matches .c-num.is-zero {
  color: var(--text2);
}
.st-note {
  display: inline-block;
  min-width: 38px;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--surface);
  font: 600 0.875rem / 1.4 var(--inter);
  text-align: center;
}
.st-res {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--surface);
  color: var(--text2);
  font: 700 0.6875rem / 1 var(--mono);
}
.st-res-W {
  background: var(--successS);
  color: var(--success);
}
.st-res-L {
  background: var(--dangerS);
  color: var(--danger);
}
.st-res-D {
  background: var(--raised);
  color: var(--text);
}

.st-rank {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--action);
  border-radius: 18px;
  transition: background-color var(--dur-fast) var(--ease-out);
}
a.st-rank:hover {
  background: color-mix(in srgb, var(--action) 6%, transparent);
}
.st-rank-k {
  color: var(--text2);
  font: 700 0.6875rem / 1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.st-rank-v {
  color: var(--actionText);
  font: 800 2.5rem / 1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.st-rank-ctx {
  font-weight: 600;
}
/* Rang dans la nation, sous le rang mondial (fiche de l'app). */
.st-rank-nation {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text2);
  font-size: var(--fs-small);
}
.st-rank-nation img,
.st-next-flag {
  flex: none;
  display: block;
  width: 16px;
  height: 12px;
  border-radius: 2px;
  outline: 1px solid var(--border);
  outline-offset: -1px;
}
.st-rank.is-none {
  border-color: var(--border);
  color: var(--text2);
}
.st-next ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--borderStrong);
}
.st-next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.st-next a > span:not(.st-avatar) {
  flex: 1;
}
.st-next a::after {
  content: '→';
  color: var(--actionText);
}
html[lang='ar'] .st-next a::after {
  content: '←';
}
.st-claim {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px dashed var(--borderStrong);
  border-radius: 16px;
}
.st-claim-title {
  font-size: 1rem;
}
/* Joueur rattaché : le même bloc, trait plein, favicon en tête. */
.st-claim.is-linked {
  border-style: solid;
  border-color: var(--border);
}
.st-claim.is-linked .st-claim-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-claim p {
  color: var(--text2);
  font-size: var(--fs-small);
}

.st-record {
  display: grid;
  gap: 8px;
}
.st-record-bar {
  display: flex;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: var(--surface);
}
.st-record-fill {
  display: flex;
  flex: 1;
  height: 100%;
}
.st-record-bar i.is-W {
  background: var(--success);
}
.st-record-bar i.is-D {
  background: var(--borderStrong);
}
.st-record-bar i.is-L {
  background: var(--danger);
}
.st-record-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font: 600 0.8125rem / 1 var(--inter);
  font-variant-numeric: tabular-nums;
}
.st-record-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.st-record-goals {
  color: var(--text2);
}
/* Résultats du club : même ligne que les matchs de la fiche joueur. */
.st-results {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--borderStrong);
  list-style: none;
}
.st-results li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
}

/* Soirées (10 octobre 2026) : un trait sous les barres de chaque soirée, puis
   les matchs groupés sous un en-tête (jour, nombre de matchs, bilan). Le jour
   quitte les lignes : elles gardent le camp. */
.st-bars.has-sessions {
  grid-template-rows: minmax(0, 1fr) 3px;
  height: 105px;
}
.st-bars.is-club.has-sessions {
  height: 81px;
}
.st-bars.has-sessions .st-bar {
  grid-row: 1;
}
.st-bar-session {
  grid-row: 2;
  border-radius: 999px;
  background: var(--borderStrong);
}
.st-session-day {
  display: inline-block;
  color: var(--text);
  font-weight: 700;
}
.st-session-day::first-letter {
  text-transform: uppercase;
}
.st-session-count {
  margin-inline-start: 8px;
  color: var(--text2);
  font-weight: 500;
}
.st-session-tally {
  white-space: nowrap;
}
.st-session-tally .is-W {
  color: var(--success);
}
.st-session-tally .is-L {
  color: var(--danger);
}
.st-session-sep {
  color: var(--text2);
}
.st-matches .st-session-head th,
.st-matches .st-session-head td {
  height: auto;
  padding-block: 18px 8px;
  border-bottom-color: var(--borderStrong);
  color: var(--text2);
  font: 600 0.8125rem / 1.3 var(--inter);
  font-variant-numeric: tabular-nums;
  vertical-align: bottom;
}
.st-matches .st-session-head .c-score {
  color: var(--text);
}
.st-sessions {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-sessions .st-session-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 18px 0 8px;
  color: var(--text2);
  font: 600 0.8125rem / 1.3 var(--inter);
  font-variant-numeric: tabular-nums;
}
.st-sessions .st-session:first-child .st-session-head {
  padding-top: 4px;
}
.st-sessions .st-session-count {
  margin-inline-start: 0;
}
.st-sessions .st-session-tally {
  margin-inline-start: auto;
}

/* Adversaires fréquents : bilan face à face, barre V/N/D qui se remplit à
   l'apparition comme celle du bilan. */
.st-rivals {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--borderStrong);
  list-style: none;
}
.st-rivals li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 176px);
  gap: 16px;
  align-items: center;
  min-height: 64px;
  padding-block: 8px;
  border-bottom: 1px solid var(--border);
}
.st-rival-record {
  display: grid;
  gap: 6px;
}
.st-rival-record .st-record-bar {
  height: 8px;
}
.st-rival-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--text2);
  font: 500 0.75rem / 1.2 var(--inter);
  font-variant-numeric: tabular-nums;
}
.st-rival-tally b {
  color: var(--text);
  font-weight: 700;
}
.st-rival-tally .is-W b {
  color: var(--success);
}
.st-rival-tally .is-L b {
  color: var(--danger);
}
.st-rival-goals {
  margin-inline-start: auto;
}
/* Clubs liés (10 octobre 2026) : avant, en même temps, après ; sous chaque
   club, les joueurs en commun, nommés. */
.st-relations {
  display: grid;
  gap: 20px;
}
.st-relation-kind {
  margin: 0 0 8px;
  color: var(--text2);
  font: 700 0.6875rem / 1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.st-relation-list {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--borderStrong);
  list-style: none;
}
.st-relation {
  display: grid;
  gap: 6px;
  padding-block: 12px;
  border-bottom: 1px solid var(--border);
}
.st-relation-edition {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text2);
  font: 600 0.6875rem / 1.4 var(--inter);
  vertical-align: 2px;
}
.st-relation-players {
  margin: 0;
  padding-inline-start: 38px;
  color: var(--text2);
  font: 500 0.8125rem / 1.5 var(--inter);
}
.st-relation-players a {
  color: var(--text);
  white-space: nowrap;
}
.st-relation-players a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.st-relation-more {
  margin-inline-start: 6px;
}
/* Groupes (10 octobre 2026) : la ligne d'un face-à-face, les joueurs nommés à
   gauche ; sur la fiche joueur, le club puis « Avec … » sur toute la largeur. */
.st-group-id {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.st-group-players {
  font: 600 0.875rem / 1.45 var(--inter);
}
.st-group-players a {
  color: var(--text);
  white-space: nowrap;
}
.st-group-players a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.st-groups .st-group-with {
  grid-column: 1 / -1;
  margin-top: -4px;
}
.st-group-rate b {
  color: var(--text);
}

/* Écran étroit et panneau : la barre passe sous le nom, sur toute la largeur. */
.st-fiche.is-panel .st-rivals li {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-block: 12px;
}
.st-fiche.is-panel .st-rival-record {
  padding-inline-start: 38px;
}
@media (max-width: 559px) {
  .st-rivals li {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-block: 12px;
  }
  .st-rival-record {
    padding-inline-start: 38px;
  }
}
/* Groupe d'un club : pas d'écusson devant les joueurs, donc pas de retrait. */
.st-groups .st-group-id + .st-rival-record {
  padding-inline-start: 0;
}
.st-roster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .st-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}
.st-roster {
  border-top: 1px solid var(--borderStrong);
}
.st-roster a {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
}
.st-roster-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  font-weight: 700;
}
/* La bulle s'ancre à la ligne entière pour tenir aussi sur un écran de 320 px. */
.st-roster .st-mark {
  position: static;
}
.st-roster .st-mark::after {
  inset-inline: 0 auto;
  max-inline-size: 100%;
  white-space: normal;
  translate: 0 4px;
}
.st-roster a:focus-visible .st-mark::after {
  translate: 0 0;
}
@media (hover: hover) {
  .st-roster .st-mark:hover::after {
    translate: 0 0;
  }
}
/* Seul le nom se tronque : la bulle du badge SpotXI déborde de la ligne. */
.st-roster-name bdi {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-roster-pos {
  color: var(--text2);
  font: 700 0.6875rem / 1 var(--mono);
  letter-spacing: 0.06em;
}
html[lang='ar'] .st-roster-pos {
  font-family: var(--arabic);
  letter-spacing: 0;
}
.st-roster-num {
  color: var(--text2);
  font: 500 0.8125rem / 1 var(--inter);
  font-variant-numeric: tabular-nums;
}
/* Composition de l'effectif par poste, de l'encre pleine au plus clair. */
.st-compo {
  display: flex;
  gap: 2px;
  height: 10px;
}
.st-compo i {
  border-radius: 999px;
}
.st-compo .is-gk,
.st-compo-legend .is-gk {
  background: var(--text);
}
.st-compo .is-def,
.st-compo-legend .is-def {
  background: color-mix(in srgb, var(--text) 68%, transparent);
}
.st-compo .is-mid,
.st-compo-legend .is-mid {
  background: color-mix(in srgb, var(--text) 42%, transparent);
}
.st-compo .is-fwd,
.st-compo-legend .is-fwd {
  background: color-mix(in srgb, var(--text) 22%, transparent);
}
.st-compo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text2);
  font: 500 0.8125rem / 1.3 var(--inter);
}
.st-compo-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.st-compo-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.st-compo-legend b {
  color: var(--text);
  font-weight: 600;
}

/* Réclamer le club : le seul appel à l'action de la fiche, en accent. */
.st-club-claim {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--text);
  border-radius: 18px;
}
.st-club-claim .st-eyebrow {
  margin: 0;
}
.st-club-claim-title {
  font-size: 1.375rem;
  line-height: 1.15;
}
.st-club-claim p:not(.st-eyebrow, .st-club-claim-soon) {
  color: var(--text2);
  font-size: 0.9375rem;
}
.st-club-claim-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--action);
  color: var(--onAction);
  font: 800 0.9375rem / 1 var(--sans);
}
.st-club-claim-soon {
  color: var(--text2);
  font: 700 0.6875rem / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[lang='ar'] .st-club-claim-soon {
  font-family: var(--arabic);
  letter-spacing: 0;
}
.st-fiche.is-panel .st-club-claim {
  border-style: dashed;
  border-color: var(--borderStrong);
}
.st-fiche.is-panel .st-club-claim-title {
  font-size: 1rem;
}
.st-fiche.is-panel .st-club-claim-cta {
  min-height: 44px;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
}

/* Forme d'un club : écart de buts, graphe plus bas que celui d'un joueur. */
.st-bars.is-club {
  height: 72px;
}
.st-form-note {
  font-size: 0.75rem;
}
@media (min-width: 760px) {
  .st-fiche.is-page .st-facts-pair.is-club {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    column-gap: 40px;
  }
}
.st-roster a:hover .st-roster-name bdi {
  text-decoration: underline;
}

/* ─── Méthode ──────────────────────────────────────────────────────────── */

.st-method-grid {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(24px, 3vw, 40px);
}
@media (min-width: 1000px) {
  .st-method-grid {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .st-toc {
    position: sticky;
    top: calc(var(--headerH) + 24px);
    align-self: start;
  }
}
.st-toc ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--borderStrong);
  counter-reset: toc;
}
.st-toc li {
  counter-increment: toc;
}
.st-toc a {
  display: flex;
  gap: 10px;
  min-height: 40px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
  font-size: var(--fs-small);
  font-weight: 700;
}
.st-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--actionText);
  font-family: var(--mono);
}
.st-toc a:hover {
  color: var(--text);
}
.st-method-body {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  max-width: 72ch;
}
.st-method-section {
  display: grid;
  gap: 12px;
  scroll-margin-top: calc(var(--headerH) + 24px);
}
.st-method-section h2 {
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  line-height: 1.15;
}
.st-method-section p {
  color: var(--text2);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.st-status-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 16px;
}

/* ─── Sheet mobile et panneau latéral ──────────────────────────────────── */

.st-sheet {
  position: fixed;
  z-index: 80;
  inset: 0;
}
.st-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur-sheet) var(--ease-drawer);
}
.st-sheet-panel {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: 92vh;
  border-radius: 28px 28px 0 0;
  background: var(--canvas);
  box-shadow: var(--shadow);
  transform: translateY(100%);
  transition: transform var(--dur-sheet) var(--ease-drawer);
  outline: none;
}
@media (min-width: 900px) {
  .st-sheet-panel {
    inset: 0 0 0 auto;
    width: min(520px, 100vw);
    max-height: none;
    border-radius: 0;
    transform: translateX(100%);
  }
  html[dir='rtl'] .st-sheet-panel {
    inset: 0 auto 0 0;
    transform: translateX(-100%);
  }
}
.st-sheet.is-open .st-scrim {
  opacity: 1;
}
.st-sheet.is-open .st-sheet-panel {
  transform: none;
}
.st-sheet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.st-grip {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 4px;
  background: var(--borderStrong);
}
@media (min-width: 900px) {
  .st-grip {
    display: none;
  }
}
.st-sheet-full {
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.st-icon-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
}
.st-icon-button svg {
  width: 18px;
  height: 18px;
}
.st-sheet-body {
  overflow-y: auto;
  padding: 18px;
  overscroll-behavior: contain;
}
.st-skeleton {
  display: grid;
  gap: 12px;
}
.st-skeleton span {
  height: 18px;
  border-radius: 8px;
  background: var(--surface);
}
.st-skeleton span:first-child {
  height: 56px;
  width: 60%;
}
.st-load-error {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.st-load-error button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--borderStrong);
  border-radius: 12px;
  background: transparent;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .st-sheet-panel,
  .st-scrim {
    transition-duration: var(--dur-reduced);
  }
  .st-sheet-panel {
    transform: none;
    opacity: 0;
  }
  .st-sheet.is-open .st-sheet-panel {
    opacity: 1;
  }
}

/* ─── Comparateur de joueurs ─────────────────────────────────────────────
   Bouton de fiche, dock, tiroir et page `/stats/<comparer>/` (ADR-0019,
   1er octobre 2026). Orange réservé au joueur en tête d'une ligne, comme au
   rang ; Total / Par match bascule par `data-mode`, sans rechargement. */

.st-id-text {
  flex: 1 1 auto;
}
.st-id-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}
.st-fiche-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
.st-fiche-actions[hidden],
.st-fiche-action[hidden] {
  display: none;
}
/* Deux boutons icône séparés, comme la fermeture de la sheet. */
.st-fiche-action {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.st-fiche-action .st-ico {
  width: 18px;
  height: 18px;
}
@media (hover: hover) {
  .st-fiche-action:hover {
    background: var(--surface);
  }
}
/* Téléphone : ⇄ seul ; écran plus large : ⇄ et « Comparer », comme avant. */
.st-fiche-action-label {
  display: none;
}
@media (min-width: 640px) {
  /* Plus précis que la taille du panneau : le bouton s'élargit pour son libellé. */
  .st-fiche .st-fiche-actions .st-cmp-toggle.st-fiche-action {
    grid-auto-flow: column;
    gap: 8px;
    width: auto;
    padding: 0 14px 0 12px;
    font: 700 0.875rem / 1 var(--sans);
  }
  .st-cmp-toggle .st-fiche-action-label {
    display: inline;
  }
}
/* Joueur retenu : la coche prend la couleur d'action, comme dans l'app. */
.st-cmp-toggle[aria-pressed='true'] {
  border-color: var(--actionText);
  color: var(--actionText);
}
.st-cmp-toggle.is-full {
  color: var(--textDis);
  cursor: not-allowed;
}
.st-fiche.is-panel .st-fiche-action {
  width: 36px;
  height: 36px;
}
.st-cmp-mark {
  display: inline-flex;
  flex: none;
  color: var(--actionText);
}
.st-cmp-mark .st-ico {
  width: 14px;
  height: 14px;
}

/* Dock : les joueurs choisis, en bas de l'écran, au-dessus de la sheet de fiche. */
.st-cmp-dock {
  position: fixed;
  z-index: 85;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid var(--borderStrong);
  border-radius: 20px;
  background: color-mix(in srgb, var(--raised) 90%, transparent);
  box-shadow: var(--shadow);
  translate: -50% 0;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}
.st-cmp-dock[hidden] {
  display: none;
}
.st-cmp-slots {
  display: flex;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-cmp-slot {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 180px;
  height: 40px;
  padding-inline: 12px 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--canvas);
  font: 700 0.875rem / 1 var(--sans);
}
.st-cmp-slot.is-landing {
  visibility: hidden;
}
.st-cmp-slot bdi,
.st-cmp-pair bdi {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-cmp-slot img,
.st-cmp-pair img,
.st-cmp-ghost img,
.st-cmp-nation img {
  flex: none;
  width: 16px;
  height: 12px;
  border-radius: 2px;
}
.st-cmp-slot.is-empty {
  padding-inline: 12px;
  border-style: dashed;
  border-color: var(--borderStrong);
  background: transparent;
  color: var(--textDis);
  font-weight: 600;
  font-size: 0.8125rem;
}
.st-cmp-slot .st-ico {
  width: 14px;
  height: 14px;
}
.st-cmp-slot-x {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
}
@media (hover: hover) {
  .st-cmp-slot-x:hover {
    background: var(--surface);
    color: var(--text);
  }
}
.st-cmp-summary {
  display: none;
}
.st-cmp-go {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 0 16px;
  border-radius: 14px;
  background: var(--action);
  color: var(--onAction);
  font: 700 0.9375rem / 1 var(--sans);
  text-decoration: none;
}
@media (hover: hover) {
  .st-cmp-go:hover {
    background: var(--actionPressed);
  }
}
.st-cmp-go .st-ico {
  width: 16px;
  height: 16px;
}
html[dir='rtl'] .st-cmp-go .st-ico {
  transform: scaleX(-1);
}
.st-cmp-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--onAction) 16%, transparent);
  font: 700 0.75rem / 1 var(--mono);
}
.st-cmp-ghost {
  position: fixed;
  z-index: 95;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--text);
  color: var(--canvas);
  box-shadow: var(--shadow);
  font: 700 0.875rem / 1 var(--sans);
  white-space: nowrap;
  pointer-events: none;
}
/* Le dock ne cache jamais la fin de la page ni celle de la sheet de fiche. */
html.st-has-dock body {
  padding-bottom: 84px;
}
html.st-has-dock .st-sheet-body {
  padding-bottom: 96px;
}
@media (max-width: 639px) {
  .st-cmp-dock {
    width: calc(100vw - 24px);
    bottom: calc(12px + env(safe-area-inset-bottom));
    padding-inline-start: 14px;
  }
  .st-cmp-slots {
    display: none;
  }
  .st-cmp-summary {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    font: 700 0.875rem / 1.2 var(--sans);
  }
  .st-cmp-pair {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }
  /* Croix et bouton plus serrés : sur 390 px, chaque pseudo garde de la place.
     La zone touchable, elle, garde 44 px de large. */
  .st-cmp-pair .st-cmp-slot-x {
    position: relative;
    width: 24px;
  }
  .st-cmp-pair .st-cmp-slot-x::after {
    position: absolute;
    inset: -7px -10px;
    content: '';
  }
  .st-cmp-sep {
    flex: none;
    color: var(--text2);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }
  html[lang='ar'] .st-cmp-sep {
    letter-spacing: 0;
  }
  .st-cmp-go {
    gap: 6px;
    padding-inline: 12px 8px;
    font-size: 0.875rem;
  }
  .st-cmp-go .st-ico {
    display: none;
  }
}

/* Tiroir : grande feuille montante, la page reste visible au-dessus. */
.st-cmp-sheet {
  position: fixed;
  z-index: 90;
  inset: 0;
}
.st-cmp-sheet[hidden] {
  display: none;
}
.st-cmp-sheet .st-scrim {
  transition: opacity var(--dur-sheet) var(--ease-drawer);
}
.st-cmp-sheet.is-open .st-scrim {
  opacity: 1;
}
.st-cmp-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: min(1200px, calc(100vw - 48px));
  height: min(calc(100dvh - 40px), 1000px);
  border-radius: 28px 28px 0 0;
  background: var(--canvas);
  box-shadow: var(--shadow);
  outline: none;
  overflow: hidden;
  translate: -50% 100%;
  transition: translate var(--dur-sheet) var(--ease-drawer);
}
.st-cmp-sheet.is-open .st-cmp-panel {
  translate: -50% 0;
}
.st-cmp-panel.is-dragging {
  transition: none;
}
.st-cmp-panel .st-grip {
  display: block;
  z-index: 6;
}
.st-cmp-close {
  position: absolute;
  z-index: 6;
  top: 22px;
  inset-inline-end: 22px;
  background: var(--canvas);
  color: var(--text);
  cursor: pointer;
}
.st-cmp-body {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 28px 36px;
  scrollbar-width: none;
}
.st-cmp-body::-webkit-scrollbar {
  display: none;
}

/* Comparaison : barre d'outils, puis une colonne de critères et une par joueur. */
/* Une bulle de barre, même invisible, ne fait jamais défiler la page de côté.
   `clip` ne crée pas de conteneur de défilement : les en-têtes restent collants. */
.st-compare {
  position: relative;
  overflow-x: clip;
}
.st-cmp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.st-compare.is-sheet .st-cmp-bar {
  padding-top: 28px;
  padding-inline-end: 60px;
}
.st-compare.is-page .st-cmp-bar {
  margin-top: 8px;
}
.st-cmp-titles {
  display: grid;
  gap: 6px;
}
.st-cmp-title {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  outline: none;
}
.st-compare.is-page .st-cmp-title {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
}
.st-cmp-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.st-cmp-tools .st-seg {
  flex-wrap: nowrap;
}
.st-cmp-tools .st-seg > a {
  white-space: nowrap;
}
.st-cmp-action {
  color: var(--text);
  cursor: pointer;
}
.st-cmp-action[hidden],
.st-cmp-x[hidden],
.st-cmp-add-row[hidden],
.st-cmp-head.is-add[hidden] {
  display: none;
}
.st-cmp-action[aria-busy='true'] {
  opacity: 0.5;
  cursor: progress;
}
@media (hover: hover) {
  .st-cmp-action:hover,
  .st-cmp-close:hover {
    background: var(--surface);
  }
}
.st-compare > .st-notice {
  margin-bottom: 0;
}
.st-cmp-add-row {
  display: none;
}
.st-cmp-sentinel {
  display: block;
  height: 1px;
}

.st-cmp-grid {
  display: grid;
  grid-template-columns: minmax(150px, 220px) repeat(var(--cols), minmax(0, 1fr));
}
.st-cmp-grid[aria-busy='true'] {
  opacity: 0.6;
}
.st-cmp-heads,
.st-cmp-section,
.st-cmp-section-row,
.st-cmp-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
.st-cmp-heads {
  position: sticky;
  z-index: 3;
  top: 0;
  border-bottom: 2px solid var(--text);
  background: var(--canvas);
}
.st-compare.is-page .st-cmp-heads {
  top: var(--headerH);
}
.st-cmp-heads.is-stuck {
  box-shadow: 0 12px 24px -18px var(--scrim);
}
.st-cmp-head {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 18px 44px 16px 18px;
  border-inline-start: 1px solid var(--border);
}
.st-cmp-heads.is-stuck .st-cmp-head {
  padding-block: 12px;
}
.st-cmp-name {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 700 clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem) / 1.08 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
}
@media (hover: hover) {
  .st-cmp-name:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.16em;
  }
}
/* Photo du joueur rattaché devant le pseudo ; seul le pseudo se tronque. */
.st-cmp-name.has-photo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.st-cmp-name.has-photo bdi {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}
.st-cmp-more {
  display: grid;
  grid-template-rows: 1fr;
}
.st-cmp-more > div {
  display: grid;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}
.st-cmp-heads.is-stuck .st-cmp-more {
  grid-template-rows: 0fr;
  opacity: 0;
}
.st-cmp-meta,
.st-cmp-club {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  margin: 0;
  color: var(--text2);
  font-size: 0.8125rem;
}
.st-cmp-meta:first-child {
  margin-top: 4px;
}
.st-cmp-nation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.st-cmp-meta .st-plat-icon {
  width: 13px;
  height: 13px;
}
.st-cmp-club {
  flex-wrap: nowrap;
  gap: 8px;
}
.st-cmp-club bdi {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-cmp-club .st-avatar-xs {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}
.st-cmp-absent {
  margin: 4px 0 0;
  color: var(--warn);
  font: 700 0.75rem / 1.3 var(--mono);
}
.st-cmp-head.is-absent .st-cmp-name {
  color: var(--text2);
}
.st-cmp-x {
  position: absolute;
  top: 12px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
}
.st-cmp-x .st-ico {
  width: 15px;
  height: 15px;
}
@media (hover: hover) {
  .st-cmp-x:hover {
    background: var(--surface);
    color: var(--text);
  }
}
.st-cmp-head.is-add {
  align-content: stretch;
  padding: 14px;
}
.st-cmp-add {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  width: 100%;
  min-height: 92px;
  border: 1.5px dashed var(--borderStrong);
  border-radius: 16px;
  background: transparent;
  color: var(--text2);
  font: 700 0.875rem / 1.2 var(--sans);
  cursor: pointer;
}
.st-cmp-add-ico {
  width: 22px;
  height: 22px;
}
@media (hover: hover) {
  .st-cmp-add:hover {
    border-color: var(--action);
    background: color-mix(in srgb, var(--action) 6%, transparent);
    color: var(--text);
  }
}
.st-cmp-heads.is-stuck .st-cmp-add {
  grid-auto-flow: column;
  min-height: 44px;
}

.st-cmp-section-title {
  grid-column: 1 / -1;
  padding: 26px 0 8px;
  color: var(--text2);
  font: 700 0.6875rem / 1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[lang='ar'] .st-cmp-section-title {
  font-family: var(--arabic);
  font-size: 0.8125rem;
  letter-spacing: 0;
}
.st-cmp-row {
  border-bottom: 1px solid var(--border);
}
@media (hover: hover) {
  .st-cmp-row:hover {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
  }
}
.st-cmp-label {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 16px 12px 16px 0;
}
.st-cmp-label-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 0.9375rem / 1.25 var(--inter);
}
.st-cmp-label-name .st-ico {
  width: 15px;
  height: 15px;
  color: var(--text2);
}
.st-cmp-note {
  color: var(--text2);
  font: 600 0.6875rem / 1.3 var(--mono);
}
html[lang='ar'] .st-cmp-note {
  font-family: var(--arabic);
  font-size: 0.75rem;
}
.st-cmp-cell {
  display: grid;
  align-content: center;
  gap: 9px;
  min-width: 0;
  padding: 14px 18px;
  border-inline-start: 1px solid var(--border);
}
.st-cmp-cell.is-void {
  border-inline-start-style: dashed;
}
.st-cmp-cell.is-blank {
  color: var(--textDis);
}
.st-cmp-fig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.st-cmp-val {
  font: 700 1.375rem / 1 var(--inter);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.st-cmp-row.is-accent .st-cmp-val {
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
}
.st-cmp-val.is-record {
  font-size: 1.0625rem;
  white-space: nowrap;
}
.st-cmp-val.is-none {
  color: var(--textDis);
}
.st-compare[data-mode='total'] [data-mode='match'],
.st-compare[data-mode='match'] [data-mode='total'] {
  display: none;
}
.st-compare[data-mode='total'] .is-lead-total .st-cmp-val,
.st-compare[data-mode='match'] .is-lead-match .st-cmp-val {
  color: var(--actionText);
}
.st-cmp-gap {
  padding: 3px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--action) 14%, transparent);
  color: var(--actionText);
  font: 700 0.75rem / 1 var(--mono);
  white-space: nowrap;
}
.st-cmp-cell.is-low .st-cmp-val {
  color: var(--text2);
}
.st-cmp-low {
  position: relative;
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 17px;
  height: 17px;
  border: 1px solid var(--borderStrong);
  border-radius: 50%;
  color: var(--text2);
  font: 700 0.625rem / 1 var(--mono);
  cursor: help;
}
.st-cmp-low::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 6px);
  left: 50%;
  width: max-content;
  max-width: 220px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--text);
  color: var(--canvas);
  font: 600 0.75rem / 1.3 var(--inter);
  white-space: normal;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
}
@media (hover: hover) {
  .st-cmp-low:hover::after {
    opacity: 1;
    translate: -50% 0;
  }
}
/* Jauge : part du meilleur de la ligne ; orange pour la tête, sinon neutre. */
.st-cmp-meter {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}
.st-cmp-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--borderStrong);
  transform: scaleX(var(--v, 0));
  transform-origin: left center;
}
html[dir='rtl'] .st-cmp-meter i {
  transform-origin: right center;
}
.st-compare[data-mode='match'] .st-cmp-meter i {
  transform: scaleX(var(--vm, 0));
}
.st-compare[data-mode='total'] .is-lead-total .st-cmp-meter i,
.st-compare[data-mode='match'] .is-lead-match .st-cmp-meter i {
  background: var(--action);
}
.st-cmp-record {
  height: 6px;
}
.st-cmp-form-cell {
  gap: 8px;
}
.st-cmp-form {
  flex: none;
  width: 100%;
  max-width: 240px;
  height: 46px;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
}
.st-cmp-form .st-bar-fill {
  border-radius: 4px 4px 1px 1px;
}
.st-cmp-avg {
  font: 700 0.8125rem / 1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.st-cmp-avg span {
  color: var(--text2);
  font-weight: 500;
}
.st-cmp-foot {
  max-width: 78ch;
  margin: 22px 0 0;
  color: var(--text2);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.st-compare .st-scope {
  margin-top: 10px;
}
.st-cmp-toast {
  position: fixed;
  z-index: 96;
  left: 50%;
  bottom: 28px;
  margin: 0;
  padding: 11px 15px;
  border-radius: 12px;
  background: var(--text);
  color: var(--canvas);
  font: 700 0.875rem / 1 var(--sans);
  opacity: 0;
  pointer-events: none;
  translate: -50% 8px;
}
.st-cmp-toast.is-on {
  opacity: 1;
  translate: -50% 0;
}

/* Recherche d'un joueur à ajouter, et état vide. */
.st-cmp-empty {
  display: grid;
  gap: 16px;
  max-width: 520px;
  padding: 32px 0;
  color: var(--text2);
}
.st-cmp-empty p {
  margin: 0;
}
.st-cmp-finder {
  position: relative;
  width: 100%;
}
.st-cmp-finder-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--borderStrong);
  border-radius: 14px;
  background: var(--canvas);
  color: var(--text2);
}
.st-cmp-finder-field:focus-within {
  border-color: var(--action);
}
.st-cmp-finder-field .st-ico {
  flex: none;
  width: 16px;
  height: 16px;
}
.st-cmp-finder-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 600 0.9375rem / 1 var(--inter);
  outline: none;
}
.st-cmp-suggest {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  inset-inline: 0;
  min-width: 240px;
  max-height: 300px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--borderStrong);
  border-radius: 14px;
  background: var(--canvas);
  box-shadow: var(--shadow);
  list-style: none;
  scrollbar-width: none;
}
.st-cmp-suggest::-webkit-scrollbar {
  display: none;
}
.st-cmp-suggest[hidden] {
  display: none;
}
.st-cmp-suggest [role='option'] {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.st-cmp-suggest [aria-selected='true'] {
  background: var(--surface);
}
.st-cmp-suggest [aria-disabled='true'] {
  opacity: 0.5;
  cursor: default;
}
.st-cmp-suggest-name {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font: 700 0.875rem / 1.2 var(--inter);
}
.st-cmp-suggest-name img {
  flex: none;
  width: 16px;
  height: 12px;
  border-radius: 2px;
}
.st-cmp-suggest-name .st-cmp-suggest-photo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.st-cmp-suggest-meta,
.st-cmp-suggest-empty {
  color: var(--text2);
  font-size: 0.75rem;
}
.st-cmp-suggest-empty {
  padding: 10px;
}

/* Téléphone : critère au-dessus, joueurs côte à côte, ajout hors de la grille. */
@media (max-width: 759px) {
  .st-cmp-panel {
    width: 100vw;
    height: calc(100dvh - 24px);
    border-radius: 24px 24px 0 0;
  }
  .st-cmp-close {
    top: 16px;
    inset-inline-end: 12px;
  }
  .st-cmp-body {
    padding: 0 10px 28px;
  }
  .st-compare.is-sheet .st-cmp-bar {
    padding-top: 22px;
  }
  .st-cmp-bar .st-kicker {
    display: none;
  }
  .st-compare.is-sheet .st-cmp-title {
    font-size: 1.5rem;
  }
  .st-cmp-bar {
    gap: 10px;
  }
  .st-cmp-tools {
    width: 100%;
  }
  .st-cmp-grid {
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  }
  .st-cmp-corner,
  .st-cmp-head.is-add,
  .st-cmp-cell.is-void {
    display: none;
  }
  .st-cmp-add-row {
    display: block;
    margin-top: 12px;
  }
  .st-cmp-add-row .st-cmp-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .st-cmp-add-row .st-cmp-add-ico {
    width: 18px;
    height: 18px;
  }
  .st-cmp-heads > .st-cmp-head:nth-child(2),
  .st-cmp-label + .st-cmp-cell,
  .st-cmp-head.is-first,
  .st-cmp-cell.is-first {
    border-inline-start: 0;
  }
  .st-cmp-heads > .st-cmp-head.is-first ~ .st-cmp-head,
  .st-cmp-cell.is-first ~ .st-cmp-cell {
    border-inline-start: 1px solid var(--border);
  }
  .st-cmp-head.is-off,
  .st-cmp-cell.is-off {
    display: none;
  }
  .st-cmp-chips {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .st-cmp-chip {
    display: inline-flex;
    flex: none;
    max-width: 180px;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--borderStrong);
    border-radius: 999px;
    background: transparent;
    color: var(--text2);
    font: 700 0.8125rem / 1 var(--sans);
    cursor: pointer;
  }
  .st-cmp-chip bdi {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .st-cmp-chip img {
    flex: none;
    width: 16px;
    height: 12px;
    border-radius: 2px;
  }
  .st-cmp-chip[aria-pressed='true'] {
    border-color: transparent;
    background: var(--text);
    color: var(--canvas);
  }
  .st-cmp-head {
    padding: 12px 30px 12px 8px;
  }
  .st-cmp-x {
    top: 8px;
    inset-inline-end: 0;
  }
  .st-cmp-name {
    overflow: hidden;
    font-size: 0.9375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .st-cmp-nation span,
  .st-cmp-meta .st-plat {
    font-size: 0;
  }
  .st-cmp-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    grid-column: 1 / -1;
    gap: 2px 8px;
    padding: 14px 6px 0;
  }
  .st-cmp-label-name {
    color: var(--text2);
    font-size: 0.8125rem;
  }
  .st-cmp-cell {
    padding: 8px 8px 14px;
  }
  .st-cmp-val {
    font-size: 1.125rem;
  }
  .st-cmp-row.is-accent .st-cmp-val {
    font-size: 1.375rem;
  }
  .st-cmp-val.is-record {
    font-size: 0.875rem;
  }
  .st-cmp-gap {
    padding: 2px 4px;
    font-size: 0.6875rem;
  }
  .st-cmp-form {
    height: 34px;
    gap: 2px;
  }
  .st-cmp-section-title {
    padding: 22px 6px 2px;
  }
  .st-cmp-foot {
    padding-inline: 6px;
  }
}

.st-cmp-vs,
.st-cmp-short,
.st-cmp-share-all {
  display: none;
}

/* Téléphone : une seule rangée d'outils (opus, « ÷ Par match », Partager). */
@media (max-width: 759px) {
  .st-cmp-tools {
    flex-wrap: wrap;
  }
  .st-cmp-tools .st-cmp-opus {
    flex: 1 1 auto;
  }
  .st-cmp-opus > a {
    flex: 1;
    justify-content: center;
    padding-inline: 10px;
  }
  .st-cmp-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .st-cmp-short {
    display: inline;
  }
  .st-cmp-mode {
    padding: 0;
    background: transparent;
  }
  .st-cmp-mode > a[data-compare-mode='total'] {
    display: none;
  }
  .st-cmp-mode > a[data-compare-mode='match'] {
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--borderStrong);
    border-radius: 12px;
    color: var(--text);
  }
  .st-cmp-mode > a[data-compare-mode='match']::before {
    content: '÷';
    font: 700 0.875rem / 1 var(--mono);
  }
  .st-cmp-mode > a[data-compare-mode='match'][aria-current] {
    border-color: transparent;
    background: var(--text);
    color: var(--canvas);
  }
  .st-cmp-mode .st-pill {
    display: none;
  }
  .st-cmp-share,
  .st-cmp-export {
    display: none;
  }
  .st-cmp-share-all:not([hidden]) {
    display: grid;
    border-radius: 50%;
  }

  /* Tiroir : la barre reste en haut, les noms collent juste dessous ; la
     poignée et la barre se tirent vers le bas pour fermer (stats.js). */
  .st-compare.is-sheet .st-cmp-bar {
    position: sticky;
    z-index: 4;
    top: 0;
    padding-top: 26px;
    padding-inline-end: 0;
    background: var(--canvas);
    touch-action: none;
  }
  .st-compare.is-sheet .st-cmp-titles {
    min-height: 40px;
    align-content: center;
    padding-inline-end: 56px;
  }
  .st-compare.is-sheet .st-cmp-title {
    color: var(--text2);
    font: 700 0.75rem / 1.2 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  html[lang='ar'] .st-compare.is-sheet .st-cmp-title {
    font-family: var(--arabic);
    letter-spacing: 0;
    font-size: 0.875rem;
  }
  .st-compare.is-sheet .st-cmp-heads {
    top: var(--cmp-bar-h, 0px);
  }
  .st-cmp-panel .st-grip {
    top: 0;
    width: 100%;
    height: 22px;
    margin: 0;
    left: 0;
    border-radius: 0;
    background: transparent;
    touch-action: none;
  }
  .st-cmp-panel .st-grip::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 3px;
    background: var(--borderStrong);
  }

  /* Face-à-face : A à gauche, B à droite, le critère au centre ; les jauges
     partent du centre vers chaque bord, comme un duel se lit. */
  .st-compare:is(.is-pair, .is-duel) .st-cmp-grid {
    grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  }
  :is(.is-pair, .is-duel) .st-cmp-heads > *,
  :is(.is-pair, .is-duel) .st-cmp-row > * {
    grid-row: 1;
  }
  :is(.is-pair, .is-duel) [data-side='a'] {
    grid-column: 1;
  }
  :is(.is-pair, .is-duel) [data-side='b'] {
    grid-column: 3;
  }
  :is(.is-pair, .is-duel) .st-cmp-corner {
    display: grid;
    grid-column: 2;
    place-items: center;
  }
  :is(.is-pair, .is-duel) .st-cmp-vs {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--text);
    color: var(--canvas);
    font: 700 0.6875rem / 1 var(--mono);
    letter-spacing: 0.06em;
  }
  :is(.is-pair, .is-duel) .st-cmp-head {
    border-inline-start: 0;
    padding: 12px 0 14px;
  }
  :is(.is-pair, .is-duel) .st-cmp-head .st-kicker {
    display: flex;
    align-items: center;
    min-height: 26px;
    padding-inline-end: 30px;
  }
  :is(.is-pair, .is-duel) .st-cmp-head[data-side='b'] {
    justify-items: end;
    text-align: end;
  }
  :is(.is-pair, .is-duel) .st-cmp-head[data-side='b'] .st-kicker {
    padding-inline: 30px 0;
  }
  :is(.is-pair, .is-duel) .st-cmp-x {
    top: 12px;
    width: 28px;
    height: 26px;
  }
  :is(.is-pair, .is-duel) .st-cmp-head[data-side='b'] .st-cmp-x {
    inset-inline: 0 auto;
  }
  :is(.is-pair, .is-duel) .st-cmp-name {
    max-width: 100%;
    font-size: 1.0625rem;
  }
  :is(.is-pair, .is-duel) .st-cmp-meta .st-plat {
    font-size: 0.75rem;
  }
  :is(.is-pair, .is-duel) .st-cmp-head[data-side='b'] :is(.st-cmp-meta, .st-cmp-club) {
    flex-direction: row-reverse;
  }
  /* Face-à-face : chaque photo au bord extérieur, comme le drapeau. */
  :is(.is-pair, .is-duel) .st-cmp-head[data-side='b'] .st-cmp-name.has-photo {
    flex-direction: row-reverse;
  }
  :is(.is-pair, .is-duel) .st-cmp-head[data-side='b'] .st-cmp-more > div {
    justify-items: end;
  }
  :is(.is-pair, .is-duel) .st-cmp-label {
    display: grid;
    grid-column: 2;
    align-content: center;
    justify-items: center;
    gap: 3px;
    padding: 14px 4px;
    text-align: center;
  }
  :is(.is-pair, .is-duel) .st-cmp-label-name {
    flex-direction: column;
    gap: 3px;
    font-size: 0.8125rem;
    text-wrap: balance;
  }
  :is(.is-pair, .is-duel) .st-cmp-note {
    font-size: 0.625rem;
    text-wrap: balance;
  }
  /* « ÷ Par match » allumé le dit déjà ; le bas de page explique le calcul. */
  :is(.is-pair, .is-duel) .st-cmp-note[data-mode='match'] {
    display: none;
  }
  :is(.is-pair, .is-duel) .st-cmp-section-title {
    padding-inline: 0;
    text-align: center;
  }
  :is(.is-pair, .is-duel) .st-cmp-cell,
  :is(.is-pair, .is-duel) .st-cmp-cell.is-first ~ .st-cmp-cell,
  :is(.is-pair, .is-duel) .st-cmp-heads > .st-cmp-head.is-first ~ .st-cmp-head {
    border-inline-start: 0;
  }
  :is(.is-pair, .is-duel) .st-cmp-cell {
    gap: 10px;
    padding: 14px 0;
  }
  :is(.is-pair, .is-duel) .st-cmp-cell[data-side='b'] {
    justify-items: end;
    text-align: end;
  }
  :is(.is-pair, .is-duel) .st-cmp-cell[data-side='b'] .st-cmp-fig {
    flex-direction: row-reverse;
  }
  :is(.is-pair, .is-duel) .st-cmp-val {
    font-size: 1.25rem;
  }
  :is(.is-pair, .is-duel) .st-cmp-row.is-accent .st-cmp-val {
    font-size: 1.625rem;
  }
  :is(.is-pair, .is-duel) .st-cmp-val.is-record {
    font-size: 0.9375rem;
  }
  :is(.is-pair, .is-duel) .st-cmp-meter,
  :is(.is-pair, .is-duel) .st-cmp-record {
    width: 100%;
    height: 6px;
  }
  :is(.is-pair, .is-duel) [data-side='a'] .st-cmp-meter i {
    transform-origin: right center;
  }
  :is(.is-pair, .is-duel) [data-side='b'] .st-cmp-meter i {
    transform-origin: left center;
  }
  html[dir='rtl'] :is(.is-pair, .is-duel) [data-side='a'] .st-cmp-meter i {
    transform-origin: left center;
  }
  html[dir='rtl'] :is(.is-pair, .is-duel) [data-side='b'] .st-cmp-meter i {
    transform-origin: right center;
  }
  /* Bilan en miroir : les victoires partent du centre des deux côtés. */
  :is(.is-pair, .is-duel) [data-side='a'] .st-cmp-record {
    flex-direction: row-reverse;
  }
  :is(.is-pair, .is-duel) [data-side='b'] .st-cmp-form {
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-cmp-panel,
  .st-cmp-sheet .st-scrim {
    transition-duration: var(--dur-reduced);
  }
  .st-cmp-panel {
    translate: -50% 0;
    opacity: 0;
    transition-property: opacity;
  }
  .st-cmp-sheet.is-open .st-cmp-panel {
    opacity: 1;
  }
}

/* Mouvement du comparateur : appui, bascule Total / Par match, en-têtes qui
   se resserrent, bulles. Le vol vers le dock, les jauges qui montent et les
   colonnes qui glissent sont animés par stats.js, jamais en mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
  .st-fiche-action,
  .st-cmp-go,
  .st-cmp-add,
  .st-cmp-slot-x,
  .st-cmp-x,
  .st-cmp-action {
    transition:
      color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      scale var(--dur-press-out) var(--ease-out);
  }
  .st-fiche-action:active,
  .st-cmp-go:active,
  .st-cmp-add:active,
  .st-cmp-action:active {
    scale: 0.97;
    transition-duration: var(--dur-press-in);
  }
  .st-cmp-meter i {
    transition:
      transform var(--dur-deliberate) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
    transition-delay: calc(min(var(--r, 0), 12) * 14ms);
  }
  .st-cmp-val {
    transition: color var(--dur-fast) var(--ease-out);
  }
  .st-cmp-more {
    transition:
      grid-template-rows var(--dur-standard) var(--ease-out),
      opacity var(--dur-fast) var(--ease-out);
  }
  .st-cmp-heads {
    transition: box-shadow var(--dur-fast) var(--ease-out);
  }
  .st-cmp-row {
    transition: background-color var(--dur-press-in) var(--ease-out);
  }
  .st-cmp-grid {
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .st-cmp-grid.is-arriving {
    animation: st-arrive var(--dur-fast) var(--ease-out);
  }
  .st-cmp-low::after,
  .st-cmp-toast {
    transition:
      opacity var(--dur-fast) var(--ease-out),
      translate var(--dur-fast) var(--ease-out);
  }
}

/* ─── Mouvement ──────────────────────────────────────────────────────────
   Principes : ease-out marqué, moins de 300 ms, transform et opacité ; rien
   ne retarde la lecture d'un chiffre. Sans prefers-reduced-motion:
   no-preference, tout reste instantané. */

/* Onglets, opus et tri sont des liens. Le fond actif est un élément à part
   (`.st-pill`, rendu par le serveur) : View Transitions le fait glisser d'une
   page à l'autre, les libellés changent de couleur en fondu. Les noms ne
   valent que dans la page, jamais dans la sheet ni le panneau, pour rester
   uniques ; stats.js annule la transition pour toute autre navigation. */
.st-tabs a,
.st-seg > a,
.st-chip {
  position: relative;
  isolation: isolate;
}
.st-pill {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  view-transition-class: st-pill;
}
.st-tab-label {
  view-transition-class: st-label;
}
.st-tabs a[aria-current] {
  background: transparent;
}
.st-tabs .st-pill {
  background: var(--text);
}
.st-seg > a[aria-current] {
  background: transparent;
  box-shadow: none;
}
.st-seg .st-pill {
  background: var(--canvas);
  box-shadow: 0 1px 0 var(--border);
}
.st-chip[aria-current] {
  border-color: transparent;
}
.st-chip .st-pill {
  inset: -1px;
  border: 1px solid var(--action);
}
.st-filters .st-pill,
.st-filters .st-tab-label,
.st-fiche.is-page > .st-seg .st-pill,
.st-fiche.is-page > .st-seg .st-tab-label {
  view-transition-name: var(--vt);
}

/* Forme récente : l'étiquette d'une barre reprend la ligne du tableau voisin,
   qui reste la source lisible au clavier et au lecteur d'écran. */
.st-bar {
  position: relative;
}
.st-bar::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--text);
  color: var(--canvas);
  font: 600 0.75rem / 1 var(--inter);
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
}
/* Les trois premières et les trois dernières bulles s'ancrent au bord : même
   invisible, une bulle centrée sortait du panneau et le faisait défiler. */
.st-bar:nth-child(-n + 3)::after {
  inset-inline: 0 auto;
  translate: 0 4px;
}
.st-bar:nth-last-child(-n + 3 of .st-bar):not(:nth-child(-n + 3))::after {
  inset-inline: auto 0;
  translate: 0 4px;
}
@media (hover: hover) {
  .st-bars:hover .st-bar {
    opacity: 0.45;
  }
  .st-bars .st-bar:hover {
    opacity: 1;
  }
  .st-bar:hover::after {
    opacity: 1;
    translate: -50% 0;
  }
  .st-bar:nth-child(-n + 3):hover::after,
  .st-bar:nth-last-child(-n + 3 of .st-bar):hover::after {
    translate: 0 0;
  }
}

/* Panneaux qui défilent (fiche à droite, sheet, suggestions) : pas de barre
   native, jamais de défilement horizontal. Le bord qui cache encore du contenu
   s'estompe dans le fond (`data-edge`, posé par stats.js). Suggestions : suggest.css. */
.st-inspector,
.st-sheet-body {
  overflow-x: hidden;
  scrollbar-width: none;
}
.st-inspector::-webkit-scrollbar,
.st-sheet-body::-webkit-scrollbar {
  display: none;
}
:is(.st-inspector, .st-sheet-body)::before,
:is(.st-inspector, .st-sheet-body)::after {
  content: '';
  position: sticky;
  z-index: 3;
  display: none;
  height: 40px;
  pointer-events: none;
}
:is(.st-inspector, .st-sheet-body)::before {
  top: 0;
  margin-bottom: -40px;
  background: linear-gradient(var(--canvas), transparent);
}
:is(.st-inspector, .st-sheet-body)::after {
  bottom: 0;
  margin-top: -40px;
  background: linear-gradient(transparent, var(--canvas));
}
:is(.st-inspector, .st-sheet-body)[data-edge~='top']::before,
:is(.st-inspector, .st-sheet-body)[data-edge~='bottom']::after {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(*.st-pill) {
    z-index: 0;
    animation-duration: 240ms;
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-group(*.st-label) {
    z-index: 1;
    animation-duration: 240ms;
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-old(*.st-label),
  ::view-transition-new(*.st-label) {
    animation-duration: 160ms;
    animation-timing-function: var(--ease-out);
  }

  /* Retour à l'appui : 97 %, retour en douceur. */
  .st-tabs a,
  .st-seg > a,
  .st-search-kind span,
  .st-chip,
  .st-search-submit,
  .st-pager a,
  .st-pager-mini a,
  .st-more-rows,
  .st-rank,
  .st-load-error button {
    transition:
      color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      scale var(--dur-press-out) var(--ease-out);
  }
  .st-tabs a:active,
  .st-seg > a:active,
  .st-search-kind span:active,
  .st-chip:active,
  .st-search-submit:active,
  .st-pager a:active,
  .st-pager-mini a:active,
  .st-more-rows:active,
  .st-load-error button:active {
    scale: 0.97;
    transition-duration: var(--dur-press-in);
  }

  /* Tri, poste, opus, page : l'attente atténue la liste en 150 ms, la nouvelle
     repart de 0,6 (recette realtime de l'app). Les lignes ajoutées par
     « Afficher les 50 suivants » apparaissent en 220 ms. */
  .st-table tbody {
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .st-board-list.is-arriving .st-table tbody,
  .st-board-list.is-arriving .st-empty-state {
    animation: st-arrive var(--dur-fast) var(--ease-out);
  }
  .st-table tbody tr.is-added {
    animation: st-added var(--dur-standard) var(--ease-out) both;
  }
  @keyframes st-arrive {
    from {
      opacity: 0.6;
    }
  }
  @keyframes st-added {
    from {
      opacity: 0;
    }
  }

  /* Changement sur place (stats.js) : seules les pastilles glissent ; la page
     elle-même passe directement à son nouvel état, sans fondu d'ensemble. */
  html.st-swap::view-transition-old(root) {
    display: none;
  }
  html.st-swap::view-transition-new(root) {
    animation: none;
  }
  .st-rank:active {
    scale: 0.99;
    transition-duration: var(--dur-press-in);
  }

  .st-bar {
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .st-bar::after {
    transition:
      opacity var(--dur-fast) var(--ease-out),
      translate var(--dur-fast) var(--ease-out);
  }

  /* Apparition : les barres montent depuis la base, la barre V/N/D se
     remplit. Seulement pour un graphe hors écran au chargement ou inséré par
     la sheet : un chiffre déjà visible ne bouge jamais. */
  .st-bar-fill {
    transform-origin: bottom;
    transition: transform var(--dur-deliberate) var(--ease-out) calc(var(--i, 0) * 24ms);
  }
  .st-bars.is-pending .st-bar-fill {
    transform: scaleY(0);
    transition: none;
  }
  /* Barre V/N/D comme `StatsRecordBar` : scaleX 280 ms depuis le bord de
     début (la droite en arabe), le rail reste en place. */
  .st-record-fill {
    transform-origin: left;
    transition: transform var(--dur-deliberate) var(--ease-out);
  }
  html[dir='rtl'] .st-record-fill {
    transform-origin: right;
  }
  .st-record.is-pending .st-record-fill {
    transform: scaleX(0);
    transition: none;
  }
  /* Traits des soirées : tracés depuis le bord de début, une fois les barres
     parties (même durée, 160 ms plus tard). */
  .st-bar-session {
    transform-origin: left;
    transition: transform var(--dur-deliberate) var(--ease-out) 160ms;
  }
  html[dir='rtl'] .st-bar-session {
    transform-origin: right;
  }
  .st-bars.is-pending .st-bar-session {
    transform: scaleX(0);
    transition: none;
  }

  /* Panneau : l'attente (0,6) est atteinte et quittée en 150 ms, le nouveau
     contenu arrive de 0,6 à 1, comme StateTransition « realtime ». */
  .st-inspector {
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .st-inspector > .st-fiche,
  .st-sheet-body > .st-fiche {
    animation: st-arrive var(--dur-fast) var(--ease-out) both;
  }
  /* Squelette : la respiration de StatsRowsSkeleton, 1 → 0,45 en 1 100 ms. */
  .st-skeleton {
    animation: st-breathe 1100ms var(--ease-in-out) infinite alternate;
  }
  @keyframes st-breathe {
    to {
      opacity: 0.45;
    }
  }

  /* Appui sur une ligne : fond relevé, sans échelle (une ligne ne rétrécit pas). */
  .st-table tbody tr:has(a.st-row:active),
  a.st-row.is-result:active,
  .st-roster a:active,
  .st-next a:active,
  .st-pick-list a:active {
    background: var(--raised);
    transition-duration: var(--dur-press-in);
  }
  a.st-row.is-result,
  .st-roster a,
  .st-next a,
  .st-pick-list a {
    transition: background-color var(--dur-press-out) var(--ease-out);
  }

  /* Sélecteur de filtre : 150 ms, opacité et 4 px, comme les bulles. */
  .st-pick details[open] .st-pick-pop {
    animation: st-pop var(--dur-fast) var(--ease-out);
  }
  @keyframes st-pop {
    from {
      opacity: 0;
      translate: 0 -4px;
    }
  }
}

.st-recruit-link {
  margin: 16px 0 0;
  font-size: 0.875rem;
}

.st-recruit-link a {
  color: var(--text);
  text-underline-offset: 3px;
}