/* Carte des communes couvertes. Le SVG est dans la page — voir l'en-tête de
   outils/carte-haute-loire.js — donc il s'habille ici, avec les jetons du site
   plutôt qu'avec des couleurs recopiées. */

.carte-hl { margin: 28px 0; }

.carte-hl__svg { display: block; width: 100%; height: auto; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 16px; }

.carte-hl__departement { fill: var(--surface-warm); stroke: var(--accent-line); stroke-width: 1.5; stroke-linejoin: round; }

/* Le liseré clair sépare deux communes limitrophes — Monistrol-sur-Loire et
   Sainte-Sigolène se touchent — sans quoi elles se lisent comme une seule. */
.carte-hl__forme { fill: var(--accent); stroke: var(--surface); stroke-width: 1.2; stroke-linejoin: round; transition: fill .15s ease; }


/* `paint-order` pose le halo sous la lettre : l'étiquette reste lisible quand
   elle passe sur la silhouette du département. */
.carte-hl__nom { font-family: inherit; font-size: 24px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }

.carte-hl a { cursor: pointer; }
.carte-hl a:hover .carte-hl__forme,
.carte-hl a:focus-visible .carte-hl__forme { fill: var(--accent-deep); }
.carte-hl a:hover .carte-hl__nom,
.carte-hl a:focus-visible .carte-hl__nom { fill: var(--accent-deep); }
.carte-hl a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.carte-hl__legende { margin-top: 12px; color: var(--muted); font-size: .93rem; line-height: 1.55; }

/* Sur un téléphone, la carte tombe à moins de la moitié de sa largeur de
   référence : à 24 unités, les six noms deviennent illisibles. On les grossit
   dans le repère du SVG, ce que la disposition des étiquettes supporte.

   Deux étiquettes ne sont pas toujours éloignées verticalement — Brioude et
   Monistrol-sur-Loire n'ont que 32 unités d'écart, soit moins d'une ligne à
   cette taille. Ce qui les sépare est horizontal : Brioude est centrée à
   gauche du cadre, Monistrol alignée à droite au centre. Avant de déplacer une
   étiquette dans ETIQUETTES, vérifier les deux axes, pas seulement `y`. */
@media (max-width: 640px) {
  .carte-hl__nom { font-size: 33px; stroke-width: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-hl__forme { transition: none; }
}