/**
 * USINE - Vue carte interactive
 *
 * Deux modes :
 *   "tile"  : Leaflet + tuiles OSM (grands sites exterieurs)
 *   "svg"   : Plan SVG par etage avec zoom/pan CSS (monuments interieurs)
 *
 * Point critique : Leaflet exige une hauteur explicite sur son conteneur.
 * On calcule la hauteur disponible = viewport - header - nav.
 */

/* === Conteneur principal de la vue carte === */
.map-view {
  display: flex;
  flex-direction: column;
  /* Hauteur = viewport dynamique - header - nav - safe areas */
  height: calc(100dvh - var(--header-height) - var(--safe-area-top) - var(--nav-height) - var(--safe-area-bottom));
  overflow: hidden;
}

/* === Barre d'onglets zones / etages === */
.map-view__floors {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}

.map-view__floors::-webkit-scrollbar {
  display: none;                    /* Chrome/Safari */
}

/* Masquee si pas d'onglets (monuments avec un seul etage/zone) */
.map-view__floors:empty {
  display: none;
}

/* === Zone de rendu de la carte (conteneur Leaflet ou SVG) === */
.map-view__canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* Fond neutre pendant le chargement des tuiles / plan SVG */
  background: #e8e4d9;
  /* Necessaire pour que Leaflet puisse mesurer la hauteur */
  min-height: 200px;
}

/* === Wrapper SVG pour le mode "svg" (zoom/pan CSS) === */
.map-view__wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;        /* SVG ancré en haut, pas de letterbox vertical */
  justify-content: center;
  cursor: grab;
  user-select: none;
  transform-origin: center top;
  will-change: transform;
}

.map-view__wrapper:active {
  cursor: grabbing;
}

/* SVG injecte : largeur 100%, hauteur auto pour respecter le ratio d'aspect */
.map-view__wrapper > svg {
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  pointer-events: none;           /* Les marqueurs POI gèrent les clics */
}

/* === Marqueurs POI (communs aux deux modes) === */

/* Conteneur cliquable : cercle + étiquette en colonne */
.map-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  transition: transform var(--transition-fast);
}

/* Cercle numéroté — cible WCAG 2.5.5 44×44 px */
.map-marker__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: inherit;
  flex-shrink: 0;
}

.map-marker:hover .map-marker__dot,
.map-marker:focus-visible .map-marker__dot {
  transform: scale(1.2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.map-marker:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 4px;
  border-radius: 4px;
}

.map-marker--pending .map-marker__dot {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
}

.map-marker--visited .map-marker__dot {
  background: var(--color-success);
  color: var(--color-text-inverse);
}

/* Couleurs de période (Galerie du Temps) — seulement sur les non-visités */
.map-marker--pending.map-marker--period-antiquites .map-marker__dot {
  background: #bf8a40;
  color: #fff;
}
.map-marker--pending.map-marker--period-grece-rome .map-marker__dot {
  background: #4a7fa8;
  color: #fff;
}
.map-marker--pending.map-marker--period-moyen-age .map-marker__dot {
  background: #6b4e7a;
  color: #fff;
}

/* Légende des périodes */
.map-period-legend {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.map-period-legend__item {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px 4px 28px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  color: var(--color-primary);
  position: relative;
}

.map-period-legend__item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.map-period-legend__item--antiquites::before  { background: #bf8a40; }
.map-period-legend__item--grece-rome::before  { background: #4a7fa8; }
.map-period-legend__item--moyen-age::before   { background: #6b4e7a; }

/* Étiquette titre sous le cercle */
.map-marker__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.92);
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  line-height: 1.3;
}

/* === Surcharge Leaflet pour cohérence visuelle === */

/* Fond de la carte Leaflet : cohérent avec le fond app */
.leaflet-container {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  background: #e8e4d9;
}

/* Panneau d'attribution : texte discret */
.leaflet-control-attribution {
  font-size: 10px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(4px);
}

/* Boutons zoom Leaflet natifs : taille 44px pour WCAG */
.leaflet-control-zoom a {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 20px !important;
}

/* Eviter que les tuiles transparentes (hors-ligne) cassent l'affichage */
.leaflet-tile-pane img {
  image-rendering: auto;
}

/* === Legende (optionnelle, masquee par defaut) === */
.map-view__legend {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.map-view__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
}

.map-view__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* === Adaptation mini-player visible === */
body.has-mini-player .map-view {
  height: calc(100dvh - var(--header-height) - var(--safe-area-top) - var(--nav-height) - var(--mini-player-height) - var(--safe-area-bottom));
}