/* Galerie projet plein écran — une image par coup de scroll, sans lightbox */

.project-slideshow {
    width: 100%;
    height: calc(100svh - var(--nav-h, 96px));
    position: relative;
    background: rgb(var(--color-white, 233, 233, 233));
}

.project-slideshow .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* de l'air autour de l'image : gouttière à gauche, à droite et en bas */
    padding: 0 var(--gutter-w) var(--gutter-w);
}

/* Mobile : le snap natif cale la galerie sous le menu, même en plein
   momentum (là où un scrollTo JS est ignoré). La classe gallery-snap est
   posée par le JS au début de chaque geste d'approche — jamais au
   chargement, et jamais quand la galerie est en place (sortie libre). */
@media (hover: none) and (pointer: coarse) {
    html.gallery-snap {
        scroll-snap-type: y proximity;
    }

    html.gallery-snap .project-slideshow:not(.project-slideshow--single) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        scroll-margin-top: var(--nav-h, 0px);
    }
}

/* Le scroll vertical natif reste toujours POSSIBLE (pan-y) : c'est Swiper
   qui l'empêche pendant les changements d'image (preventDefault, listeners
   non passifs) et qui le laisse reprendre aux butées — la sortie du slider
   redevient donc naturelle. */
.project-slideshow .swiper-wrapper,
.project-slideshow .swiper-slide,
.project-slideshow .swiper-slide img {
    touch-action: pan-y;
}

.project-slideshow .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Une seule image : pas de slider — scroll de page normal */
.project-slideshow--single .swiper-wrapper {
    display: block;
    width: 100%;
    height: 100%;
}

.project-slideshow--single .swiper-slide {
    width: 100%;
    height: 100%;
}

/* Flèches gauche / droite — carré plein sur fond de page */
.slideshow-arrow {
    position: absolute;
    /* centrées sur l'image, qui est remontée par la gouttière du bas */
    top: calc(50% - var(--gutter-w) / 2);
    transform: translateY(-50%);
    z-index: 10;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--color-white));
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    color: inherit;
    transition: background-color 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out;
}

.slideshow-arrow:hover {
    background: rgb(var(--color-white));
}

.slideshow-arrow .icon {
    font-size: 1.5rem;
    display: block;
}

.slideshow-arrow-prev {
    left: 0;
}

/* l'icône du thème pointe vers la droite : on la retourne pour "précédent" */
.slideshow-arrow-prev .icon {
    transform: rotate(180deg);
}

.slideshow-arrow-prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.slideshow-arrow-next {
    right: 0;
}

.slideshow-arrow-next:hover {
    transform: translateY(-50%) translateX(3px);
}

.slideshow-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
}

.slideshow-arrow[disabled]:hover {
    transform: translateY(-50%);
}

/* Compteur 3 / 12 */
.slideshow-counter {
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    z-index: 10;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
}

.slideshow-counter em {
    font-style: normal;
    margin: 0 0.35em;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .slideshow-arrow .icon {
        font-size: 1.5rem;
    }
}