/* ===========================================================
   Carte d'intervention — Belgique
   Widget SVG animé, scopé sous .zi-map.
   Variables wirées sur les tokens du thème (cf. tokens.css).
   =========================================================== */
.zi-map {
  --pink: var(--brand-rose);
  --ink:  var(--accent-navy);
  --bg:   var(--brand-rose-soft);

  --pink-08: color-mix(in srgb, var(--pink) 8%, var(--bg));
  --pink-14: color-mix(in srgb, var(--pink) 14%, var(--bg));
  --pink-22: color-mix(in srgb, var(--pink) 22%, var(--bg));
  --pink-40: color-mix(in srgb, var(--pink) 40%, white);
  --ink-30:  color-mix(in srgb, var(--ink) 30%, var(--bg));
  --ink-45:  color-mix(in srgb, var(--ink) 45%, var(--bg));
  --ink-60:  color-mix(in srgb, var(--ink) 60%, var(--bg));

  font-family: inherit;
  color: var(--ink);
  box-sizing: border-box;
}
.zi-map *, .zi-map *::before, .zi-map *::after { box-sizing: border-box; }

.zi-card {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, var(--bg) 0%, color-mix(in srgb, var(--pink) 5%, var(--bg)) 100%);
  border-radius: 28px;
  overflow: hidden;
}
.zi-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--pink) 16%, transparent) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: .45;
  pointer-events: none;
  mask-image: radial-gradient(130% 110% at 65% 35%, #000 35%, transparent 85%);
}

.zi-stage { position: relative; width: 100%; display: block; }
.zi-svg { width: 100%; height: auto; display: block; overflow: visible; }

.zi-map .prov {
  stroke-linejoin: round;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.985) translateY(4px);
  opacity: 0;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.3,1), fill .35s ease;
  transition-delay: var(--d, 0ms);
}
.zi-map.play .prov { opacity: 1; transform: none; }

.zi-map .prov.backdrop {
  fill: color-mix(in srgb, var(--ink) 5%, var(--bg));
  stroke: color-mix(in srgb, var(--ink) 16%, var(--bg));
  stroke-width: 1.1;
}
.zi-map .prov.secondary {
  fill: var(--pink-08);
  stroke: color-mix(in srgb, var(--pink) 42%, var(--bg));
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
}
.zi-map .prov.primary {
  fill: var(--pink-14);
  stroke: color-mix(in srgb, var(--pink) 60%, var(--bg));
  stroke-width: 1.5;
}
.zi-map .prov.primary:hover { fill: var(--pink-22); }

.zi-map .country-edge {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 28%, var(--bg));
  stroke-width: 1.6;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .9s ease .1s;
}
.zi-map.play .country-edge { opacity: 1; }

.zi-map .spoke {
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: var(--d, 0ms);
}
.zi-map.play .spoke { opacity: .5; }

.zi-map .prov-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-anchor: middle;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  transition-delay: var(--d, 0ms);
}
.zi-map .prov-label.backdrop { fill: var(--ink-45); font-weight: 600; }
.zi-map .prov-label.secondary { fill: color-mix(in srgb, var(--pink) 60%, var(--ink)); }
.zi-map .prov-label.primary { fill: color-mix(in srgb, var(--pink) 82%, var(--ink)); }
.zi-map.play .prov-label { opacity: .9; }

.zi-map .city { opacity: 0; transition: opacity .01s; pointer-events: none; }
.zi-map.play .city { opacity: 1; }
.zi-map .city .pin {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .55s cubic-bezier(.34,1.56,.4,1);
  transition-delay: var(--d, 0ms);
}
.zi-map.play .city .pin { transform: scale(1); }
.zi-map .pin-ring { fill: var(--pink); }
.zi-map .pin-core { fill: white; }
.zi-map .city.base .pin-ring { fill: var(--ink); }

.zi-map .city-label {
  font-weight: 600;
  font-size: 14.5px;
  fill: var(--ink);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: var(--d, 0ms);
}
.zi-map .city.base .city-label { font-weight: 800; font-size: 16.5px; }
.zi-map.play .city-label { opacity: 1; }
.zi-map .city-sub {
  font-weight: 500;
  font-size: 11px;
  fill: var(--ink-60);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: var(--d, 0ms);
}
.zi-map.play .city-sub { opacity: 1; }

.zi-map .pulse {
  fill: none; stroke: var(--ink); stroke-width: 2;
  transform-box: fill-box; transform-origin: center; opacity: 0;
}
.zi-map.play .pulse { animation: zi-pulse 2.6s ease-out 1.6s infinite; }
@keyframes zi-pulse {
  0%   { transform: scale(.5); opacity: .5; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (max-width: 600px) {
  .zi-card { border-radius: 20px; }
  .zi-map .prov-label { font-size: 16px; }
  .zi-map .city-label { font-size: 21px; }
  .zi-map .city.base .city-label { font-size: 24px; }
  .zi-map .city-sub { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .zi-map .prov, .zi-map .spoke, .zi-map .prov-label, .zi-map .country-edge,
  .zi-map .city .pin, .zi-map .city-label, .zi-map .city-sub {
    transition-duration: .01ms !important;
  }
  .zi-map.play .pulse { animation: none; opacity: 0; }
}