@keyframes tonext {
    75% { top: 0; }
    95% { top: 100%; }
    98% { top: 100%; }
    99% { top: 0; }
}

@keyframes tostart {
    75% { top: 0; }
    95% { top: -300%; }
    98% { top: -300%; }
    99% { top: 0; }
}

@keyframes snap {
    96% { scroll-snap-align: center; }
    97% { scroll-snap-align: none; }
    98% { scroll-snap-align: none; }
    99% { scroll-snap-align: center; }
}

* {
    box-sizing: border-box;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
}

.carousel {
    perspective: 100px;
}

/* Style par défaut : défilement vertical */
.carousel__viewport {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

.carousel__slide {
    position: relative;
    height: 100vh;
    width: 100%; /* S'assure que chaque diapositive prend 100% de la largeur */
}

.carousel__slide img {
    cursor: pointer; /* Changer le curseur pour indiquer que c'est cliquable */
}

.carousel__snapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
}

@media (hover: hover) {
    .carousel__slide:last-child .carousel__snapper {
        animation-name: tostart, snap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel__snapper {
        animation-name: none;
    }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
    animation-name: none;
}

/* Styles pour tablette et mobile (max 768px) : défilement horizontal */
@media (max-width: 768px) {
    .carousel {
        width: 100vw; /* Prendre 100% de la largeur sur mobile */
        height: 100vh; /* Hauteur totale de la fenêtre */
    }

    .carousel__viewport {
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        height: 100%; /* Chaque diapositive prendra toute la hauteur */
    }

    .carousel__slide {
        flex: 0 0 100vw; /* Chaque diapositive prend 100% de la largeur */
        height: 100vh; /* Chaque diapositive prend toute la hauteur */
    }
}

/* Style pour l'aperçu en plein écran */
.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../../assets/images/back_default.svg") 0 0/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    display: none; /* Caché par défaut */
}

.fullscreen .carousel__viewport {
    display: flex;
    flex-direction: row; /* Alignement horizontal */
    height: 100%; /* Prendre 100% de la hauteur */
    scroll-snap-type: x mandatory; /* Snap horizontal */
}

.fullscreen .carousel__slide {
    flex: 0 0 100vw; /* Chaque diapositive en plein écran prend toute la largeur */
    height: 100vh; /* Chaque diapositive en plein écran prend toute la hauteur */
}

.fullscreen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: url('https://fr.louisvuitton.com/static_lvfront/zoom/zoom-in.svg'), auto;
}

.fullscreen .nav-btn button:hover,
.fullscreen .menu button:hover {
    cursor: pointer; /* Curseur pour les boutons */
}

/* Optionnel : Curseur pour les actions de zoom */
.zoomed {
    cursor: move; /* Utilisé pour déplacer l'image lorsqu'elle est zoomée */
}
.close {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: white;
    color: gray;
    font-size: 2em;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    z-index: 1001; /* Au-dessus de la superposition */
}

.nav-btn {
    position: absolute;