/* ==========================================================================
   SignalNids — Pack CSS "Carte Premium" (Leaflet)
   À mettre dans: /assets/css/map-premium.css (recommandé)
   puis inclure après ton CSS principal:
   <link rel="stylesheet" href="/assets/css/map-premium.css">
   ========================================================================== */

:root{
  --sn-green:#2f7b53;
  --sn-green-dark:#1f4f39;
  --sn-purple:#7c3aed;
  --sn-purple-2:#a855f7;
  --sn-amber:#f39c12;
  --sn-red:#e55353;

  --sn-ink:#0f172a;
  --sn-muted:#475569;

  --sn-card:rgba(255,255,255,.92);
  --sn-border:rgba(15,23,42,.10);
  --sn-shadow:0 12px 28px rgba(0,0,0,.12);
  --sn-radius:16px;
  --sn-radius-sm:12px;
}

/* =========================
   Leaflet container
   ========================= */
.leaflet-container{
  background:#eef2f7;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.leaflet-control-container .leaflet-top,
.leaflet-control-container .leaflet-bottom{
  pointer-events:none; /* évite les zones mortes */
}
.leaflet-control{
  pointer-events:auto;
}

/* =========================
   Contrôles (zoom / layers / locate)
   ========================= */
.leaflet-bar{
  border:none !important;
  box-shadow:var(--sn-shadow);
  border-radius:var(--sn-radius) !important;
  overflow:hidden;
}

.leaflet-bar a,
.leaflet-bar button{
  width:40px !important;
  height:40px !important;
  line-height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--sn-card) !important;
  color:var(--sn-ink) !important;
  border:none !important;
  border-bottom:1px solid var(--sn-border) !important;
  text-decoration:none !important;
  cursor:pointer;
}

.leaflet-bar a:last-child,
.leaflet-bar button:last-child{
  border-bottom:none !important;
}

.leaflet-bar a:hover,
.leaflet-bar button:hover{
  background:#fff !important;
}

.leaflet-bar a:focus,
.leaflet-bar button:focus{
  outline:2px solid rgba(46,139,87,.35);
  outline-offset:-2px;
}

/* bouton locate (classe déjà utilisée dans ton JS) */
.sn-map-locate{
  font-size:18px;
}

/* =========================
   Contrôle des couches (compact premium)
   ========================= */
.leaflet-control-layers{
  border:none !important;
  border-radius:var(--sn-radius) !important;
  box-shadow:var(--sn-shadow) !important;
  background:var(--sn-card) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}

.leaflet-control-layers-toggle{
  width:40px !important;
  height:40px !important;
  background-size:18px 18px !important;
  filter:contrast(1.05);
  opacity:.95;
}

/* Quand le panneau est ouvert */
.leaflet-control-layers-expanded{
  padding:10px 12px !important;
  min-width:220px;
}

.leaflet-control-layers-separator{
  border-top:1px solid var(--sn-border) !important;
  margin:8px 0 !important;
}

.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:6px 0;
  color:var(--sn-ink);
  font-size:13px;
  line-height:1.2;
}

.leaflet-control-layers input[type="radio"],
.leaflet-control-layers input[type="checkbox"]{
  margin-top:2px;
  transform:scale(1.05);
}

/* =========================
   Légende + KPI (sn-map-legend)
   ========================= */
.sn-map-legend{
  background:var(--sn-card);
  border:1px solid var(--sn-border);
  border-radius:var(--sn-radius);
  box-shadow:var(--sn-shadow);
  padding:10px 12px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  max-width:240px;
}

.sn-map-legend__title{
  font-weight:900;
  font-size:13px;
  margin:0 0 6px;
  color:var(--sn-ink);
  letter-spacing:.2px;
}

.sn-map-legend__row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  margin:3px 0;
  color:var(--sn-ink);
}

.sn-map-legend__kpi{
  margin-top:8px;
  font-size:12px;
  color:var(--sn-muted);
  font-weight:800;
}

.sn-map-legend .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.sn-map-legend .dot--g{ background:var(--sn-green); }
.sn-map-legend .dot--v{ background:var(--sn-purple-2); }

/* =========================
   Popups (lisibles, pro)
   ========================= */
.leaflet-popup-content-wrapper{
  border-radius:var(--sn-radius);
  box-shadow:var(--sn-shadow);
  border:1px solid var(--sn-border);
}

.leaflet-popup-content{
  margin:12px 14px;
  font-size:13px;
  color:var(--sn-ink);
}

.leaflet-popup-tip{
  box-shadow:var(--sn-shadow);
}

/* Liens dans popup */
.leaflet-popup-content a{
  color:var(--sn-green-dark);
  font-weight:800;
  text-decoration:none;
}
.leaflet-popup-content a:hover{
  text-decoration:underline;
}

/* =========================
   MarkerCluster (si plugin présent)
   - Tu utilises des divIcon custom "sn-cluster" via JS
   ========================= */
.sn-cluster{
  border-radius:999px;
  will-change:transform;
}
.sn-cluster:hover{
  transform:translateY(-1px);
}

/* Le plugin ajoute parfois des styles par défaut, on évite les marges */
.marker-cluster{
  background:transparent !important;
}
.marker-cluster div{
  background:transparent !important;
}

/* =========================
   Icônes points (divIcon)
   ========================= */
.sn-dot-icon{
  background:transparent !important;
  border:none !important;
}

/* =========================
   Toast (vote / messages)
   ========================= */
.sn-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:rgba(15,23,42,.92);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  z-index:99999;
  font-size:13px;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.sn-toast.is-show{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}

/* =========================
   Petites optimisations responsive
   ========================= */
@media (max-width: 720px){
  .leaflet-bar a,
  .leaflet-bar button{
    width:38px !important;
    height:38px !important;
    line-height:38px !important;
  }

  .leaflet-control-layers-expanded{
    min-width:200px;
  }

  .sn-map-legend{
    max-width:210px;
    padding:9px 10px;
  }
}

/* Si tu veux un rendu encore plus clean: masque l’attribution sur mobile
   (à activer seulement si tu as une alternative conforme) */
/*
@media (max-width: 720px){
  .leaflet-control-attribution{ display:none !important; }
}
*/