/* ─────────────────────────────────────────────────────────────────────────
   Fiche Pays (template-pays.php)
   Chargée uniquement sur les fiches ml_pays (ml_fiches_destinations_enqueue()
   dans functions.php, handle « ml-fiche-pays »), dépendante de main.css :
   tous les tokens (--ml-*) sont lus depuis le :root de main.css, jamais
   redéclarés ici. Mobile first, palier principal à 900px comme le reste du
   thème. Toute animation respecte prefers-reduced-motion.
───────────────────────────────────────────────────────────────────────── */

/* ── Fil d'Ariane : dans le flux, au dessus du titre ──────────────────────

   Rendu par CE gabarit (template-pays.php), à l'intérieur de
   .ml-pays-hero-texte, juste avant le <h1> : il suit donc l'ordre de lecture
   naturel du DOM, comme le reste du texte du hero. Plus de superposition en
   absolu par dessus la photo, donc plus rien à compenser pour la barre de
   menu flottante ou la barre d'administration : c'était le point qui coûtait
   le plus cher à maintenir dans l'ancienne architecture.

   Il reste blanc et ombré, comme le titre et l'accroche juste en dessous,
   pour se lire sur la photo du hero. Les propriétés de mise en page du fil
   d'Ariane « générique » (assets/css/main.css : largeur maximale centrée,
   padding) ne conviennent plus ici, il est réinitialisé en conséquence. */
.ml-pays-hero-texte .ml-fil-ariane {
  max-inline-size: none;
  margin: 0 0 var(--ml-space-sm);
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(20, 8, 28, 0.65), 0 4px 16px rgba(20, 8, 28, 0.35);
}
.ml-pays-hero-texte .ml-fil-ariane a {
  color: rgba(255, 255, 255, 0.92);
}
.ml-pays-hero-texte .ml-fil-ariane a:hover,
.ml-pays-hero-texte .ml-fil-ariane a:focus-visible {
  color: #fff;
}
.ml-pays-hero-texte .ml-fil-ariane a:focus-visible {
  outline-color: #fff;
}
.ml-pays-hero-texte .ml-fil-ariane li[aria-current="page"] {
  color: #fff;
}

/* ── HERO ──────────────────────────────────────────────────────────────
   720px minimum (pas un plein écran comme l'accueil : la fiche a du
   contenu à dérouler tout de suite en dessous). padding-block-start réserve
   la hauteur de la barre de menu flottante, qui reste par dessus la photo
   (--ml-space-xl, plus généreux que sur l'accueil : le fil d'Ariane, le
   titre, l'accroche, les puces et les actions ont plus de texte à dérouler
   avant le bas du hero). */
.ml-pays-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-block-size: 720px;
  padding-block: calc(var(--ml-header-h) + var(--ml-space-xl)) var(--ml-space-xl);
  background-color: var(--ml-accent-nuit);
}

.ml-pays-hero-media,
.ml-pays-hero-media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Zoom avant discret à l'arrivée sur la page (effet Ken Burns), une seule
   fois : l'overflow: hidden de .ml-pays-hero (ci dessus) recadre l'image
   grandissante, sans jamais faire bouger les dégradés de lisibilité posés à
   part sur .ml-pays-hero-media::after, juste en dessous. */
@keyframes ml-pays-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.ml-pays-hero-img {
  animation: ml-pays-hero-zoom 10s var(--ml-ease) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .ml-pays-hero-img {
    animation: none;
  }
}

/* Deux couches de lisibilité, comme la maquette : un dégradé vertical
   (sombre en haut pour la barre et le fil d'Ariane, plus clair au centre,
   sombre à nouveau en bas) partout, et un dégradé horizontal supplémentaire
   à partir de 900px, qui assombrit le côté gauche où le texte se pose (une
   seule colonne, alignée à gauche du conteneur) et laisse le reste de la
   photo respirer, bien visible depuis la suppression de la carte blanche.
   Une seule teinte est utilisée dans les deux cas : le rgb de
   --ml-accent-nuit (46, 18, 63), seule l'opacité varie, pour ne jamais
   introduire une couleur étrangère à la palette. */
