/* ==========================================================================
   Monclar Studio : pages Villes (hub + 14 villes) et Secteurs (hub + 4 secteurs).
   Complète css/site.css ; aucune variable nouvelle, aucune ombre ; la planche de repérage est un cadre à 16 px (--r).
   ========================================================================== */

/* ---------- marqueur « à compléter » (dans la palette, souligné pointillé) ---------- */
mark.todo { background: none; color: inherit; text-decoration: underline dotted currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- bloc données en pleine largeur dans une section (trajet, délais, mesures) ---------- */
.sec .data.sec__full { margin-bottom: 8px; }
.sec .data.sec__full + .sec__body { margin-top: 12px; }

/* ---------- la planche de repérage (hub villes) : un SVG posé sur la grille ---------- */
.map__wrap { grid-column: 1 / 10; border: 1px solid var(--rule); border-radius: var(--r); padding: clamp(12px, 1.6vw, 24px); background: var(--paper); }
.map { display: block; width: 100%; height: auto; font-family: var(--f-text); font-size: 19px; letter-spacing: .02em; }
.map__grid { stroke: var(--rule); stroke-width: 1; }
.map__ring { fill: none; stroke: var(--spark); stroke-width: 1; stroke-dasharray: 6 8; }
.map__km { fill: var(--green-2); font-size: 17px; }
.map__origin line { stroke: var(--green-2); stroke-width: 1.5; }
.map__origin circle { fill: none; stroke: var(--green-2); stroke-width: 1.5; }
.map__pt { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.map__pt--far { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.map__n { fill: var(--green-2); font-weight: 500; }
.map__t { fill: var(--ink); }
.map__tm { fill: var(--ink-2); }
.map__cap { fill: var(--ink-2); font-size: 15px; }
.map__city { cursor: pointer; }
.map__city:hover .map__t, .map__city:focus-visible .map__t { fill: var(--green-2); }
.map__city:hover .map__pt { fill: var(--green-2); stroke: var(--green-2); }
.map__city:focus-visible { outline: none; }
.map__city:focus-visible .map__pt { stroke: var(--spark); stroke-width: 4; }
.motion .map__ring { stroke-dashoffset: 0; }

/* ---------- mobile : la planche garde les numéros, les listes portent les noms ---------- */
@media (max-width: 1100px) {
  .map__wrap { grid-column: 1 / 13; }
  .map { font-size: 22px; }
}
@media (max-width: 860px) {
  .map__wrap { padding: 10px; margin-bottom: 24px; }
  .map { font-size: 34px; }
  .map__t, .map__km, .map__cap { display: none; }
  .map__pt { r: 8; }
  .sec .data.sec__full { margin-bottom: 20px; }
}

/* Contraste (mesuré Lighthouse) : légende sur fond vert */
.dark .cap .lbl { color: rgba(249, 246, 242, .82); }