/*
 * Billard Extrême — classement.
 *
 * Complète le CSS partagé (css/classement.css, servi par
 * proxies/css-classement.php) : les colonnes propres à ce jeu, et les classes
 * que le partagé ne connaît pas.
 *
 * Le partagé nomme ses onglets `.tabs`/`.tab-btn`/`.mode-section` ; cette page
 * utilise `.onglets`/`.onglet`/`.panneau`. Sans les règles ci-dessous, les
 * boutons gardaient l'apparence native du navigateur et, surtout, les quatre
 * panneaux s'affichaient en même temps : trois d'entre eux restaient figés sur
 * « Chargement... » puisque le JS ne les remplit qu'au clic sur leur onglet.
 *
 * Les quatre onglets n'ont pas le même nombre de colonnes ; la grille est donc
 * définie une fois avec le maximum, et les colonnes absentes d'un onglet
 * n'occupent simplement aucune place puisque leur <span> n'est pas émis.
 */

/* Cinq colonnes : la carte partagée de 600 px est trop étroite. */
.card {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

/* Onglets Tableau du jour / Adresse / Contre l'ordinateur / En ligne */
.onglets {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.onglet {
  padding: 9px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.onglet:hover { background: rgba(255, 255, 255, 0.1); }
.onglet.actif {
  background: color-mix(in srgb, var(--color-mid) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-mid) 55%, transparent);
  color: var(--color-accent);
}

.panneau { display: none; }
.panneau.actif { display: block; }

.lb-header, .lb-row {
  display: grid;
  grid-template-columns: 42px 1fr 78px 76px 76px;
  align-items: center;
  gap: 6px;
}

.lb-coups, .lb-temps, .lb-parties {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: #90a8c4;
}

.lb-row .lb-score { font-weight: 800; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.lb-row .lb-coups, .lb-row .lb-temps, .lb-row .lb-parties { font-weight: 600; color: #90a8c4; }

.classement-intro { color: #90a8c4; line-height: 1.6; font-size: 0.82rem; }

/* Ligne du joueur connecté quand il est hors du top 50 */
.lb-row.moi {
  background: color-mix(in srgb, var(--color-mid) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-mid) 30%, transparent);
}
.lb-row .moi-tag { color: var(--color-accent); font-size: 0.75rem; font-weight: 700; }

/* Séparateur entre le top 50 et la ligne « toi » */
.lb-separateur {
  text-align: center;
  padding: 8px 0;
  color: #64748b;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.btn-defi-classement {
  display: inline-block;
  margin-top: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-btn1), var(--color-btn2));
  box-shadow: 0 4px 15px color-mix(in srgb, var(--color-btn2) 40%, transparent);
  text-decoration: none;
  transition: transform 0.2s;
}
.btn-defi-classement:hover { transform: translateY(-2px); }

.back-link { display: block; }

@media (max-width: 640px) {
  /* Sur téléphone, seules les colonnes qui départagent restent lisibles. */
  .lb-header, .lb-row { grid-template-columns: 34px 1fr 70px 62px; }
  .lb-temps, .lb-parties { display: none; }
  .classement-intro { font-size: 0.78rem; }
}