/* ==========================================================================
   La carte des initiatives
   Les couleurs viennent de la charte : elles sont déclarées dans style.css.
   ========================================================================== */

.mdm-carte-bloc { margin-block: var(--pas-2); }

.mdm-carte-barre {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  margin-bottom: .75rem;
}
.mdm-carte-recherche {
  flex: 1 1 18rem; max-width: 26rem;
  font-family: var(--bouton); font-size: 1rem;
  padding: .6rem .9rem;
  border: var(--contour) solid var(--trait); border-radius: var(--rayon);
  background: var(--papier); color: var(--bleu);
}
.mdm-carte-compte { margin: 0; font-family: var(--bouton); color: var(--gris); }

.mdm-carte-legende {
  list-style: none; margin: 0 0 .9rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
}
.mdm-carte-legende label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--bouton); font-size: .95rem; cursor: pointer;
}
.mdm-pastille {
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--papier), 0 0 0 3px rgba(22,32,58,.18);
}

#mdm-carte {
  height: var(--mdm-carte-hauteur, 600px);
  border-radius: 20px;      /* le rayon des cartes de madmars.fr */
  overflow: hidden;
  border: var(--contour) solid var(--trait);
  background: var(--papier-ombre);
}

/* Le marqueur : une pastille pleine, de la couleur de sa thématique. */
.mdm-marqueur span {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(22,32,58,.4);
}

/* Sauf les récits du bonheur : un soleil, deux fois plus gros, sans pastille
   derrière. Il n'entre dans aucun amas — c'est sa raison d'être. */
.mdm-marqueur--soleil .mdm-soleil,
.mdm-marqueur--soleil span {
  display: block; width: 41px; height: 41px;
  border-radius: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 1px 3px rgba(22,32,58,.45));
}
.mdm-pastille--soleil {
  width: auto; height: auto; box-shadow: none; line-height: 0;
}
.mdm-pastille--soleil .mdm-soleil { display: block; }

/* La bulle. Leaflet pose sa propre boîte : on n'habille que le dedans. */
.mdm-bulle .maplibregl-popup-content {
  border-radius: 14px; padding: .9rem 1.1rem;
  font-family: var(--texte); color: var(--bleu);
  box-shadow: 0 4px 18px rgba(22,32,58,.18);
}
.mdm-bulle .maplibregl-popup-close-button {
  font-size: 1.3rem; color: var(--gris); padding: .1rem .5rem;
}
.mdm-bulle .maplibregl-popup-tip { border-top-color: var(--papier); }
.mdm-bulle__nom { display: block; font-family: var(--titre); font-size: 1.1rem; color: var(--orange); }
/* Le titre d'un récit mène à sa fiche : il doit se voir comme un lien. */
a.mdm-bulle__nom { text-decoration: underline; text-underline-offset: 3px; }
a.mdm-bulle__nom:hover, a.mdm-bulle__nom:focus { color: var(--bleu); }
/* Une adresse écrite dans la précision — une vidéo, le plus souvent. */
.mdm-bulle p a { word-break: break-all; }
.mdm-bulle__cat { display: block; font-family: var(--bouton); font-size: .85rem; color: var(--gris); margin-top: .15rem; }
.mdm-bulle__adr { display: block; margin-top: .4rem; }
/* La précision est saisie sur plusieurs lignes : elle les garde. */
.mdm-bulle p { margin: .5rem 0 0; white-space: pre-line; }
.mdm-bulle a { display: inline-block; margin-top: .5rem; color: var(--orange); }
.mdm-bulle__site { font-family: var(--bouton); text-transform: uppercase; letter-spacing: .04em; }

/* Les amas sont dessinés par MapLibre lui-même, dans carte.js : un cercle
   bleu cerclé de blanc, et le nombre en Source Sans Pro — la seule police
   grasse que l'IGN serve avec ses tuiles. */

/* Le marqueur d'un récit est un bouton : on lui retire son allure de bouton. */
.mdm-marqueur--soleil {
  border: 0; padding: 0; background: none; cursor: pointer; line-height: 1;
}

/* Les vignettes des récits : cinq par ligne, donc plus étroites et plus
   basses que les cartes d'initiative. L'image passe en 4/3 — une image carrée
   à cinq par ligne faisait une bande de vignettes plus haute que large. */
.mdm-recits { margin-top: var(--pas-2); }
.mdm-recit { height: 100%; }
.mdm-recit .mdm-carte__image { aspect-ratio: 4 / 3; }
.mdm-recit .mdm-carte__corps { padding: .8rem .9rem 1rem; }
.mdm-recit .mdm-carte__titre { font-size: clamp(1rem, 1.3vw, 1.15rem); }
.mdm-recit .mdm-carte__texte { font-size: .9rem; }
.mdm-recit__lieu {
  display: block; margin-top: .2rem;
  font-family: var(--bouton); font-size: .8rem; color: var(--gris);
}
.mdm-carte__image--vide {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; width: 100%;
  background: var(--jaune); font-size: 2.4rem;
}
.mdm-recits__vide { font-family: var(--bouton); color: var(--gris); }

@media (max-width: 600px) {
  #mdm-carte { border-radius: 12px; }
  .mdm-carte-legende { gap: .35rem .7rem; }
}

/* Sur un écran large, une carte de 600 px dans 1 500 px de large est un
   bandeau : on lui rend de la hauteur, sans dépasser la fenêtre. */
@media (min-width: 1200px) {
  #mdm-carte { height: clamp(600px, 68vh, 820px); }
}