/* Marlis — rubrique publique « Lieux ».

   Toutes les règles sont portées par `.ms.lieux` : elles ne peuvent atteindre
   ni l'application (hors du conteneur .ms), ni les autres pages publiques.
   La page porte `class="ms accueil lieux"` — elle hérite donc des jetons de
   couleur, des boutons, des titres et de l'en-tête d'accueil.css, et ce
   fichier ne décrit que ce qui lui est propre.

   Sommaire
   1. Socle de page
   2. Héros
   3. Barre de recherche et filtres
   4. Cartes de lieu et grilles
   5. Résultats et état vide
   6. Bloc éditorial « Les galeries du moment »
   7. Les régions
   7 bis. Explorer par région (/lieux/carte)
   8. La fiche d'un lieu
   8. Bannière « Préparez votre candidature »
   9. Respiration : réglages par largeur d'écran
*/

/* ===================== 1. SOCLE DE PAGE ===================== */
.ms.lieux .lx-in {
  width: 100%;
  max-width: 1288px;
  margin: 0 auto;
  padding: 0 24px;
}
.ms.lieux .lx-section {
  margin-top: 56px;
  /* L'en-tête est collant : une ancre qui vise le haut exact de la section
     la ferait passer dessous. */
  scroll-margin-top: 92px;
}
.ms.lieux .lx-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 22px;
}
.ms.lieux .lx-tete h2 {
  margin: 0;
}
.ms.lieux .lx-note {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ac-encre-3);
}
/* accueil.css couvre déjà a, button, input et .ac-b ; le select, non. */
.ms.lieux select:focus-visible {
  outline: 2px solid var(--ac-vert);
  outline-offset: 2px;
}
.ms.lieux .lx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Le repli d'image : jamais de vignette cassée, jamais de trou blanc. */
.ms.lieux .lx-im {
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--ac-fond-2), var(--ac-sable));
}
.ms.lieux .lx-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ms.lieux .lx-im-repli {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 26px;
  color: rgba(66, 78, 60, 0.5);
  background: linear-gradient(150deg, var(--ac-fond-2), var(--ac-sable));
}

/* ======================== 2. HÉROS ======================== */
.ms.lieux .lx-heros {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ac-fond);
}
.ms.lieux .lx-heros-txt {
  padding: 40px 24px 36px;
  max-width: 1288px;
  width: 100%;
  margin: 0 auto;
}
.ms.lieux .lx-heros-txt .ac-oeil {
  display: block;
  margin-bottom: 20px;
}
.ms.lieux .lx-heros-sous {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ac-vert);
  margin-top: 6px;
}
.ms.lieux .lx-heros .ac-chapo {
  margin-top: 22px;
  max-width: 46ch;
}
.ms.lieux .lx-heros .ac-actions {
  margin-top: 30px;
}
.ms.lieux .lx-heros-im {
  position: relative;
  min-height: 260px;
  height: 52vw;
  max-height: 400px;
  background: var(--ac-sable);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
}
.ms.lieux .lx-heros-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
}

