/* =========================================================================
   Observatoire BSTP — Cartographie des pôles économiques
   Chargé uniquement par /cartographie, APRÈS leaflet.css et MarkerCluster.css.
   Reprend les jetons du design system (main.css) : aucune couleur de marque
   n'est écrite en dur ici. Seules les couleurs de type de pôle le sont, et
   elles arrivent en style inline depuis STYLE_POLE (app.py) — une seule table.
   ========================================================================= */

/* ---- Barre de filtres ---------------------------------------------------- */
.carte-barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.carte-filtres { display: flex; flex-wrap: wrap; gap: 9px; }

.carte-filtre {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; cursor: pointer; transition: .15s;
}
.carte-filtre:hover { border-color: var(--primary); color: var(--primary); }
.carte-filtre[aria-pressed="true"] {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.carte-filtre .cf-puce { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.carte-filtre .cf-nb {
  font-size: 11px; font-weight: 800; background: var(--bg-soft); color: var(--muted);
  border-radius: 999px; padding: 1px 7px; min-width: 22px; text-align: center;
}
.carte-filtre[aria-pressed="true"] .cf-nb { background: rgba(255,255,255,.2); color: #fff; }
.carte-filtre[data-vide="1"] { opacity: .45; }

.carte-recherche { position: relative; margin-left: auto; }
.carte-recherche i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--muted); pointer-events: none;
}
.carte-recherche input {
  border: 1px solid var(--ligne-champ); border-radius: 999px;
  padding: 9px 14px 9px 32px; font: inherit; font-size: 13px; width: 230px;
}
/* Meme convention de focus que recherche.css : outline de 2 px, decale de 2 px. */
.carte-recherche input:focus { outline: 2px solid var(--accent-texte); outline-offset: 2px; }

/* ---- Grille carte + panneau ---------------------------------------------- */
/* Hauteur souple plutôt que figée : sur grand écran la carte occupe l'espace,
   sur mobile l'empilement des deux colonnes reste parcourable. */
.carte-grid {
  display: grid; grid-template-columns: 1.9fr 1fr; gap: 22px; align-items: stretch;
  --carte-h: clamp(420px, 62vh, 640px);
}

/* ---- Colonne carte ------------------------------------------------------- */
.carte-hote {
  position: relative; isolation: isolate; overflow: hidden;
  height: var(--carte-h); padding: 0;
}
.carte-leaflet { position: absolute; inset: 0; }
/* Fond indigo : c'est ce que l'on voit pendant le chargement des tuiles OSM,
   ce qui rend le remplacement continu, sans flash blanc. */
.carte-leaflet .leaflet-container { background: var(--primary); font-family: inherit; }

.carte-voile {
  position: absolute; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--primary); color: rgba(255,255,255,.82);
  font-size: 12px; font-weight: 700; letter-spacing: .35em; text-transform: uppercase;
}
.carte-voile[hidden] { display: none; }

