/* ---------------------------------------------------------
 * Carte schématique des syndicats locaux adhérents (page /villes/).
 * Le SVG (assets/img/carte-france.svg) est inclus en inline par villes.php
 * pour pouvoir styler son fill/stroke ici (cohérent avec les réglages de
 * l'outil d'accessibilité : contraste élevé, fond sombre...).
 * --------------------------------------------------------- */

.villes-map__wrap {
  position: relative;
  max-width: 760px;
  margin: 0 auto 40px;
}

.villes-map__svg-wrap {
  position: relative;
  width: 100%;
}
.villes-map__svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Le remplissage (teinte pastel par région) est fixé en inline dans le SVG
   (carte-france.svg) — seuls le contour et l'interaction sont stylés ici. */
.map-region {
  stroke: rgba(28, 42, 90, .4); /* var(--navy) à 40% d'opacité : lisible sans dominer les teintes pastel */
  stroke-width: .35; /* fin : les contours réels (voir carte-france.svg) ont beaucoup de petits segments */
  stroke-linejoin: round;
}

/* "Ombre" dessinée sous chaque région (même teinte, sans contour, légèrement
   dilatée depuis son propre centre dans le SVG) : comble les micro-écarts de
   simplification entre régions voisines. Jamais visible en tant que telle —
   seul un léger débordement de couleur peut apparaître sur 1-2 pixels aux
   frontières, invisible à l'échelle de la carte. Voir le commentaire en tête
   de carte-france.svg pour le détail de la méthode. */
.map-region-shadow {
  stroke: none;
}

/* Petit correctif local (pas un contour de secours global) : la frontière
   suisse s'intercale réellement entre Bourgogne-Franche-Comté et Grand Est
   près de Bâle, donc aucune "ombre" de région ne peut combler cet interstice
   précis. Neutre et discret, suit la palette de l'outil d'accessibilité. */
.map-base {
  fill: var(--line);
  stroke: none;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Marqueurs ----------
 * Chaque pin + son infobulle sont regroupés dans .map-marker-wrap : c'est
 * LUI qui porte le survol/focus (:hover / :focus-within), pas le pin seul —
 * comme l'infobulle est un descendant du même wrap, la survoler à son tour
 * garde le wrap en :hover, donc l'infobulle reste ouverte le temps de
 * déplacer la souris du pin vers son contenu (voir aussi le padding-bottom
 * "pont" sur .map-popup ci-dessous, qui comble le vide visuel entre les
 * deux pour qu'aucun pixel du trajet ne tombe hors de tout élément survolé).
 * Un z-index n'est promu QUE sur le wrap survolé/focus/ouvert, pour que son
 * infobulle passe au-dessus des pins voisins plutôt que d'être recouverte
 * par eux (l'ordre de peinture par défaut suit l'ordre du DOM, pas la
 * position visuelle).
 */
.map-marker-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.map-marker-wrap:hover,
.map-marker-wrap:focus-within {
  z-index: 50;
}

/* Marqueurs "hors métropole" (DOM-TOM) : mise en page normale (flex), pas
   de positionnement en % ni de centrage par transform — voir .villes-map__overseas. */
.map-marker-wrap--static {
  position: relative;
  transform: none;
  display: inline-flex;
}

.map-marker {
  position: relative;
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--orange);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .15s, border-color .15s;
}
.map-marker__img {
  width: 100%;
  height: 100%;
  /* Indispensable avec width/height:100% + padding sur un élément remplacé
     (<img>) : sans border-box, le padding s'AJOUTE aux 100% au lieu d'être
     prélevé dessus — l'image déborde alors du cercle de 48px (48+7×2=62px)
     et son cadrage par overflow:hidden devient imprévisible selon le ratio
     du logo (ce qui coupait les logos non carrés). Avec border-box, la zone
     de contenu où s'applique object-fit fait exactement 48-7×2=34px de
     côté : la plus grande dimension du logo y tient toujours entièrement,
     quel que soit son ratio. */
  box-sizing: border-box;
  object-fit: contain;
  /* Le pin est un cercle (overflow:hidden + border-radius:50%) : le plus grand
     carré qui tient entièrement DANS un cercle de diamètre D a pour côté
     D/√2 ≈ 0,71×D, donc une marge de (D - 0,71×D)/2 ≈ 0,146×D de chaque côté
     est nécessaire pour que le logo ne soit jamais rogné dans les coins par
     le masque circulaire — 5px sur un pin de 48px (0,71×D ≈ 34px) laissait
     dépasser jusqu'à 4px de logo hors du cercle. */
  padding: 7px;
  display: block;
  pointer-events: none;
}
/* Pas de logo renseigné sur la fiche ville : simple pastille de repli */
.map-marker--dot {
  background: var(--orange);
  border-color: var(--bg);
}
.map-marker:hover,
.map-marker:focus-visible {
  border-color: var(--navy);
  transform: scale(1.15);
}
.map-marker--dot:hover,
.map-marker--dot:focus-visible {
  background: var(--navy);
}
.map-marker:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .map-marker { width: 36px; height: 36px; }
  .map-marker__img { padding: 5px; } /* même ratio ≈ 0,146×D qu'en desktop, voir .map-marker__img */
}

/* ---------- Infobulle ---------- */
.map-popup {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  /* Zone tampon invisible : garde le pointeur "dans" un élément descendant
     du wrap pendant la traversée du pin vers la carte visible ci-dessous,
     au lieu de retomber sur le fond de la carte et perdre le survol. */
  padding-bottom: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s;
}
.map-popup__card {
  min-width: 160px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  padding: 10px 14px;
  text-align: center;
  position: relative;
}
.map-popup__card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--bg);
}
.map-popup--below {
  bottom: auto;
  top: 100%;
  padding-bottom: 0;
  padding-top: 12px;
}
.map-popup--below .map-popup__card::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--bg);
}

.map-marker-wrap:hover .map-popup,
.map-marker-wrap:focus-within .map-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.map-popup__name { font-weight: 800; margin: 0; color: var(--navy); font-size: 0.9rem; }
.map-popup__acronyme { font-size: 0.8rem; color: var(--orange); font-weight: 700; margin: 2px 0 6px; }
.map-popup__link { font-size: 0.78rem; font-weight: 700; color: var(--navy); text-decoration: underline; }

/* ---------- Encart "Outre-mer" ----------
 * Les syndicats hors métropole (Guadeloupe, Martinique, Guyane, Réunion,
 * Mayotte...) n'ont pas de position géographique sensée sur ce schéma
 * (limité à la métropole + Corse) : ils sont listés à part, dans un encart
 * superposé en bas à gauche de la carte, plutôt que positionnés en %.
 */
.villes-map__overseas {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  max-width: 60%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  padding: 8px 10px;
}
.villes-map__overseas-title {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.villes-map__overseas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Encart plus compact : pins un peu plus petits que sur la carte */
.villes-map__overseas .map-marker { width: 34px; height: 34px; }
.villes-map__overseas .map-marker__img { padding: 5px; } /* même ratio ≈ 0,146×D qu'en desktop, voir .map-marker__img */

@media (max-width: 560px) {
  .villes-map__wrap { max-width: 100%; }
  .villes-map__overseas { max-width: 80%; }
}