/* ============= 3. BARRE DE RECHERCHE ET FILTRES ============= */
.ms.lieux .lx-recherche {
  margin-top: 34px;
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-l);
  box-shadow: var(--ac-ombre);
  padding: 14px;
}
.ms.lieux .lx-recherche-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ms.lieux .lx-champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* Les champs s'alignent par le bas, jamais par le haut. Sur une seule
     ligne, les trois listes portent un libellé et « Rechercher » n'en porte
     pas : aligné en haut, son cadre flottait 22 px au-dessus des autres et
     laissait un vide sous lui. Par le bas, tous les cadres reposent sur la
     même ligne — c'est ce que fait déjà le bouton « Filtres ». */
  justify-content: flex-end;
}
.ms.lieux .lx-champ > span {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ac-encre-3);
  font-weight: 500;
}
.ms.lieux .lx-saisie {
  position: relative;
  display: flex;
  align-items: center;
}
.ms.lieux .lx-saisie svg {
  position: absolute;
  left: 14px;
  color: var(--ac-encre-3);
  pointer-events: none;
}
.ms.lieux .lx-saisie input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-s);
  background: var(--ac-fond);
  color: var(--ac-encre);
  font: inherit;
  font-size: 14.5px;
}
.ms.lieux .lx-saisie input::placeholder {
  color: var(--ac-encre-3);
}
.ms.lieux .lx-saisie input:hover {
  border-color: var(--ac-bord-fort);
}
.ms.lieux .lx-select {
  position: relative;
  display: flex;
  align-items: center;
}
.ms.lieux .lx-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-s);
  background: var(--ac-fond);
  color: var(--ac-encre);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
}
.ms.lieux .lx-select select:hover {
  border-color: var(--ac-bord-fort);
}
.ms.lieux .lx-select svg {
  position: absolute;
  right: 12px;
  color: var(--ac-encre-3);
  pointer-events: none;
}
.ms.lieux .lx-bouton-filtres {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-s);
  background: var(--ac-fond);
  color: var(--ac-encre);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  align-self: end;
}
.ms.lieux .lx-bouton-filtres:hover {
  border-color: var(--ac-vert);
  color: var(--ac-vert);
}
.ms.lieux .lx-bouton-filtres[aria-expanded="true"] {
  background: var(--ac-vert);
  border-color: var(--ac-vert);
  color: #f6f3ec;
}
.ms.lieux .lx-avances {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ac-bord);
}
.ms.lieux .lx-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ms.lieux .lx-puce {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--ac-bord);
  border-radius: 999px;
  background: var(--ac-fond);
  color: var(--ac-encre-2);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.ms.lieux .lx-puce:hover {
  border-color: var(--ac-vert);
  color: var(--ac-vert);
}
.ms.lieux .lx-puce[aria-pressed="true"] {
  background: var(--ac-vert);
  border-color: var(--ac-vert);
  color: #f6f3ec;
}
.ms.lieux .lx-barre-etat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-top: 14px;
}
.ms.lieux .lx-reinit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ac-vert);
  cursor: pointer;
  border-bottom: 1px solid rgba(66, 78, 60, 0.3);
}
.ms.lieux .lx-reinit:hover {
  border-bottom-color: var(--ac-vert);
}

/* ============ 4. CARTES DE LIEU ET GRILLES ============ */
.ms.lieux .lx-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ms.lieux .lx-carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-l);
  overflow: hidden;
  text-decoration: none;
  color: var(--ac-encre);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.ms.lieux .lx-carte:hover {
  border-color: var(--ac-bord-fort);
  box-shadow: var(--ac-ombre-forte);
  transform: translateY(-2px);
}
.ms.lieux .lx-carte:hover .lx-im img {
  transform: scale(1.03);
}
.ms.lieux .lx-carte-im {
  position: relative;
  display: block;
}
.ms.lieux .lx-carte .lx-im {
  aspect-ratio: 4 / 3;
}
/* Le sceau d'une fiche non vérifiée. Posé sur la vignette, là où on la
   regarde — pas relégué en bas de page. Discret, mais jamais absent. */
.ms.lieux .lx-sceau {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(27, 25, 23, 0.62);
  color: #f6f3ec;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
}
.ms.lieux .lx-carte-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
  flex: 1;
}
.ms.lieux .lx-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ac-fond-2);
  border: 1px solid var(--ac-bord);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ac-vert);
  letter-spacing: 0.01em;
}
.ms.lieux .lx-carte-nom {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 2px 0 0;
}
.ms.lieux .lx-carte-lieu {
  font-size: 12.5px;
  color: var(--ac-encre-3);
}
.ms.lieux .lx-carte-txt {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ac-encre-2);
  flex: 1;
}
.ms.lieux .lx-carte-fin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--ac-bord);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ac-vert);
}
.ms.lieux .lx-carte-fin svg {
  transition: transform 0.18s ease;
}
.ms.lieux .lx-carte:hover .lx-carte-fin svg {
  transform: translateX(3px);
}
.ms.lieux .lx-dispo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ac-encre-2);
}
.ms.lieux .lx-dispo i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ac-encre-3);
  flex-shrink: 0;
}
.ms.lieux .lx-dispo[data-etat="Candidatures ouvertes"] i {
  background: #4e7c46;
}
.ms.lieux .lx-dispo[data-etat="Ouverture prochaine"] i {
  background: #b5893f;
}
.ms.lieux .lx-dispo[data-etat="Fermé cette saison"] i {
  background: #a8564e;
}
/* « Non renseignée » ne porte pas de couleur d'état : il n'y a pas d'état à
   signaler, seulement une information qui manque. La pastille reste neutre
   et le libellé s'efface d'un ton. */