.carte-outils {
  position: absolute; right: 12px; top: 12px; z-index: 500;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
}
.carte-bouton {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--primary);
  background: rgba(255,255,255,.95); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(20,30,70,.18);
}
.carte-bouton:hover { color: var(--accent-texte); border-color: var(--accent-texte); }
.carte-bouton[aria-pressed="true"] {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.carte-bouton[aria-pressed="true"]:hover { background: var(--primary-600); color: #fff; }
.carte-bouton[hidden] { display: none; }

.carte-source {
  position: absolute; left: 12px; bottom: 22px; z-index: 500;
  background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: 11px; font-weight: 700; color: var(--muted);
  box-shadow: 0 2px 10px rgba(20,30,70,.14);
}

/* ---- Colonne panneau ----------------------------------------------------- */
.carte-panneau {
  display: flex; flex-direction: column; height: var(--carte-h);
  overflow: hidden; padding: 0;
}
.cp-tete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.cp-tete h3 { margin: 0; font-size: 14px; font-weight: 800; }
.cp-tete span { font-size: 11px; color: var(--muted); }

.cp-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.cp-ville + .cp-ville { border-top: 1px solid var(--line); }
.cp-ville[hidden] { display: none; }

.cp-ville-tete {
  display: flex; align-items: center; gap: 11px; width: 100%;
  font: inherit; text-align: left; background: none; border: 0;
  padding: 12px 18px; cursor: pointer;
}
.cp-ville-tete:hover { background: var(--bg-soft); }
.cp-ville-tete .cp-chev {
  font-size: 11px; color: var(--muted); transition: transform .18s; flex: none;
}
.cp-ville-tete[aria-expanded="true"] .cp-chev { transform: rotate(90deg); color: var(--accent-texte); }
.cp-ville-nom { flex: 1; min-width: 0; }
.cp-ville-nom b {
  display: block; font-size: 14px; font-weight: 800; color: var(--primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-ville-tete[aria-expanded="true"] .cp-ville-nom b { color: var(--accent-texte); }
.cp-ville-nom span { font-size: 11px; color: var(--muted); }
.cp-ville-nb {
  min-width: 26px; height: 26px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: var(--bg-soft); color: var(--muted);
  padding: 0 8px;
}
.cp-ville-tete[aria-expanded="true"] .cp-ville-nb { background: var(--accent-fort); color: #fff; }

.cp-poles { list-style: none; margin: 0; padding: 0 0 6px; }
.cp-poles[hidden] { display: none; }
.cp-poles li[hidden] { display: none; }

.cp-pole {
  display: flex; align-items: center; gap: 11px; width: 100%;
  font: inherit; text-align: left; background: none; border: 0;
  padding: 9px 18px 9px 38px; cursor: pointer;
}
.cp-pole:hover { background: var(--bg-soft); }
.cp-pole[aria-current="true"] {
  background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--accent-fort);
}
.cp-pole-icone {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.cp-pole-nom { flex: 1; min-width: 0; }
.cp-pole-nom b {
  display: block; font-size: 13px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-pole-nom span { font-size: 11px; color: var(--muted); }
/* Icône de ciblage, et non une flèche : le clic recentre la carte, il ne mène
   à aucune fiche — il n'existe pas de page détail par pôle. */
.cp-pole-cible { font-size: 12px; color: var(--muted); flex: none; }
.cp-pole:hover .cp-pole-cible, .cp-pole[aria-current="true"] .cp-pole-cible { color: var(--accent-texte); }

.cp-vide { padding: 26px 18px; text-align: center; color: var(--muted); font-size: 13px; }
.cp-vide i { display: block; font-size: 22px; margin-bottom: 10px; opacity: .5; }
.cp-vide[hidden] { display: none; }

/* ---- Marqueurs ----------------------------------------------------------- */
.pole-marqueur-point {
  display: block; width: 16px; height: 16px; border-radius: 999px;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); position: relative;
}
.pole-marqueur-halo {
  position: absolute; inset: -4px; border-radius: 999px; opacity: .4;
  animation: pole-halo 2s ease-out infinite;
}
@keyframes pole-halo {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---- Amas ---------------------------------------------------------------- */
/* La densité est doublement encodée : taille (40/50/62 px) et couleur. Chaque
   fond porte du blanc à au moins 5,3:1. */
/* NE JAMAIS poser `position` ici. Leaflet place ses marqueurs avec
   `.leaflet-marker-icon { position: absolute }` — un sélecteur à une seule
   classe, donc de MÊME spécificité que `.bstp-amas`. Comme cette feuille est
   chargée après leaflet.css, tout `position` déclaré ici l'emporte : les amas
   repassent dans le flux normal, leur `transform` ne les positionne plus depuis
   l'origine du calque, et ils dérivent — en mer, au sud d'Abidjan. Les points
   isolés y échappaient, `position` n'étant posé que sur leur span interne, ce
   qui rendait le défaut asymétrique et facile à manquer. */
.bstp-amas {
  border-radius: 999px; color: #fff; font-weight: 800;
  border: 2px solid rgba(255,255,255,.85); box-sizing: border-box;
}
.bstp-amas-nb { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; }
.bstp-amas--sm { background: var(--primary);        font-size: 13px; }
.bstp-amas--md { background: var(--accent-fort);    font-size: 15px; }
.bstp-amas--lg { background: var(--accent-profond); font-size: 17px; }

/* ---- Popup --------------------------------------------------------------- */
.carte-leaflet .leaflet-popup-content-wrapper {
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0;
}
.carte-leaflet .leaflet-popup-content { margin: 0; padding: 15px 18px; font-size: 13px; }
.pole-popup-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.pole-popup-titre { display: block; font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.pole-popup-txt { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 7px 0 8px; }
.pole-popup-meta { color: var(--primary); font-size: 12px; font-weight: 700; }

/* ---- Plein écran ---------------------------------------------------------- */
/* Deux chemins mènent ici : l'API Fullscreen quand le navigateur l'accorde, et un
   repli en position fixe sinon (iframe sans allowfullscreen, refus de
   l'utilisateur). Le JS pose `--actif` dans les deux cas, ce qui évite d'écrire
   `:fullscreen` en CSS : un navigateur qui ne connaît pas ce sélecteur jetterait
   toute la règle, y compris la partie qu'il sait appliquer. */
.carte-plein--actif {
  background: var(--bg); padding: 14px;
  display: flex; flex-direction: column; gap: 0;
}
.carte-plein--simule { position: fixed; inset: 0; z-index: 2000; overflow: auto; }
/* La grille prend toute la hauteur restante ; min-height:0 est indispensable,
   sans quoi un enfant en overflow-y refuse de rétrécir sous sa taille de contenu. */
.carte-plein--actif .carte-grid { flex: 1; min-height: 0; --carte-h: 100%; }

/* Le panneau n'a pas besoin de grandir avec l'écran : sa colonne passe d'une part
   proportionnelle à une largeur FIXE, et tout l'espace gagné revient au fond de
   carte. L'écart croît avec la taille de l'écran — c'est en plein écran qu'un
   panneau proportionnel coûte le plus cher. Borné à min-width: 901px pour ne pas
   l'emporter, par sa spécificité à deux classes, sur l'empilement des petits
   écrans déclaré plus bas. */
@media (min-width: 901px) {
  .carte-plein--actif .carte-grid { grid-template-columns: 1fr 300px; gap: 14px; }
}
.carte-plein--actif .carte-hote,
.carte-plein--actif .carte-panneau { height: 100%; }

/* Le corps ne défile plus derrière le repli en position fixe. */
body.carte-verrouillee { overflow: hidden; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .carte-grid { grid-template-columns: 1fr; --carte-h: clamp(360px, 55vh, 520px); }
  /* Empilées en plein écran, les deux colonnes se partagent la hauteur : la carte
     en garde la plus grande part, le panneau garde de quoi lister ses villes.
     Hauteurs EXPLICITES des deux côtés : en `auto`, le panneau s'effondre sur son
     en-tête, sa liste étant en `flex: 1` dans un conteneur sans hauteur. */
  .carte-plein--actif .carte-grid { --carte-h: auto; }
  .carte-plein--actif .carte-hote { height: 58vh; }
  .carte-plein--actif .carte-panneau { height: 32vh; }
  .carte-recherche { margin-left: 0; width: 100%; }
  .carte-recherche input { width: 100%; }
}