/* ============================================================
   DAR KOUTOUBIA — Carte OpenStreetMap des quartiers (Accueil)
   ============================================================ */

.map-frame .osm-map {
  width: 100%;
  aspect-ratio: 7 / 5.4;
  border: 1px solid var(--line-soft, rgba(255,255,255,.14));
  background: var(--bordeaux-deep, #3a1218);
}

/* Note : pas de filtre CSS sur les tuiles (le cumul filter + images
   cross-origin casse la capture d'écran / l'export PPTX de la page). */
.osm-map { background: var(--bordeaux-deep, #3a1218); }

.osm-map .leaflet-control-attribution {
  background: rgba(58,18,24,.72) !important;
  color: rgba(247,242,234,.55) !important;
  font-size: 10px !important;
  border-radius: 3px 0 0 0;
}
.osm-map .leaflet-control-attribution a { color: rgba(247,242,234,.75) !important; }
.osm-map .leaflet-control-zoom a {
  background: var(--bordeaux-deep, #3a1218) !important;
  color: var(--ivoire, #f7f2ea) !important;
  border-color: rgba(247,242,234,.25) !important;
}
.osm-map .leaflet-control-zoom a:hover { background: var(--cuivre, #b0713f) !important; }

/* Marqueurs personnalisés (reprennent le style .map-pin d'origine) */
.osm-pin {
  width: 16px; height: 16px;
  position: relative;
}
.osm-pin i {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--cuivre, #b0713f);
  border: 2px solid var(--ivoire, #f7f2ea);
  box-shadow: 0 0 0 3px rgba(176,113,63,.28);
  transition: transform .25s ease, background .25s ease;
  display: block;
}
.osm-pin.is-active i, .osm-pin:hover i {
  transform: scale(1.4);
  background: var(--cuivre-hl, #d99457);
}
@media (prefers-reduced-motion: no-preference) {
  .osm-pin::before {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 1.5px solid var(--cuivre, #b0713f);
    opacity: 0;
  }
  .osm-pin.is-active::before { animation: osmPing 2s ease-out infinite; }
  @keyframes osmPing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
}

/* Popup au look Dar Koutoubia */
.osm-map .leaflet-popup-content-wrapper {
  background: var(--bordeaux-deep, #3a1218);
  color: var(--ivoire, #f7f2ea);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.osm-map .leaflet-popup-tip { background: var(--bordeaux-deep, #3a1218); }
.osm-map .leaflet-popup-content { margin: 16px 18px; min-width: 200px; }
.osm-popup h4 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 18px; color: var(--cuivre-hl, #d99457); margin-bottom: 3px;
}
.osm-popup .osm-mood {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cuivre, #b0713f); margin-bottom: 10px; display: block;
}
.osm-popup dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12.5px; margin-bottom: 10px; }
.osm-popup dt { color: rgba(247,242,234,.55); }
.osm-popup dd { color: var(--ivoire, #f7f2ea); text-align: right; }
.osm-popup a.osm-popup-link {
  display: inline-block; font-size: 12px; letter-spacing: .06em;
  color: var(--cuivre-hl, #d99457); border-bottom: 1px solid currentColor;
}
.osm-map .leaflet-popup-close-button { color: rgba(247,242,234,.6) !important; }