/* ==============================
 * Block — Galerie horizontale (boutons prev/next, scroll snap, scrollbar masquée)
 * Scope racine : .block-gallery
 * ============================== */

.block-gallery {
    position: relative;
    width: 100%;
    background: var(--color-bg);
    padding: 65px 0 0;
}

@media (max-width: 1023px) {
    .block-gallery { padding-bottom: clamp(40px, 7vw, 64px); }
}

/* Page Nos expertises : 87px entre le texte expertises et le slider */
.block-expertises + .block-gallery {
    padding-top: 87px;
}

/* ----- Boutons prev/next au-dessus de la galerie ----- */
.block-gallery__nav {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto 16px;
    padding: 0 var(--gutter);
    box-sizing: border-box;
}

/* Grand desktop : on sort les boutons en absolu, juste à droite de la carte
   du bloc précédent (16px de gap). En dessous on retombe sur le flow normal. */
@media (min-width: 1320px) {
    .block-gallery__nav {
        position: absolute;
        top: -64px;
        right: calc((100vw - var(--container-max)) / 2 + var(--gutter) - 112px);
        left: auto;
        margin: 0;
        padding: 0;
        width: auto;
        max-width: none;
        justify-content: flex-start;
        z-index: 2;
    }
}

.block-gallery__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text);
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.block-gallery__nav-btn:hover,
.block-gallery__nav-btn:focus-visible {
    color: var(--color-primary);
    transform: scale(1.15);
}
.block-gallery__nav-btn:active { transform: scale(0.92); }
.block-gallery__nav-btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
    color: var(--color-muted);
}

.block-gallery__nav-arrow {
    width: 18px;
    height: auto;
}
/* SVG natif = flèche gauche → on miroir pour le bouton next */
.block-gallery__nav-btn--next .block-gallery__nav-arrow {
    transform: scaleX(-1);
}

/* ----- Viewport (scroll horizontal sans barre visible) ----- */
.block-gallery__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* Masque la scrollbar */
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE / vieux Edge */
}
.block-gallery__viewport::-webkit-scrollbar { display: none; } /* Webkit */

.block-gallery__track {
    list-style: none;
    margin: 0;
    padding: 0 var(--gutter);
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(16px, 3vw, 60px);
    width: max-content;
}

/* Mobile : on aligne le padding latéral du track sur la moitié du gap entre slides
   pour éviter que la première image colle au bord gauche de l'écran.
   `scroll-padding-inline` sur le viewport est nécessaire pour que le scroll-snap
   ne masque pas ce padding en alignant l'item directement sur le bord. */
@media (max-width: 1023px) {
    .block-gallery__track {
        padding: 0 clamp(10px, 4vw, 32px);
    }
    .block-gallery__viewport {
        scroll-padding-inline: clamp(10px, 4vw, 32px);
    }
}

.block-gallery__item {
    flex: 0 0 auto;
    /* Mobile-first : largeur fluide */
    width: clamp(240px, 60vw, 480px);
    aspect-ratio: 560 / 431;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-alt);
    scroll-snap-align: start;
}

/* Desktop : taille fixe 560 × 431 */
@media (min-width: 1024px) {
    .block-gallery__item {
        width: 560px;
        height: 431px;
        aspect-ratio: auto;
    }
}

.block-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Dots — masqués en desktop, affichés en responsive sous le slider */
.block-gallery__dots {
    display: none;
    list-style: none;
    margin: clamp(20px, 3vw, 32px) auto 0;
    padding: 0;
    gap: 10px;
    justify-content: center;
}
.block-gallery__dots > li { display: inline-flex; }
.block-gallery__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.block-gallery__dot:hover { background: rgba(0, 0, 0, 0.4); }
.block-gallery__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.2);
}

@media (max-width: 1023px) {
    /* En responsive : on cache les flèches et on affiche les dots */
    .block-gallery__nav { display: none; }
    .block-gallery__dots { display: flex; }
}

/* Placeholder éditeur si pas d'images */
.block-gallery--placeholder {
    padding: 24px var(--gutter);
    text-align: center;
    background: var(--color-bg-alt);
    color: var(--color-muted);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    margin: 0 var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
    .block-gallery__viewport { scroll-behavior: auto; }
}