.kpi_slider-container {
    width: 100%;
    overflow-x: auto; /* Permet le défilement horizontal */
    white-space: nowrap; /* Évite les retours à la ligne */
    padding: 20px 0;
    background-color: var(--couleur4); /* Couleur de fond légèrement différente */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    pointer-events: auto;  
    position: relative; /* Assurez-vous que le conteneur est positionné */
    z-index: 10; /* Augmentez la valeur si nécessaire */
}

.kpi_slider {
    display: inline-flex; /* Affiche les éléments en ligne */
}

.kpi_region-box {
    background-color: var(--couleur1);
    border: 1px solid var(--couleur1);
    border-radius: 25px;
    padding: 10px; /* Réduction du padding pour plus de place */
    margin: 10px; /* Espacement entre les boîtes */
    text-align: center;
    width: 200px; /* Largeur fixe pour toutes les boîtes */
    height: 90px; /* Hauteur fixe pour toutes les boîtes */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s; /* Effet d'animation */
    overflow: hidden; /* Empêche le débordement du contenu */
}

.kpi_region-box:hover {
    transform: translateY(-5px); /* Légère élévation au survol */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.kpi_region-box h3 {
    margin: 10px 0;
    font-size: 1.3em; /* Taille de police réduite pour s'adapter */
    color: #333;
}

.kpi_region-box p {
    font-family: 'Arial', sans-serif;
    margin: 5px 0;
    color: var(--couleur4);
    font-size: 1em; /* Taille de police standardisée */
}

.kpi_region-name {
    font-family: 'Arial', sans-serif;
    font-size: 1.2em; /* Ajustement de la taille de police */
    color: var(--couleur2); /* Couleur du texte */
    margin-bottom: 10px; /* Espacement en bas */
    font-weight: bold; /* Texte en gras pour le mettre en avant */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    overflow: hidden; /* Empêche le débordement */
    text-overflow: ellipsis; /* Affiche des points de suspension si le texte déborde */
}

.kpi_empl-count {
    font-family: 'Arial', sans-serif;
    font-size: 1.5em; /* Taille de police agrandie */
    font-weight: bold; /* Texte en gras pour le mettre en avant */
    text-align: center; /* Centrage du texte */
    margin: 10px 0; /* Espacement autour de la div */
    color: var(--couleur4); /* Couleur du texte */
}

.kpi_icons {
    margin-top: 10px; /* Espacement pour les icônes */
}

.kpi_icon {
    width: 20px; /* Largeur de l'icône */
    height: 20px; /* Hauteur de l'icône */
    margin-left: 5px; /* Espacement entre l'icône et le texte */
    vertical-align: middle; /* Alignement vertical */
    color: var(--couleur2); /* Couleur des icônes */
    transition: color 0.3s; /* Effet d'animation pour la couleur */
}

.kpi_icon:hover {
    color: white; /* Couleur au survol */
}

/* Media Queries pour les écrans plus petits */
@media (max-width: 768px) {
    .kpi_slider {
        flex-direction: row; /* Rester en ligne pour les petits écrans */
        overflow-x: auto; /* Permet le défilement horizontal */
    }

    .kpi_region-box {
        width: 150px; /* Réduire la largeur pour les petits écrans */
        height: 120px; /* Ajuster la hauteur pour les petits écrans */
    }
}
#loading {
    text-align: center;
    font-size: 1.2em;
    color: var(--couleur1); /* Couleur de texte */
    margin-bottom: 20px;
}