body {
    background-color: #f4f6f9;
    font-family: Arial, sans-serif;
}
.dashboard {
    padding: 30px;
}
.vignette {
    padding: 20px;
    border-radius: 8px;
    color: white;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.vignette h3 { margin: 10px 0; }
.vignette-blue { background-color: #007bff; }
.vignette-green { background-color: #28a745; }
.vignette-yellow { background-color: #ffc107; color: #000; }
.vignette-red { background-color: #dc3545; }
.vignette-purple { background-color: #6f42c1; }
.vignette-gray { background-color: #bfbfbf; }
.vignette-brown { background-color: #9b4200;}
.vignette-orange { background-color: #ea7022;}
.graph-container1 {
    margin: 30px 0;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Flexbox pour organiser les graphiques */
.graph-container-wrapper {
    display: flex; /* Utilisation de flexbox */
    gap: 20px; /* Espacement entre les conteneurs */
    flex-wrap: wrap; /* Permet de passer sur une nouvelle ligne si l'espace est insuffisant */
    justify-content: space-between; /* Distribution égale des conteneurs */
    margin: 30px 0;
}

.graph-container {
    flex: 1 1 calc(33.33% - 20px); /* 3 graphiques par ligne (ajustez calc pour changer le nombre) */
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    min-width: 300px; /* Taille minimale pour chaque graphique */
}

/* ==========================================================================
   SLIDER DES IMAGES DE BANNIÈRE (CORRIGÉ & AGRANDI)
   ========================================================================== */
.image-slider {
    width: 100%;
    height: 450px; /* 💡 Augmenté à 450px pour une zone d'affichage plus grande et imposante */
    overflow: hidden;
    margin-top: 40px;
    margin-bottom: 20px;
    position: relative;
    border-radius: 16px; /* Coins plus modernes et arrondis */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Ombre portée douce et professionnelle */
}

.image-wrapper {
    display: flex;
    width: 400%; /* Largeur cumulée pour vos 4 images (400%) */
    height: 100%;
    animation: slide 16s cubic-bezier(0.4, 0, 0.2, 1) infinite; /* Animation plus douce */
}

.image {
    flex: 0 0 25%; /* Chaque conteneur d'image prend exactement 1/4 du wrapper */
    width: 25%;
    height: 100%;
    overflow: hidden;
}

.image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajustement parfait sans déformation de l'image */
    transition: transform 0.5s ease; /* Préparation de l'effet au survol */
}

/* Effet interactif : zoom très léger sur l'image quand l'utilisateur la survole */
.image:hover img {
    transform: scale(1.03);
}

/* 🔄 Animation CSS corrigée pour un défilement propre à 4 images */
@keyframes slide {
    0%, 20% {
        transform: translateX(0);
    }
    25%, 45% {
        transform: translateX(-25%);
    }
    50%, 70% {
        transform: translateX(-50%);
    }
    75%, 95% {
        transform: translateX(-75%);
    }
    100% {
        transform: translateX(0);
    }
}