/* Bloc "navigation_pages" — bandeau de pages numérotées défilable avec flèches */

.navigation-pages-numerotees {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.navigation-pages-numerotees__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--color-accent);
    border-radius: 0;
    background: #fff;
    color: inherit;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}

.navigation-pages-numerotees__arrow:hover:not(:disabled) {
    background: var(--color-accent);
    color: #FFF;
}

.navigation-pages-numerotees__arrow:disabled {
    opacity: .25;
    cursor: default;
}

.navigation-pages-numerotees__arrow.d-none {
    display: none !important;
}

.navigation-pages-numerotees__viewport {
    flex: 1 1 auto;
    display: flex !important; /* container flex pour permettre le centrage (justify-content) */
    /* "scroll" et non "auto" : dans ce contexte flex imbriqué, "auto" ne
       met pas toujours en place un véritable conteneur défilable malgré un
       contenu qui déborde réellement (scrollLeft reste bloqué à 0). "scroll"
       force le défilement de façon fiable. Comme la scrollbar est masquée
       ci-dessous de toute façon, ça ne change rien visuellement. */
    overflow-x: scroll;
    overflow-y: hidden;
    /* PAS de scroll-behavior:smooth ici : sur cette page, tout défilement
       "smooth" (CSS ou JS) est silencieusement ignoré par le navigateur —
       constaté et confirmé par test. On reste donc sur un défilement
       instantané, qui lui fonctionne de façon fiable. */
    /* on masque la scrollbar native : la navigation se fait via les flèches
       (ou le doigt / trackpad, toujours possible en complément) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.navigation-pages-numerotees__viewport::-webkit-scrollbar {
    display: none;
}

/* Ajoutée en JS uniquement quand le contenu ne déborde pas : la barre se
   centre alors dans son conteneur au lieu de rester collée à gauche.
   Jamais appliquée quand ça déborde, pour ne pas fausser le calcul du
   scroll (scrollLeft = 0 doit rester le vrai début de la liste). */
.navigation-pages-numerotees__viewport.is-centree {
    justify-content: center;
}

.navigation-pages-numerotees__track {
    display: flex !important; /* override du flex-wrap par défaut de .nav (Bootstrap) */
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    gap: .5rem;
    padding: .25rem .125rem;
    margin: 0;
}

/* Matérialisation des boutons : par défaut, .nav-pills de Bootstrap ne
   dessine un fond/contour que sur l'élément actif — on donne ici un
   contour à TOUS les numéros pour qu'ils ressemblent à de vrais boutons. */
.navigation-pages-numerotees__track .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: 2.5rem;
    text-align: center;
    padding: .375rem .5rem !important;
    border: 1px solid var(--color-1) !important; /* gris nettement visible, pas un simple filet */
    border-radius: 0;
    background-color: #FFF !important;
    color: #212529 !important;
}

.navigation-pages-numerotees__track .nav-link:hover {
    background-color: var(--color-1) !important;
    border-color: var(--color-1) !important;
    color: #FFF !important;
}

.navigation-pages-numerotees__track .nav-link.active {
    background-color: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
    font-weight: bold;
}