.ml-pays-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(46, 18, 63, 0.72) 0%,
    rgba(46, 18, 63, 0.34) 34%,
    rgba(46, 18, 63, 0.62) 100%
  );
}
@media (min-width: 900px) {
  .ml-pays-hero-media::after {
    background:
      linear-gradient(to right, rgba(46, 18, 63, 0.68) 0%, rgba(46, 18, 63, 0) 58%),
      linear-gradient(
        to bottom,
        rgba(46, 18, 63, 0.62) 0%,
        rgba(46, 18, 63, 0.28) 34%,
        rgba(46, 18, 63, 0.56) 100%
      );
  }
}

/* Une seule colonne (demande de Marino, juillet 2026 : plus de carte blanche
   « En un coup d'oeil », la photo de fond reste visible en entier). La
   largeur de lecture est bornée par les éléments eux mêmes (.ml-pays-titre,
   .ml-pays-accroche ci dessous), pas par la grille : nul besoin d'un second
   palier ici. */
.ml-container.ml-pays-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--ml-space-lg);
  inline-size: 100%;
}

.ml-pays-hero-texte {
  color: #fff;
}

.ml-pays-titre {
  color: #fff;
  text-shadow: 0 3px 24px rgba(20, 8, 28, 0.45);
  max-inline-size: 20ch;
}

.ml-pays-accroche {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--ml-fs-lg);
  max-inline-size: 38ch;
}

/* Pilules de verre : même repli @supports que .ml-hero-badge de main.css
   pour les navigateurs qui ne savent pas flouter l'arrière plan. */
.ml-pays-pilules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ml-space-xs);
  margin-block-start: var(--ml-space-sm);
}
.ml-pays-pilule {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1.1em;
  border-radius: var(--ml-radius-pill);
  font-weight: 700;
  font-size: var(--ml-fs-sm);
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ml-pays-pilule {
    background: rgba(46, 18, 63, 0.55);
  }
}

/* Actions du hero, sous les puces (remplace l'ancienne carte blanche « En un
   coup d'oeil », supprimée en juillet 2026 pour laisser voir la photo).
   Le bouton reprend le vocabulaire partagé .ml-btn.ml-btn-primary (violet
   plein, texte blanc) : sa propre teinte porte son contraste, peu importe la
   photo derrière. Le lien, lui, est un texte nu posé sur la photo : blanc
   atténué à 0,92, comme l'accroche juste au dessus, jamais l'accent violet
   qui se fondrait dans les tons sombres de l'image. Souligné par défaut
   (plus d'affordance de carte blanche autour pour signaler un lien). */
.ml-pays-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ml-space-md);
  margin-block-start: var(--ml-space-md);
}
/* SUR TÉLÉPHONE, LE LIEN « COMPARER LES N VILLES » DISPARAIT (demande de
   Marino). Le haut de page y empile déjà le titre, la phrase, les pastilles et
   le bouton principal : un second appel, qui ne fait que descendre plus bas
   dans la même page, allonge la première section sans rien apporter. Le
   visiteur y arrive de toute façon en continuant à faire défiler, et c'est le
   geste naturel sur un téléphone.

   Retiré en CSS et non dans le gabarit : sur un écran large il garde tout son
   sens. Rien n'est perdu au passage, c'est une ancre vers un autre endroit de
   la MÊME page : elle ne compte dans aucun maillage interne, et la section
   qu'elle vise reste atteignable en faisant défiler. */
@media (max-width: 899.98px) {
  .ml-pays-hero-lien {
    display: none;
  }
}

