/* Custom Gallery Widget Styles */
.custom-gallery-container {
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Main Carousel - Image principale */
.gallery-top {
    height: 500px; /* Hauteur fixe pour le carrousel principal */
    position: relative;
    margin-bottom: 15px; /* Augmentation de l'espace */
}

.gallery-top .swiper-wrapper {
    box-sizing: border-box;
    height: 100%;
}

.gallery-top .swiper-slide {
    width: 100% !important;
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

.gallery-top img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit tout l'espace */
    object-position: center; /* L'image est centrée */
}

/* Navigation - Flèches */
.swiper-button-next,
.swiper-button-prev {
    color: #f1f1f1; /* Gris clair */
    background: none; /* Supprime l'arrière-plan */
    border-radius: 0;
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; /* Taille réduite */
    height: 30px;
}

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

/* Thumbnails Carousel - Vignettes */
.gallery-thumbs {
    width: 100%;
    overflow: hidden;
    height: 150px; /* Calculé pour un ratio 4:3 avec une largeur de 200px (200 * 0.75) */
}

.gallery-thumbs .swiper-wrapper {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 100%;
}

.gallery-thumbs .swiper-slide {
    width: 200px; /* Largeur de la vignette */
    opacity: 0.4;
    cursor: pointer;
    height: 100%;
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}