/* ——— Base ——— */
body, html { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
#app { display: flex; height: 100vh; }
#map { flex: 1; }

/* ——— Sidebar ——— */
#sidebar {
  width: 300px; background-color: #f9f9f9; padding: 20px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1); z-index: 1000; overflow-y: auto;
}
#sidebar .logo { width: 180px; margin-bottom: 10px; }
#sidebar h1 { font-size: 1.5em; margin: 0 0 10px 0; color: #1e3050; }
#sidebar p { font-size: 0.9em; color: #333; }
#sidebar .filters { margin-top: 20px; }
#sidebar .filters h2 { font-size: 1.1em; margin-bottom: 10px; }
#sidebar .actions { margin-top: 16px; }

/* Gros boutons bleus : uniquement zone d’actions */
#sidebar .actions button {
  display: block; width: 100%; margin-bottom: 10px; padding: 10px;
  background-color: #1e3050; color: white; border: none; cursor: pointer; border-radius: 8px;
}

/* ——— Bouton menu mobile ——— */
.toggle-button {
  position: fixed; top: 10px; left: 10px; z-index: 2000;
  background: #1e3050; color: white; border: none; padding: 10px 14px; border-radius: 5px; font-size: 22px; cursor: pointer;
}
@media screen and (min-width: 769px) { .toggle-button { display: none; } }
#sidebar.hidden { display: none; }

/* ——— Légende / attribution ——— */
#map-attribution {
  position: absolute; bottom: 10px; left: 10px;
  font-size: 11px; background: rgba(255,255,255,0.85);
  padding: 4px 6px; border-radius: 5px; z-index: 1000;
}

/* ——— Pins “sexy” ——— */
.poi-pin-wrap { filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.poi-pin {
  position: relative; display: grid; place-items: center;
  border-radius: 16px;
  background: radial-gradient(100% 100% at 30% 30%, rgba(255,255,255,.25) 0%, rgba(255,255,255,.0) 40%) , var(--pin, #6C8DBE);
  color: #fff; font-size: 18px; font-weight: 700;
  border: 2px solid #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  transform: translateY(-4px); transition: transform .15s ease;
}
.poi-pin__inner { transform: translateY(-1px); }
/* ✅ Dimensionne correctement les SVG */
.poi-pin__inner svg { width: 20px; height: 20px; display: block; }
.poi-pin:hover { transform: translateY(-8px); }

/* ——— Filtres parent/enfant ——— */
.poi-group { margin: 10px 0 14px; border-bottom: 1px dashed #e1e5eb; padding-bottom: 10px; }

.poi-parent { display:flex; align-items:center; gap:.5rem; font-weight:600; user-select:none; }
.poi-parent input { transform: translateY(1px); }
.poi-parent-label { cursor: pointer; }
.poi-bullet { width:10px; height:10px; border-radius:999px; display:inline-block; }

/* Accordéon – bouton flèche */
#sidebar .poi-parent .accordion-toggle {
  inline-size: 28px; block-size: 28px;
  border: none; border-radius: 6px;
  display: grid; place-items: center;
  background: transparent; cursor: pointer;
  padding: 0; margin: 0; width: auto; color: #1e3050;
}
#sidebar .poi-parent .accordion-toggle:focus-visible { outline: 2px solid #1e3050; }

.caret {
  width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 8px solid #1e3050; transform: rotate(0deg); transition: transform .2s ease;
}
.poi-group.open .caret { transform: rotate(90deg); }

.poi-children {
  margin: 8px 0 0 22px; display:grid; gap:6px;
  overflow: hidden; max-height: 0; transition: max-height .25s ease;
}
.poi-filter { display:flex; align-items:center; gap:.5rem; }
.poi-chip {
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px;
  background: var(--chip, #6C8DBE); color:#fff; line-height:1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
/* ✅ petit SVG blanc dans la chip */
.poi-chip svg { width: 16px; height: 16px; display: block; }

/* ——— Anim apparition marqueurs ——— */
.leaflet-marker-icon.fade-in { opacity: 0; animation: fadeInMarker 1.2s ease forwards; }
@keyframes fadeInMarker { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

/* ——— Responsive ——— */
@media screen and (max-width: 768px) {
  #app { flex-direction: column; }
  #sidebar { width: 100%; height: auto; box-shadow: none; padding: 10px 15px; }
  #sidebar h1 { font-size: 1.3em; }
  #sidebar .filters h2 { font-size: 1em; }
  #sidebar .actions button { font-size: 1em; padding: 8px; }
  #map { height: 70vh; width: 100%; }
}