/* style.css (Simplifié) */

/* 1. Conteneur principal (responsive) */
.slideshow-container {
    width: 100%;                /* Prend toute la largeur disponible */
    max-width: 900px;           /* Limite la taille sur grands écrans */
    aspect-ratio: 16 / 9;       /* Maintient un ratio fixe */
    overflow: hidden; 
    position: relative;         /* Toujours important pour les flèches */
    margin: 0 auto;
}

/* 2. L'image (responsive) */
.slideshow-container img {
    width: 100%;
    height: 100%;
    display: block;             /* S'assure qu'elle remplit bien l'espace */
    object-fit: cover;          /* Garantit que l'image couvre la zone */
}

/* 3. Styles pour les flèches (inchangés) */
.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    cursor: pointer;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px 15px;
    border-radius: 5px;
    user-select: none;
    transition: background-color 0.3s ease;
}

#prev-arrow { left: 10px; }
#next-arrow { right: 10px; }

video {
    width: 100%;          /* La vidéo prend toute la largeur disponible */
    height: auto;         /* La hauteur s'adapte proportionnellement */
    display: block;       /* Évite les espaces indésirables */
    object-fit: cover;    /* Remplit le conteneur sans déformation */
}


.justify-text {
    text-align: justify;
}

.espace-vide {
    margin-top: 32px;
}

.slide-arrow:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

#prev-arrow {
    left: 15px;
}

#next-arrow {
    right: 15px;
}