/* Styles pour le carrousel d'indicateurs */
.slick-slider {
    position: unset;
}

.slick-next.slick-arrow {
    right: -55px !important;
}

.slick-prev.slick-arrow {
    left: -55px !important;
}

.indicateurs-carousel .slick-prev:before, .indicateurs-carousel .slick-next:before {
    font-size: 30px !important;
    color: #cf9955 !important;
}

.indicateurs-carousel .slick-dots li.slick-active button:before {
    color: #cf9955 !important;
}

.indicateurs-carousel .slick-dots li button:before {
    color: #cf9955 !important;
}

.indicateurs-container {
    margin: 30px 0;
    width: 100%;
    position: relative;
}

.indicateurs-carousel {
    padding: 20px 0 60px 0; /* Augmentation du padding bottom pour les dots */
    overflow: hidden; /* Cache les éléments qui débordent */
}

.indicateurs-carousel .slick-track {
    display: flex;
    align-items: stretch;
}

.indicateurs-carousel .slick-slide {
    padding: 0 15px;
    box-sizing: border-box;
    height: inherit;
    display: flex;
    flex-direction: column;
    background: none !important;
}

.indicateurs-carousel .slick-slide > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

.indicateurs-carousel .slick-list {
    margin: 0 -15px;
    overflow: visible; /* Cache les éléments qui débordent */
}

.indicateurs-item {
    padding: 20px 0;
    text-align: center;
    background: none;
    border-radius: 5px;
    height: 100%; /* Hauteur fixe à 100% du parent */
    display: flex;
    flex-direction: column;
}

.indicateurs-image {
    margin-bottom: 0;
    margin-top: 0;
}

.indicateurs-image img {
    margin: 0 auto;
    max-width: 100%; /* Assure que l'image ne déborde pas */
    height: auto;
    display: block; /* Élimine l'espace supplémentaire sous l'image */
    border-radius: 40px 40px 0 0;
}

.indicateurs-chiffre {
    font-family: EuclidFlexBold, sans-serif;
    font-size: 35px;
    color: #cf9955;
    margin-bottom: 30px;
    line-height: 1.2; /* Meilleure gestion de la hauteur de ligne */
}


.slide-subtitle {
    font-size: 25px;
}

.indicateurs-wording {
    font-family: EuclidFlex, sans-serif;
    font-size: 1.1em;
    color: #0A517C;
    line-height: 1.4;
    font-weight: 500;
    padding: 20px;
    margin: 0;
    background: #ffffff;
    flex-grow: 1;
    text-align: left;
}

.indicateurs-content {
    margin-top: 15px;
    font-size: 0.9em;
}

/* Personnalisation des flèches */
.indicateurs-carousel .slick-prev,
.indicateurs-carousel .slick-next {
    z-index: 10;
    width: 40px;
    height: 40px;
}

.indicateurs-carousel .slick-prev {
    left: -25px;
}

.indicateurs-carousel .slick-next {
    right: -25px;
}

.indicateurs-carousel .slick-prev:before,
.indicateurs-carousel .slick-next:before {
    color: #333;
    font-size: 24px;
}

/* Personnalisation des points de navigation */
.indicateurs-carousel .slick-dots {
    bottom: -25px; /* Position des dots plus basse */
    position: absolute;
    width: 100%;
}

.indicateurs-carousel .slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.indicateurs-carousel .slick-dots li button:before {
    font-size: 12px;
    color: #aaa; /* Couleur par défaut des dots */
}

.indicateurs-carousel .slick-dots li.slick-active button:before {
    color: #333; /* Couleur du dot actif */
    opacity: 1;
}

.indicateurs-box-content {
    border-radius: 40px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 767px) {
    .indicateurs-item {
        padding: 15px 0;
    }

    .indicateurs-chiffre {
        font-size: 2em;
    }

    .indicateurs-carousel .slick-prev {
        left: -15px;
    }

    .indicateurs-carousel .slick-next {
        right: -15px;
    }

    .slick-next.slick-arrow,
    .slick-prev.slick-arrow {
        display: none !important;
    }
}