/* =========================================================
   COMMUNES — ajustements de la page /explorer/communes
   ---------------------------------------------------------
   Étape 5 du plan §9 du CdC v3 (22/05/2026).

   Ce fichier ne contient QUE ce qui est propre à cette page :
     1. la couleur du hero (modificateur --communes, vert)
     2. l'espacement hero / carte / grille
     3. le mapping couleur des filtres et badges de clé 'dept'
        (explorer.css nomme la palette mauve '--departement' ; ici
         la clé technique du filtre est 'dept', impérative pour
         matcher point.tags.dept côté carte — d'où ce pont CSS,
         additif et SANS modification d'explorer.css)
     4. un léger renfort du highlight de fiche au clic sur la carte

   Le hero/conteneur viennent de sections-v2.css, la carte de
   carte-territoriale.css, la grille d'explorer.css.
   ========================================================= */


/* ---------------------------------------------------------
   1. Couleur du hero — vert (cohérent avec l'accent "lieux"
   du site, le hero --place et la porte verte du hub Explorer).
   --------------------------------------------------------- */

.v2-single__hero--communes {
  background: #edf5f0;  /* même vert clair que .v2-single__hero--place */
}


/* ---------------------------------------------------------
   2. Espacement hero / carte / grille
   --------------------------------------------------------- */

/* Conteneur blanc du hero : écart sous le bandeau (comme /explorer/articles)
   et marge basse maîtrisée avant la carte. */
.explorer-communes__hero-wrap {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

/* Carte en pleine largeur de la colonne de contenu (1060px), centrée,
   alignée avec la grille .explorer-page qui la suit. Encadrée dans un
   cadre blanc (comme les autres composants) pour ne plus « flotter ». */
.explorer-communes__carte {
  max-width: 1060px;
  margin: 0 auto 2rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  padding: 0.85rem;
  overflow: hidden;
}

/* La figure de la carte ne porte pas de marge propre dans ce cadre. */
.explorer-communes__carte .carte-territoriale {
  margin: 1;
}

/* La grille reprend la pleine largeur sous la carte : on annule le
   padding haut de .explorer-page pour ne pas cumuler avec la marge
   basse de la carte ci-dessus. */
.explorer-communes__grid-wrap {
  padding-top: 0;
}


/* ---------------------------------------------------------
   3. Pont couleur pour la clé de filtre 'dept'
   ---------------------------------------------------------
   explorer.css définit la teinte mauve sous le suffixe
   '--departement'. Le filter_group de cette page porte la clé
   technique 'dept' (obligatoire : la carte matche point.tags.dept).
   Le partial génère donc .explorer-pill--dept et .explorer-badge--dept,
   non stylés par explorer.css. On les mappe ici sur la même mauve.
   --------------------------------------------------------- */

.explorer-pill.is-active.explorer-pill--dept {
  background: #efe6f5;
  border-color: rgba(120, 80, 145, 0.4);
  color: #4d2f61;
  box-shadow: 0 2px 8px rgba(120, 80, 145, 0.15);
}

.explorer-badge--dept {
  background: rgba(120, 80, 145, 0.10);
  color: #4d2f61;
}


/* ---------------------------------------------------------
   4. Renfort du highlight de fiche (clic sur un point de carte)
   ---------------------------------------------------------
   explorer.css anime déjà .explorer-card.is-highlighted (halo rouge,
   2s, durée alignée sur le setTimeout d'explorer-grid.js). On ajoute
   un fond et une bordure le temps de l'animation pour que la fiche
   ciblée reste repérable une fois le défilement terminé.
   communes.css est chargé après explorer.css → priorité sur l'égalité
   de spécificité avec :hover.
   --------------------------------------------------------- */

.explorer-card.is-highlighted {
  border-color: rgba(180, 50, 50, 0.45);
  background: #fdf6f5;
}


/* ---------------------------------------------------------
   5. Responsive
   --------------------------------------------------------- */

@media (max-width: 700px) {
  .explorer-communes__carte {
    margin-bottom: 1.5rem;
  }
}