/* ==========================================================================
   Classements du palmarès — affichage sur petit écran
   --------------------------------------------------------------------------
   Deux présentations du même classement :
     .classement-fige    tableau à en-tête et colonnes figés (par défaut)
     .classement-cartes  une carte par ligne, sous 1200 px uniquement

   Le basculement est porté par le composant VueClassement. Le mode « cartes »
   n'a de sens que sur petit écran : au-delà de 1200 px, le tableau est
   toujours affiché, quel que soit le choix mémorisé.

   Voir docs/AUDIT-MOBILE.md, anomalie M3.
   ========================================================================== */

.vue-classement {
    --classement-fond: #fff;
    --classement-fond-entete: #f5f5f9;
    --classement-bord: #d9dee3;
    --classement-accent: #2a376c;
    --classement-muted: #697a8d;
}

/* --- bascule tableau / cartes -------------------------------------------- */

.vue-classement-bascule {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem;
}

.vue-classement-bascule .btn {
    font-size: .8125rem;
    padding: .25rem .75rem;
}

/* --- visibilité des deux présentations ----------------------------------- */

/* Par défaut — et systématiquement au-delà de 1200 px — c'est le tableau. */
.vue-classement > .vue-cartes {
    display: none;
}

@media (max-width: 1199.98px) {
    .vue-classement.mode-cartes > .vue-tableau {
        display: none;
    }

    .vue-classement.mode-cartes > .vue-cartes {
        display: block;
    }
}

/* ==========================================================================
   Option A — tableau à en-tête et colonnes figés
   ========================================================================== */

.classement-fige {
    --fx1: 2.75rem;   /* rang    */
    --fx2: 4.5rem;    /* dossard */
    --fx3: 7rem;      /* nom     */
    --h-entete: 2.25rem;

    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--classement-bord);
    border-radius: .375rem;
}

.classement-fige > .table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

/* -- en-tête collé en haut ------------------------------------------------- */

.classement-fige thead th {
    position: sticky;
    z-index: 2;
    height: var(--h-entete);
    background-color: var(--classement-fond-entete);
    box-shadow: inset 0 -1px 0 var(--classement-bord);
}

.classement-fige thead tr:first-child th {
    top: 0;
}

/* Les vues Grand Agg., Two Gun et Becker ont un en-tête sur deux niveaux :
   la seconde ligne se cale sous la première. */
.classement-fige thead tr:nth-child(2) th {
    top: var(--h-entete);
}

/* -- colonnes collées à gauche --------------------------------------------- */

/* On fige la ligne de libellés (toujours la dernière de l'en-tête) et le corps.
   La ligne de regroupement, quand elle existe, défile avec ses colonnes :
   « 100 M. » doit rester au-dessus des colonnes qu'elle coiffe. */
.classement-fige.fige-2 tbody tr > :nth-child(-n+2),
.classement-fige.fige-2 thead tr:last-child > :nth-child(-n+2),
.classement-fige.fige-3 tbody tr > :nth-child(-n+3),
.classement-fige.fige-3 thead tr:last-child > :nth-child(-n+3) {
    position: sticky;
    z-index: 1;
    background-color: var(--classement-fond);
}

.classement-fige.fige-2 thead tr:last-child > :nth-child(-n+2),
.classement-fige.fige-3 thead tr:last-child > :nth-child(-n+3) {
    z-index: 3;
    background-color: var(--classement-fond-entete);
}

.classement-fige.fige-2 tr > :nth-child(1),
.classement-fige.fige-3 tr > :nth-child(1) {
    left: 0;
    min-width: var(--fx1);
}

.classement-fige.fige-2 tr > :nth-child(2),
.classement-fige.fige-3 tr > :nth-child(2) {
    left: var(--fx1);
    min-width: var(--fx2);
}

.classement-fige.fige-3 tr > :nth-child(3) {
    left: calc(var(--fx1) + var(--fx2));
    min-width: var(--fx3);
}

/* Marque la césure entre la zone figée et la zone qui défile. */
.classement-fige.fige-2 tr > :nth-child(2),
.classement-fige.fige-3 tr > :nth-child(3) {
    box-shadow: 6px 0 6px -6px rgba(67, 89, 113, .45);
}