.ms.lieux .lx-dispo[data-etat="Non renseignée"] {
  color: var(--ac-encre-3);
  font-style: italic;
}

/* ============= 5. RÉSULTATS ET ÉTAT VIDE ============= */
.ms.lieux .lx-compte {
  font-size: 13.5px;
  color: var(--ac-encre-2);
}
.ms.lieux .lx-vide {
  border: 1px dashed var(--ac-bord-fort);
  border-radius: var(--ac-r-l);
  background: var(--ac-blanc);
  padding: 40px 24px;
  text-align: center;
}
.ms.lieux .lx-vide h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.ms.lieux .lx-vide p {
  font-size: 14px;
  color: var(--ac-encre-2);
  max-width: 46ch;
  margin: 0 auto 18px;
}

/* ====== 6. BLOC ÉDITORIAL « LES GALERIES DU MOMENT » ====== */
.ms.lieux .lx-focus {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-l);
  overflow: hidden;
}
.ms.lieux .lx-focus-txt {
  padding: 30px 26px;
}
.ms.lieux .lx-focus-txt h2 {
  margin: 16px 0 0;
}
.ms.lieux .lx-focus-txt .ac-corps {
  margin-top: 12px;
  max-width: 40ch;
}
.ms.lieux .lx-focus-txt .ac-b {
  margin-top: 22px;
}
.ms.lieux .lx-focus-im {
  min-height: 220px;
}
.ms.lieux .lx-focus-liste {
  list-style: none;
  margin: 0;
  padding: 22px 26px 26px;
  border-top: 1px solid var(--ac-bord);
  background: var(--ac-fond);
}
.ms.lieux .lx-focus-liste li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ac-bord);
}
.ms.lieux .lx-focus-liste li:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}
.ms.lieux .lx-focus-rang {
  font-family: var(--display);
  font-size: 12.5px;
  color: var(--ac-encre-3);
  flex-shrink: 0;
}
.ms.lieux .lx-focus-nom {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ac-encre);
}
.ms.lieux .lx-focus-ville {
  display: block;
  font-size: 12.5px;
  color: var(--ac-encre-3);
  margin-top: 1px;
}
.ms.lieux .lx-focus-liste .ac-lien {
  margin-top: 16px;
}

/* Un lien d'apparence, un bouton de fonction : il ne mène pas à une autre
   page, il pré-remplit les filtres de la grille plus bas. */
.ms.lieux .lx-lien-bouton {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(66, 78, 60, 0.3);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ac-vert);
  padding: 0 0 2px;
}
.ms.lieux .lx-lien-bouton:hover {
  border-bottom-color: var(--ac-vert);
}

/* ==================== 7. LES RÉGIONS ==================== */
/* Plus de plaque blanche autour du bloc : la carte, le texte et les
   vignettes reposent directement sur l'ivoire de la page. Un cadre autour
   d'une carte au fond crème créait deux blancs voisins et un liseré inutile
   — sans lui, la carte respire et le bloc gagne en calme. */
.ms.lieux .lx-regions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
}
/* La grande carte porte des libellés incrustés : sous 768 px, elle n'aurait
   pas la place d'être lue, et une carte illisible ne vaut pas mieux qu'une
   carte absente. Elle n'apparaît donc qu'à partir de la tablette — la liste
   des régions, elle, reste du texte, dans les vignettes et dans le filtre. */