.ml-pays-hero-lien {
  font-weight: 600;
  font-size: var(--ml-fs-sm);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ml-pays-hero-lien:hover,
.ml-pays-hero-lien:focus-visible {
  color: #fff;
}
.ml-pays-hero-lien:focus-visible {
  outline-color: #fff;
}

/* ── Bandeau réassurance ──────────────────────────────────────────────── */
.ml-pays-reassurance {
  background: var(--ml-accent);
  padding-block: var(--ml-space-md);
}
.ml-pays-reassurance-liste {
  display: grid;
  gap: var(--ml-space-md);
}
@media (min-width: 900px) {
  .ml-pays-reassurance-liste {
    grid-template-columns: repeat(4, 1fr);
  }
}
.ml-pays-reassurance-item {
  display: flex;
  align-items: center;
  gap: var(--ml-space-xs);
  color: #fff;
  font-weight: 700;
  font-size: var(--ml-fs-sm);
}
.ml-pays-reassurance-coche {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.8em;
  block-size: 1.8em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ── Section titre : utilitaire partagé par toutes les sections dont le
   h2 est rendu à la main (voir template-pays.php), pour porter un id fixe
   et une largeur de lecture confortable. ── */
.ml-pays-section-titre {
  max-inline-size: 26ch;
}

/* ── Pourquoi ce pays ──────────────────────────────────────────────────── */
.ml-pays-pourquoi-grille {
  display: grid;
  gap: var(--ml-space-lg);
}
@media (min-width: 900px) {
  .ml-pays-pourquoi-grille {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--ml-space-xl);
  }
}
.ml-pays-pourquoi-liste {
  display: grid;
  gap: var(--ml-space-sm);
  margin-block-start: var(--ml-space-md);
}
.ml-pays-pourquoi-liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--ml-space-xs);
}
.ml-pays-pourquoi-coche {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5em;
  block-size: 1.5em;
  margin-block-start: 0.15em;
  border-radius: var(--ml-radius-sm);
  background: var(--ml-accent-soft);
  color: var(--ml-accent);
}

/* Collage de deux photos : simple pile en mobile, superposition à partir de
   900px (grande photo en haut à droite, petite qui chevauche en bas à
   gauche, bordée de blanc, comme la maquette). */
.ml-pays-pourquoi-collage {
  display: grid;
  gap: var(--ml-space-sm);
}
.ml-pays-pourquoi-collage img {
  border-radius: var(--ml-radius-lg);
  box-shadow: var(--ml-shadow-md);
  inline-size: 100%;
  block-size: 220px;
  object-fit: cover;
}
@media (min-width: 900px) {
  .ml-pays-pourquoi-collage {
    position: relative;
    block-size: 420px;
  }
  .ml-pays-pourquoi-collage img {
    block-size: auto;
  }
  .ml-pays-pourquoi-collage img:first-child {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 74%;
    block-size: 66%;
  }
  .ml-pays-pourquoi-collage img:last-child {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 56%;
    block-size: 56%;
    border: 6px solid var(--ml-bg);
  }

  /* ── Le flottement de la photo du haut ──
     Demande de Marino : que l'une des deux bouge doucement de haut en bas.
     C'est la grande, celle du haut, qui flotte : la petite en bas à gauche
     porte un liseré blanc et chevauche la première, la faire bouger
     découvrirait puis recouvrirait le bord de l'autre à chaque aller-retour.

     Huit pixels d'amplitude et cinq secondes de cycle (neuf au départ, jugées
     trop lentes par Marino). C'est le réglage à toucher si le mouvement doit
     encore changer de caractère : plus court le rend vivant, plus long le rend
     à peine perceptible. En dessous de trois secondes environ, la photo se met
     à battre et attire l'oeil au mauvais endroit dans une page de contenu.

     Le flottement ne vit qu'à partir de 900px, comme le collage lui même : en
     dessous, les deux images sont simplement empilées en pleine largeur, et
     déplacer l'une creuserait un écart inégal entre les deux.

     Pour faire flotter l'autre à la place, un seul mot à changer : first-child
     devient last-child. */
  @keyframes ml-pays-photo-flotte {
    from { transform: translateY(-8px); }
    to   { transform: translateY(8px); }
  }
  .ml-pays-pourquoi-collage img:first-child {
    animation: ml-pays-photo-flotte 5s ease-in-out infinite alternate;
    /* Le navigateur sait ainsi qu'il n'aura à repeindre que cette couche. */
    will-change: transform;
  }
}

