/* ==========================================================================
   200 — World Map Pings
   Carte du monde SVG (asset world-map.svg, 179 pays, ids ISO3) injectée par
   anim.js, pings de tracking posés par lat/lon en overlay HTML (taille
   constante quelle que soit la largeur). Entrée : carte en fondu/scale,
   puis pins en pop stagger (overshoot), halos pulsants en boucle.
   Tooltip pays au survol, pays actifs teintés accent.
   ========================================================================== */

.wmap {
  --wmap-land: var(--ml-surface, #151a24);
  --wmap-land-line: var(--ml-bg, #0d1017);
  --wmap-land-hover: color-mix(in oklab, var(--ml-surface, #151a24) 72%, var(--ml-fg, #e8eaf2));
  --wmap-active: color-mix(in oklab, var(--ml-accent, #7c8cff) 38%, var(--ml-surface, #151a24));
  --wmap-ping: var(--ml-accent-2, #2dd4bf);

  position: relative;
  width: min(100%, 340px);
  font-family: inherit;
  color: var(--ml-fg, #e8eaf2);
}

/* --- En-tête ------------------------------------------------------------ */

.wmap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.wmap__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ml-muted, #8b91a3);
}

.wmap__title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--wmap-ping);
  vertical-align: 1px;
}

.wmap.is-in .wmap__title::before {
  animation: wmap-live 2.2s ease-in-out infinite;
}

@keyframes wmap-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.wmap__replay {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--ml-muted, #8b91a3) 35%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--ml-muted, #8b91a3);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.wmap__replay:hover,
.wmap__replay:focus-visible {
  color: var(--ml-fg, #e8eaf2);
  border-color: var(--ml-muted, #8b91a3);
}

.wmap__replay:focus-visible {
  outline: 2px solid var(--ml-accent, #7c8cff);
  outline-offset: 2px;
}

.wmap__replay:active { transform: scale(0.92); }

.wmap__replay-icon {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Scène : carte + overlay de pins ------------------------------------ */

.wmap__stage {
  position: relative;
  /* ratio du viewBox de world-map.svg (1000 × 435.1) */
  aspect-ratio: 1000 / 435.1;
}

.wmap__stage svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wmap__stage .countries path {
  fill: var(--wmap-land);
  stroke: var(--wmap-land-line);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  transition: fill 0.18s ease;
}

.wmap__stage .countries path:hover {
  fill: var(--wmap-land-hover);
}

.wmap__stage .countries path.is-active {
  fill: var(--wmap-active);
}

/* entrée de la carte */
.wmap.is-armed .wmap__stage {
  opacity: 0;
  transform: scale(0.965);
}

.wmap .wmap__stage {
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1);
  transform-origin: 50% 60%;
}

.wmap.is-in .wmap__stage {
  opacity: 1;
  transform: scale(1);
}

/* --- Pins (overlay HTML, taille constante) ------------------------------ */

.wmap__pin {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px; /* centre le pin sur left/top */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  /* état d'entrée ; .is-in le libère avec un overshoot */
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 0.3s ease,
    transform 0.55s cubic-bezier(0.3, 1.6, 0.4, 1);
}

.wmap__pin.is-in {
  opacity: 1;
  transform: scale(1);
}

.wmap__pin:focus-visible {
  outline: 2px solid var(--ml-accent, #7c8cff);
  outline-offset: 2px;
}

.wmap__pin-dot {
  position: absolute;
  inset: 5.5px;
  border-radius: 50%;
  background: var(--wmap-ping);
  box-shadow: 0 0 8px color-mix(in oklab, var(--wmap-ping) 70%, transparent);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.4, 1);
}

.wmap__pin:hover .wmap__pin-dot,
.wmap__pin:focus-visible .wmap__pin-dot {
  transform: scale(1.35);
}

.wmap__pin-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--wmap-ping);
  opacity: 0;
}

.wmap__pin.is-in .wmap__pin-ring {
  animation: wmap-ping 2.4s cubic-bezier(0.15, 0.6, 0.4, 1) infinite;
  animation-delay: inherit; /* suit le stagger posé inline sur le pin */
}

@keyframes wmap-ping {
  0% { opacity: 0.9; transform: scale(0.35); }
  75%, 100% { opacity: 0; transform: scale(1.9); }
}

/* --- Tooltip (pays + pins) ----------------------------------------------- */

.wmap__tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--ml-fg, #e8eaf2);
  color: var(--ml-bg, #0d1017);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 8px));
  transition: opacity 0.14s ease;
}

.wmap__tip.is-on { opacity: 1; }

.wmap__tip-iso {
  margin-left: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 400;
  opacity: 0.55;
}

/* --- Fallback (asset introuvable) ---------------------------------------- */

.wmap__fallback {
  display: grid;
  place-items: center;
  height: 100%;
  border: 1px dashed color-mix(in oklab, var(--ml-muted, #8b91a3) 40%, transparent);
  border-radius: 8px;
  color: var(--ml-muted, #8b91a3);
  font-size: 11px;
  text-align: center;
  padding: 12px;
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .wmap .wmap__stage,
  .wmap__pin {
    transition: none;
  }
  .wmap.is-in .wmap__pin-ring {
    animation: none;
    opacity: 0.35;
    transform: scale(1.5);
  }
  .wmap.is-in .wmap__title::before {
    animation: none;
  }
}