/**
 * carto - Design Components in CSS, JS and HTML pour les cartes su portail
 * @version v1.1.0
 * 
 */

 @charset "UTF-8";

 h1 {
    font-size: 24px;
  }
  .title {
    font-size: 32px; /* Taille de police augmentée */
    font-weight: bold; /* Texte en gras */
    color: #9898f8; /* Couleur verte */
  }
  .stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    margin: 10px 0; /* Espacement autour des paragraphes */
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .titre1 {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    font-size: 50px; /* Taille de police augmentée */
    font-weight: bold; /* Texte en gras */
    color: #9898f8; /* Couleur bleu */
  }
  .stats p {
    /*margin: 10px 0; /* Espacement autour des paragraphes */
    flex: 1 1 200px;
    text-align: center;
    margin-bottom: 20px; /* Ajoute un espace de 20px entre chaque paragraphe */
  }
  .stats span.number {
    font-size: 64px; /* Taille de police très augmentée */
  }
  .charts-container {
      width: 100%; /* Utilisation de 100% de la largeur */
      max-width: 800px; /* Largeur maximale facultative */
      margin: 0 auto; /* Centrer les conteneurs */
  }
  canvas {
    max-width: 100%;
    max-height: 800px;
    height: auto;
  }    
.fr-col-6 {
  width: 80%; /* Ajuster la largeur des colonnes */
  margin-bottom: 20px; /* Ajouter un espace entre les colonnes */
}
.fr-card {
  width: calc(100% - 20px); /* Calculer la largeur de la carte en tenant compte des marges */
}
.fr-card__body {
  padding: 20px; /* Ajuster le rembourrage pour maximiser l'espace de la carte */
}
.responsive-chartjs {
  width: 100%; /* Faire en sorte que les graphiques prennent la largeur totale de leur conteneur */
  height: 100%; /* Augmenter la hauteur des graphiques */
}  

path {
          stroke: #fff;
          /*fill: lightgrey; /* valeur par defaut*/
      }
      path:hover {
          fill: orange; /* sur selection regiion*/
      }
      .legend text {
          font-family: sans-serif;
          font-size: 12px;
      }

@media only screen and (max-width: 768px) {
  .fr-col-6 {
    width: 100%; /* Forcer la largeur à 100% sur les écrans étroits */
    margin-bottom: 20px; /* Ajouter un espace entre les colonnes sur les écrans étroits */
  }
  .fr-card {
    width: calc(100% - 20px); /* Réduire la largeur de la carte pour tenir compte des marges */
  }
  .fr-card__body {
    padding: 10px; /* Réduire le rembourrage pour maximiser l'espace de la carte */
  }
  .responsive-chartjs {
    width: 100%; /* Faire en sorte que les graphiques prennent la largeur totale de leur conteneur */
    height: 800px; /* Augmenter la hauteur des graphiques sur les smartphones */
  }
  .stats p {
  flex-basis: 100%;
  }
}