/* ==========================================================================
   GESTION DU TABLEAU DE BORD (DASHBOARD)
   ========================================================================== */

/* Conteneur principal du tableau de bord avec les marges demandées 
.main-dashboard {
    margin-top: 60px;
    margin-left: 30px;
    margin-right: 30px;
    min-height: calc(100vh - 60px); /* Occupe toute la hauteur disponible 
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
*/

/* Grille principale du tableau de bord (Division 50% / 50%) */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divise l'écran en deux colonnes égales */
    gap: 30px;                     /* Espace de séparation entre les deux zones */
    flex-grow: 1;                  /* Étire la grille para occuper le fond du main */
    align-items: start;
}

/* ==========================================================================
   COLONNE GAUCHE : Zone de la Carte
   ========================================================================== */
.zone-map {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Maintient la zone fixe visuellement si la colonne droite est très longue */
    position: sticky;
    top: 80px; 
}

/* Conteneur de la carte : Clé pour positionner les SVGs à l'avenir */
.conteneur-map {
    position: relative; /* "Ancre" obligatoire pour les éléments en absolute */
    width: 100%;
    max-width: 800px;   /* Évite qu'une carte carrée devienne géante sur les grands écrans */
    margin: 0 auto;     /* Centre la carte dans sa colonne */
    overflow: hidden;
    border-radius: 4px;
}

/* L'image de fond de la carte */
.mapa-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* S'adapte au conteneur carré sans se déformer */
    display: block;
}

/* Calque SVG transparent superposé sur l'image */
.capa-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permet de cliquer "à travers" le SVG si nécessaire */
    z-index: 10;
}

/* ==========================================================================
   COLONNE DROITE : Zone des Données et Graphiques
   ========================================================================== */
.zone-data {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Espacement vertical constant entre les blocs de données */
}

/* Bloc 1 : Filtres */
.bloque-filtros {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Bloc 2 : Graphique (Canvas JS) */
.bloque-grafico {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    /*width: 100%;*/
    min-height: 200px; /* Hauteur minimale recommandée pour que le graphique respire */
}

/* Assurer que le canvas de Chart.js/CanvasJS soit réactif (responsive) */
.bloque-grafico canvas {
    width: 100% !important;
    height: auto !important;
}

/* Bloc 3 : Résultats (Conteneur de Cartes) */
.bloque-resultados {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Grille interne pour les cartes de résultats (Cards) */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Grille de cartes automatique */
    gap: 15px;
    margin-top: 15px;
}

/* Style de base pour chaque carte (Card) */
.card {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    font-weight: 500;
    color: #495057;
}

/* ==========================================================================
   DESIGN RÉACTIF (RESPONSIVE DESIGN)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Sur les écrans moyens/petits, la carte passe en haut et les données en bas */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .zone-map {
        position: relative;
        top: 0;
    }
}