/* Styles pour le carousel */

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 500px;
    margin: 40px auto;
    overflow: hidden;
    border-radius: 10px;
}

.carousel-slide {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide img {
    max-width: 700px;
    height: 400px; 
    object-fit: cover;
    flex-shrink: 0;
}

.carousel-slide img, 
.carousel-slide video {
    width: 100%;
    height: 400px; /* Set a consistent height for carousel images */
    object-fit: cover;
    flex-shrink: 0;
}

.carousel-prev,
.carousel-next {
    /* Style de base */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgb(250, 249, 249);
    color: rgb(7, 7, 7);
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%; /* Ajoute des coins arrondis */
    width: 40px; /* Donne une largeur fixe */
    height: 40px; /* Donne une hauteur fixe */
    font-size: 1.5em; /* Agrandit le texte */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

/* Ajoute un effet de survol pour plus de clarté */
.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.carousel-prev {
    left: 60px;
}

.carousel-next {
    right: 70px;
}