/* ══ Page « Zones d'intervention » : carte, liste filtrable et blocs visuels ══
   Chargée uniquement par /zones-intervention/. L'image du bandeau utilise les
   règles .has-illu / .h-hero-illu de home.css. */

/* En-tête de section */
.z-head h2 { font-size: 1.6rem; font-weight: 800; color: var(--pine-800); margin: 1.2rem 0 .3rem; letter-spacing: -.01em; }
.z-head p { color: var(--ink-700); margin: 0 0 1.4rem; max-width: 46rem; line-height: 1.6; }

/* Carte + liste */
.z-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.z-map-card, .z-panel { background: #fff; border: 1px solid var(--line-soft); border-radius: 1.2rem; box-shadow: 0 18px 40px -24px rgba(30, 50, 9, .45); }
.z-map-card { position: relative; overflow: hidden; }
.z-map { display: block; width: 100%; height: auto; }
.z-nb { fill: #e8eee0; stroke: #fff; stroke-width: calc(1.2px / var(--zk, 1)); }
.z-paris { fill: #dfe5d6; stroke: #fff; stroke-width: calc(1.5px / var(--zk, 1)); }
.z-paris-label { font: 800 13px 'Source Sans 3', sans-serif; letter-spacing: .3em; fill: #9aa493; text-anchor: middle; }
.z-commune path { fill: var(--f); stroke: #fff; stroke-width: calc(1.6px / var(--zk, 1)); cursor: pointer; transition: fill .2s, opacity .2s; }
.z-commune.is-cab path { fill: #ecd49a; }
.z-commune:hover path, .z-commune.on path, .z-commune:focus path { fill: var(--pine-500); }
.z-commune.is-cab:hover path, .z-commune.is-cab.on path { fill: #c9a35a; }
.z-commune.dim path { opacity: .3; }
.z-commune:focus { outline: none; }
.z-seine { fill: none; stroke: #8cc3ea; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.z-seine2 { fill: none; stroke: #bfe0f7; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.z-ring { fill: none; stroke: #23380d; stroke-opacity: .3; stroke-width: calc(1.5px / var(--zk, 1)); stroke-dasharray: 5 6; pointer-events: none; }
.z-ring-label { font: 700 11px 'Source Sans 3', sans-serif; fill: #45503f; opacity: .8; pointer-events: none; }
.z-labels text { font: 700 calc(11.5px / var(--zk, 1)) 'Source Sans 3', sans-serif; fill: #23380d; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: calc(3px / var(--zk, 1)); stroke-linejoin: round; pointer-events: none; transition: fill .2s; }
.z-labels text.on { fill: #fff; stroke: #3a6b16; }
.z-labels text.dim { opacity: .35; }
.z-cab { pointer-events: none; }
.z-pulse { fill: #c9a35a; opacity: 0; transform-box: fill-box; transform-origin: center; animation: zpulse 2.4s ease-out infinite; }
@keyframes zpulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(4.5); } }
.z-tip { position: absolute; z-index: 2; pointer-events: none; background: #23380d; color: #fff; border-radius: .6rem; padding: .45rem .7rem; font-size: .85rem; line-height: 1.3; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); transform: translate(-50%, calc(-100% - 14px)); white-space: nowrap; }
.z-tip[hidden] { display: none; }
.z-tip strong { display: block; }
.z-tip span { color: #ecd49a; font-size: .78rem; }
.z-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .75rem 1rem; border-top: 1px solid var(--line-soft); font-size: .82rem; color: var(--ink-700); }
.z-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.z-legend i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid transparent; display: inline-block; }
.z-legend .z-legend-cab { background: #c9a35a; border-radius: 50%; }
.z-credit { flex-basis: 100%; font-size: .7rem; color: var(--ink-500); }
.z-hint { flex-basis: 100%; font-size: .78rem; color: var(--ink-500); }
.z-legend .z-legend-seine { background: #8cc3ea; height: 6px; border-radius: 3px; }

.z-panel { padding: 1rem; }
.z-search { display: flex; align-items: center; gap: .6rem; background: var(--cream-50); border: 1.5px solid var(--line-soft); border-radius: .8rem; padding: .65rem .8rem; }
.z-search:focus-within { border-color: var(--pine-500); background: #fff; }
.z-search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-500); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.z-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: .95rem; width: 100%; color: var(--ink-900); }
.z-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .8rem 0 .4rem; }
.z-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1.5px solid var(--line-soft); background: #fff; border-radius: 999px; padding: .3rem .75rem; font: 600 .85rem 'Source Sans 3', sans-serif; color: var(--ink-700); cursor: pointer; }
.z-chip b { font-weight: 800; color: var(--pine-700); }
.z-chip i { width: 9px; height: 9px; border-radius: 50%; }
.z-chip.on { background: var(--pine-900); border-color: var(--pine-900); color: #fff; }
.z-chip.on b { color: #ecd49a; }
.z-sort { font-size: .78rem; color: var(--ink-500); margin: .2rem 0 .6rem; }
.z-list { display: grid; gap: .45rem; max-height: 520px; overflow: auto; padding-right: .2rem; }
.z-city { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border: 1px solid var(--line-soft); border-radius: .8rem; text-decoration: none; color: inherit; transition: background .15s, border-color .15s, transform .15s; }
.z-city[hidden] { display: none; }
.z-city:hover, .z-city.on { background: var(--mint-100); border-color: var(--pine-500); transform: translateX(3px); }
.z-city.is-cab { background: linear-gradient(135deg, #fbf3df, #f3e3bb); border-color: #e3c98d; }
.z-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.z-city-txt { flex: 1; min-width: 0; }
.z-city-txt strong { display: block; color: var(--pine-800); font-size: .95rem; }
.z-city-txt span { font-size: .78rem; color: var(--ink-500); }
.z-city em { font-style: normal; font-weight: 700; font-size: .8rem; color: var(--pine-700); background: var(--mint-100); padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
.z-city.is-cab em { background: #c9a35a; color: #23380d; }
.z-city svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-500); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.z-empty { font-size: .9rem; color: var(--ink-700); margin: .6rem .2rem 0; }
.z-empty[hidden] { display: none; }
.z-empty a { color: var(--pine-700); font-weight: 700; }
.z-empty a:hover { color: var(--pine-900); }

/* Copie de la carte sur la page d'accueil (section #zone), sans la liste :
   carte à gauche ; texte, départements et bouton à droite (empilés sur mobile). */
#zone .h-zone-grid { display: grid; gap: 1.5rem; margin-top: 1.35rem; align-items: center; }
#zone .h-zone-side .h-lead-text { margin: 0 0 1.1rem; }
#zone .h-zone-side .h-dept-row { margin: 0 0 1.4rem; }
#zone .h-zone-side .h-city-row { margin: 0; }
@media (min-width: 1024px) {
  #zone .h-zone-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; }
}

/* Zoom et déplacement (zones.js) : sans zoom, le doigt fait défiler la page ;
   zoomé, il déplace la carte. */
.z-map { touch-action: pan-y; }
.z-map.is-zoomed { touch-action: none; cursor: grab; }
.z-map.is-zoomed .z-commune path { cursor: pointer; }
.z-map.is-dragging, .z-map.is-dragging .z-commune path { cursor: grabbing; }
.z-map-wrap { position: relative; }
.z-zoom { position: absolute; bottom: .75rem; right: .75rem; z-index: 1; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-soft); border-radius: .7rem; box-shadow: 0 8px 20px -10px rgba(30, 50, 9, .45); overflow: hidden; }
.z-zoom button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: #fff; color: var(--pine-800); font: 700 1.3rem/1 'Source Sans 3', sans-serif; cursor: pointer; padding: 0; }
.z-zoom button + button { border-top: 1px solid var(--line-soft); }
.z-zoom button:hover:not(:disabled) { background: var(--mint-100); }
.z-zoom button:disabled { color: #c6cbc0; cursor: default; }
.z-zoom button:focus-visible { outline: 2px solid var(--pine-500); outline-offset: -3px; }
.z-zoom svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Atouts « diagnostiqueur local » */
.z-why h2 { text-align: center; font-size: 1.6rem; font-weight: 800; color: var(--pine-800); margin: 0 0 1.6rem; }
.z-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.z-why-grid article { background: #fff; border: 1px solid var(--line-soft); border-radius: 1.2rem; padding: 1.4rem; box-shadow: 0 14px 30px -24px rgba(30, 50, 9, .5); }
.z-why-ico { width: 72px; height: 72px; border-radius: 1.1rem; background: var(--pine-900); display: grid; place-items: center; margin-bottom: .9rem; }
.z-why-ico svg { width: 52px; height: 52px; }
.z-why-grid h3 { font-size: 1.1rem; color: var(--pine-800); margin: 0 0 .4rem; }
.z-why-grid p { font-size: .93rem; line-height: 1.6; color: var(--ink-700); margin: 0; }

/* « Votre ville n'est pas dans la liste ? » */
.z-idf { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; background: linear-gradient(135deg, #223610, #2c4713 55%, #345518); border-radius: 1.4rem; padding: 2rem 2.2rem; color: #faf7ee; overflow: hidden; }
.z-idf h2 { color: #fff; font-size: 1.6rem; margin: .3rem 0 .6rem; }
.z-idf p { color: rgba(250, 247, 238, .85); line-height: 1.65; }
.z-idf strong { color: #ecd49a; }
.z-idf-visual { position: relative; }
.z-idf-map { width: 100%; height: auto; display: block; }
.z-dep { fill: rgba(250, 247, 238, .1); stroke: #c9a35a; stroke-width: 1.4; animation: zdep .8s ease both; }
.z-dep.is-home { fill: #c9a35a; }
@keyframes zdep { from { opacity: 0; } }
.z-idf-map text { font: 800 15px 'Source Sans 3', sans-serif; fill: #ecd49a; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.z-idf-map text.sm { font-size: 11px; fill: #fff; }
.z-idf-home { position: absolute; left: 0; bottom: 0; font-size: .8rem; background: rgba(0, 0, 0, .25); padding: .3rem .7rem; border-radius: 999px; color: #ecd49a; }

@media (max-width: 600px) {
  .z-labels text { font-size: calc(21px / var(--zk, 1)); stroke-width: calc(4px / var(--zk, 1)); }
  .z-labels text.minor, .z-ring-label { display: none; }
  /* Zoomé x2 ou plus : la place suffit pour les noms des petites communes */
  .z-map.is-zoomed-2 .z-labels text.minor { display: inline; }
}
@media (max-width: 980px) {
  .z-layout { grid-template-columns: 1fr; }
  .z-list { max-height: none; }
  .z-why-grid { grid-template-columns: 1fr; }
  .z-idf { grid-template-columns: 1fr; padding: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .z-pulse, .z-dep { animation: none; } }