/* Moins de mouvement : la photo reste posée, exactement là où le dessin la
   place. Règle sortie du palier de largeur ci dessus pour rester lisible
   d'un coup d'oeil, elle vaut de toute façon à toutes les largeurs. */
@media (prefers-reduced-motion: reduce) {
  .ml-pays-pourquoi-collage img:first-child {
    animation: none;
  }
}

/* ── Section destinations (en-tête éditable, carte, grille de villes) ─────
   Une seule section depuis la fusion de juillet 2026 (demande de Marino) :
   l'en-tête « Où partir ? », la carte géographique et la grille de cartes de
   ville s'y suivent sans marche d'espacement. La carte n'a plus de section à
   elle. */
.ml-pays-villes-section {
  background: var(--ml-accent-soft);
  scroll-margin-block-start: calc(var(--ml-header-h) + var(--ml-space-md));
}

/* Carte Leaflet : masquée tant que le script ne lui a pas posé la classe
   « is-prete » (voir assets/js/carte-pays.js). Sans cela, une visite sans
   JavaScript, sans Leaflet ou sans coordonnées ne montre jamais de grand
   rectangle vide : seule la grille de cartes, juste en dessous
   (ml_grille_destinations(), accessible), reste visible. Une marge basse la
   sépare de la grille ; l'en-tête au dessus garde la sienne.

   isolation + z-index bas : Leaflet monte ses contrôles et ses popups très
   haut (400 à 700). Sans contexte d'empilement propre, ces couches
   passeraient par dessus la barre de menu flottante (.ml-header, z-index 100
   dans main.css) au défilement. En enfermant la carte dans son propre
   contexte, posé au niveau 0 de la page, tous ses z-index internes restent
   captifs et la barre repasse au dessus. On ne touche jamais au z-index du
   menu : d'autres couches en dépendent. */
.ml-carte-pays {
  display: none;
  position: relative;
  isolation: isolate;
  z-index: 0;
  margin-block-end: var(--ml-space-lg);
  min-block-size: 360px;
  border-radius: var(--ml-radius-lg);
  overflow: hidden;
  background: var(--ml-bg-warm);
  box-shadow: var(--ml-shadow-md);
}
.ml-carte-pays.is-prete {
  display: block;
}
@media (min-width: 900px) {
  .ml-carte-pays {
    min-block-size: 520px;
  }
}

/* ── Le pays qui ne propose qu'une ville ──
   La pile « carte pleine largeur, puis grille » est faite pour comparer
   plusieurs villes. Avec une seule, elle donne une carte géographique immense
   suivie d'une carte de ville esseulée au milieu du vide : le listing a l'air
   raté alors qu'il est complet.

   Ici, les deux se répondent côte à côte : la carte à gauche, plus basse, la
   ville à droite. C'est un duo, plus une liste, et le regard n'attend plus la
   suite. Rien n'est masqué ni ajouté, seule la disposition change ; sur mobile
   la pile revient d'elle-même, faute de largeur. */
