#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;
    background: #000;
}


/* Conteneur interne */
#carousel_index .carousel-inner {
    width: 100%;
}


/* Slides */
#carousel_index .carousel-item {
    width: 100%;
}


/* ============================= */
/* VIDEO */
/* ============================= */

#carousel_index .carousel-item video {
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    vertical-align: middle;
    background: #000;
    transition: transform 0.5s ease;
}


/* ============================= */
/* IMAGES CLASSIQUES */
/* ============================= */

#carousel_index .carousel-item img:not(.docto-logo-animation) {
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}


/* ============================= */
/* GIF / LOGO DOCTOASSIST */
/* ============================= */

#carousel_index .carousel-item img.docto-logo-animation {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    padding: 0;
    margin: 0 auto;

    /*
     * Important :
     * contain évite de zoomer / recadrer le GIF
     */
    object-fit: contain;
    object-position: center;

    /*
     * Pas de zoom au survol
     */
    transform: none;
}


/* Curseur cliquable */
.active-pointer {
    cursor: pointer;
}


/* Léger zoom uniquement sur vidéo et images classiques */
#carousel_index .carousel-item video:hover,
#carousel_index .carousel-item img:not(.docto-logo-animation):hover {
    transform: scale(1.02);
}


/* Le GIF DoctoAssist ne zoome jamais */
#carousel_index .carousel-item img.docto-logo-animation:hover {
    transform: none;
}


/* ============================= */
/* FLECHES */
/* ============================= */

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background: none !important;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.carousel-control-prev-icon::after {
    content: '❮';
    color: #34657f;
}

.carousel-control-next-icon::after {
    content: '❯';
    color: #34657f;
}


/* ============================= */
/* INDICATEURS */
/* ============================= */

#carousel_index .carousel-indicators button {
    width: 20px;
    height: 4px;
    border-radius: 2px;
    margin: 0 4px;
    background-color: #ffffff !important;
    border: none;
    opacity: 1;

    transition:
        background-color 0.3s ease,
        width 0.3s ease;
}


#carousel_index .carousel-indicators .active {
    background-color: #203f4f !important;
    width: 30px;
}


/* ============================= */
/* RESPONSIVE */
/* ============================= */


/* Mobile très petit */
@media (max-width: 400px) {

    #carousel_index {
        max-width: 95%;
        height: auto;
    }

    #carousel_index .carousel-item video,
    #carousel_index .carousel-item img:not(.docto-logo-animation) {
        width: 100%;
        height: auto;
        max-height: 210px;
        object-fit: cover;
    }

    #carousel_index .carousel-item img.docto-logo-animation {
        width: 100%;
        height: auto;
        max-height: 210px;
        object-fit: contain;
    }

}


/* Mobile */
@media (min-width: 401px) and (max-width: 767.98px) {

    #carousel_index {
        max-width: 88%;
        height: auto;
    }

    #carousel_index .carousel-item video,
    #carousel_index .carousel-item img:not(.docto-logo-animation) {
        width: 100%;
        height: auto;
        max-height: 267px;
        object-fit: cover;
    }

    #carousel_index .carousel-item img.docto-logo-animation {
        width: 100%;
        height: auto;
        max-height: 267px;
        object-fit: contain;
    }

}


/* Tablette */
@media (min-width: 768px) and (max-width: 992px) {

    #carousel_index {
        max-width: 77%;
        height: auto;
    }

    #carousel_index .carousel-item video,
    #carousel_index .carousel-item img:not(.docto-logo-animation) {
        width: 100%;
        height: auto;
        max-height: 315px;
        object-fit: cover;
    }

    #carousel_index .carousel-item img.docto-logo-animation {
        width: 100%;
        height: auto;
        max-height: 315px;
        object-fit: contain;
    }

}


/* Petit desktop */
@media (min-width: 993px) and (max-width: 1189px) {

    #carousel_index {
        max-width: 70%;
        height: auto;
    }

    #carousel_index .carousel-item video,
    #carousel_index .carousel-item img:not(.docto-logo-animation) {
        width: 100%;
        height: auto;
        max-height: 375px;
        object-fit: cover;
    }

    #carousel_index .carousel-item img.docto-logo-animation {
        width: 100%;
        height: auto;
        max-height: 375px;
        object-fit: contain;
    }

}


/* Desktop */
@media (min-width: 1190px) and (max-width: 1399px) {

    #carousel_index {
        max-width: 70%;
        height: auto;
    }

    #carousel_index .carousel-item video,
    #carousel_index .carousel-item img:not(.docto-logo-animation) {
        width: 100%;
        height: auto;
        max-height: 450px;
        object-fit: cover;
    }

    #carousel_index .carousel-item img.docto-logo-animation {
        width: 100%;
        height: auto;
        max-height: 450px;
        object-fit: contain;
    }

}


/* Grand écran */
@media (min-width: 1400px) {

    #carousel_index {
        max-width: 74%;
        height: auto;
    }

    #carousel_index .carousel-item video,
    #carousel_index .carousel-item img:not(.docto-logo-animation) {
        width: 100%;
        height: auto;
        max-height: 550px;
        object-fit: cover;
    }

    #carousel_index .carousel-item img.docto-logo-animation {
        width: 100%;
        height: auto;
        max-height: 550px;
        object-fit: contain;
    }

}