/* Styles du carrousel */
.mySwiper {
    width: 100%;
    height: 55vh; /* Ajustez la hauteur selon vos besoins */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.carousel-lightbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 80%;
}

.swiper-slide img {
    max-width: 100%; /* L'image ne dépasse jamais la largeur du conteneur */
    max-height: 100%; /* L'image ne dépasse jamais la hauteur du conteneur */
    width: auto; /* Permet de garder les proportions */
    height: auto; /* Permet de garder les proportions */
    object-fit: contain; /* Empêche le rognage et affiche toujours l'image entière */
    border-radius: 10px; /* Optionnel : arrondi des coins */
    cursor: pointer; /* Indique que l’image est cliquable */
    transition: transform 0.3s ease-in-out;
}

.swiper-slide img:hover {
    transform: scale(1.02); /* Léger effet de zoom au survol */
}

/* Styles pour la lightbox (plein écran) */
.mfp-img {
    max-width: 90vw; /* L’image ne dépasse jamais la largeur de l’écran */
    max-height: 90vh; /* L’image ne dépasse jamais la hauteur de l’écran */
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 🔹 Flèches de navigation (noires) */
.swiper-button-next, 
.swiper-button-prev {
    color: black !important; /* Flèches en noir */
    opacity: 0.8;
    transition: opacity 0.3s ease-in-out;
}

.swiper-button-next:hover, 
.swiper-button-prev:hover {
    opacity: 1;
}

/* 🔹 Pagination (points noirs) */
.swiper-pagination-bullet {
    background: black !important; /* Couleur des points */
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

.swiper-pagination-bullet-active {
    background: black !important; /* Couleur du point actif */
    opacity: 1;
}