/* Carte par ville et onglets : chargée par ces seules pages, hors du budget des pages publiques. */
:root { --carte-n1: #e6f6ee; --carte-n2: #bde6d1; --carte-n3: #74c7a2; --carte-n4: #128259; --ville-texte: #0b4a35; --ville-fort: #fff; --ville-moyen: #0b3d2c; }
[data-theme=dark] { --carte-n1: #2f5243; --carte-n2: #356b54; --carte-n3: #62ab8a; --carte-n4: #b5e8cf; --ville-texte: #e6ece9; --ville-fort: #0b2a22; --ville-moyen: #0b2a22; }
.carte-onglets { display: inline-flex; width: fit-content; padding: 0; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.carte-onglets a { padding: 9px 14px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--text); background: var(--surface); }
.carte-onglets a[aria-current] { background: var(--link); color: var(--surface); }
.carte-filtre { align-items: center; gap: 10px; margin: 0 0 12px; }
.carte-filtre select { max-width: 260px; }
.carte-ville { height: clamp(320px, 62vh, 560px); border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); isolation: isolate; overflow: hidden; }
.carte-ville.leaflet-container { font: inherit; }
/* Leaflet place .ville-pt avec un translate3d : ne jamais lui mettre de transform/scale, la pastille est le span intérieur. */
.ville-pt { display: flex !important; align-items: center; justify-content: center; border-radius: 50%; }
.carte-ville .ville-pt.leaflet-interactive { pointer-events: none; }
.ville-pt span { pointer-events: auto; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); font-size: 12px; font-weight: 700; line-height: 1; transition: width .15s, height .15s; }
.ville-pt.n1 span { background: var(--carte-n1); color: var(--ville-texte); }
.ville-pt.n2 span { background: var(--carte-n2); color: var(--ville-texte); }
.ville-pt.n3 span { background: var(--carte-n3); color: var(--ville-moyen); }
.ville-pt.n4 span { background: var(--carte-n4); color: var(--ville-fort); }
.ville-pt span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; }
.ville-pt.muet span { color: transparent; }
.ville-pt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.carte-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; }
.carte-legende li { display: inline-flex; align-items: center; gap: 6px; }
.pastille { width: 12px; height: 12px; border-radius: 50%; }
.pastille.n1 { background: var(--carte-n1); } .pastille.n2 { background: var(--carte-n2); }
.pastille.n3 { background: var(--carte-n3); } .pastille.n4 { background: var(--carte-n4); }
.carte-titre { margin: 18px 0 8px; font-size: 16px; }
.villes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.villes a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.villes a:hover { border-color: var(--link); }

.outils { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.portee { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.portee a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; color: var(--text); text-decoration: none; font-size: 14px; }
.portee a[aria-current] { background: var(--action); color: var(--on-action); }
.outils .carte-filtre { display: flex; align-items: center; gap: 8px; margin: 0; }
.outils .carte-filtre label { margin: 0; min-height: 0; font-size: 14px; font-weight: 400; color: var(--muted); }
.outils .carte-filtre select { width: auto; max-width: 240px; height: 38px; padding: 0 10px; }
.carte-ville.loin .ville-pt span { width: 76%; height: 76%; font-size: 11px; border-width: 1.5px; }
.carte-ville.tres-loin .ville-pt span { width: 60%; height: 60%; font-size: 10px; border-width: 1px; }
/* Leaflet est chargée après cette feuille : sélecteurs renforcés. */
.carte-ville .leaflet-popup-content-wrapper, .carte-ville .leaflet-popup-tip { background: var(--surface); color: var(--text); }
.carte-ville .leaflet-popup-content { margin: 12px 16px; }
.carte-ville .popup-ville a { color: var(--link); }
.popup-ville h3 { margin: 0 0 6px; font-size: 15px; }
.popup-ville ul { margin: 6px 0 8px; padding-inline-start: 16px; max-height: 200px; overflow: auto; }
.popup-ville li { margin-bottom: 5px; }
.popup-ville small { color: var(--muted); }
.villes-vide { color: var(--muted); }
.section-tete.carte-titre { margin: 22px 0 8px; }
.section-tete.carte-titre h3 { font-size: 16px; }
.carte-credits { margin: 12px 0 0; }
@media (max-width: 640px) {
  .portee { width: 100%; }
  .portee a { flex: 1; justify-content: center; min-height: 44px; padding: 0 6px; }
  .outils .carte-filtre { width: 100%; }
  .outils .carte-filtre select { flex: 1; min-width: 0; max-width: none; min-height: 44px; }
}