/* ==========================================================
   Classement (Standing.php)
   Tableaux : .tableau--equipe (css/equipe2026.css), .wc et .nom-court (css/phs2026.css)
   ========================================================== */

.classement { display: grid; gap: 1.25rem; min-width: 0; }
.classement__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.classement__entete .titre-section { margin-bottom: 0; }

/* ---------- Onglets des vues ---------- */
.onglets-vue {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: var(--surface);
    padding: .2rem;
}
.onglets-vue button {
    border: 0;
    background: transparent;
    color: var(--texte-2);
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}
.onglets-vue button:hover { color: var(--texte); }
.onglets-vue button[aria-selected="true"] { background: var(--accent-fond); color: var(--accent-texte); }

.vue { display: grid; gap: 1rem; min-width: 0; }
.vue[hidden] { display: none; }
.conference { display: grid; gap: 1rem; min-width: 0; }
.conference + .conference { margin-top: 1rem; }
.conference__titre { font-size: 1.6rem; }

/* ---------- Tableau ---------- */
.tableau--classement-complet { font-size: .9rem; }
.tableau--classement-complet .col-rang { width: 2.5rem; color: var(--texte-2); font-weight: 700; }
.tableau--classement-complet .col-nom { min-width: 12rem; }
.tableau--classement-complet .col-nom a { display: flex; align-items: center; gap: .5rem; }
.tableau--classement-complet .col-nom img { width: 26px; height: 26px; flex: none; }
.tableau--classement-complet .col-forte { color: var(--texte); font-weight: 800; }
.tableau--classement-complet tbody tr.ligne-qualif > * { border-bottom: 2px solid var(--ligne); }
.marque-series { color: var(--texte-2); font-weight: 700; font-size: .8rem; }
.est-positif { color: var(--monte); }
.est-negatif { color: var(--baisse); }

/* 5 derniers matchs */
.col-forme { white-space: nowrap; }
.forme {
    display: inline-grid;
    place-items: center;
    width: 1.3rem; height: 1.3rem;
    margin: 0 1px;
    border-radius: 3px;
    font-size: .65rem;
    font-weight: 800;
    color: var(--fond);
}
.forme--v  { background: var(--monte); }
.forme--d  { background: var(--baisse); }
.forme--dp { background: var(--texte-2); }

.col-prochain { white-space: nowrap; }
.col-prochain img { width: 22px; height: 22px; vertical-align: middle; margin-left: .2rem; }

.classement__legende { margin: 0; line-height: 2; }
.classement__legende .forme { vertical-align: middle; }

@media (max-width: 640px) {
    .tableau--classement-complet .col-nom { min-width: 7.5rem; }
    .tableau--classement-complet .nom-long { display: none; }
    .tableau--classement-complet .nom-court { display: inline; }
}

/* Cellulaire : les 4 vues sur une seule ligne (glisse au doigt si l'écran est très étroit) */
@media (max-width: 640px) {
    .onglets-vue { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .onglets-vue::-webkit-scrollbar { display: none; }
    .onglets-vue button { flex: none; font-size: .85rem; padding-left: .8rem; padding-right: .8rem; }
}@media (max-width: 640px) { .onglets-vue { contain: inline-size; width: 100%; } }
