/* ==========================================================================
   Onglets — affichage sur petit écran
   --------------------------------------------------------------------------
   Le conteneur posait flex-column flex-md-row : sous 768 px les onglets
   passaient en colonne. Le palmarès en déclare neuf (LV 100, HV 100, HV 200,
   LV 200, GRAND AGG. LV, GRAND AGG. HV, BECKER, TWO GUN, STATS) : cela faisait
   près d'un écran entier de pastilles avant le premier résultat.

   On garde donc la ligne à toutes les tailles, et on la fait défiler
   horizontalement quand elle ne tient plus. Au-delà de 768 px, rien ne change :
   les pastilles se replient sur plusieurs lignes comme auparavant.

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

@media (max-width: 767.98px) {

    .onglets-defilants {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;

        /* Le défilement ne doit pas rogner l'ombre portée des pastilles actives. */
        padding-bottom: .25rem;

        scrollbar-width: thin;
        scrollbar-color: rgba(67, 89, 113, .35) transparent;
    }

    /* Sans cela, les éléments d'un conteneur flex en nowrap se compriment :
       la barre ne déborderait pas, ce sont les libellés qui seraient tronqués. */
    .onglets-defilants > .nav-item {
        flex: 0 0 auto;
    }

    .onglets-defilants > .nav-item > .nav-link {
        white-space: nowrap;
    }

    /* Repère de défilement : discret au doigt, explicite à la souris. */
    .onglets-defilants::-webkit-scrollbar {
        height: 4px;
    }

    .onglets-defilants::-webkit-scrollbar-thumb {
        background-color: rgba(67, 89, 113, .35);
        border-radius: 2px;
    }

    .onglets-defilants::-webkit-scrollbar-track {
        background-color: transparent;
    }
}

/* Une pastille choisie au bord de l'écran s'y recentre (cf. TabNavContainer).
   Le glissement n'est animé que pour qui n'a pas demandé à réduire les
   animations. */
@media (prefers-reduced-motion: no-preference) {
    .onglets-defilants {
        scroll-behavior: smooth;
    }
}