#carousel_index {
    border-radius: 15px;                   
    overflow: hidden;                      
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    margin: 1rem auto;
    padding: 0;
    position: relative; /* Utilisation de relative pour permettre l'alignement */
    display: flex; /* Ajout de Flexbox */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
}


/* Images et GIF dans le carrousel */
#carousel_index .carousel-item img {
    padding: 0;
    object-fit: cover; /* Assurer que l'image couvre entièrement l'espace */
    display: block;
    margin: auto;
    transition: transform 0.5s ease;
}

.active-pointer{
    cursor: pointer;
}

/* Survol des images */
#carousel_index .carousel-item img:hover {
    transform: scale(1.02);
}

/* Flèches personnalisées */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background: none !important;       /* Supprime toute icône de fond */
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.carousel-control-prev-icon::after {
    content: '❮';
    color: #34657f;     /* Couleur flèche précédente */
}

.carousel-control-next-icon::after {
    content: '❯';
    color: #34657f;   /* Couleur flèche suivante */
}

/* Tous les indicateurs en forme de petits traits */
#carousel_index .carousel-indicators button {
    width: 20px;           /* Longueur du trait */
    height: 4px;           /* Épaisseur du trait */
    border-radius: 2px;    /* Coins légèrement arrondis */
    margin: 0 4px;         /* Espace entre les traits */
    background-color: #ffffff !important; /* Bleu clair pour inactifs */
    border: none;          /* Pas de bordure */
    opacity: 1;
    transition: background-color 0.3s ease, width 0.3s ease;
}

/* Indicateur actif */
#carousel_index .carousel-indicators .active {
    background-color: #203f4f !important; /* Bleu foncé pour actif */
    width: 30px; /* Le trait de l’actif peut être plus long si tu veux */
}

/* Responsive */

/* Mobile */

@media (max-width: 400px) {
    #carousel_index {
        max-width: 95%;
        height: auto;
    } 
    #carousel_index .carousel-item img {
        width: auto; /* L'image prend toute la largeur */
        max-width:100%;
        height: auto; /* L'image prend toute la hauteur */
        max-height: 210px;
    }
}

@media (min-width: 401px) and (max-width: 767.98px) {
    #carousel_index {
        max-width: 88%;
        height: auto;
    } 
    #carousel_index .carousel-item img {
        width: auto; /* L'image prend toute la largeur */
        max-width:100%;
        height: auto; /* L'image prend toute la hauteur */
        max-height: 267px;
    }
}

/* Tablette */
@media (min-width: 768px) and (max-width: 992px) {
    #carousel_index {
        max-width: 77%;
        height: auto;
    }    
    #carousel_index .carousel-item img {
        width: auto; /* L'image prend toute la largeur */
        max-width:100%;
        height: auto; /* L'image prend toute la hauteur */
        max-height: 315px;
    }
}

@media (min-width: 993px) and (max-width: 1189px) {
    #carousel_index {
        max-width: 70%;
        height: auto;
    }    
    #carousel_index .carousel-item img {
        width: auto; /* L'image prend toute la largeur */
        max-width:100%;
        height: auto; /* L'image prend toute la hauteur */
        max-height: 375px;
    }
}


@media (min-width: 1190px) and (max-width: 1399px) {
    #carousel_index {
        max-width: 70%;
        height: auto;
    }    
    #carousel_index .carousel-item img {
        width: auto; /* L'image prend toute la largeur */
        max-width:100%;
        height: auto; /* L'image prend toute la hauteur */
        max-height: 450px;
    }
}

@media (min-width: 1400px){
    #carousel_index {
        max-width: 74%;
        height: auto;
    }    
    #carousel_index .carousel-item img {
        width: auto; /* L'image prend toute la largeur */
        max-width:100%;
        height: auto; /* L'image prend toute la hauteur */
        max-height: 550px;
    }
}