.ms.lieux .lx-carte-france {
  display: none;
}
.ms.lieux .lx-carte-france .lx-im {
  width: 100%;
  aspect-ratio: 3 / 2;
  /* Ni filet, ni fond, ni coins : le visuel a déjà son propre fond crème et
     se fond dans la page. `contain` garde la France entière visible quelle
     que soit la colonne. */
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ms.lieux .lx-carte-france .lx-im img {
  object-fit: contain;
}
.ms.lieux .lx-regions-txt h2 {
  margin: 14px 0 0;
}
.ms.lieux .lx-regions-txt .ac-corps {
  margin-top: 12px;
  max-width: 38ch;
}
.ms.lieux .lx-regions-txt .ac-b {
  margin-top: 20px;
}
.ms.lieux .lx-regions-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ms.lieux .lx-region {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  height: 100%;
  text-align: left;
  text-decoration: none;
  color: var(--ac-encre);
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
/* La vignette : un paysage éditorial. Toutes ont le même rapport 4/3 et le
   même recadrage `cover` — c'est ce qui leur donne leur air de famille, et
   ce qui évite qu'une image plus haute ou plus large casse l'alignement de
   la ligne. Le cadre reste discret : un filet, des coins arrondis, et rien
   d'autre par-dessus l'image. */
.ms.lieux .lx-region-vignette {
  width: 100%;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r);
  background: var(--ac-fond-2);
  transition: border-color 0.2s ease;
}
.ms.lieux .lx-region-vignette .lx-im {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.ms.lieux .lx-region-vignette .lx-im img {
  object-fit: cover;
}
.ms.lieux .lx-region:hover .lx-region-vignette {
  border-color: var(--ac-bord-fort);
}
.ms.lieux .lx-region:hover .lx-region-vignette .lx-im img {
  transform: scale(1.03);
}
.ms.lieux .lx-region b {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  /* Le libellé occupe la place qui reste : selon la largeur de colonne il
     tient sur une, deux ou trois lignes, et « N lieux » se retrouve toujours
     posé en bas de vignette — donc aligné d'une carte à l'autre, sans
     réserve chiffrée à retoucher à chaque palier. */
  flex: 1;
}
.ms.lieux .lx-region-fin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--ac-vert);
}
.ms.lieux .lx-region-fin svg {
  transition: transform 0.18s ease;
}
.ms.lieux .lx-region:hover .lx-region-fin svg {
  transform: translateX(3px);
}

/* ====== 7 bis. EXPLORER PAR RÉGION (/lieux/carte) ======

   Deux entrées pour un même filtre : un tracé, et une liste. La liste porte
   les dix-huit régions et reste le vrai contrôle — au clavier, au lecteur
   d'écran, et pour les territoires que la carte ne dessine pas encore. Le
   tracé est un raccourci visuel : il ne mesure rien, il situe. */
.ms.lieux .lx-carte-heros {
  padding: 34px 0 6px;
  max-width: 62ch;
}
.ms.lieux .lx-carte-heros h1 {
  margin: 14px 0 0;
}
.ms.lieux .lx-carte-heros .ac-chapo {
  margin-top: 16px;
}
.ms.lieux .lx-explorateur {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 34px;
  align-items: start;
}
/* La carte porte ses libellés dans les pixels : sous 768 px, ils ne sont
   plus lisibles. Elle disparaît alors, et la liste — qui est du texte, et
   qui porte les dix-huit régions — devient toute la page. */
.ms.lieux .lx-explorateur-carte {
  display: none;
}
.ms.lieux .lx-carte-cliquable {
  position: relative;
  width: 100%;
  /* Le rapport exact du visuel (1100 × 733) : les pastilles sont posées en
     pourcentage, elles ne tiennent que si le cadre suit l'image. */
  aspect-ratio: 1100 / 733;
}
.ms.lieux .lx-carte-cliquable > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Une pastille par région métropolitaine, centrée sur l'épingle du visuel.
   Elle porte le nombre de lieux — l'information et la cible sont la même
   chose, et une région vide se lit avant d'être cliquée. */