.classement-fige.fige-2 thead tr:last-child > :nth-child(2),
.classement-fige.fige-3 thead tr:last-child > :nth-child(3) {
    box-shadow: inset 0 -1px 0 var(--classement-bord),
                6px 0 6px -6px rgba(67, 89, 113, .45);
}

/* Les tables d'équipe n'ont pas de colonne « dossard » : le nom est deuxième. */
.classement-fige.fige-2 {
    --fx2: 9rem;
}

/* -- resserrement sur petit écran ------------------------------------------
   Le thème applique 1.25rem de marge horizontale par cellule. Sur un écran de
   390 px, les trois colonnes figées mangeaient alors 71 % de la largeur et il
   ne restait presque rien pour lire les scores. On resserre en dessous de
   1200 px — là précisément où le figement sert. */

@media (max-width: 1199.98px) {
    .classement-fige {
        --fx1: 2rem;
        --fx2: 3.25rem;
        --fx3: 5rem;
        --h-entete: 2rem;
    }

    .classement-fige.fige-2 {
        --fx2: 6.5rem;
    }

    .classement-fige > .table > :not(caption) > * > * {
        padding: .375rem .5rem;
        font-size: .8125rem;
    }

    /* Les libellés d'en-tête dictaient la largeur des colonnes figées :
       « Dossard » réservait à lui seul plus de place que ses trois chiffres. */
    .classement-fige > .table > thead > tr > th {
        font-size: .6875rem;
        letter-spacing: 0;
    }
}

/* ==========================================================================
   Option B — une carte par ligne
   ========================================================================== */

.classement-cartes {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.classement-carte {
    border: 1px solid var(--classement-bord);
    border-radius: .5rem;
    background-color: var(--classement-fond);
    padding: .625rem .6875rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.classement-carte .carte-tete {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.classement-carte .carte-rang {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: #e7e9f3;
    color: var(--classement-accent);
    font-size: .8125rem;
    font-weight: 600;
}

.classement-carte .carte-identite {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.classement-carte .carte-identite strong {
    font-size: .9375rem;
    font-weight: 600;
}

.classement-carte .carte-identite span {
    font-size: .75rem;
    color: var(--classement-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classement-carte .carte-dossard {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 600;
    padding: .125rem .4375rem;
    border: 1px solid var(--classement-bord);
    border-radius: .25rem;
    color: var(--classement-muted);
}

/* -- grille des séries ----------------------------------------------------- */

.classement-carte .carte-series {
    display: grid;
    grid-template-columns: repeat(var(--nb-series, 5), 1fr);
    gap: 1px;
    margin: 0;
    background-color: var(--classement-bord);
    border: 1px solid var(--classement-bord);
    border-radius: .375rem;
    overflow: hidden;
}

.classement-carte .carte-serie {
    background-color: var(--classement-fond);
    padding: .25rem .125rem .3125rem;
    text-align: center;
}

.classement-carte .carte-serie dt {
    margin: 0;
    font-size: .625rem;
    letter-spacing: .04em;
    color: var(--classement-muted);
    font-weight: 500;
}

.classement-carte .carte-serie dd {
    margin: 0;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

/* -- ligne de résultat ----------------------------------------------------- */

.classement-carte .carte-bilan {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .875rem;
    padding: .4375rem .5625rem;
    background-color: #faf4d6;
    border-radius: .375rem;
}

.classement-carte .carte-bilan .valeur {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.classement-carte .carte-bilan .unite,
.classement-carte .carte-bilan .secondaire {
    font-size: .75rem;
    color: var(--classement-muted);
}

.classement-carte .carte-bilan .secondaire {
    margin-left: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.classement-carte .carte-bilan .secondaire b {
    font-weight: 600;
    color: #32475c;
}

/* Bandeau de pied (small group de l'épreuve, par exemple). */
.classement-cartes-pied {
    margin-top: .5rem;
    padding: .5rem .6875rem;
    border: 1px dashed var(--classement-bord);
    border-radius: .375rem;
    font-size: .8125rem;
    color: var(--classement-muted);
}

.classement-cartes-pied b {
    color: #32475c;
    font-weight: 600;
}