/* Classement de la semaine (classement-semaine.php, 01/11/2026) */

.cs-ma-place {
  border: 1px solid #d2973a;
  border-radius: 8px;
  background: var(--surface-2);
}

/* Liens dans le texte : sans règle ils gardaient le bleu par défaut du navigateur,
   illisible sur fond sombre. Même bleu que le fil d'Ariane du haut de page. */
.section p a {
  color: #60a5fa;
  font-weight: 700;
  text-decoration: none;
}

.section p a:hover,
.section p a:focus-visible {
  text-decoration: underline;
}

.cs-ma-place-titre {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--texte);
}

.table-defilante {
  overflow-x: auto;
}

.cs-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.cs-table th:last-child,
.cs-table td:last-child {
  width: 90px;
}

.cs-table th,
.cs-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-forte);
  text-align: left;
}

.cs-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
}

.cs-rang {
  width: 64px;
  text-align: center !important;
  font-weight: 700;
}

/* Médailles du podium agrandies sans grandir la ligne : line-height 1 + marges
   négatives, comme les avatars. */
.cs-medaille {
  display: inline-block;
  font-size: 1.9rem;
  line-height: 1;
  margin: -8px 0;
  vertical-align: middle;
}

.cs-points {
  text-align: right !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cs-joueur {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Avatar de 44 px qui mord sur l'interligne : les marges négatives le ramènent à
   32 px dans le calcul de la ligne, donc la hauteur des lignes ne bouge pas. */
.cs-joueur img {
  width: 44px;
  height: 44px;
  margin: -6px 0;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.cs-joueur span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-joueur em {
  font-style: normal;
  color: var(--texte-doux);
  font-weight: 400;
}

.cs-podium td {
  font-weight: 700;
}

.cs-moi td {
  background: rgba(210, 151, 58, 0.14);
  font-weight: 700;
}

.cs-ellipse td {
  text-align: center;
  color: var(--texte-doux);
  letter-spacing: 0.3em;
}

.cs-note {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

.cs-podium-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cs-podium-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  text-align: center;
  min-width: 0;
}

.cs-podium-carte img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.cs-podium-medaille {
  font-size: 1.6rem;
}

.cs-podium-pseudo {
  font-weight: 700;
  color: var(--texte);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-podium-points {
  font-size: 0.85rem;
  color: var(--texte-doux);
}

/* Mobile, en fin de fichier pour passer après les règles de base : on rend de la
   place aux pseudos (tableau qui déborde sur le retrait de la section, colonnes rang
   et points resserrées, avatar un peu plus petit). La hauteur des lignes reste la
   même : avatar de 36 px ramené à 32 par ses marges. */
@media (max-width: 560px) {
  .table-defilante {
    margin: 0 -12px;
  }
  .cs-table {
    font-size: 0.9rem;
  }
  .cs-table th,
  .cs-table td {
    padding: 8px 4px;
  }
  .cs-rang {
    width: 44px;
  }
  .cs-table thead th {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }
  .cs-table th:last-child,
  .cs-table td:last-child {
    width: 54px;
  }
  .cs-joueur {
    gap: 7px;
  }
  .cs-joueur img {
    width: 36px;
    height: 36px;
    margin: -2px 0;
  }
  .cs-medaille {
    font-size: 1.6rem;
  }
  .cs-podium-liste {
    gap: 6px;
  }
}