.ms.lieux .lx-carte-zone {
  position: absolute;
  /* Ancrée sur l'épingle, mais remontée : centrée dessus, la pastille
     mordait sur le nom de la région écrit juste en dessous — or c'est ce nom
     qui fait la valeur de ce visuel. Elle coiffe donc l'épingle. */
  transform: translate(-50%, -84%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--ac-vert);
  box-shadow: 0 1px 3px rgba(27, 25, 23, 0.14);
  background: rgba(250, 248, 243, 0.92);
  color: var(--ac-vert);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.ms.lieux .lx-carte-zone:hover {
  background: var(--ac-vert);
  color: #f6f3ec;
  transform: translate(-50%, -84%) scale(1.14);
}
.ms.lieux .lx-carte-zone[aria-pressed="true"] {
  background: var(--ac-vert);
  color: #f6f3ec;
}
/* Une région sans lieu reste cliquable — elle mène à son état vide, qui dit
   ce qu'il en est — mais elle s'efface d'un ton. */
.ms.lieux .lx-carte-zone[data-vide] {
  border-color: var(--ac-bord-fort);
  color: var(--ac-encre-3);
}
.ms.lieux .lx-carte-zone[data-vide]:hover {
  border-color: var(--ac-vert);
}
.ms.lieux .lx-carte-zone:focus-visible {
  outline: 2px solid var(--ac-vert);
  outline-offset: 2px;
}
.ms.lieux .lx-explorateur-liste ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.ms.lieux .lx-explorateur-liste button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--ac-r-s);
  background: transparent;
  color: var(--ac-encre);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    color 0.16s ease;
}
.ms.lieux .lx-explorateur-liste button:hover {
  background: var(--ac-blanc);
  color: var(--ac-vert);
}
.ms.lieux .lx-explorateur-liste button[aria-pressed="true"] {
  background: var(--ac-vert);
  color: #f6f3ec;
}
/* Une région sans lieu n'est pas cachée : elle est dite, en retrait. Zéro
   est une information exacte, pas un manque. */
.ms.lieux .lx-explorateur-liste button[data-vide] {
  color: var(--ac-encre-3);
}
.ms.lieux .lx-explorateur-liste button[data-vide]:hover {
  color: var(--ac-encre-2);
}
.ms.lieux .lx-explorateur-compte {
  font-size: 12.5px;
  color: inherit;
  opacity: 0.72;
  white-space: nowrap;
}
.ms.lieux .lx-explorateur-liste .ac-lien {
  margin-top: 14px;
}
.ms.lieux .lx-carte-invite {
  margin-top: 30px;
}
.ms.lieux .lx-carte-retour {
  margin: 40px 0 0;
}

/* ================ 8. LA FICHE D'UN LIEU ================ */
.ms.lieux .lx-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 22px;
  font-size: 13px;
  color: var(--ac-encre-3);
}
.ms.lieux .lx-fil a {
  color: var(--ac-encre-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ms.lieux .lx-fil a:hover {
  color: var(--ac-vert);
  border-bottom-color: var(--ac-vert);
}
.ms.lieux .lx-fil [aria-current="page"] {
  color: var(--ac-encre);
}

/* La couverture : une bande large, pas une vignette. */
/* La couverture est un <figure> : son image porte une légende, et la
   légende est une information, pas un ornement. Les marges par défaut du
   navigateur sur figure sont remises à zéro. */
.ms.lieux .lx-couverture {
  position: relative;
  margin: 18px 0 0;
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-l);
  overflow: hidden;
}
/* « Illustration éditoriale — ne représente pas nécessairement ce lieu. »
   Discrète, mais dans le cadre de l'image et jamais loin d'elle : sortie du
   cadre, elle se lirait comme une note de bas de page. */
.ms.lieux .lx-credit {
  padding: 9px 15px;
  border-top: 1px solid var(--ac-bord);
  background: var(--ac-fond);
  font-size: 12px;
  font-style: italic;
  color: var(--ac-encre-3);
}
.ms.lieux .lx-couverture .lx-im {
  aspect-ratio: 3 / 2;
}
.ms.lieux .lx-couverture .lx-sceau {
  top: 14px;
  right: 14px;
  min-height: 26px;
  padding: 0 12px;
  font-size: 11.5px;
}

.ms.lieux .lx-fiche {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 28px;
  align-items: start;
}
.ms.lieux .lx-fiche-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.ms.lieux .lx-badge-clair {
  background: transparent;
  color: var(--ac-encre-2);
}
.ms.lieux .lx-fiche-txt h1 {
  margin: 0;
}
.ms.lieux .lx-fiche-lieu {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ac-encre-3);
}
.ms.lieux .lx-fiche-txt .ac-chapo {
  margin-top: 20px;
  max-width: 54ch;
}
.ms.lieux .lx-fiche-txt .ac-corps {
  margin-top: 14px;
  max-width: 62ch;
}