.ml-pays-villes-section--solo .ml-pays-solo {
  display: grid;
  gap: var(--ml-space-lg);
  /* stretch, et non start : les deux blocs font exactement la même hauteur
     (demande de Marino). C'est la carte de la ville qui décide, sa proportion
     d'image fixant sa hauteur ; la carte géographique s'y aligne. Deux blocs
     côte à côte qui ne finissent pas sur la même ligne se voient. */
  align-items: stretch;
}
@media (min-width: 900px) {
  /* Deux colonnes SEULEMENT si la carte est réellement affichée. Elle reste
     masquée sans JavaScript, sans Leaflet ou sans coordonnées : sans cette
     condition, la colonne de gauche resterait vide et la ville se retrouverait
     décalée dans une mise en page bancale. Un navigateur qui ne connaît pas
     :has() garde la colonne unique, qui est juste dans tous les cas.

     La classe « is-prete » est posée par le script AVANT que Leaflet ne
     mesure le conteneur : la largeur qu'il lit est donc déjà celle de la
     colonne, jamais celle d'un bloc pleine largeur. */
  .ml-pays-villes-section--solo .ml-pays-solo:has(.ml-carte-pays.is-prete) {
    /* La carte prend un peu plus que la ville : elle porte le contexte
       géographique, qui a besoin de place pour être lisible. */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

/* La carte perd sa marge basse : dans le duo, ce n'est plus elle qui sépare
   deux blocs empilés, c'est la gouttière de la grille qui s'en charge. */
.ml-pays-villes-section--solo .ml-carte-pays {
  margin-block-end: 0;
}
@media (min-width: 900px) {
  .ml-pays-villes-section--solo .ml-carte-pays {
    /* Un plancher, pas une hauteur : c'est la carte de la ville qui donne la
       hauteur du duo, et l'étirement de la grille amène la carte
       géographique à la même ligne. Ce plancher ne sert que si la ville tenait
       en moins que cela, ce qui n'arrive pas avec son image, mais une carte
       géographique de 200 pixels de haut ne montrerait rien d'utile. */
    min-block-size: 320px;
  }
}

/* La grille de villes n'a plus qu'un élément et une colonne : sans cette
   règle, elle garderait ses trois colonnes et la carte de ville n'occuperait
   qu'un tiers de la moitié droite. */
.ml-pays-villes-section--solo .ml-grille-destinations {
  grid-template-columns: 1fr;
}

/* Marqueur en forme de goutte : Leaflet ajoute déjà sa classe générique
   « leaflet-div-icon » (fond blanc, bordure grise) avant la nôtre, il faut
   donc au moins autant de spécificité pour la neutraliser, quel que soit
   l'ordre de chargement des feuilles de style. */
.ml-carte-pays .leaflet-div-icon.ml-carte-marqueur {
  background: transparent;
  border: none;
}
.ml-carte-goutte {
  display: block;
  inline-size: 26px;
  block-size: 26px;
  background: var(--ml-accent);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  box-shadow: var(--ml-shadow-md);
}
/* ── Popup en mini carte ─────────────────────────────────────────────────
   Au clic sur un point, la bulle Leaflet devient une petite carte visuelle,
   dans l'esprit des cartes compactes du site (.ml-carte-destination--compacte,
   main.css) mais plus petite : la photo de la ville en fond, un voile sombre
   par dessus, son nom en blanc, le tout cliquable vers la fiche.

   On neutralise d'abord le chrome blanc par défaut de Leaflet (le cadre, ses
   marges, l'ombre) : sans cela, une bulle blanche entourerait la carte. Le
   cadre devient transparent, la carte porte elle même son arrondi, son ombre
   et son fond. Le bouton de fermeture est retiré côté script (closeButton
   false), rien à masquer ici. */
.ml-carte-pays .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ml-carte-pays .leaflet-popup-content {
  margin: 0;
}
/* La pointe qui relie la bulle au marqueur : teintée de la nuit violette pour
   se fondre dans le bas sombre de la carte, plutôt que de rester un losange
   blanc détaché. */
.ml-carte-pays .leaflet-popup-tip {
  /* Même neutre sombre que le voile de la mini-carte : plus de violet. */
  background: #16121b;
  box-shadow: none;
}

/* La carte elle même : ~200px de large, format paysage, cliquable en entier.
   Le nom se lit en blanc sur le voile sombre du bas (::after). Contraste
   garanti : le nom se pose dans la bande à 0,9 d'opacité (0 à 38 pour cent de
   la hauteur). Au pire sur une photo toute blanche, ce voile de nuit violette
   (#2e123f) compose un fond d'environ rgb(67, 42, 82), sur lequel le blanc pur
   tient très au dessus de 4,5:1 (de l'ordre de 10:1). Sans photo, le fond
   violet plein (repli) porte le même blanc à plus de 10:1. */
.ml-carte-pays-popup {
  position: relative;
  display: flex;
  align-items: flex-end;
  inline-size: 200px;
  aspect-ratio: 5 / 3;
  border-radius: var(--ml-radius-sm);
  overflow: hidden;
  /* Fond neutre sombre, jamais violet (demande de Marino : « pas de violet,
     overlay dark, texte blanc »). */
  background-color: #16121b;
  background-position: center;
  background-size: cover;
  box-shadow: var(--ml-shadow-md);
  color: #fff;
  text-decoration: none;
}
.ml-carte-pays-popup--repli {
  background-image: linear-gradient(160deg, #241d2c 0%, #16121b 100%);
}
.ml-carte-pays-popup::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Voile NEUTRE sombre (plus la nuit violette) : le blanc du nom tient au
     dessus de 10:1 sur la bande pleine, quelle que soit la photo. */
  background: linear-gradient(
    to top,
    rgba(8, 8, 12, 0.85) 0%,
    rgba(8, 8, 12, 0.85) 38%,
    rgba(8, 8, 12, 0) 92%
  );
  pointer-events: none;
}
/* Le sélecteur est préfixé .leaflet-container pour battre la règle de la
   feuille de Leaflet qui peint TOUS les liens de la carte en bleu
   (.leaflet-container a, c'est elle qui rendait « Bristol » bleu). */
.leaflet-container a.ml-carte-pays-popup,
.ml-carte-pays-popup,
.ml-carte-pays-popup-nom {
  color: #fff;
}
.ml-carte-pays-popup-nom {
  position: relative;
  z-index: 1;
  padding: var(--ml-space-sm);
  font-family: var(--ml-font-heading);
  font-size: var(--ml-fs-base);
  font-weight: 700;
  line-height: 1.2;
}

/* ── Étapes (fond accent, réutilise .ml-section-dark) ─────────────────────
   .ml-section-dark de main.css garde son fond nuit par défaut (--ml-primary),
   partagé par d'autres gabarits (l'accueil, entre autres) : on ne touche pas
   à main.css, donc pas à ce fond ailleurs. Demande de Marino (juillet 2026) :
   plus de nuit dans le corps des pages pays. Le sélecteur ci dessous, plus
   spécifique que .ml-section-dark seul, ne surcharge le fond que sur CETTE
   section, sans rien changer pour les autres gabarits (la page ville garde
   ses fonds nuit). Fond plat, comme l'original : aucun dégradé à transposer
   ici, contrairement au CTA plus bas qui en a un.
   Les titres blancs et les paragraphes adoucis de .ml-section-dark restent
   très lisibles sur ce nouveau fond (--ml-accent, #661f80) : blanc pur à
   10,1:1, blanc à 82 pour cent (paragraphes) à 7,3:1 dans la section, 6,4:1
   au coeur d'une carte d'étape. Mesurés à la main, largement au dessus de
   4,5:1. */
.ml-pays-etapes.ml-section-dark {
  background: var(--ml-accent);
}

.ml-pays-etapes-liste {
  display: grid;
  gap: var(--ml-space-md);
  margin-block-start: var(--ml-space-lg);
}
@media (min-width: 600px) {
  .ml-pays-etapes-liste {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .ml-pays-etapes-liste {
    grid-template-columns: repeat(4, 1fr);
  }
}
.ml-pays-etape {
  padding: var(--ml-space-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ml-radius);
}
.ml-pays-etape-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.2em;
  block-size: 2.2em;
  margin-block-end: var(--ml-space-sm);
  border-radius: 50%;
  font-family: var(--ml-font-heading);
  font-weight: 800;
  /* --ml-accent-clair (#c9a6e0) tenait 5,3:1 sur le rond quand le fond de la
     section était le nuit, mais tombe à 3,4:1 sur l'accent : sous 4,5:1. Du
     blanc atténué à 0,92 le remplace, il tient 6,4:1 sur ce même rond. */
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
}
.ml-pays-etape-titre {
  font-size: var(--ml-fs-base);
  margin-block-end: 0.4em;
}
.ml-pays-etape-desc {
  font-size: var(--ml-fs-sm);
  margin: 0;
}

/* ── Les formules spéciales du pays ───────────────────────────────────────
   Section calculée (template-pays.php, ml_section_formules_pour_pays()) posée
   entre les étapes et les avis. La grille et les cartes sont le vocabulaire
   partagé de l'accueil (.ml-grille-formules et .ml-carte-formule vivent dans
   main.css, la pastille d'âge dans popup-formules.css) : ce fichier ne pose que
   le fond doux qui sépare la section du fond accent des étapes juste au dessus.
   Le titre est rendu à la main avec .ml-pays-section-titre (id fixe, comme les
   autres sections du gabarit). */
.ml-pays-formules {
  background: var(--ml-bg-alt);
}

/* L'introduction sous le titre de section : une phrase, pour que le titre ne
   soit jamais suivi directement de la grille de cartes. */
.ml-pays-formules-intro {
  max-inline-size: 60ch;
  color: var(--ml-text-mid);
}

/* Jusqu'à quatre colonnes ICI, là où l'accueil en garde trois (demande de
   Marino) : la section pays liste les formules en rangée d'aperçu, des
   cartes plus compactes y suffisent. Sélecteur plus spécifique que la règle
   partagée de main.css (.ml-grille-formules, trois colonnes dès 1000px),
   même palier.

   Le compte de colonnes n'est plus figé à 4 : il suit le nombre réel de
   cartes rendues (--ml-formules-cols, posé par template-pays.php sur la
   section, plafonné à 4 côté PHP). Un pays qui ne propose que deux ou trois
   formules les voit ainsi occuper toute la largeur de la section, sans case
   vide au bout de la rangée. Repli à 4 si la variable venait à manquer,
   pour ne jamais perdre le comportement d'origine. */
@media (min-width: 1000px) {
  .ml-pays-formules .ml-grille-formules {
    grid-template-columns: repeat(var(--ml-formules-cols, 4), minmax(0, 1fr));
    /* Occuper toute la largeur ne vaut qu'à partir de trois cartes. À une ou
       deux, la même règle donnait des cartes démesurées, larges comme une
       demi-page pour une vignette et un titre (constat de Marino, capture à
       l'appui sur l'Italie, qui n'en propose qu'une).

       Une seule ligne règle les quatre cas au lieu d'une classe par nombre :
       on borne la largeur à ce que prendraient N cartes de 360 pixels. À une
       carte, 360 ; à deux, 744 ; à trois, 1128, soit presque toute la section ;
       à quatre, la borne dépasse le conteneur et ne s'applique donc jamais.

       La grille reste ALIGNÉE À GAUCHE dans tous les cas (demande de Marino) :
       centrer une carte seule la décrocherait du titre et de l'introduction
       juste au dessus, qui commencent au bord gauche de la section. Le vide se
       met à droite, la colonne de lecture reste droite. */
    max-inline-size: calc(
      var(--ml-formules-cols, 4) * 360px +
      (var(--ml-formules-cols, 4) - 1) * var(--ml-space-md)
    );
    margin-inline: 0;
  }
}

/* ── Avis (ex-témoignages) ────────────────────────────────────────────────
   Plus aucune carte saisie à la main : la preuve sociale vient des avis
   Google, posés par l'outil d'affichage dans .ml-avis-zone (styles dans
   main.css), exactement comme sur l'accueil. La section ne porte donc plus que
   son entête et cette zone, aucun style de carte propre à la fiche. */

/* ── FAQ : accordéon natif details/summary ───────────────────────────────
   Aucun script : « open » sur le premier <details> vient du template. Le
   triangle est un décor posé en CSS sur le résumé, jamais un caractère dans
   le texte, pour qu'une synthèse vocale n'annonce que la question. */
.ml-pays-faq {
  background: var(--ml-accent-soft);
}
.ml-pays-faq-liste {
  display: grid;
  gap: var(--ml-space-sm);
  max-inline-size: 900px;
  margin-block-start: var(--ml-space-lg);
}
.ml-pays-faq-item {
  background: var(--ml-bg);
  border: 1px solid var(--ml-accent-bordure);
  border-radius: var(--ml-radius);
  padding: var(--ml-space-sm) var(--ml-space-md);
}
.ml-pays-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ml-space-sm);
  cursor: pointer;
  list-style: none;
}
.ml-pays-faq-question::-webkit-details-marker {
  display: none;
}
.ml-pays-faq-question h3 {
  font-size: var(--ml-fs-base);
  margin: 0;
}
.ml-pays-faq-question::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.4rem;
  color: var(--ml-accent);
  transition: rotate 200ms var(--ml-ease);
}
.ml-pays-faq-item[open] .ml-pays-faq-question::after {
  rotate: 45deg;
}
@media (prefers-reduced-motion: reduce) {
  .ml-pays-faq-question::after {
    transition: none;
  }
}
.ml-pays-faq-question:focus-visible {
  outline: 2px solid var(--ml-accent);
  outline-offset: 2px;
}
.ml-pays-faq-reponse {
  padding-block-start: var(--ml-space-sm);
  color: var(--ml-text-mid);
}
.ml-pays-faq-reponse a {
  color: var(--ml-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Appel final : dégradé de la couleur de marque, sans mascotte
   (elle vit déjà en bas à droite de la page, voir footer.php). ── */
.ml-pays-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg, var(--ml-accent), var(--ml-accent-dark));
  color: #fff;
  text-align: center;
}
.ml-pays-cta h2 {
  color: #fff;
}

