/* Conteneur des miniatures avec scroll horizontal */
.thumbnails-scroll {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 300px; /* Largeur fixe pour forcer le scroll */
    margin: auto;
    scrollbar-width: none; /* Cache la scrollbar sur Firefox */
}

/* Masquer la scrollbar sur WebKit (Chrome, Safari) */
.thumbnails-scroll::-webkit-scrollbar {
    display: none;
}

/* Miniature active avec une bordure rouge */
.img-thumbnail.active {
    border: 2px solid red;
}

/* ---- Boutons de navigation (Previous & Next) ---- */

/* Styles généraux pour les flèches */
.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3); /* Fond semi-transparent */
    border: none;
    padding: 5px;
    border-radius: 50%;
    width: 40px; /* Réduction de la taille */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease-in-out;
    cursor: pointer;
}

/* Effet de survol */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(0, 0, 0, 0.6); /* Assombrir au survol */
}

/* Flèches plus petites */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

/* Position des boutons */
.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}