/*
 * Bande de jaquettes centrée (saga, autres numéros d'une revue).
 * Chargée seulement par les pages qui affichent cette bande,
 * pas par tout le site.
 */

/* ─── Galerie centrée sur l'opus courant (saga / numéros de magazine) ─── */

.galerie-centree-section {
    margin: 1.75rem 0 0;
}

/*
    La bande principale : boutons nav + liste de jaquettes.
    On utilise flex pour que les boutons soient collés à la liste.
*/
.galerie-centree-bande {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*
    La liste de jaquettes : centrée, défilable si nécessaire.
    justify-content: center place l'actuel au milieu sur les écrans larges.
*/
.galerie-centree-liste {
    display: flex;
    justify-content: safe center;
    align-items: flex-start;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.5rem 0.25rem 0.75rem;
    flex: 1;
    scroll-snap-type: x mandatory;
}

/*
    Chaque item : taille identique à la galerie normale,
    avec scroll-snap pour aider le défilement tactile.
*/
.galerie-centree-item {
    position: relative;
    flex: 0 0 5.6rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: center;
}

.galerie-centree-item::after {
    content: "";
    position: absolute;
    inset: 0;
    height: 7.5rem;
    border-radius: 0.3rem;
    border: 3px solid transparent;
    pointer-events: none;
    transition: border-color 0.15s;
}

.galerie-centree-item img,
.galerie-centree-vide {
    display: block;
    width: 5.6rem;
    height: 7.5rem;
    object-fit: cover;
    border-radius: 0.3rem;
    background: var(--champ);
    opacity: 0.55;
    filter: grayscale(0.35);
    transition: opacity 0.15s;
}

/* L'opus actuellement consulté : liseré de la couleur des boutons, bien visible */
.galerie-centree-item.actuel img,
.galerie-centree-item.actuel .galerie-centree-vide {
    opacity: 1;
    filter: none;
}

.galerie-centree-item.actuel::after {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

/* Connecté : possédé en couleur normale */
.galerie-centree-item.possede img,
.galerie-centree-item.possede .galerie-centree-vide {
    opacity: 1;
    filter: none;
}

/* Connecté : manquant en noir et blanc */
.galerie-centree-item.manquant img,
.galerie-centree-item.manquant .galerie-centree-vide {
    opacity: 0.9;
    filter: grayscale(1);
}

/* Liseré + halo même si l'opus possédé/manquant est l'actuel */
.galerie-centree-item.possede.actuel::after,
.galerie-centree-item.manquant.actuel::after {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

/*
    Boutons de navigation (◁ / ▷) vers l'opus précédent / suivant
    quand la saga dépasse les 11 opus affichés.
*/
.galerie-centree-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--carte);
    border: 1px solid var(--ligne);
    color: var(--encre);
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s;
    flex-shrink: 0;
}

.galerie-centree-nav:hover {
    background: var(--champ);
}

/* ── Responsive ── */

/*
    Tablette (≤ 64 rem) : on réduit la taille des jaquettes ET on ne montre
    que 3 items de chaque côté de l'actuel (7 au total).
    Le sélecteur [data-index-actuel="N"] [data-index="M"] permet de cibler
    chaque item selon sa distance à l'actuel.
*/
@media (max-width: 64rem) {
    .galerie-centree-item {
        flex-basis: 4.5rem;
    }

    .galerie-centree-item::after {
        height: 6rem;
    }

    .galerie-centree-item img,
    .galerie-centree-vide {
        width: 4.5rem;
        height: 6rem;
    }

    /* On cache les items à plus de 3 positions de l'actuel.
       actuel=0 → visibles 0-3, actuel=1 → visibles 0-4, etc. */
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="0"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="1"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="2"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="3"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="4"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="5"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="6"] {
        display: none;
    }
}

/*
    Smartphone (≤ 480 px) : encore plus petit, 1 seul item de chaque côté
    (l'actuel + 1 avant + 1 après = 3 au total).
*/
@media (max-width: 480px) {
    .galerie-centree-item {
        flex-basis: 3.8rem;
    }

    .galerie-centree-item::after {
        height: 5rem;
    }

    .galerie-centree-item img,
    .galerie-centree-vide {
        width: 3.8rem;
        height: 5rem;
    }

    .galerie-centree-nav {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 1rem;
    }

    /* On ne garde qu'1 item de chaque côté (distance max = 1). */
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="0"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="1"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="2"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="3"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="4"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="5"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="8"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="6"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="9"],
    .galerie-centree-liste[data-index-actuel="7"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="8"]  [data-index="10"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="0"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="1"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="2"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="3"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="4"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="5"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="6"],
    .galerie-centree-liste[data-index-actuel="9"]  [data-index="7"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="0"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="1"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="2"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="3"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="4"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="5"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="6"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="7"],
    .galerie-centree-liste[data-index-actuel="10"] [data-index="8"] {
        display: none;
    }
}

/* ─── Fin galerie centrée ─── */