/* =============================================================================
   GNM Radar — map.css
   Carte mondiale interactive : fond cartographique sobre (Natural Earth),
   marqueurs d'état, regroupement, fiche de détail, filtres.
   ========================================================================== */

:root {
  --map-sea: #101820;
  --map-land: #2A3942;
  --map-land-hover: #34464F;
}
:root[data-theme="light"] {
  --map-sea: #F4F6F5;
  --map-land: #DCE5E0;
  --map-land-hover: #CBD8D0;
}

.wmap {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}

/* ------------------------------------------------------------- Barre haute */

.wmap__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.wmap__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-13);
  font-weight: 650;
  color: var(--text);
}

.wmap__filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

.wmap__filters .select,
.wmap__filters .input {
  min-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: var(--fs-12);
  width: auto;
  min-width: 130px;
  max-width: 200px;
}

/* Contrôles de zoom superposés au fond de carte (haut droite). */
.wmap__zoom {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 4;
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(4px);
}
.wmap__zoom .btn { min-height: 28px; }

/* ----------------------------------------------------------------- canevas */

.wmap__canvas {
  position: relative;
  background: var(--map-sea);
  /* Ratio exact du viewBox Natural Earth (1000 × 396) : aucun bandage vertical. */
  aspect-ratio: 1000 / 396;
  min-height: 240px;
  max-height: 66vh;
  overflow: hidden;
}

.wmap__svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.wmap__svg.is-panning { cursor: grabbing; }

.wmap__graticule line {
  stroke: rgba(148, 163, 184, 0.1);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

.wmap__land path {
  fill: var(--map-land);
  stroke: var(--map-sea);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur) var(--ease);
}

.wmap__svg:hover .wmap__land path { fill: var(--map-land-hover); }

/* --------------------------------------------------------- marqueurs / grappe */

.wmap__mk { cursor: pointer; }
.wmap__mk circle.wmap__mk-ring {
  fill: currentColor;
  fill-opacity: 0.22;
  stroke: currentColor;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.wmap__mk circle.wmap__mk-core {
  fill: currentColor;
  /* Halo sombre : le marqueur reste lisible sur la terre comme sur la mer. */
  stroke: var(--map-sea);
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
}
.wmap__mk--ok { color: var(--ok); }
.wmap__mk--warning { color: var(--warn); }
.wmap__mk--critical { color: var(--crit); }
.wmap__mk--unknown { color: var(--unk); }
.wmap__mk.is-selected circle.wmap__mk-ring { fill-opacity: 0.45; stroke-width: 2.5; }
.wmap__mk.is-selected circle.wmap__mk-core { stroke-width: 2.5; }
.wmap__mk:focus-visible { outline: none; }
.wmap__mk:focus-visible circle.wmap__mk-ring { stroke-width: 3; }

.wmap__cl { cursor: pointer; }
.wmap__cl circle {
  fill: var(--surface);
  fill-opacity: 0.95;
  stroke: var(--border-strong);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.wmap__cl text {
  fill: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 650;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.wmap__cl:hover circle { stroke: var(--accent); stroke-width: 2; }

/* Marqueur de sonde : losange gris (jamais positionné d'office) */
.wmap__probe polygon {
  fill: var(--unk);
  stroke: var(--bg);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Données périmées : atténuation des marqueurs */
.wmap__canvas.is-stale .wmap__markers { opacity: 0.42; }
.wmap__markers { transition: opacity var(--dur) var(--ease); }

.wmap__stale-band {
  position: absolute;
  top: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border: 1px solid rgba(214, 155, 50, 0.5);
  border-radius: var(--r-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--fs-12);
  font-weight: 650;
  backdrop-filter: blur(4px);
}
.wmap__canvas.is-stale .wmap__stale-band { display: inline-flex; }

/* ---------------------------------------------------------------- infobulle */

.wmap__tooltip {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  display: none;
  min-width: 180px;
  max-width: 280px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-12);
}
.wmap__tooltip.is-visible { display: block; }
.wmap__tooltip-name { font-weight: 650; color: var(--text); margin-bottom: 3px; }
.wmap__tooltip-row { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--text-3); }
.wmap__tooltip-row b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 650; }

/* ------------------------------------------------------------- fiche détail */

.wmap__panel {
  position: absolute;
  /* Départ sous les contrôles de zoom superposés. */
  top: 56px;
  right: var(--sp-3);
  z-index: 7;
  width: min(320px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow-y: auto;
  display: none;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-3);
}
.wmap__panel.is-open { display: grid; }

.wmap__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.wmap__panel-name { font-size: var(--fs-14); font-weight: 650; color: var(--text); line-height: 1.35; }
.wmap__panel-sub { font-size: var(--fs-12); color: var(--text-3); margin-top: 2px; }
.wmap__panel-close {
  flex: none;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  padding: 2px;
  display: flex;
}
.wmap__panel-close:hover { color: var(--text); border-color: var(--border-strong); }

/* Indicateurs clés : grille compactte, valeurs alignées à droite. */
.wmap__panel-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.wmap__panel-metric {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  background: var(--surface);
}
.wmap__panel-metric-k {
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 650;
}
.wmap__panel-metric-v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-13);
  font-weight: 650;
  color: var(--text);
}

.wmap__panel-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sp-3); font-size: var(--fs-12); }
.wmap__panel-kv dt { color: var(--text-3); }
.wmap__panel-kv dd { margin: 0; color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.wmap__panel-kv dd.is-text { font-family: var(--font); font-weight: 600; }

/* Fraîcheur des données : ligne d'exploitation, discrète sauf si périmée. */
.wmap__panel-freshness {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: 1.5;
}
.wmap__panel-freshness svg { flex: none; margin-top: 1px; color: var(--ok); }
.wmap__panel-freshness.is-stale { border-color: rgba(214, 155, 50, 0.45); background: var(--warn-soft); color: var(--warn); }
.wmap__panel-freshness.is-stale svg { color: var(--warn); }

.wmap__panel-notice { font-size: var(--fs-11); color: var(--text-3); border-top: 1px solid var(--border); padding-top: var(--sp-2); line-height: 1.5; }

/* ------------------------------------------------------------------ états */

.wmap__empty {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  place-items: center;
  text-align: center;
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}
.wmap__canvas.is-empty .wmap__empty { display: grid; }
.wmap__empty-title { font-size: var(--fs-14); font-weight: 650; color: var(--text); }
.wmap__empty-text { font-size: var(--fs-13); color: var(--text-3); max-width: 440px; margin-top: 4px; }

/* --------------------------------------------------------------- pied / légende */

.wmap__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--fs-12);
  color: var(--text-3);
}

.wmap__legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.wmap__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.wmap__legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.wmap__legend-item b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
.wmap__attrib { margin-left: auto; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .wmap__bar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .wmap__filters { width: 100%; }
  .wmap__filters .select, .wmap__filters .input { flex: 1 1 130px; max-width: none; }
}

@media (max-width: 760px) {
  /* Format paysage élargi : moins de bandage vertical qu'un 4/3 sur mobile. */
  .wmap__canvas { aspect-ratio: 3 / 2; max-height: none; min-height: 200px; }
  .wmap__foot { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .wmap__panel {
    top: auto;
    right: var(--sp-2);
    left: var(--sp-2);
    bottom: var(--sp-2);
    width: auto;
    max-height: 62%;
    padding: var(--sp-3);
  }
  .wmap__attrib { margin-left: 0; width: 100%; }
}