/*=======================================================================
  map.css — Point d'entrée CSS de la page carte (map.html)
=========================================================================

  Ce fichier contient :
    1. Imports des sous-fichiers thématiques
    2. Layout racine de l'application (.map-app)
    3. Classes utilitaires propres à la carte

  Sous-fichiers :
    - map-panel.css     → Panneau latéral, recherche, indicateurs, messages
    - map-carto.css     → Vue carte, contrôles (zoom, années, opacité,
                          fonds de carte), légende thermique, copyright
    - map-graphs.css    → Modal et graphiques ECharts
    - map-mobile.css    → Mobile / tablette (< 1200px) : carte plein écran,
                          panneau glissant, bandeau de recherche, légende repliable

  Remplace les anciens fichiers : map-style.css, graphs.css, mask.css,
  modal.css (la modale de formulaire relève de la page offres).

=========================================================================*/

@import "map-panel.css";
@import "map-carto.css";
@import "map-graphs.css";
@import "map-mobile.css";   /* en dernier : surcharge l'affichage < 1200px */


/*========================
== Layout racine        ==
========================*/
.map-app {
  position: absolute;
  top: 5rem;
  background-color: white;
  left: 0;
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
  overflow: hidden;
  height: calc(100% - 120px);
  font-family: var(--font-ubuntu) !important;
}


/*==================================
== Utilitaires propres à la carte ==
==================================*/
.small-text {font-size: 12px;}

.letter-spacing {letter-spacing: 3px;}

.big-text {
  font-weight: 300;
  font-size: clamp(2rem, 2.5vw, 4rem);
}

@media screen and (max-width: 1200px) {
  .big-text {
    font-size: 4rem;
  }
}

@media screen and (max-width: 450px) {
  .big-text {
    font-size: 3rem;
  }
}

.bold-text    { font-weight: 800; font-size: 1em; }
.uppercase    { text-transform: uppercase; }

.standard-text {
  font-size: 12px;
  max-width: 50%;
}

.custom-icon        { color: var(--color-secondary); }
.white-icon         { color: white; }

.text-center { text-align: center; }