/* L'avertissement : visible, mais il ne prend pas la page en otage. */
.ms.lieux .lx-avertissement {
  display: flex;
  gap: 11px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--ac-bord-fort);
  border-left: 3px solid var(--ac-vert);
  border-radius: var(--ac-r-s);
  background: var(--ac-fond-2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ac-encre-2);
  max-width: 62ch;
}
.ms.lieux .lx-avertissement svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ac-vert);
}
.ms.lieux .lx-avertissement b {
  color: var(--ac-encre);
  font-weight: 500;
}

.ms.lieux .lx-pourvous,
.ms.lieux .lx-pratique {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--ac-bord);
  max-width: 62ch;
}
.ms.lieux .ac-titre-moyen {
  font-family: var(--display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}
.ms.lieux .lx-pourvous ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.ms.lieux .lx-pourvous li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r);
}
.ms.lieux .lx-pourvous b {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-vert);
}
.ms.lieux .lx-pourvous span {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ac-encre-2);
}
.ms.lieux .lx-pratique .lx-note {
  margin-top: 10px;
}

.ms.lieux .lx-fiche-bref {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--ac-bord);
}
.ms.lieux .lx-fiche-bref > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--ac-bord);
}
.ms.lieux .lx-fiche-bref dt {
  font-size: 12.5px;
  color: var(--ac-encre-3);
}
.ms.lieux .lx-fiche-bref dd {
  margin: 0;
  font-size: 14px;
  color: var(--ac-encre);
  text-align: right;
}
.ms.lieux .lx-fiche-bref dd a {
  color: var(--ac-vert);
  word-break: break-word;
}
/* Un champ sans information le dit, au lieu de disparaître. */
.ms.lieux .lx-vide-champ {
  color: var(--ac-encre-3);
  font-style: italic;
}

/* L'encart latéral : l'essentiel et les deux actions. */
.ms.lieux .lx-encart {
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-l);
  padding: 22px;
  box-shadow: var(--ac-ombre);
}
.ms.lieux .lx-encart .lx-fiche-bref {
  margin-top: 12px;
}
.ms.lieux .lx-encart-titre {
  margin-top: 22px;
}
.ms.lieux .lx-jetons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.ms.lieux .lx-jetons li {
  padding: 5px 11px;
  border: 1px solid var(--ac-bord);
  border-radius: 999px;
  background: var(--ac-fond);
  font-size: 12.5px;
  color: var(--ac-encre-2);
}
/* Un manque n'est pas une valeur : il ne prend pas la forme d'un jeton. */
.ms.lieux .lx-jetons li.lx-vide-champ {
  padding: 0;
  border: 0;
  background: none;
  font-size: 13.5px;
}
.ms.lieux .lx-encart-b {
  width: 100%;
  margin-top: 12px;
}
.ms.lieux .lx-encart-b:first-of-type {
  margin-top: 24px;
}

