/*
 * carte.css — Page carte des grandes écoles
 */

/* ── Mise en page ───────────────────────────────────────────────────────────── */
#page-carte {
  display: flex;
  flex-direction: column;
}

/* ── Barre de filtres horizontale ──────────────────────────────────────────── */
#filtres-bar {
  background: #fff;
  border-bottom: 1px solid #dee2e6;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
#filtres-bar label {
  font-size: 12px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
#filtres-bar select {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  background: #f8f9fa;
  cursor: pointer;
}
#filtres-bar select:focus { outline: none; border-color: var(--c1); }
#filtres-bar .filtre-groupe { display: flex; align-items: center; gap: 6px; }
#filtres-bar .sep { width: 1px; height: 24px; background: #dee2e6; }

#compteur {
  font-size: 12px;
  color: #6c757d;
  margin-left: auto;
  white-space: nowrap;
}
#btn-reinit {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  background: #f8f9fa;
  cursor: pointer;
  white-space: nowrap;
}
#btn-reinit:hover { background: #e9ecef; }

/* ── Carte Leaflet ──────────────────────────────────────────────────────────── */
/*
 * aspect-ratio 7/6 ≈ 1.17 correspond au cadrage France métropolitaine
 * (bounds lat 41.3–51.1 / lng -5.2–9.6, corrigé par cos(46°) en Mercator).
 * max-height pour éviter une carte démesurée sur très grands écrans.
 */
#carte {
  width: 100%;
  aspect-ratio: 7 / 6;
  max-height: 80vh;
  min-height: 300px;
}

/* ── Marqueurs ──────────────────────────────────────────────────────────────── */
.dot-marker {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  color: #fff; font-size: 11px; font-weight: 700;
  cursor: pointer; line-height: 1;
}

/* ── Clusters ───────────────────────────────────────────────────────────────── */
.marker-cluster-small  { background-color: rgba(var(--c1-rgb), .35); }
.marker-cluster-medium { background-color: rgba(var(--c4-rgb), .35); }
.marker-cluster-large  { background-color: rgba(180,30,30,.35);      }
.marker-cluster-small  div { background-color: rgba(var(--c1-rgb), .7); }
.marker-cluster-medium div { background-color: rgba(var(--c4-rgb), .7); }
.marker-cluster-large  div { background-color: rgba(180,30,30,.7);      }
.marker-cluster div { color:#fff; font-weight:700; font-size:12px; }

/* ── Popup ──────────────────────────────────────────────────────────────────── */
.popup-titre { font-weight:700; font-size:13px; margin-bottom:8px; color:#333; }
.popup-ecole { border-bottom:1px solid #eee; padding:6px 0; }
.popup-ecole:last-child { border-bottom:none; }
.popup-ecole .nom { font-weight:600; font-size:13px; }
.popup-ecole .detail { font-size:11px; color:#666; margin-top:2px; }
.popup-ecole a { color: var(--c1); text-decoration:none; font-size:12px; }
.popup-ecole a:hover { text-decoration:underline; }
.badge-banque {
  display:inline-block;
  background: var(--c1-l);
  color: var(--c1-d);
  border-radius:10px; padding:1px 6px; font-size:10px; margin-right:2px;
}

/* ── Popup mobile : scrollable et fermable ──────────────────────────────────── */
.leaflet-popup-content-wrapper {
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.leaflet-popup-content {
  max-height: none;
}
@media (max-width: 576px) {
  .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 24px) !important;
    max-height: 60vh;
  }
  .leaflet-popup-content { margin: 10px 12px; }
}