/* Carte des départements + filtres — page Galerie (Task 9).
   Chargé uniquement sous le drapeau preview (cf. functions.php), mais les
   sélecteurs restent scopés body.cl-refonte-preview en défense en profondeur. */

body.cl-refonte-preview .cl-deptmap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 32px;
  background: var(--bg2, #E6E8D7);
  transition: background-color .4s;
}

body.cl-refonte-preview .cl-deptmap__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body.cl-refonte-preview .cl-deptmap__pillgroup {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--bg, #F4F0E6);
}

body.cl-refonte-preview .cl-deptmap__pill {
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink, #1B241D);
  font: 600 14px 'Hanken Grotesk', sans-serif;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background-color .3s, color .3s;
}

body.cl-refonte-preview .cl-deptmap__pill.is-active {
  background: var(--ink, #1B241D);
  color: var(--bg, #F4F0E6);
}

body.cl-refonte-preview .cl-deptmap__pill:hover:not(.is-active) {
  background: color-mix(in srgb, var(--ink, #1B241D) 10%, transparent);
}

body.cl-refonte-preview .cl-deptmap__reset {
  border: 1px solid var(--line, #D6E0C6);
  background: var(--card, #F4F0E6);
  color: var(--ink, #1B241D);
  cursor: pointer;
  font: 500 14px 'Hanken Grotesk', sans-serif;
  padding: 9px 18px;
  border-radius: 999px;
  transition: background-color .3s;
}

body.cl-refonte-preview .cl-deptmap__reset:hover {
  background: var(--bg, #F4F0E6);
}

body.cl-refonte-preview .cl-deptmap__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.cl-refonte-preview .cl-deptmap__svg {
  width: 100%;
  min-height: 420px;
  max-height: 560px;
  display: block;
}

body.cl-refonte-preview .cl-deptmap__svg path,
body.cl-refonte-preview .cl-deptmap__svg circle {
  stroke: var(--line, #D6E0C6);
  stroke-width: .8px;
  transition: fill .35s ease, fill-opacity .35s ease, stroke .35s ease;
}

body.cl-refonte-preview .cl-deptmap__svg path.is-active,
body.cl-refonte-preview .cl-deptmap__svg circle.is-active {
  fill: var(--h2, #7DAF68);
}

body.cl-refonte-preview .cl-deptmap__svg path.is-empty {
  fill: var(--bg, #F4F0E6);
}

body.cl-refonte-preview .cl-deptmap__svg path.is-selected,
body.cl-refonte-preview .cl-deptmap__svg circle.is-selected {
  fill: var(--accent, #C98B3B);
}

body.cl-refonte-preview .cl-deptmap__svg path:hover.is-active,
body.cl-refonte-preview .cl-deptmap__svg circle:hover.is-active {
  stroke: var(--ink, #1B241D);
  stroke-width: 1.6px;
}

body.cl-refonte-preview .cl-deptmap__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted, #5C6358);
}

body.cl-refonte-preview .cl-deptmap__swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

body.cl-refonte-preview .cl-deptmap__swatch--has {
  background: var(--h2, #7DAF68);
  margin-left: 4px;
}

body.cl-refonte-preview .cl-deptmap__swatch--none {
  background: var(--bg, #F4F0E6);
  box-shadow: inset 0 0 0 1px var(--line, #D6E0C6);
  margin-left: 14px;
}

body.cl-refonte-preview .cl-deptmap__status {
  margin: 0;
  font-size: 15px;
  color: var(--muted, #5C6358);
}

body.cl-refonte-preview .cl-deptmap__tip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  background: var(--ink, #1B241D);
  color: var(--bg, #F4F0E6);
  font: 500 13px 'Hanken Grotesk', sans-serif;
  padding: 6px 12px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Masque intégralement l'ancien panneau de filtres/pagination : ce nouveau
   fichier devient le seul gestionnaire de visibilité des cartes (JS).
   Gated sur .cl-deptmap-active (posée en JS seulement si ce script tourne
   vraiment) plutôt que sur .cl-refonte-preview seul : si d3/topojson ne
   chargent pas (bloqueur, CSP, panne CDN), l'ancien panneau reste visible en
   secours au lieu de disparaître sans que rien ne le remplace. */
body.cl-deptmap-active .cl-gallery-toolbar,
body.cl-deptmap-active .cl-gallery-subfilters,
body.cl-deptmap-active .cl-gallery-pagination {
  display: none !important;
}

@media (max-width: 720px) {
  body.cl-refonte-preview .cl-deptmap__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  body.cl-refonte-preview .cl-deptmap__svg {
    min-height: 320px;
  }
}