.ms.lieux .lx-galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ms.lieux .lx-galerie .lx-im {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r);
}

/* ========= 8. BANNIÈRE « PRÉPAREZ VOTRE CANDIDATURE » ========= */
.ms.lieux .lx-cta {
  position: relative;
  margin-top: 64px;
  border-radius: var(--ac-r-l);
  overflow: hidden;
  background: #2f382b;
  color: #f2efe7;
  isolation: isolate;
}
.ms.lieux .lx-cta-fond {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ms.lieux .lx-cta-fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le visuel est une palette de peintre aux verts et aux ors : réglé trop
     bas, il ne se lisait plus du tout et la bande redevenait un aplat. */
  opacity: 0.62;
  object-position: 68% 55%;
}
/* Le voile part opaque là où se pose le texte et s'éclaircit vers la droite,
   où la matière peut se montrer. Il ne descend jamais assez pour que le
   texte clair perde son contraste. */
.ms.lieux .lx-cta-voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    #2f382b 24%,
    rgba(47, 56, 43, 0.88) 52%,
    rgba(47, 56, 43, 0.7) 100%
  );
}
.ms.lieux .lx-cta-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 34px 26px 36px;
}
.ms.lieux .lx-cta .ac-oeil {
  color: rgba(242, 239, 231, 0.7);
}
.ms.lieux .lx-cta h2 {
  color: #f6f3ec;
  margin: 14px 0 0;
}
.ms.lieux .lx-cta p {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(242, 239, 231, 0.82);
  max-width: 46ch;
}
.ms.lieux .lx-cta .ac-b-clair {
  margin-top: 24px;
  background: transparent;
  color: #f6f3ec;
  border-color: rgba(242, 239, 231, 0.5);
}
.ms.lieux .lx-cta .ac-b-clair:hover {
  background: rgba(242, 239, 231, 0.12);
  border-color: #f6f3ec;
  color: #f6f3ec;
}
.ms.lieux .lx-cta-atouts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-content: center;
}
.ms.lieux .lx-cta-atouts li {
  list-style: none;
}
.ms.lieux .lx-cta-atouts svg {
  color: rgba(242, 239, 231, 0.85);
  margin-bottom: 9px;
}
.ms.lieux .lx-cta-atouts b {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #f6f3ec;
}
.ms.lieux .lx-cta-atouts span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(242, 239, 231, 0.72);
}

/* ====== 9. RESPIRATION : RÉGLAGES PAR LARGEUR D'ÉCRAN ====== */
@media (min-width: 560px) {
  .ms.lieux .lx-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ms.lieux .lx-cta-atouts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 768px) {
  .ms.lieux .lx-in,
  .ms.lieux .lx-heros-txt {
    padding-left: 32px;
    padding-right: 32px;
  }
  .ms.lieux .lx-section {
    margin-top: 72px;
  }
  .ms.lieux .lx-recherche {
    padding: 16px;
  }
  .ms.lieux .lx-recherche-grille {
    /* La recherche occupe sa propre ligne ; en dessous, les colonnes sont
       taillées sur la longueur des libellés — « Toutes les régions » est le
       plus long des trois et se faisait rogner à parts égales. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.1fr);
    gap: 12px;
  }
  .ms.lieux .lx-recherche-grille .lx-champ-recherche {
    grid-column: 1 / -1;
  }
  .ms.lieux .lx-carte-france {
    display: flex;
    justify-content: center;
  }
  .ms.lieux .lx-focus {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ms.lieux .lx-focus-im {
    min-height: 100%;
  }
  .ms.lieux .lx-focus-liste {
    grid-column: 1 / -1;
    border-top: 1px solid var(--ac-bord);
  }
  .ms.lieux .lx-explorateur-carte {
    display: block;
  }
  .ms.lieux .lx-explorateur {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
  }
  .ms.lieux .lx-explorateur-liste ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 10px;
  }
  .ms.lieux .lx-carte-heros {
    padding: 42px 0 8px;
  }
  .ms.lieux .lx-regions {
    /* La carte n'est plus posée sur une plaque : elle peut prendre la place
       qu'il faut à ses libellés incrustés, qui décrochaient à 320 px sur un
       écran non rétina. */
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 28px 36px;
  }
  .ms.lieux .lx-regions-grille {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ms.lieux .lx-fil {
    padding-top: 26px;
  }
  .ms.lieux .lx-cta-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
    padding: 42px 34px 44px;
    align-items: center;
  }
}

