/* ══════════════════════════════════════════
   DamamMap — CSS Carte
   ══════════════════════════════════════════ */

#tab-map {
  position: relative;
  flex: 1;
  overflow: hidden;
  perspective: 600px;        /* nécessaire pour que rotateX soit visible */
  perspective-origin: 50% 100%; /* point de fuite centré en bas */
}

/* ── Leaflet container ──
   Taille 141% × 141% pour couvrir la diagonale lors des rotations.
   Les overlays UI (nav, zoom) sont HORS de ce div et ne tournent donc pas.
   La transformation est appliquée par JS (_applyMapRotation). */
#map-container {
  position: absolute;
  width: 141%;
  height: 141%;
  top:  -20.5%;
  left: -20.5%;
  background: #0a0a0a;
  z-index: 1;
  transform-origin: center center;
}

/* Désactivation des animations Leaflet */
.leaflet-fade-anim .leaflet-tile,
.leaflet-zoom-anim .leaflet-zoom-animated {
  transition: none !important;
  animation: none !important;
}
.leaflet-zoom-anim .leaflet-zoom-animated { will-change: unset !important; }
.leaflet-pan-anim  .leaflet-map-pane     { transition: none !important; }

/* ── Marqueur lunettes ── */
.glasses-marker {
  font-size: 28px;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 12px var(--cyan-glow));
  transition: transform 300ms ease;
}

/* Cercle de précision */
.leaflet-interactive.accuracy-circle {
  fill: rgba(0, 212, 255, 0.08);
  stroke: rgba(0, 212, 255, 0.3);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* ── Tuiles sombres ── */
.leaflet-tile-pane { opacity: 0.85; }
body.dark-enhanced .leaflet-tile-pane {
  filter: brightness(0.65) contrast(1.1) saturate(0.7);
}

/* ── Tracé itinéraire ── */
.route-line {
  stroke: #2979ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 0 4px rgba(41,121,255,0.7));
}

/* ══════════════════════════════════════════
   OVERLAYS UI — positionnés sur #tab-map
   (parent), PAS dans #map-container.
   Ils restent fixes quelle que soit la
   rotation de la carte.
   ══════════════════════════════════════════ */

/* ── Overlay navigation GPS ── */
#nav-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
#nav-overlay .btn-danger-sm { pointer-events: all; align-self: flex-end; }

#nav-instruction {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.82);
  border: 1px solid var(--cyan);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 0 16px rgba(0,212,255,0.2);
}

.nav-direction-arrow {
  font-size: 28px;
  color: var(--cyan);
  min-width: 36px;
  text-align: center;
  text-shadow: 0 0 10px var(--cyan);
}

#nav-text {
  font-size: 15px;
  color: var(--white);
  flex: 1;
  line-height: 1.3;
}

#nav-dist-next {
  font-size: 13px;
  color: var(--cyan);
  font-weight: bold;
  white-space: nowrap;
}

#nav-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.75);
  border: 1px solid var(--white);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--gray-hi);
}
.nav-sep { color: var(--white); }

/* ── Hint zoom ── */
/* ── Barre de statut bas carte ── */
#map-statusbar {
  position: absolute;
  bottom: 32px;
  left: 8px;
  right: 8px;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(0,0,0,0.82);
  border: 1px solid var(--cyan);
  border-radius: 8px;
  padding: 4px 12px;
  box-shadow: 0 0 16px rgba(0,212,255,0.2);
  pointer-events: none;
  font-size: 13px;
  color: var(--cyan);
  white-space: nowrap;
  letter-spacing: 1px;
  text-align: center;
}
#sb-zoom { font-weight: bold; }
#sb-zoom.custom { color: var(--orange); }
.sb-hint { color: var(--cyan); }

/* ── Vue perspective ── */
#map-container.perspective-view {
  transform-origin: center bottom;
  top: -10%;
  height: 130%;
  transform: rotateX(30deg);
  transform-style: preserve-3d;
}

/* Désactiver contrôles Leaflet natifs */
.leaflet-control-zoom,
.leaflet-control-attribution { display: none !important; }