/* ------------------------------------------------------------------
   carte.css — la carte des chantiers.
   Dessinee a la main en SVG : aucun service de cartographie, aucune requete
   au chargement, rien qui parte chez un tiers. Reprend les variables de
   site.css, n'en redefinit aucune.
   ------------------------------------------------------------------ */

.carte-page {
  padding: calc(var(--nav-h) + clamp(2rem, 6svh, 4rem)) 0 clamp(4rem, 10svh, 7rem);
}
.carte-page > section { padding-inline: var(--gutter); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- titraille ---------- */
.carte-tete { max-width: 44rem; }
.carte-tete .sur {
  font-family: var(--display); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--eau); margin: 0 0 1rem;
  display: flex; align-items: center; gap: .65rem;
}
.carte-tete .sur::before { content: ""; width: 1.9rem; height: 1px; background: var(--eau-2); }
.carte-tete h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 1.2rem + 4.4vw, 3.9rem);
  line-height: .98; letter-spacing: -.03em; margin: 0 0 1.1rem; text-wrap: balance;
}
.carte-tete h1 em { font-style: normal; color: var(--eau); }
.chapo { color: var(--ecume-60); margin: 0; max-width: 54ch; }

/* ---------- le dessin ---------- */
.carte { margin: clamp(2rem, 5svh, 3.5rem) 0 0; padding-inline: var(--gutter); }
.carte-cadre {
  position: relative;
  aspect-ratio: var(--w) / var(--h);
  max-width: 62rem; margin: 0 auto;
}
.carte-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* La terre est un bloc de granit mouille ; la cote, une ligne de lumiere. */
.terre path {
  fill: var(--granit);
  stroke: var(--eau-2);
  stroke-width: 1.1;
  stroke-linejoin: round;
  paint-order: fill stroke;
}

/* ---------- les points de chantier ---------- */
.pins { position: absolute; inset: 0; }
.pin {
  position: absolute;
  left: calc(var(--x) / var(--w) * 100%);
  top: calc(var(--y) / var(--h) * 100%);
  width: 0; height: 0;
  color: var(--hi);
  text-decoration: none;
}
.pin__coeur {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 2px rgba(11,20,22,.85), 0 0 12px rgba(228,81,43,.55);
}
/* un chantier situe a la commune seulement, faute de photo geolocalisee */
.pin[data-approx] { color: var(--eau); }
.pin[data-approx] .pin__coeur { box-shadow: 0 0 0 2px rgba(11,20,22,.85), 0 0 10px rgba(111,163,156,.5); }

/* l'onde : une goutte qui vient de toucher la surface */
.pin__onde {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; border: 1.5px solid currentColor; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pin__onde { animation: onde-pin 3.8s var(--ease, ease-out) infinite; }
  .pin__onde--2 { animation-delay: 1.9s; }
}
@keyframes onde-pin {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(4.2); opacity: 0; }
  100% { transform: scale(4.2); opacity: 0; }
}

/* l'etiquette : lisible au survol, au clavier, et au toucher */
.pin__bulle {
  position: absolute; left: 12px; top: -12px;
  min-width: max-content; max-width: 15rem;
  padding: .45rem .7rem; border-radius: 7px;
  background: rgba(5,10,16,.94); border: 1px solid var(--ecume-12);
  color: var(--ecume); font-size: .78rem; line-height: 1.35;
  opacity: 0; transform: translateX(-4px); pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 3;
}
.pin__bulle b { display: block; font-family: var(--display); color: var(--eau); font-size: .82rem; }
.pin:hover .pin__bulle,
.pin:focus-visible .pin__bulle,
.pin--ouvert .pin__bulle { opacity: 1; transform: translateX(0); }
.pin:hover, .pin:focus-visible, .pin--ouvert { z-index: 4; }
.pin:focus-visible .pin__coeur { outline: 2px solid var(--ecume); outline-offset: 3px; }
/* pres du bord droit, l'etiquette bascule a gauche */
.pin[data-bord="droite"] .pin__bulle { left: auto; right: 12px; transform: translateX(4px); }
.pin[data-bord="droite"]:hover .pin__bulle,
.pin[data-bord="droite"]:focus-visible .pin__bulle { transform: translateX(0); }

/* ---------- la liste, qui porte le referencement ---------- */
.carte-liste { margin-top: clamp(2.5rem, 6svh, 4rem); }
.carte-liste h2, .carte-zone h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
  line-height: 1.06; letter-spacing: -.022em; margin: 0 0 1.2rem; text-wrap: balance;
}
.communes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.communes a {
  display: block; padding: .7rem .9rem; border-radius: 8px;
  background: var(--granit); border: 1px solid var(--ecume-12);
  text-decoration: none; color: var(--ecume);
  transition: border-color .18s, transform .18s;
}
.communes a:hover, .communes a:focus-visible {
  border-color: var(--eau); transform: translateY(-2px);
}
.communes b { display: block; font-family: var(--display); font-size: .95rem; }
.communes span { color: var(--ecume-60); font-size: .82rem; }

/* ---------- zone d'intervention ---------- */
.carte-zone { margin-top: clamp(2.5rem, 6svh, 4rem); max-width: 48rem; }
.carte-zone p { color: var(--ecume-60); margin: 0 0 1rem; }
.zone-note { font-size: .94rem; }

@media (prefers-reduced-motion: reduce) {
  .pin__onde { display: none; }
  .communes a { transition: none; }
}