/* Carte schématique des zones d'une région (étape 24-B), sans JS.
   SVG inline généré à partir de vvv_core/scripts/build_carte_zones.py (aires d'AOC de l'INAO, licence ouverte Etalab). Aucun vert. */
@layer pages {
  .zone-map { margin: 0 0 var(--space-6); }
  .zone-map__figure { margin: 0 auto; max-width: 660px; }
  .zone-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
  .zone-map__svg--clip { overflow: hidden; background: transparent; }

  /* Teintes : fond, fond renforcé, couleur d'étiquette (contraste >= 4,5:1 sur le fond ; halo de la couleur de la zone). */
  .zm--z1, .zone-map__key--z1 { --zm-fill: var(--c-brand); --zm-strong: #98162f; --zm-ink: #fff; }
  .zm--z2, .zone-map__key--z2 { --zm-fill: var(--c-graphite); --zm-strong: #17120f; --zm-ink: #fff; }
  .zm--z3, .zone-map__key--z3 { --zm-fill: #8f5f3d; --zm-strong: #6b4126; --zm-ink: #fff; }
  .zm--z4, .zone-map__key--z4 { --zm-fill: #e0a03c; --zm-strong: #b97f1f; --zm-ink: var(--c-ink); }
  .zm--z5, .zone-map__key--z5 { --zm-fill: #7d2236; --zm-strong: #571424; --zm-ink: #fff; }
  .zm--z6, .zone-map__key--z6 { --zm-fill: #d6bd96; --zm-strong: #b8975f; --zm-ink: var(--c-ink); }
  .zm--z7, .zone-map__key--z7 { --zm-fill: var(--c-taupe-deep); --zm-strong: #4f3a30; --zm-ink: #fff; }
  .zm--z8, .zone-map__key--z8 { --zm-fill: #b0777f; --zm-strong: #8d5560; --zm-ink: var(--c-ink); }

  .zm--z9, .zone-map__key--z9 { --zm-fill: #b4562f; --zm-strong: #8a3d1d; --zm-ink: #fff; }
  .zm--z10, .zone-map__key--z10 { --zm-fill: #efd9b8; --zm-strong: #d3b17d; --zm-ink: var(--c-ink); }

  .zone-map__outline { fill: var(--zm-base, #fff9ef); stroke: #d9ccb6; stroke-width: .8; stroke-linejoin: round; pointer-events: none; }
  /* Plusieurs départements : le trait est peint sous le remplissage, les limites internes disparaissent (un seul contour de région). */
  .zone-map__outline--multi { paint-order: stroke; stroke-width: 1.6; }
  .zone-map__fond { fill: #ebe0cc; stroke: #ebe0cc; stroke-width: 1.2; stroke-linejoin: round; pointer-events: none; }

  .zm { cursor: pointer; outline: none; }
  /* Surface cliquable invisible : même tracé, gros trait transparent qui comble les blancs entre les taches (les aires INAO sont des semis de petites parcelles). */
  .zm__hit { fill: transparent; stroke: transparent; stroke-width: calc(var(--zm-stroke, 2) * 6); stroke-linejoin: round; pointer-events: all; }
  .zm__shape { fill: var(--zm-fill); stroke: var(--zm-fill); stroke-width: var(--zm-stroke, 2); stroke-linejoin: round; transition: fill .18s, stroke .18s; }
  .zm__label { font: 600 var(--zm-fs, 13px)/1 var(--font-body, system-ui, sans-serif); fill: var(--zm-ink); stroke: var(--zm-fill); stroke-width: calc(var(--zm-fs, 13px) * 0.22); stroke-linejoin: round; paint-order: stroke; pointer-events: none; transition: font-size .18s; }
  .zm__label--out { fill: var(--c-ink); stroke: #fff; }
  .zm:hover, .zm:focus-visible { filter: drop-shadow(0 2px 3px rgba(var(--c-black-rgb), .45)); }
  .zm:hover .zm__shape, .zm:focus-visible .zm__shape { fill: var(--zm-strong); stroke: var(--zm-strong); }
  .zm:hover .zm__label, .zm:focus-visible .zm__label { font-size: calc(var(--zm-fs, 13px) * 1.1); font-weight: 700; }
  .zm:hover .zm__label:not(.zm__label--out), .zm:focus-visible .zm__label:not(.zm__label--out) { stroke: var(--zm-strong); }
  .zm:focus-visible .zm__shape { stroke: var(--c-ink); stroke-width: 3; paint-order: stroke; }

  .zone-map__legend { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
  .zone-map__keys { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-s); }
  .zone-map__key { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
  .zone-map__key::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--zm-fill); flex: none; }
  /* Zone sans aire INAO : pas de forme sur la carte, pastille vide. */
  .zone-map__key--none::before { background: none; border: 1.5px dashed var(--c-taupe-deep, #7a6655); }
  .zone-map__key:hover, .zone-map__key:focus-visible { text-decoration: underline; }
  .zone-map__note { margin: 0; font-size: var(--text-xs); color: var(--c-ink-soft); }

  @media (max-width: 600px) {
    .zm__label { display: none; }
    .zone-map__keys { flex-direction: column; }
  }
  @media (prefers-reduced-motion: reduce) { .zm__shape, .zm__label { transition: none; } }
}