/* ============================================================
   WiNet — Carte publique des zones (/carte/)
   Chargée par cette page seulement : le reste du site n'a pas à
   payer le poids d'une feuille de carte.
   Repose sur les jetons de site.css (--ciel, --encre, --r-lg…).
   ============================================================ */

/* -- 1. Barre de filtres ------------------------------------- */
.carte-outils{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  padding:18px;background:#fff;border:1px solid var(--ligne);
  border-radius:var(--r-md);box-shadow:var(--ombre-sm);
}
.carte-champ{display:flex;flex-direction:column;gap:6px;flex:1 1 190px;min-width:0}
.carte-champ label{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-55)}
.carte-champ input,.carte-champ select{
  font:inherit;font-size:15px;color:var(--encre);background:#fff;
  border:1px solid var(--ligne-forte);border-radius:var(--r-xs);
  /* 44 px de haut : la cible tactile minimale, sur un téléphone modeste
     comme sur un grand écran. */
  min-height:44px;padding:9px 12px;width:100%;
}
.carte-champ input:focus,.carte-champ select:focus{outline:3px solid var(--ciel);outline-offset:1px;border-color:var(--ciel)}
/* `display:block` et non `flex` : le compteur est une PHRASE, dont le nombre
   fait partie. En flex, le <b> devient une colonne et « 18 » se détache du
   texte qu'il compte. */
.carte-compte{flex:1 1 100%;font-size:14px;color:var(--encre-55);min-height:22px}
.carte-compte b{color:var(--encre)}

/* -- 2. La carte --------------------------------------------- */
.carte-cadre{
  position:relative;margin-top:16px;
  border:1px solid var(--ligne);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--ombre-md);background:var(--ciel-clair);
}
#carte-zones{
  /* Hauteur en dvh : sur mobile, vh compte la barre d'adresse et la carte
     déborde sous le pouce. Repli en vh pour les navigateurs anciens. */
  height:60vh;height:min(60dvh,620px);min-height:340px;width:100%;
  background:var(--ciel-clair);
}
.leaflet-container{font-family:'Inter',system-ui,sans-serif;font-size:14px}
.leaflet-container a{color:var(--ciel-profond)}
.leaflet-control-attribution{font-size:11.5px;background:rgba(255,255,255,.86)}
/* Par défaut Leaflet met ses contrôles (800) au-dessus des bulles (700) : sur
   un écran étroit, le bouton de zoom se posait sur le titre de la bulle et sur
   sa croix de fermeture. La bulle est transitoire et porte l'information —
   c'est elle qui doit passer devant. */
.leaflet-popup-pane{z-index:900}
.leaflet-popup-content-wrapper{border-radius:var(--r-sm);box-shadow:var(--ombre-md)}
.leaflet-popup-content{margin:14px 16px;line-height:1.5}

/* Voile d'état posé PAR-DESSUS la carte : chargement, panne, annuaire vide.
   Une carte muette sans explication se lit comme une page cassée. */
.carte-etat{
  /* Au-dessus de TOUT ce que pose Leaflet : ses contrôles montent à 800, et un
     bouton de zoom flottant sur un message « aucune zone publiée » donne
     l'impression d'une carte à moitié cassée. */
  position:absolute;inset:0;z-index:1000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:28px 22px;
  background:rgba(248,250,252,.96);backdrop-filter:blur(2px);
}
.carte-etat[hidden]{display:none}
.carte-etat .ic{
  width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--ciel-clair);color:var(--ciel-profond);
}
.carte-etat .ic svg{width:26px;height:26px}
.carte-etat h3{font-size:1.12rem;font-weight:700}
.carte-etat p{font-size:14.5px;color:var(--encre-55);max-width:46ch;line-height:1.6}
.carte-etat .btn{margin-top:6px}
.carte-etat.panne .ic{background:#FEF2F2;color:var(--laterite)}

/* Rotation sobre du chargeur, désactivée si l'utilisateur ne veut pas
   d'animation. */
.carte-etat .tourne{animation:carte-tourne 1s linear infinite;transform-origin:50% 50%}
@keyframes carte-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.carte-etat .tourne{animation:none}}

/* -- 3. Marqueurs -------------------------------------------- */
/* Point d'accès : une épingle. On vient sur place. */
.marq-point{
  width:26px;height:26px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);
  background:var(--ciel);border:2.5px solid #fff;box-shadow:0 3px 8px rgba(15,23,42,.35);
}
/* Zone de couverture : un disque plein au centre du cercle desservi.
   On ne vient pas : c'est l'opérateur qui vient. */
.marq-couverture{
  width:20px;height:20px;border-radius:50%;
  background:var(--mangue);border:2.5px solid #fff;box-shadow:0 3px 8px rgba(15,23,42,.35);
}

/* -- 4. Bulle d'une zone ------------------------------------- */
.zbulle h3{font-size:1.05rem;font-weight:700;margin-bottom:4px;color:var(--encre)}
.zbulle .type{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:8px;
}
.zbulle .type.point{background:var(--ciel-clair);color:var(--ciel-profond)}
.zbulle .type.couverture{background:var(--mangue-pale);color:var(--mangue-fonce)}
.zbulle dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px;margin-top:4px}
.zbulle dt{color:var(--encre-55)}
.zbulle dd{color:var(--encre);font-weight:600}
.zbulle .flou{
  margin-top:10px;padding-top:9px;border-top:1px solid var(--ligne);
  font-size:12.5px;color:var(--encre-55);line-height:1.45;
}

/* -- 5. Légende ---------------------------------------------- */
.carte-legende{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;
  font-size:14px;color:var(--encre-70);
}
.carte-legende span{display:inline-flex;align-items:center;gap:9px}
.carte-legende .pastille{width:16px;height:16px;border-radius:50%;flex:none;border:2px solid #fff;box-shadow:0 0 0 1px var(--ligne-forte)}
.carte-legende .pastille.point{background:var(--ciel)}
.carte-legende .pastille.couverture{background:var(--mangue)}
.carte-source{margin-top:10px;font-size:12.5px;color:var(--encre-55)}

/* -- 6. Liste sous la carte ---------------------------------- */
/* La carte n'est pas utilisable au clavier ni au lecteur d'écran de façon
   satisfaisante : cette liste porte la même information, sous forme de texte.
   Elle n'est pas un repli — elle est affichée, tout le temps. */
.carte-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:14px;margin-top:26px}
.carte-liste li{
  list-style:none;background:#fff;border:1px solid var(--ligne);
  border-radius:var(--r-md);padding:16px 18px;
}
.carte-liste h3{font-size:1rem;font-weight:700;margin-bottom:6px}
.carte-liste p{font-size:13.5px;color:var(--encre-55);line-height:1.55}
.carte-liste .meta{margin-top:8px;font-size:12.5px;color:var(--encre-55)}
.carte-liste button{
  margin-top:12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  color:var(--ciel-profond);background:#fff;border:1px solid var(--ligne);
  border-radius:10px;min-height:40px;padding:8px 14px;
}
.carte-liste button:hover{border-color:var(--ciel)}

@media (max-width:640px){
  .carte-outils{padding:14px;gap:10px}
  .carte-champ{flex:1 1 100%}
}