/* styles.css */

/* Wrapper de la vidéo */
.video-carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;  /* Prend toute la hauteur de l'écran */
    overflow: hidden; /* Cache les vidéos qui sont en dehors du carrousel */
}

/* Conteneur du carrousel avec une largeur ajustable en fonction du nombre de vidéos */
.video-carousel {
    display: flex;
    transition: transform 1s ease-in-out;
}

/* Vidéos qui glissent */
.video-slide {
    width: 100vw;  /* Chaque vidéo occupe toute la largeur de l'écran */
    height: 100vh; /* Chaque vidéo occupe toute la hauteur de l'écran */
    object-fit: cover; /* Recadre l'image pour qu'elle couvre tout l'écran */
}

/* Animation : faire défiler les vidéos de droite à gauche */
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    33% {
        transform: translateX(-100%);
    }
    66% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Appliquer l'animation */
.video-carousel {
    animation: slide 35s infinite;  /* Boucle infinie avec un délai de 18s */
}