/* Carte de zone d'intervention : styles par défaut, chargés par carte.tpl.

   Tout est rangé dans la couche @layer adp-carte : n'importe quelle règle du
   skin (hors couche) l'emporte, quel que soit son ordre de chargement ou sa
   spécificité. Pour adapter la carte, il suffit donc d'écrire dans le CSS du site
   par ex.  .adp-cartes { --carte-trait: #0a4; }   ou   .adp-pin text { font-size: 13px; }
   Pour s'en passer entièrement : {include file="carte.tpl" ... css=false}
*/
@layer adp-carte {

.adp-cartes {
  --carte-trait: var(--blue, #610000);            /* contour du département */
  --carte-fond: rgba(19, 41, 75, .06);            /* remplissage du département */
  --carte-agence: var(--red, #e22020);            /* repère d'agence */
  --carte-agence-txt: var(--red-600, #da1212);
  --carte-encre: var(--ink, #16213a);
  --carte-texte: #3a4458;                         /* noms des villes */
  --carte-detour: #fafbfc;                        /* liseré autour des noms = couleur du fond */
  --carte-muted: var(--muted, #6b7486);
  --carte-ok: #188038;
  --carte-mid: #e37400;
  --carte-font-titre: var(--font-title, system-ui, sans-serif);
  --carte-font-texte: var(--font-text, system-ui, sans-serif);
}

.adp-map { margin: 14px 0 0; }
.adp-carte[hidden] { display: none; }
.adp-carte { animation: adp-fade .35s ease-out; }
@keyframes adp-fade { from { opacity: 0; } to { opacity: 1; } }

.adp-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.adp-map-dep {
  fill: var(--carte-fond);
  stroke: var(--carte-trait);
  stroke-width: 2.4;
  stroke-linejoin: round;
  transition: fill .45s, stroke .45s;
}
/* Animation d'entrée, armée par carte.js seulement (sans JS, la carte reste visible) */
.adp-cartes.is-armed .adp-map-dep { stroke-dasharray: var(--len, 1600); stroke-dashoffset: var(--len, 1600); }
.adp-cartes.is-armed .adp-pin { opacity: 0; }
.adp-cartes.is-visible .adp-map-dep { animation: adp-draw 2s cubic-bezier(.4, 0, .2, 1) forwards; }
.adp-map-loire { fill: none; stroke: #8fb3d9; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.adp-map-num {
  font-family: var(--carte-font-titre);
  font-weight: 800;
  font-size: 64px;
  letter-spacing: -.03em;
  fill: rgba(19, 41, 75, .12);
  text-anchor: middle;
}
.adp-map-voisins text {
  font-family: var(--carte-font-texte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: #9aa2b1;
  text-anchor: middle;
  transition: fill .3s;
}
.adp-map-voisins .n { font-family: var(--carte-font-titre); font-size: 24px; font-weight: 800; letter-spacing: 0; fill: #c6ccd6; transition: fill .3s; }
.adp-map-voisins path { fill: #f1f3f6; stroke: #dde1e8; stroke-width: 1; stroke-linejoin: round; transition: fill .3s, stroke .3s; }
.adp-map-voisins .is-hit path { fill: rgba(227, 116, 0, .12); stroke: var(--carte-mid); }
.adp-map-voisins .is-hit text, .adp-map-voisins .is-hit .n { fill: var(--carte-agence-txt); }
.adp-pin circle { fill: var(--carte-trait); stroke: #fff; stroke-width: 2; }
.adp-pin text {
  font-family: var(--carte-font-texte);
  font-size: 11.5px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--carte-texte);
  stroke: var(--carte-detour);
  stroke-width: 3.5px;
  paint-order: stroke;
}
.adp-map svg text { letter-spacing: 0; }
.adp-map .adp-map-voisins text { letter-spacing: .08em; }
.adp-map .adp-map-voisins .n { letter-spacing: 0; }
.adp-pin--big text { font-weight: 700; fill: var(--carte-encre); font-size: 12.5px; }
.adp-pin--home circle { fill: var(--carte-agence); }
.adp-pin--home text { fill: var(--carte-agence-txt); font-weight: 800; font-size: 14px; }
.adp-pin--home .halo { fill: none; stroke: var(--carte-agence); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: adp-halo 2.2s ease-out infinite; }
.adp-cartes.is-visible .adp-pin { animation: adp-pop .5s cubic-bezier(.2, .9, .3, 1.4) forwards; }
.adp-cartes.is-visible .adp-pin:nth-child(2) { animation-delay: 1.1s; }
.adp-cartes.is-visible .adp-pin:nth-child(3) { animation-delay: 1.2s; }
.adp-cartes.is-visible .adp-pin:nth-child(4) { animation-delay: 1.3s; }
.adp-cartes.is-visible .adp-pin:nth-child(5) { animation-delay: 1.4s; }
.adp-cartes.is-visible .adp-pin:nth-child(6) { animation-delay: 1.5s; }
.adp-cartes.is-visible .adp-pin:nth-child(7) { animation-delay: 1.6s; }
.adp-cartes.is-visible .adp-pin:nth-child(8) { animation-delay: 1.7s; }
.adp-cartes.is-visible .adp-pin:nth-child(9) { animation-delay: 1.8s; }
.adp-cartes.is-visible .adp-pin:nth-child(10) { animation-delay: 1.9s; }
.adp-cartes.is-visible .adp-pin:nth-child(11) { animation-delay: 2s; }
.adp-cartes.is-visible .adp-pin--home { animation-delay: .9s; }
@keyframes adp-draw { to { stroke-dashoffset: 0; } }
@keyframes adp-halo { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes adp-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* États posés par le test du code postal (carte.js) */
.adp-cartes.is-ok .adp-map-dep { fill: rgba(24, 128, 56, .12); stroke: var(--carte-ok); }
.adp-cartes.is-mid .adp-map-dep,
.adp-cartes.is-no .adp-map-dep { fill: rgba(19, 41, 75, .03); stroke: #c6ccd6; }

/* Légende */
.adp-map-legend { display: grid; gap: 6px; }
.adp-map-legend li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--carte-muted); }
.adp-map-legend i { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.adp-map-legend .ok { background: var(--carte-ok); }
.adp-map-legend .mid { background: var(--carte-mid); }

@media (max-width: 767px) {
  .adp-pin text { font-size: 15px; }
  .adp-pin--big text, .adp-pin--home text { font-size: 16px; }
  .adp-map-voisins text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .adp-map-dep { stroke-dashoffset: 0; }
  .adp-cartes.is-armed .adp-pin { opacity: 1; }
  .adp-cartes.is-armed .adp-map-dep { stroke-dashoffset: 0; }
  .adp-cartes.is-visible .adp-map-dep, .adp-cartes.is-visible .adp-pin, .adp-pin--home .halo { animation: none; }
}

}

/* Hors couche, exprès : la légende est une liste, et les puces/marges que les skins
   posent sur les listes (ex. .contenu ul li:before) l'emporteraient sur la couche.
   Reste surchargeable par une règle plus spécifique. */
.adp-cartes ul.adp-map-legend { margin: 16px 0 0; padding: 0; list-style: none; }
.adp-cartes .adp-map-legend li { margin: 0; padding: 0; }
.adp-cartes .adp-map-legend li:before { display: none; }