@media (min-width: 1000px) {
  /* Le texte du héros doit commencer exactement là où commence le contenu
     de la page — barre de recherche, cartes, blocs éditoriaux. Une colonne
     de grille à 46 % ne le garantissait pas : elle se cale sur la fenêtre,
     pas sur le conteneur de 1288 px, et le héros décrochait de 58 px.
     Le texte reprend donc le conteneur commun, et l'image passe en position
     absolue sur la moitié droite. */
  .ms.lieux .lx-heros {
    display: block;
    position: relative;
    min-height: 470px;
  }
  .ms.lieux .lx-heros-txt {
    max-width: 1288px;
    width: 100%;
    margin: 0 auto;
    padding: 58px 32px 62px;
    min-height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* 46 % du conteneur : le texte s'arrête avant le bord de l'image, à
     toutes les largeurs, sans jamais passer dessous. */
  .ms.lieux .lx-heros-txt-in {
    max-width: 46%;
  }
  .ms.lieux .lx-heros-im {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 54%;
    height: auto;
    max-height: none;
    min-height: 470px;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      rgba(0, 0, 0, 0.35) 56px,
      #000 168px
    );
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.35) 56px, #000 168px);
  }
  .ms.lieux .lx-recherche-grille {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
  }
  .ms.lieux .lx-recherche-grille .lx-champ-recherche {
    grid-column: auto;
  }
  .ms.lieux .lx-grille {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ms.lieux .lx-focus {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  .ms.lieux .lx-focus-txt {
    padding: 38px 32px;
  }
  .ms.lieux .lx-focus-liste {
    grid-column: auto;
    border-top: 0;
    border-left: 1px solid var(--ac-bord);
    padding: 30px 28px;
    background: var(--ac-blanc);
  }
  .ms.lieux .lx-explorateur {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 52px;
  }
  .ms.lieux .lx-fiche {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 52px;
    margin-top: 36px;
  }
  .ms.lieux .lx-fiche-cote {
    position: sticky;
    top: 92px;
  }
  .ms.lieux .lx-couverture .lx-im {
    /* 21/9 rognait trop : sur des salles hautes, il ne restait qu'une bande
       de mur. Le 16/9 laisse voir le lieu. */
    aspect-ratio: 16 / 9;
  }
  .ms.lieux .lx-galerie {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* À partir de 1180 px seulement, les trois groupes tiennent sur une même
   ligne sans que les vignettes s'étranglent : la carte de France, le
   discours, puis les quatre régions, tous calés en haut. En dessous, les
   vignettes reprennent leur propre rangée — quatre colonnes de 120 px
   coupaient « Provence-Alpes-Côte d'Azur » en trois et faisaient passer
   « 243 lieux » à la ligne. */
@media (min-width: 1180px) {
  /* Les vignettes gardent leur propre rangée, pleine largeur. Sur une seule
     ligne à trois groupes, elles tombaient sous les 110 px : c'était tenable
     pour une silhouette dessinée, ça ne l'est plus pour un paysage. La carte,
     elle, prend la place que la colonne libère. */
  .ms.lieux .lx-regions {
    grid-template-columns: 460px minmax(0, 1fr);
    align-items: center;
    gap: 34px 44px;
  }
  .ms.lieux .lx-regions-grille {
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms.lieux .lx-im img,
  .ms.lieux .lx-carte {
    transition: none;
  }
  .ms.lieux .lx-carte:hover {
    transform: none;
  }
  .ms.lieux .lx-carte:hover .lx-im img {
    transform: none;
  }
}