/* Styles additionnels du Board public dédié (mandat UX-2, 2026-08-27) --
   fichier séparé de styles.css par choix délibéré : /board/ et
   /fr/classement/ sont les deux seules pages qui le chargent, ce qui
   garantit que ce mandat ne touche jamais le CSS partagé par l'accueil,
   les fiches joueurs ou le compte (mandat explicite : ces pages restent
   inchangées). Réutilise les variables de couleur définies dans
   styles.css (déjà chargé avant ce fichier sur ces deux pages). */

.board-loading { padding: 32px; text-align: center; color: var(--faint); font-size: 0.92rem; }

/* Contrôle de tri accessible pour mobile -- masqué au-dessus du même
   860px déjà utilisé par styles.css pour basculer table desktop /
   cartes mobiles, puisque les en-têtes de colonnes cliquables du tableau
   couvrent déjà le tri à cette largeur. */
.board-sort-mobile { display: none; align-items: center; gap: 10px; flex-basis: 100%; order: 4; }
.board-sort-mobile label { font-size: 0.82rem; color: var(--faint); font-weight: 600; white-space: nowrap; }
.board-sort-mobile select {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font: inherit; font-size: 0.88rem; padding: 8px 10px; flex: 1;
}
.board-sort-mobile select:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.board-sort-dir {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font: inherit; font-size: 0.86rem; font-weight: 600; padding: 8px 12px;
  cursor: pointer; white-space: nowrap;
}
.board-sort-dir:hover { border-color: var(--violet); }
.board-sort-dir:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }

@media (max-width: 860px) {
  .board-sort-mobile { display: flex; }
}

/* Rendu progressif -- lot initial + "Afficher plus" (mandat : jamais tous
   les 570 joueurs dans le DOM au premier rendu). */
.board-load-more-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
.board-render-status { font-size: 0.8rem; color: var(--faint); }