/* ============================================================
   VJR 221 — Carte interactive des régions (Leaflet)
   ============================================================ */
#vjr-regions-wrap{
  --vjr-rm-green:var(--vjr-savane, #123322);
  --vjr-rm-teal:#0E6B72;
  --vjr-rm-red:var(--vjr-rouge, #9B2C33);
  --vjr-rm-gold:var(--vjr-safran, #E5A324);
  --vjr-rm-ink:var(--vjr-ombre, #1B1610);
  font-family: inherit;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--vjr-rm-ink);
}
#vjr-regions-wrap *{ box-sizing: border-box; }

.vjr-rm-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-bottom:14px;
}
.vjr-rm-search{ flex: 1 1 260px; position:relative; }
.vjr-rm-search input{
  width:100%; padding:10px 14px 10px 38px; border-radius:999px;
  border:1px solid var(--border-color, #d8ddd7); font-size:15px; outline:none;
  background:var(--card-bg, #fff) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23888"><path d="M6.5 2a4.5 4.5 0 1 0 2.83 8.02l3.33 3.32 1.06-1.06-3.32-3.33A4.5 4.5 0 0 0 6.5 2zm0 1.5a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/></svg>') no-repeat 12px center;
  transition: border-color .15s;
}
.vjr-rm-search input:focus{ border-color: var(--vjr-rm-green); }

.vjr-rm-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--text-secondary, #556); }
.vjr-rm-legend span{ display:inline-flex; align-items:center; gap:6px; }
.vjr-rm-legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; }

.vjr-rm-layout{ display:grid; grid-template-columns: 250px 1fr 300px; gap:16px; }
@media (max-width: 900px){
  .vjr-rm-layout{ grid-template-columns: 1fr; }
  #vjr-rm-map{ order:1; }
  #vjr-rm-list{ order:2; }
  #vjr-rm-info{ order:3; }
}

#vjr-rm-list{
  background:var(--card-bg, #fff); border:1px solid var(--border-color, #e7e9e4); border-radius:14px;
  padding:8px; max-height:520px; overflow:auto;
}
#vjr-rm-list h4{ margin:6px 8px 8px; font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-secondary, #8a948a); }
.vjr-rm-region-btn{
  display:flex; align-items:center; gap:8px; width:100%;
  text-align:left; padding:8px 10px; border:none; background:none;
  border-radius:9px; cursor:pointer; font-size:14.5px; color:var(--vjr-rm-ink);
}
.vjr-rm-region-btn:hover{ background:var(--vjr-vert-pale, #f0f4ef); }
.vjr-rm-region-btn.active{ background:var(--vjr-rm-green); color:#fff; }
.vjr-rm-region-btn i{ width:9px; height:9px; border-radius:50%; flex:none; }
.vjr-rm-region-btn.vjr-rm-hidden{ display:none; }

#vjr-rm-map{
  height: 560px; border-radius:14px; overflow:hidden;
  border:1px solid var(--border-color, #e7e9e4); box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

#vjr-rm-info{ background:var(--card-bg, #fff); border:1px solid var(--border-color, #e7e9e4); border-radius:14px; padding:20px; }
#vjr-rm-info .vjr-rm-eyebrow{ font-size:12px; color:var(--vjr-rm-green); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
#vjr-rm-info h3{ margin:0 0 12px; font-size:22px; }
#vjr-rm-info .vjr-rm-row{ display:flex; gap:8px; margin-bottom:10px; font-size:14.5px; }
#vjr-rm-info .vjr-rm-row b{ min-width:92px; color:var(--text-secondary, #556); font-weight:600; }
#vjr-rm-info .vjr-rm-deps{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
#vjr-rm-info .vjr-rm-deps span{ background:var(--vjr-vert-pale, #eef4ee); color:var(--vjr-rm-green);
  padding:3px 10px; border-radius:999px; font-size:12.5px; }
#vjr-rm-info a.vjr-rm-cta{
  display:inline-block; margin-top:16px; background:var(--vjr-rm-green); color:#fff;
  text-decoration:none; padding:10px 18px; border-radius:999px; font-weight:600;
  font-size:14.5px;
}
#vjr-rm-info a.vjr-rm-cta:hover{ background:var(--vjr-savane-2, #1E4A32); }
#vjr-rm-info .vjr-rm-empty{ color:var(--text-secondary, #8a948a); font-size:14.5px; }

.vjr-rm-pin-label{
  background:#fff; border:2px solid #fff; border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.35); color:#fff; font-weight:700;
  font-size:11px; text-align:center; line-height:22px; width:22px; height:22px;
}
.leaflet-popup-content{ font-size:13.5px; }
.leaflet-popup-content b{ font-size:14.5px; }


/* ============================================================
   DARK MODE -- carte interactive des regions
   ============================================================ */
html.dark #vjr-regions-wrap{
  --vjr-rm-ink: #F1F5F9;
  color: var(--vjr-rm-ink);
}
html.dark .vjr-rm-search input{
  background-color: var(--card-bg, #1E2937);
  border-color: #2E3B52;
  color: var(--vjr-rm-ink);
}
html.dark .vjr-rm-legend{ color: #CBD5E1; }
html.dark #vjr-rm-list, html.dark #vjr-rm-info{
  background: var(--card-bg, #1E2937);
  border-color: #2E3B52;
}
html.dark #vjr-rm-list h4{ color: #94A3B8; }
html.dark .vjr-rm-region-btn{ color: var(--vjr-rm-ink); }
html.dark .vjr-rm-region-btn:hover{ background: #16233d; }
html.dark #vjr-rm-info .vjr-rm-row b{ color: #94A3B8; }
html.dark #vjr-rm-info .vjr-rm-deps span{ background:#16332A; }
html.dark #vjr-rm-info .vjr-rm-empty{ color: #94A3B8; }

html.dark #vjr-rm-map{ border-color: #2E3B52; }

/* Fond de carte Leaflet assombri (tuiles inversees + teintees) */
html.dark #vjr-rm-map .leaflet-tile-pane{
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.92) saturate(0.85);
}
/* Marqueurs, popups et controles restent lisibles (contre-inversion) */
html.dark #vjr-rm-map .leaflet-marker-icon,
html.dark #vjr-rm-map .leaflet-popup,
html.dark #vjr-rm-map .leaflet-control{
  filter: invert(1) hue-rotate(180deg);
}
html.dark .leaflet-popup-content-wrapper, html.dark .leaflet-popup-tip{
  background: var(--card-bg, #1E2937);
  color: var(--vjr-rm-ink);
}