/* Le paragraphe du CTA suit directement le h2, tous deux enfants directs du
   conteneur : la règle générale .ml-section > .ml-container > h2 + p (main.css,
   spécificité (0,2,2)) le repeignait en gris (--ml-text-mid) par dessus le
   blanc voulu, car .ml-pays-cta p (0,1,1) ne pesait pas assez. On reprend la
   même structure, préfixée des classes de la section, pour rester au dessus
   sans !important et sans dépendre de l'ordre de chargement.
   Blanc à 0,92 sur le dégradé violet (#661f80 vers #4d1760) : contraste minimal
   8,8:1 sur l'extrémité claire, très au dessus de 4,5:1. */
.ml-pays-cta.ml-section > .ml-container > h2 + p {
  color: rgba(255, 255, 255, 0.92);
  max-inline-size: 46ch;
  margin-inline: auto;
}

/* Filigrane : le champ de bulles de la marque (assets/img/bulles-fond.png,
   celui de l'accueil ; identique bit à bit au fichier source AAA.png, donc
   pas de variante à copier). Image de fond CSS, aucune balise, donc rien à
   décrire pour une synthèse vocale et rien à télécharger tant que la section
   n'est pas peinte. Les bulles de l'asset sont violettes : posées telles
   quelles sur le haut du dégradé, où le fond est déjà du même violet (#661f80),
   elles disparaîtraient. On les fait donc « se deviner » en mode fusion
   « screen » (elles restent violettes, juste un ton plus clair) à faible
   opacité : ton sur ton, jamais criardes. Le texte est peint au dessus (dans
   .ml-container), opaque : même au coeur d'une bulle éclaircie, le blanc garde
   plus de 5:1. Sans prise en charge de mix-blend-mode, le repli en fusion
   normale ne fait que les rendre plus discrètes encore. */
.ml-pays-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../img/bulles-fond.png');
  background-repeat: no-repeat;
  background-position: 58% 0;
  background-size: 190% auto;
  mix-blend-mode: screen;
  opacity: 0.4;
  pointer-events: none;
}
@media (min-width: 900px) {
  .ml-pays-cta::before {
    background-position: center 0;
    background-size: 100% auto;
  }
}
.ml-pays-cta-inner {
  display: grid;
  justify-items: center;
  gap: var(--ml-space-sm);
}
.ml-pays-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ml-space-md);
  margin-block-start: var(--ml-space-sm);
}
.ml-pays-cta-bouton {
  background: #fff;
  color: var(--ml-accent);
}
.ml-pays-cta-bouton:hover {
  background: var(--ml-accent-soft);
}
.ml-pays-cta-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-space-xs);
  color: #fff;
  font-weight: 600;
}
.ml-pays-cta-tel:hover,
.ml-pays-cta-tel:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}