/* Carte schématique des régions viticoles (étape 23-M), sans JS.
   SVG inline généré par vvv_core/scripts/build_carte_regions.py ; 4 familles = 4 teintes de la palette (aucun vert). */
@layer pages {
  .region-map { padding-top: var(--space-5); }
  .region-map__figure { margin: 0 auto; max-width: 640px; }
  .region-map__svg { display: block; width: 100%; height: auto; overflow: visible; }

  /* Famille : fond, fond renforcé, couleur d'étiquette (contraste >= 4,5:1 sur le fond). */
  .rm__label--f1, .rm__label--f2, .rm__label--f3 { --rm-ink: #fff; }
  .rm__label--f4 { --rm-ink: var(--c-ink); }
  .rm--f1 { --rm-fill: var(--c-brand); --rm-strong: #98162f; --rm-ink: #fff; }
  .rm--f2 { --rm-fill: var(--c-taupe-deep); --rm-strong: #4f3a30; --rm-ink: #fff; }
  .rm--f3 { --rm-fill: var(--c-graphite); --rm-strong: #17120f; --rm-ink: #fff; }
  .rm--f4 { --rm-fill: #d6bd96; --rm-strong: #b8975f; --rm-ink: var(--c-ink); }

  .region-map__neutral { fill: #f1eadd; stroke: #f1eadd; stroke-width: .6; stroke-linejoin: round; }
  .region-map__borders { fill: none; stroke: var(--c-white); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
  .region-map__outline { fill: none; stroke: #d9ccb6; stroke-width: .8; stroke-linejoin: round; pointer-events: none; }

  .rm { cursor: pointer; outline: none; }
  .rm__shape { fill: var(--rm-fill); stroke: var(--rm-fill); stroke-width: .8; stroke-linejoin: round; transition: fill .18s, stroke .18s; }
  .rm__label { font: 600 14.5px/1 var(--font-body, system-ui, sans-serif); fill: var(--rm-ink); pointer-events: none; transition: font-size .18s; }
  .rm__label--out { fill: var(--c-ink); }
  .rm:hover, .rm:focus-visible { filter: drop-shadow(0 2px 3px rgba(var(--c-black-rgb), .45)); }
  .rm:hover .rm__shape, .rm:focus-visible .rm__shape { fill: var(--rm-strong); stroke: var(--rm-strong); }
  .rm:hover .rm__label, .rm:focus-visible .rm__label { font-size: 15.5px; font-weight: 700; }
  .rm:focus-visible .rm__shape { stroke: var(--c-ink); stroke-width: 2.4; paint-order: stroke; }

  .region-map__legend { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
  .region-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); }
  .region-map__key { display: inline-flex; align-items: center; gap: 8px; }
  .region-map__key::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--k); flex: none; }
  .region-map__key--f1 { --k: var(--c-brand); }
  .region-map__key--f2 { --k: var(--c-taupe-deep); }
  .region-map__key--f3 { --k: var(--c-graphite); }
  .region-map__key--f4 { --k: #d6bd96; }
  .region-map__note { margin: 0; font-size: var(--text-xs); color: var(--c-ink-soft); }

  @media (max-width: 600px) {
    .region-map { padding-top: var(--space-3); }
    .rm__label { display: none; }
    .region-map__legend { flex-direction: column; align-items: flex-start; }
  }
  @media (prefers-reduced-motion: reduce) { .rm__shape, .rm__label { transition: none; } }
}