/* =============================================================================
   La Cité des Grands Lacs — système de design
   Lot 1 · Site web public · v1.0
   Palette officielle du Destination Brand Book ; variantes de contraste dérivées.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  --image-overlay-opacity: 0.42;
  --image-overlay-color: 18 20 18;
  --image-overlay: linear-gradient(to top, rgb(var(--image-overlay-color) / var(--image-overlay-opacity)) 0%, rgb(var(--image-overlay-color) / calc(var(--image-overlay-opacity) * .7)) 35%, transparent 80%);
  /* --- Destination Brand Book, septembre 2026, p. 33 ------------------ */
  --orange-marque: #F19100;
  --bleu-marque:   #37A8E0;
  --charbon:       #1D1D1B;
  --blanc:         #FEFEFE;

  --abysse:        var(--charbon);
  --abysse-haut:   color-mix(in srgb, var(--charbon) 94%, var(--blanc));
  --abysse-flotte: color-mix(in srgb, var(--charbon) 85%, var(--blanc));
  --lac:           var(--bleu-marque);
  --lac-vif:       var(--bleu-marque);
  --lac-brume:     color-mix(in srgb, var(--bleu-marque) 12%, var(--blanc));
  --lac-clair:     var(--bleu-marque);
  --lac-encre:     color-mix(in srgb, var(--bleu-marque) 48%, var(--charbon));
  --solaire:       var(--orange-marque);
  --solaire-cuit:  color-mix(in srgb, var(--orange-marque) 88%, var(--charbon));
  --foret:         var(--charbon);
  --jour:          var(--blanc);
  --jour-haut:     #FFFFFF;
  --encre:         var(--charbon);
  --encre-douce:   color-mix(in srgb, var(--charbon) 76%, var(--blanc));
  --clarte:        var(--blanc);
  --clarte-douce:  color-mix(in srgb, var(--blanc) 78%, var(--charbon));
  --hauteur-entete: 9.5rem;

  --alerte:        oklch(0.50 0.182 27);
  --valide:        oklch(0.548 0.118 152);
  --valide-encre:  oklch(0.432 0.106 152);   /* même vert, lisible en 13px */

  /* --- Contexte clair (défaut). Bascule via .monde-sombre --------------- */
  --fond:          var(--jour);
  --surface:       var(--jour-haut);
  --surface-haute: var(--jour-haut);
  --texte:         var(--encre);
  --texte-doux:    var(--encre-douce);
  --bordure:       color-mix(in srgb, var(--encre) 13%, transparent);
  --bordure-forte: color-mix(in srgb, var(--encre) 26%, transparent);
  --voile:         color-mix(in srgb, var(--encre) 4.5%, transparent);

  /* --- Typographie ------------------------------------------------------ */
  --f-titre: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-corps: 'Alegreya Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-data:  'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --t-display: clamp(2.85rem, 1.5rem + 5.6vw, 5.25rem);
  --t-titre:   clamp(2rem, 1.25rem + 3vw, 3.25rem);
  --t-sous:    clamp(1.4rem, 1.15rem + 1.1vw, 1.95rem);
  --t-h4:      clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --t-chapo:   clamp(1.075rem, 1rem + 0.4vw, 1.28rem);
  --t-corps:   1.0625rem;
  --t-petit:   0.9375rem;
  --t-micro:   0.8125rem;

  --lettre-titre: -0.028em;
  --lettre-etiquette: 0.06em;

  /* --- Espace ----------------------------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  --r-serre: clamp(2rem, 4vw, 3rem);
  --r-moyen: clamp(3.5rem, 7vw, 5.5rem);
  --r-large: clamp(5rem, 10vw, 8.5rem);

  --gouttiere: clamp(1.25rem, 4vw, 3.5rem);
  --largeur-max: 80rem;      /* 1280px */
  --largeur-lecture: 68ch;

  /* --- Formes ----------------------------------------------------------- */
  --arrondi-1: 0.375rem;
  --arrondi-2: 0.625rem;
  --arrondi-3: 1rem;
  --arrondi-4: 1.5rem;
  --arrondi-plein: 999rem;

  /* --- Profondeur : ombres teintées sur la teinte du lac ----------------- */
  --ombre-1: 0 1px 2px color-mix(in srgb, var(--abysse) 6%, transparent),
             0 2px 6px -2px color-mix(in srgb, var(--abysse) 8%, transparent);
  --ombre-2: 0 1px 2px color-mix(in srgb, var(--abysse) 6%, transparent),
             0 8px 24px -8px color-mix(in srgb, var(--abysse) 14%, transparent);
  --ombre-3: 0 2px 4px color-mix(in srgb, var(--abysse) 7%, transparent),
             0 18px 48px -14px color-mix(in srgb, var(--abysse) 24%, transparent);
  --ombre-solaire: 0 6px 20px -8px color-mix(in srgb, var(--solaire-cuit) 50%, transparent);

  /* --- Empilement sémantique -------------------------------------------- */
  --z-fond: 0;
  --z-contenu: 1;
  --z-eleve: 10;
  --z-colle: 100;
  --z-rail: 200;
  --z-voile-modal: 300;
  --z-modal: 310;
  --z-bandeau: 400;
  --z-infobulle: 500;

  /* --- Mouvement -------------------------------------------------------- */
  --sortie-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --sortie-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duree-1: 140ms;
  --duree-2: 240ms;
  --duree-3: 420ms;
  --duree-4: 700ms;
}

/* Monde sombre : bascule de contexte, pas une surcharge par sélecteur. */
.monde-sombre {
  --fond:          var(--abysse);
  --surface:       var(--abysse-haut);
  --surface-haute: var(--abysse-flotte);
  --texte:         var(--clarte);
  --texte-doux:    var(--clarte-douce);
  --bordure:       color-mix(in srgb, var(--clarte) 16%, transparent);
  --bordure-forte: color-mix(in srgb, var(--clarte) 32%, transparent);
  --voile:         color-mix(in srgb, var(--clarte) 6%, transparent);
  color-scheme: dark;
}

/* Le grand aplat d'accueil porte l'orange solaire de la charte. */
.monde-lac {
  --fond:          var(--solaire);
  --surface:       var(--jour-haut);
  --surface-haute: var(--jour-haut);
  --texte:         var(--encre);
  --texte-doux:    var(--encre);
  --bordure:       color-mix(in srgb, var(--charbon) 25%, transparent);
  --bordure-forte: color-mix(in srgb, var(--charbon) 50%, transparent);
  --voile:         color-mix(in srgb, var(--charbon) 6%, transparent);
  color-scheme: light;
}
.monde-lac .amorce::before { background: var(--charbon); }

/* Monde forêt : art direction locale de la page faune. */
.monde-foret {
  --fond:          var(--abysse);
  --surface:       var(--abysse-haut);
  --surface-haute: var(--abysse-flotte);
  --texte:         var(--clarte);
  --texte-doux:    var(--clarte-douce);
  --bordure:       color-mix(in srgb, var(--clarte) 17%, transparent);
  --bordure-forte: color-mix(in srgb, var(--clarte) 34%, transparent);
  --voile:         color-mix(in srgb, var(--clarte) 6%, transparent);
  color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   2. RESET ET BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--e-4));
}

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-corps);
  font-size: var(--t-corps);
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--voile); }

input, button, textarea, select { font: inherit; color: inherit; }

p, li, figcaption { text-wrap: pretty; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  letter-spacing: var(--lettre-titre);
  line-height: 1.05;
  text-wrap: balance;
}

h4, h5 { line-height: 1.25; letter-spacing: -0.015em; }

a { color: inherit; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--solaire);
  outline-offset: 3px;
  border-radius: var(--arrondi-1);
}

::selection { background: var(--solaire); color: var(--encre); }

/* Pile de polices chinoise : Archivo et Alegreya Sans ne couvrent pas le han. */
html[lang='zh'] body,
html[lang='zh'] h1, html[lang='zh'] h2, html[lang='zh'] h3,
html[lang='zh'] h4, html[lang='zh'] h5 {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB',
               'Microsoft YaHei', sans-serif;
  letter-spacing: 0;
}
html[lang='zh'] body { line-height: 1.85; }
html[lang='zh'] h1, html[lang='zh'] h2, html[lang='zh'] h3 { line-height: 1.28; }

/* -----------------------------------------------------------------------------
   3. PRIMITIVES DE MISE EN PAGE
   -------------------------------------------------------------------------- */

.enveloppe {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.enveloppe--etroite { max-width: 58rem; }
.enveloppe--large   { max-width: 92rem; }

.section {
  background: var(--fond);
  color: var(--texte);
  padding-block: var(--r-moyen);
  position: relative;
}
.section--large  { padding-block: var(--r-large); }
.section--serre  { padding-block: var(--r-serre); }
.section--haut-nul { padding-block-start: 0; }
.section--bas-nul  { padding-block-end: 0; }

.lecture { max-width: var(--largeur-lecture); }

.pile { display: flex; flex-direction: column; min-width: 0; }
.pile-2 { gap: var(--e-2); } .pile-3 { gap: var(--e-3); }
.pile-4 { gap: var(--e-4); } .pile-5 { gap: var(--e-5); }
.pile-6 { gap: var(--e-6); } .pile-7 { gap: var(--e-7); }

.rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.rangee--entre { justify-content: space-between; }

.grille-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
  gap: var(--e-5);
}
.grille-auto > * { min-width: 0; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.saut-contenu {
  position: absolute;
  inset-inline-start: var(--e-4);
  inset-block-start: -100%;
  z-index: var(--z-infobulle);
  background: var(--solaire);
  color: var(--encre);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--arrondi-2);
  font-weight: 700;
  text-decoration: none;
  transition: inset-block-start var(--duree-2) var(--sortie-quint);
}
.saut-contenu:focus { inset-block-start: var(--e-4); }

/* -----------------------------------------------------------------------------
   4. TYPOGRAPHIE APPLIQUÉE
   -------------------------------------------------------------------------- */

.display {
  font-size: var(--t-display);
  font-variation-settings: 'wdth' 116;
  font-weight: 700;
}
.titre  { font-size: var(--t-titre); }
.sous   { font-size: var(--t-sous); font-weight: 600; }
.h4     { font-size: var(--t-h4); font-weight: 700; }

.chapo {
  font-size: var(--t-chapo);
  line-height: 1.65;
  color: var(--texte-doux);
  max-width: 46ch;
}

.petit { font-size: var(--t-petit); }
.micro { font-size: var(--t-micro); line-height: 1.45; }
.doux  { color: var(--texte-doux); }

.etiquette {
  font-family: var(--f-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--lettre-etiquette);
  text-transform: uppercase;
  font-variation-settings: 'wdth' 100;
}

.data {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

.lien-souligne {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--bordure-forte);
  transition: text-decoration-color var(--duree-1) var(--sortie-quart),
              color var(--duree-1) var(--sortie-quart);
}
.lien-souligne:hover { text-decoration-color: var(--solaire); }

/* Trait de titre : remplace le sur-titre en capitales espacées. */
.amorce {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  color: var(--texte-doux);
  font-family: var(--f-titre);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--lettre-etiquette);
  text-transform: uppercase;
}
.amorce::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: var(--lac-vif);
  flex: none;
  transform: translateY(-0.25em);
}

/* -----------------------------------------------------------------------------
   5. BOUTONS ET CONTRÔLES
   -------------------------------------------------------------------------- */

.bouton {
  --bouton-fond: transparent;
  --bouton-texte: var(--texte);
  --bouton-bordure: var(--bordure-forte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 2.875rem;
  padding: var(--e-3) var(--e-5);
  border: 1px solid var(--bouton-bordure);
  border-radius: var(--arrondi-plein);
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-family: var(--f-titre);
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duree-1) var(--sortie-quint),
              background-color var(--duree-2) var(--sortie-quart),
              border-color var(--duree-2) var(--sortie-quart),
              color var(--duree-2) var(--sortie-quart),
              box-shadow var(--duree-2) var(--sortie-quart);
}
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled], .bouton[aria-disabled='true'] {
  opacity: 0.45; cursor: not-allowed; transform: none;
}

.bouton--principal {
  --bouton-fond: var(--solaire);
  --bouton-texte: var(--encre);
  --bouton-bordure: var(--solaire);
  box-shadow: var(--ombre-solaire);
}
.bouton--principal:hover {
  --bouton-fond: var(--solaire-cuit);
  --bouton-bordure: var(--solaire-cuit);
}

.bouton--lac {
  --bouton-fond: var(--lac);
  --bouton-texte: var(--encre);
  --bouton-bordure: var(--lac);
}
.bouton--lac:hover { --bouton-fond: var(--lac-vif); --bouton-bordure: var(--lac-vif); }

.bouton--plein { --bouton-fond: var(--texte); --bouton-texte: var(--fond); --bouton-bordure: var(--texte); }

.bouton--fantome { --bouton-bordure: transparent; padding-inline: var(--e-3); }
.bouton--fantome:hover { --bouton-fond: var(--voile); }

.bouton--grand { min-height: 3.375rem; padding-inline: var(--e-6); font-size: var(--t-corps); }
.bouton--petit { min-height: 2.25rem; padding: var(--e-2) var(--e-4); font-size: var(--t-micro); }
.bouton--pleine-largeur { width: 100%; }

.bouton__fleche { transition: transform var(--duree-2) var(--sortie-quint); }
.bouton:hover .bouton__fleche { transform: translateX(3px); }

/* --- Champs ------------------------------------------------------------- */

.champ { display: flex; flex-direction: column; gap: var(--e-2); }

.champ__label {
  font-family: var(--f-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--lettre-etiquette);
  text-transform: uppercase;
  color: var(--texte-doux);
}

.champ__saisie,
.champ__zone,
.champ__liste {
  width: 100%;
  min-height: 2.875rem;
  padding: var(--e-3) var(--e-4);
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--arrondi-2);
  font-size: var(--t-corps);
  transition: border-color var(--duree-2) var(--sortie-quart),
              box-shadow var(--duree-2) var(--sortie-quart);
}
.champ__zone { min-height: 8rem; resize: vertical; line-height: 1.6; padding-block: var(--e-3); }
.champ__liste { appearance: none; padding-inline-end: var(--e-7); cursor: pointer; }

.champ__saisie::placeholder, .champ__zone::placeholder { color: var(--texte-doux); opacity: 1; }

.champ__saisie:hover, .champ__zone:hover, .champ__liste:hover { border-color: var(--lac-encre); }
.champ__saisie:focus-visible, .champ__zone:focus-visible, .champ__liste:focus-visible {
  outline: none;
  border-color: var(--lac-vif);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lac-vif) 28%, transparent);
}

.champ__aide { font-size: var(--t-micro); color: var(--texte-doux); }

.champ__erreur {
  display: none;
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--alerte);
}
.champ[data-invalide='true'] .champ__erreur { display: block; }
.champ[data-invalide='true'] .champ__saisie,
.champ[data-invalide='true'] .champ__zone,
.champ[data-invalide='true'] .champ__liste { border-color: var(--alerte); }

/* Cases et opt-in : le consentement doit être lisible, jamais pré-coché. */
.consentement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  cursor: pointer;
  padding: var(--e-3);
  margin-inline: calc(var(--e-3) * -1);
  border-radius: var(--arrondi-2);
  transition: background-color var(--duree-2) var(--sortie-quart);
}
.consentement:hover { background: var(--voile); }
.consentement__case {
  appearance: none;
  width: 1.375rem; height: 1.375rem;
  margin: 0.15rem 0 0;
  flex: none;
  border: 2px solid var(--bordure-forte);
  border-radius: var(--arrondi-1);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color var(--duree-1) var(--sortie-quart),
              border-color var(--duree-1) var(--sortie-quart);
}
.consentement__case::after {
  content: '';
  width: 0.7rem; height: 0.4rem;
  border-inline-start: 2px solid var(--encre);
  border-block-end: 2px solid var(--encre);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--duree-2) var(--sortie-quint);
}
.consentement__case:checked { background: var(--solaire); border-color: var(--solaire); }
.consentement__case:checked::after { transform: rotate(-45deg) scale(1); }
.consentement__texte { font-size: var(--t-petit); line-height: 1.55; color: var(--texte-doux); }
.consentement__texte strong { color: var(--texte); font-weight: 700; }

/* --- Compteur de voyageurs ---------------------------------------------- */

.compteur { display: flex; align-items: center; gap: var(--e-2); }
.compteur__bouton {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-content: center;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--arrondi-plein);
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color var(--duree-1) var(--sortie-quart),
              border-color var(--duree-1) var(--sortie-quart),
              transform var(--duree-1) var(--sortie-quint);
}
.compteur__bouton:hover:not([disabled]) { background: var(--voile); border-color: var(--lac-encre); }
.compteur__bouton:active:not([disabled]) { transform: scale(0.92); }
.compteur__bouton[disabled] { opacity: 0.35; cursor: not-allowed; }
.compteur__valeur {
  min-width: 2.25rem;
  text-align: center;
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--t-chapo);
}

/* --- Pastilles ---------------------------------------------------------- */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.3rem var(--e-3);
  border-radius: var(--arrondi-plein);
  background: var(--voile);
  color: var(--texte-doux);
  font-family: var(--f-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pastille--dispo { background: oklch(0.548 0.118 152 / 0.16); color: var(--valide-encre); }
.pastille--solaire { background: var(--solaire); color: var(--encre); }
.pastille--lac { background: var(--orange-marque); color: var(--charbon); }
.monde-sombre .pastille--dispo,
.monde-foret .pastille--dispo { color: oklch(0.812 0.132 152); }
.monde-lac .pastille--dispo { background: var(--charbon); color: var(--blanc); }

/* -----------------------------------------------------------------------------
   6. EN-TÊTE ET NAVIGATION
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  color: var(--texte);
  inset-block-start: 0;
  z-index: var(--z-colle);
  background: transparent;
  transition: background-color var(--duree-3) var(--sortie-quart),
              box-shadow var(--duree-3) var(--sortie-quart),
              border-color var(--duree-3) var(--sortie-quart);
  border-block-end: 1px solid transparent;
}
/* Dans le tunnel, le logo complet défile pour ne pas masquer les choix. */
body[data-page="reservation"] .entete { position: relative; }

.entete--pose {
  background: var(--fond);
  border-block-end-color: var(--bordure);
  box-shadow: var(--ombre-1);
}
/* Sur un héro sombre, l'en-tête hérite du monde sombre tant qu'il n'est pas posé. */
.entete--sur-visuel:not(.entete--pose) {
  --texte: var(--clarte);
  --texte-doux: color-mix(in srgb, var(--clarte) 82%, transparent);
  --bordure-forte: color-mix(in srgb, var(--clarte) 42%, transparent);
  --voile: color-mix(in srgb, var(--clarte) 12%, transparent);
  color: var(--clarte);
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: var(--hauteur-entete);
  padding-block: var(--e-3);
}

.marque { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.marque__reserve { display: block; padding: 4px; }
.marque__logo {
  width: 176px; height: 120px; max-width: none;
  object-fit: cover; object-position: center;
  background: transparent;
}
.marque:hover { transform: translateY(-1px); }
.marque:active { transform: translateY(1px); }

.nav { display: none; }
.nav__liste { display: flex; align-items: center; gap: var(--e-1); list-style: none; padding: 0; margin: 0; }
.nav__lien {
  display: inline-block;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--arrondi-plein);
  font-family: var(--f-titre);
  font-size: var(--t-petit);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duree-2) var(--sortie-quart),
              color var(--duree-2) var(--sortie-quart);
}
.nav__lien:hover { background: var(--voile); }
.nav__lien[aria-current='page'] { background: var(--voile); font-weight: 700; }

.entete__actions { display: flex; align-items: center; gap: var(--e-2); margin-inline-start: auto; }

.selecteur-region {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.5rem;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--arrondi-plein);
  background: transparent;
  cursor: pointer;
  font-family: var(--f-data);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color var(--duree-2) var(--sortie-quart),
              border-color var(--duree-2) var(--sortie-quart);
}
.selecteur-region:hover { background: var(--voile); border-color: var(--lac-encre); }
.selecteur-region__sep { opacity: 0.4; }

.bascule-menu {
  display: inline-grid;
  place-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--arrondi-plein);
  background: transparent;
  cursor: pointer;
}
.bascule-menu:hover { background: var(--voile); }
.bascule-menu__trait {
  display: block; width: 1.05rem; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--duree-2) var(--sortie-quint), opacity var(--duree-1) linear;
}
.bascule-menu__trait + .bascule-menu__trait { margin-block-start: 5px; }
[aria-expanded='true'] .bascule-menu__trait:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
[aria-expanded='true'] .bascule-menu__trait:nth-child(2) { opacity: 0; }
[aria-expanded='true'] .bascule-menu__trait:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Menu mobile plein écran -------------------------------------------- */

.menu-mobile {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--abysse);
  color: var(--clarte);
  padding: var(--e-8) var(--gouttiere) var(--e-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--duree-3) var(--sortie-quint),
              visibility 0s linear var(--duree-3);
}
.menu-mobile[data-ouvert='true'] {
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--duree-3) var(--sortie-quint), visibility 0s;
}
.menu-mobile__liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.menu-mobile__lien {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-4);
  border-block-end: 1px solid color-mix(in srgb, var(--clarte) 14%, transparent);
  font-family: var(--f-titre);
  font-variation-settings: 'wdth' 112;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: var(--lettre-titre);
  text-decoration: none;
  transition: color var(--duree-2) var(--sortie-quart);
}
.menu-mobile__lien:hover { color: var(--solaire); }
.menu-mobile__note {
  font-family: var(--f-corps);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--clarte-douce);
}
.menu-mobile__fermer { position: absolute; inset-block-start: var(--e-4); inset-inline-end: var(--gouttiere); }

/* La navigation complète n'apparaît qu'une fois la place réellement disponible.
   À 62rem elle débordait de l'en-tête et poussait le bouton de menu hors écran. */
@media (min-width: 75rem) {
  .nav { display: block; }
  .bascule-menu { display: none; }
}

/* Garde-fou : l'en-tête ne s'élargit jamais au-delà de son conteneur. */
.entete__interieur { min-width: 0; }
.nav, .nav__liste { min-width: 0; }

/* -----------------------------------------------------------------------------
   7. HÉRO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(46rem, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-block-start: calc(-1 * (var(--hauteur-entete) + 1px));
  padding-block-start: calc(var(--hauteur-entete) + var(--e-6));
  padding-block-end: calc(var(--r-serre) * 1.15);
  isolation: isolate;
  overflow: hidden;
  background: var(--abysse);
  color: var(--clarte);
}

.hero__media { position: absolute; inset: 0; z-index: var(--z-fond); }
.hero__image {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: derive-lente 26s var(--sortie-quart) forwards;
}
@keyframes derive-lente {
  from { transform: scale(1.12) translate3d(0, 1.5%, 0); }
  to   { transform: scale(1.0) translate3d(0, 0, 0); }
}

/* Traitement colorimétrique : voile teinté lac + dégradé de lisibilité. */
.hero__teinte { display: none; }
.hero__voile {
  position: absolute; inset: 0;
  z-index: 2;
  background: var(--image-overlay);
}

.hero__corps { position: relative; z-index: var(--z-contenu); padding-block-end: var(--e-7); }

.hero__lieu {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-titre);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--clarte) 85%, transparent);
}
.hero__lieu::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--solaire); flex: none;
}

.hero__titre {
  font-size: var(--t-display);
  font-variation-settings: 'wdth' 118;
  max-width: 16ch;
  margin-block: var(--e-4) var(--e-5);
}
.hero__titre em { font-style: normal; color: var(--solaire); }

.hero__chapo { max-width: 44ch; color: color-mix(in srgb, var(--clarte) 90%, transparent); font-size: var(--t-chapo); line-height: 1.5; }

.hero__metiers {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e-2) var(--e-4);
  list-style: none; padding: 0; margin-block-start: var(--e-5);
  font-family: var(--f-titre);
  font-size: var(--t-petit);
  font-weight: 600;
  color: color-mix(in srgb, var(--clarte) 90%, transparent);
}
.hero__metiers li { display: flex; align-items: center; gap: var(--e-4); }
.hero__metiers li:not(:last-child)::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--lac-vif);
}

/* Chorégraphie d'ouverture : une seule, à l'arrivée sur la page. */
.leve { animation: leve var(--duree-4) var(--sortie-quint) backwards; }
.leve--1 { animation-delay: 80ms; }
.leve--2 { animation-delay: 200ms; }
.leve--3 { animation-delay: 320ms; }
.leve--4 { animation-delay: 440ms; }
.leve--5 { animation-delay: 560ms; }
@keyframes leve {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to   { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   8. RAIL DE RECHERCHE — l'entrée du tunnel, à cheval sur le pli
   -------------------------------------------------------------------------- */

.rail-recherche {
  position: relative;
  z-index: var(--z-eleve);
  background: var(--jour-haut);
  color: var(--encre);
  border-radius: var(--arrondi-4);
  box-shadow: var(--ombre-3);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-3);
}
/* Le rail chevauche le pli : il sort du hero, qui ecrete son image de fond. */
.zone-rail {
  position: relative;
  z-index: var(--z-eleve);
  margin-block-start: calc(var(--r-serre) * -1.15);
  /* Le fond sombre demarre sous le pli du rail : la bande de reassurance
     enchaine sans couture claire entre les deux. */
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--r-serre) * 1.15),
    var(--abysse) calc(var(--r-serre) * 1.15),
    var(--abysse) 100%
  );
}

.rail-recherche__champs {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
}
.rail-recherche__champ {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--e-3) var(--e-4);
  border: 1px solid color-mix(in srgb, var(--encre) 16%, transparent);
  border-radius: var(--arrondi-2);
  background: var(--jour);
  cursor: pointer;
  text-align: start;
  transition: border-color var(--duree-2) var(--sortie-quart),
              background-color var(--duree-2) var(--sortie-quart);
}
.rail-recherche__champ:hover { border-color: var(--lac-vif); background: var(--jour-haut); }
.rail-recherche__champ:focus-within { border-color: var(--lac-vif); background: var(--jour-haut); }
.rail-recherche__cle {
  font-family: var(--f-titre);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--lettre-etiquette);
  text-transform: uppercase;
  color: var(--encre-douce);
}
.rail-recherche__valeur {
  border: 0; padding: 0; background: transparent;
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-corps);
  font-weight: 700;
  color: var(--encre);
  width: 100%;
  cursor: pointer;
}
.rail-recherche__valeur:focus-visible { outline: none; }
.rail-recherche__valeur::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.5; }
.rail-recherche__valeur::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.rail-recherche__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3);
  padding-inline: var(--e-1);
}
.rail-recherche__note { font-size: var(--t-micro); color: var(--encre-douce); }
.rail-recherche__note strong { color: var(--encre); }

/* Les champs de date ont une largeur intrinsèque élevée : sans min-width nulle,
   ils imposent leur taille à la grille et débordent du conteneur. */
.rail-recherche__champs > * { min-width: 0; }
.rail-recherche__valeur { min-width: 0; }

/* Deux colonnes dès la tablette, quatre seulement quand la ligne tient vraiment. */
@media (min-width: 48rem) {
  .rail-recherche { padding: var(--e-4) var(--e-4) var(--e-3); }
  .rail-recherche__champs { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .rail-recherche__champs .bouton { grid-column: 1 / -1; align-self: stretch; }
}

@media (min-width: 62rem) {
  .rail-recherche__champs { grid-template-columns: 1.05fr 1.05fr 1.2fr auto; }
  .rail-recherche__champs .bouton { grid-column: auto; }
}

/* -----------------------------------------------------------------------------
   9. BANDE DE RÉASSURANCE
   -------------------------------------------------------------------------- */

.reassurance {
  background: var(--abysse);
  color: var(--clarte);
  padding-block: calc(var(--r-serre) * 1.15) var(--e-6);
}
.reassurance__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--e-5);
  list-style: none; padding: 0; margin: 0;
}
.reassurance__item { display: flex; gap: var(--e-3); align-items: start; }
.reassurance__icone { flex: none; width: 1.5rem; height: 1.5rem; color: var(--solaire); margin-block-start: 0.15rem; }
.reassurance__titre { font-family: var(--f-titre); font-size: var(--t-petit); font-weight: 700; letter-spacing: -0.01em; }
.reassurance__detail { font-size: var(--t-micro); color: var(--clarte-douce); line-height: 1.5; }

/* -----------------------------------------------------------------------------
   10. LA LIGNE D'EAU — signature, exactement trois usages sur le site
   -------------------------------------------------------------------------- */

.ligne-eau {
  display: block;
  width: 100%;
  height: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}
.ligne-eau svg { width: 220%; max-width: none; height: 100%; }
.ligne-eau__onde {
  animation: derive-onde 22s linear infinite;
  transform-origin: center;
}
.ligne-eau__onde--lente { animation-duration: 34s; opacity: 0.45; }
@keyframes derive-onde {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* -----------------------------------------------------------------------------
   11. LES TROIS MONDES — composition asymétrique, pas trois cartes égales
   -------------------------------------------------------------------------- */

.mondes { display: grid; gap: var(--e-4); }

.monde {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 22rem;
  padding: var(--e-6);
  border-radius: var(--arrondi-4);
  overflow: hidden;
  color: var(--clarte);
  text-decoration: none;
  background: var(--abysse);
}
.monde--majeur { min-height: 30rem; }

.monde__image {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duree-4) var(--sortie-quint);
}
.monde:hover .monde__image { transform: scale(1.045); }

.monde__teinte {
  position: absolute; inset: 0; z-index: -1;
  background: var(--image-overlay);
}
.monde__teinte::before { display: none; }
.monde:hover .monde__teinte::before { display: none; }

.monde__numero {
  position: absolute;
  inset-block-start: var(--e-5);
  inset-inline-start: var(--e-6);
  font-family: var(--f-data);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--clarte) 70%, transparent);
}
.monde__titre {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  font-variation-settings: 'wdth' 114;
}
.monde--majeur .monde__titre { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem); }
.monde__texte { color: color-mix(in srgb, var(--clarte) 86%, transparent); max-width: 40ch; margin-block-start: var(--e-3); }
.monde__pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  margin-block-start: var(--e-5);
  font-family: var(--f-titre); font-size: var(--t-petit); font-weight: 700;
}
.monde__prix { color: var(--solaire); }
.monde__cta { display: inline-flex; align-items: center; gap: var(--e-2); }
.monde:hover .monde__cta .bouton__fleche { transform: translateX(4px); }

@media (min-width: 55rem) {
  .mondes { grid-template-columns: 1.45fr 1fr; grid-template-rows: auto auto; }
  .monde--majeur { grid-row: span 2; }
}

/* -----------------------------------------------------------------------------
   12. INVENTAIRE — l'hétérogénéité est voulue
   -------------------------------------------------------------------------- */

/* 12a. Fiche vedette : pleine largeur, image et texte côte à côte. */
.vedette {
  display: grid;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi-4);
  overflow: hidden;
}
.vedette__media { position: relative; isolation: isolate; min-height: 20rem; }
.vedette__image { width: 100%; height: 100%; object-fit: cover; }
.vedette__badge { position: absolute; inset-block-start: var(--e-4); inset-inline-start: var(--e-4); z-index: 2; }
.vedette__corps { padding: clamp(var(--e-5), 4vw, var(--e-7)); display: flex; flex-direction: column; gap: var(--e-4); }
.vedette__equipements {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  list-style: none; padding: 0; margin: 0;
}

@media (min-width: 55rem) {
  .vedette { grid-template-columns: 1.15fr 1fr; }
  .vedette--inverse .vedette__media { order: 2; }
}

/* 12b. Bande horizontale : image à gauche, contenu et tarif à droite. */
.bande {
  display: grid;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi-3);
  overflow: hidden;
  transition: border-color var(--duree-2) var(--sortie-quart),
              box-shadow var(--duree-2) var(--sortie-quart);
}
.bande:hover { border-color: var(--lac-vif); box-shadow: var(--ombre-2); }
.bande__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.bande__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duree-4) var(--sortie-quint); }
.bande:hover .bande__image { transform: scale(1.04); }
.bande__corps { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); }
.bande__tarif {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-5);
  border-block-start: 1px solid var(--bordure);
}
.bande__meta { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: var(--t-petit); color: var(--texte-doux); }
.bande__meta li { display: flex; align-items: center; gap: var(--e-2); }
.bande__meta { list-style: none; padding: 0; margin: 0; }

@media (min-width: 48rem) {
  .bande { grid-template-columns: 20rem 1fr auto; align-items: stretch; }
  .bande__media { aspect-ratio: auto; height: 100%; }
  .bande__tarif {
    border-block-start: 0;
    border-inline-start: 1px solid var(--bordure);
    justify-content: center;
    min-width: 14rem;
  }
}

/* 12c. Prix ------------------------------------------------------------- */
.prix { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.prix__montant {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.prix__unite { font-size: var(--t-petit); color: var(--texte-doux); }
.prix__barre { font-size: var(--t-petit); color: var(--texte-doux); text-decoration: line-through; }

/* -----------------------------------------------------------------------------
   13. LE COMPOSEUR DE SÉJOUR — signature du site
   Rail persistant : à droite sur desktop, ancré en bas sur mobile.
   -------------------------------------------------------------------------- */

.composeur {
  position: fixed;
  z-index: var(--z-rail);
  background: var(--jour-haut);
  color: var(--encre);
  box-shadow: var(--ombre-3);
  display: flex;
  flex-direction: column;
  transition: transform var(--duree-3) var(--sortie-quint);
}

/* Mobile : tiroir ancré en bas, replié sur une barre de synthèse. */
.composeur {
  inset-inline: 0;
  inset-block-end: 0;
  max-height: 82svh;
  border-start-start-radius: var(--arrondi-4);
  border-start-end-radius: var(--arrondi-4);
  transform: translateY(calc(100% - 4.75rem));
}
.composeur[data-ouvert='true'] { transform: translateY(0); }
.composeur[hidden] { display: none; }

.composeur__poignee {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 4.75rem;
  padding: var(--e-4) var(--e-5);
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--bordure);
  cursor: pointer;
  text-align: start;
}
.composeur__pouce {
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 2.5rem; height: 4px;
  border-radius: var(--arrondi-plein);
  background: color-mix(in srgb, var(--encre) 20%, transparent);
}
.composeur__resume { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.composeur__compte {
  font-family: var(--f-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--lettre-etiquette);
  text-transform: uppercase;
  color: var(--encre-douce);
}
.composeur__total {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.composeur__chevron {
  margin-inline-start: auto;
  flex: none;
  transition: transform var(--duree-3) var(--sortie-quint);
}
.composeur[data-ouvert='true'] .composeur__chevron { transform: rotate(180deg); }

.composeur__corps {
  overflow-y: auto;
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  flex: 1;
}

.composeur__vide {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding-block: var(--e-5);
  text-align: start;
}
.composeur__vide-titre { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-h4); }
.composeur__vide-texte { font-size: var(--t-petit); color: var(--encre-douce); }

.composeur__lignes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-3); }

.ligne-panier {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  background: var(--jour);
  border: 1px solid color-mix(in srgb, var(--encre) 11%, transparent);
  border-radius: var(--arrondi-2);
  animation: entre-ligne var(--duree-3) var(--sortie-quint) backwards;
}
@keyframes entre-ligne {
  from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
  to   { opacity: 1; transform: none; }
}
.ligne-panier__nom { font-family: var(--f-titre); font-size: var(--t-petit); font-weight: 700; line-height: 1.25; }
.ligne-panier__detail { font-size: var(--t-micro); color: var(--encre-douce); }
.ligne-panier__prix {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-petit);
  font-weight: 700;
  white-space: nowrap;
}
.ligne-panier__retirer {
  width: 2rem; height: 2rem;
  display: grid; place-content: center;
  border: 1px solid color-mix(in srgb, var(--encre) 18%, transparent);
  border-radius: var(--arrondi-plein);
  background: transparent;
  cursor: pointer;
  color: var(--encre-douce);
  transition: background-color var(--duree-1) var(--sortie-quart),
              color var(--duree-1) var(--sortie-quart),
              border-color var(--duree-1) var(--sortie-quart);
}
.ligne-panier__retirer:hover { background: var(--alerte); border-color: var(--alerte); color: var(--jour-haut); }

.composeur__totaux {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding-block-start: var(--e-4);
  border-block-start: 1px solid var(--bordure);
}
.composeur__poste { display: flex; justify-content: space-between; gap: var(--e-4); font-size: var(--t-petit); color: var(--encre-douce); }
.composeur__poste--fort {
  font-family: var(--f-titre);
  font-size: var(--t-chapo);
  font-weight: 700;
  color: var(--encre);
  padding-block-start: var(--e-2);
}
.composeur__poste .data { font-weight: 700; }

.composeur__pied { display: flex; flex-direction: column; gap: var(--e-3); }
.composeur__mention { font-size: var(--t-micro); color: var(--encre-douce); text-align: center; }

/* Desktop : rail vertical ancré à droite. */
@media (min-width: 68rem) {
  .composeur {
    inset-block: auto 0;
    inset-inline: auto var(--e-5);
    inset-block-end: var(--e-5);
    width: 22.5rem;
    max-height: min(38rem, calc(100svh - 8rem));
    border-radius: var(--arrondi-4);
    transform: translateY(calc(100% - 4.75rem));
  }
  .composeur[data-ouvert='true'] { transform: translateY(0); }
  .composeur__pouce { display: none; }
}

/* Pastille d'ajout : retour visuel immédiat sur le bouton cliqué. */
.bouton[data-ajoute='true'] { --bouton-fond: var(--valide); --bouton-bordure: var(--valide); --bouton-texte: var(--encre); }

/* -----------------------------------------------------------------------------
   14. ACTIVITÉS — vente additionnelle
   -------------------------------------------------------------------------- */

.activite {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi-3);
  overflow: hidden;
  transition: border-color var(--duree-2) var(--sortie-quart),
              box-shadow var(--duree-2) var(--sortie-quart);
}
.activite:hover { border-color: var(--lac-vif); box-shadow: var(--ombre-2); }
.activite__media { position: relative; aspect-ratio: 5 / 3; overflow: hidden; }
.activite__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duree-4) var(--sortie-quint); }
.activite:hover .activite__image { transform: scale(1.05); }
.activite__marqueur {
  position: absolute;
  inset-block-start: var(--e-3);
  inset-inline-start: var(--e-3);
}
.activite__corps { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); flex: 1; }
.activite__texte { font-size: var(--t-petit); color: var(--texte-doux); flex: 1; }
.activite__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }

/* -----------------------------------------------------------------------------
   15. BILLETTERIE
   -------------------------------------------------------------------------- */

.billet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-5);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi-3);
}
.billet__nom { font-family: var(--f-titre); font-size: var(--t-h4); font-weight: 700; }
.billet__detail { font-size: var(--t-petit); color: var(--texte-doux); }
.billet > * { min-width: 0; }
.billet__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); }
.billet .bouton { min-height: 2.75rem; }
.billet__detail { line-height: 1.6; }
.billet .prix { text-align: start; }

/* -----------------------------------------------------------------------------
   16. FORMULAIRES DE CAPTATION
   -------------------------------------------------------------------------- */

.capture {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi-4);
  padding: clamp(var(--e-5), 4vw, var(--e-7));
}
.capture__grille { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 42rem) { .capture__grille--2 { grid-template-columns: 1fr 1fr; } }
.capture__pleine { grid-column: 1 / -1; }

.retour-formulaire {
  display: none;
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-4);
  border-radius: var(--arrondi-2);
  font-size: var(--t-petit);
  line-height: 1.55;
}
.retour-formulaire[data-etat='succes'] {
  display: flex;
  background: oklch(0.548 0.118 152 / 0.14);
  color: var(--valide);
  border: 1px solid oklch(0.548 0.118 152 / 0.4);
}
.retour-formulaire[data-etat='erreur'] {
  display: flex;
  background: oklch(0.556 0.182 27 / 0.12);
  color: var(--alerte);
  border: 1px solid oklch(0.556 0.182 27 / 0.4);
}
.monde-sombre .retour-formulaire[data-etat='succes'] { color: oklch(0.78 0.14 152); }
.monde-sombre .retour-formulaire[data-etat='erreur'] { color: oklch(0.74 0.16 27); }

/* -----------------------------------------------------------------------------
   17. TUNNEL DE RÉSERVATION
   -------------------------------------------------------------------------- */

.jalons { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.jalon {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi-plein);
  font-family: var(--f-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--texte-doux);
  white-space: nowrap;
}
.jalon__rang {
  width: 1.375rem; height: 1.375rem;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--voile);
  font-family: var(--f-data);
  font-size: 0.6875rem;
}
.jalon[data-etat='actif'] { border-color: var(--solaire); color: var(--texte); background: color-mix(in srgb, var(--solaire) 14%, transparent); }
.jalon[data-etat='actif'] .jalon__rang { background: var(--solaire); color: var(--encre); }
.jalon[data-etat='fait'] { border-color: var(--valide); color: var(--texte-doux); }
.jalon[data-etat='fait'] .jalon__rang { background: var(--valide); color: var(--jour-haut); }

.etape { display: none; }
.etape[data-actif='true'] { display: block; animation: entre-etape var(--duree-3) var(--sortie-quint); }
@keyframes entre-etape {
  from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
  to   { opacity: 1; transform: none; }
}

.choix {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi-3);
  cursor: pointer;
  transition: border-color var(--duree-2) var(--sortie-quart),
              background-color var(--duree-2) var(--sortie-quart);
}
.choix:hover { border-color: var(--lac-encre); }
.choix:has(:checked) { border-color: var(--solaire); background: color-mix(in srgb, var(--solaire) 9%, transparent); }
.choix__radio {
  appearance: none;
  width: 1.375rem; height: 1.375rem;
  flex: none;
  border: 2px solid var(--bordure-forte);
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-content: center;
  transition: border-color var(--duree-1) var(--sortie-quart);
}
.choix__radio::after {
  content: ''; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--solaire); transform: scale(0);
  transition: transform var(--duree-2) var(--sortie-quint);
}
.choix__radio:checked { border-color: var(--solaire); }
.choix__radio:checked::after { transform: scale(1); }
.choix__nom { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-petit); }
.choix__detail { font-size: var(--t-micro); color: var(--texte-doux); }
.choix__prix { font-family: var(--f-data); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.choix__logo { height: 1.5rem; width: auto; }

.recapitulatif {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi-3);
  padding: var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-3);
  position: sticky;
  inset-block-start: 6rem;
}

@media (min-width: 62rem) {
  .tunnel { display: grid; grid-template-columns: 1fr 21rem; gap: var(--e-7); align-items: start; }
}

/* -----------------------------------------------------------------------------
   18. GALERIE
   -------------------------------------------------------------------------- */

.galerie { columns: 1; column-gap: var(--e-4); }
@media (min-width: 40rem) { .galerie { columns: 2; } }
@media (min-width: 64rem) { .galerie { columns: 3; } }

.galerie__element {
  break-inside: avoid;
  margin-block-end: var(--e-4);
  border-radius: var(--arrondi-3);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: var(--voile);
}
.galerie__image { width: 100%; height: auto; transition: transform var(--duree-4) var(--sortie-quint); }
.galerie__element:hover .galerie__image { transform: scale(1.04); }
.galerie__legende {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--e-5) var(--e-4) var(--e-4);
  background: var(--image-overlay);
  color: var(--clarte);
  font-size: var(--t-micro);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--duree-2) var(--sortie-quart), transform var(--duree-2) var(--sortie-quint);
}
.galerie__element:hover .galerie__legende,
.galerie__element:focus-within .galerie__legende { opacity: 1; transform: none; }

/* -----------------------------------------------------------------------------
   19. PAGE FAUNE ET CONSERVATION
   -------------------------------------------------------------------------- */

.chiffre-cle { display: flex; flex-direction: column; gap: var(--e-1); }
.chiffre-cle__valeur {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--solaire);
}
.chiffre-cle__libelle { font-size: var(--t-petit); color: var(--texte-doux); max-width: 24ch; }

.espece {
  position: relative;
  border-radius: var(--arrondi-3);
  overflow: hidden;
  isolation: isolate;
  min-height: 22rem;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: var(--e-5);
  color: var(--clarte);
}
.espece__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.espece__voile {
  position: absolute; inset: 0; z-index: -1;
  background: var(--image-overlay);
}
.espece__voile::before { display: none; }
.espece__nom { font-family: var(--f-titre); font-size: var(--t-h4); font-weight: 700; }
.espece__latin { font-size: var(--t-micro); font-style: italic; color: color-mix(in srgb, var(--clarte) 75%, transparent); }

/* -----------------------------------------------------------------------------
   20. TABLEAUX ET CONTENU ÉDITORIAL
   -------------------------------------------------------------------------- */

.defilement-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;      /* sans quoi le tableau impose sa largeur au conteneur */
  max-width: 100%;
}

.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-petit); min-width: 34rem; }
.tableau th, .tableau td { padding: var(--e-3) var(--e-4); text-align: start; border-block-end: 1px solid var(--bordure); }
.tableau th {
  font-family: var(--f-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--lettre-etiquette);
  text-transform: uppercase;
  color: var(--texte-doux);
}
.tableau td.data, .tableau th.data { text-align: end; }
.tableau tbody tr:hover { background: var(--voile); }

.prose { max-width: var(--largeur-lecture); min-width: 0; }
.prose h2 { font-size: var(--t-sous); margin-block: var(--e-7) var(--e-3); }
.prose h3 { font-size: var(--t-h4); margin-block: var(--e-5) var(--e-2); }
.prose h2:first-child, .prose h3:first-child { margin-block-start: 0; }
.prose p, .prose ul, .prose ol { margin-block-end: var(--e-4); }
.prose ul, .prose ol { padding-inline-start: var(--e-5); }
.prose li { margin-block-end: var(--e-2); }
.prose a { color: var(--lac-encre); text-decoration: underline; text-underline-offset: 0.2em; }
.monde-sombre .prose a,
.monde-foret .prose a { color: var(--lac-clair); }

.accordeon { border-block-end: 1px solid var(--bordure); }
.accordeon__resume {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding-block: var(--e-4);
  cursor: pointer;
  font-family: var(--f-titre);
  font-size: var(--t-h4);
  font-weight: 700;
  list-style: none;
}
.accordeon__resume::-webkit-details-marker { display: none; }
.accordeon__signe { flex: none; transition: transform var(--duree-2) var(--sortie-quint); }
.accordeon[open] .accordeon__signe { transform: rotate(45deg); }
.accordeon__corps { padding-block-end: var(--e-5); color: var(--texte-doux); max-width: var(--largeur-lecture); }

/* -----------------------------------------------------------------------------
   21. PIED DE PAGE
   -------------------------------------------------------------------------- */

.pied {
  background: var(--abysse);
  color: var(--clarte);
  padding-block: var(--r-moyen) var(--e-6);
  --texte: var(--clarte);
  --texte-doux: var(--clarte-douce);
  --bordure: color-mix(in srgb, var(--clarte) 16%, transparent);
  --bordure-forte: color-mix(in srgb, var(--clarte) 32%, transparent);
  --voile: color-mix(in srgb, var(--clarte) 6%, transparent);
}
.pied__haut { display: grid; gap: var(--e-7); }
.pied__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e-6); }
.pied__titre-col {
  font-family: var(--f-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--lettre-etiquette);
  text-transform: uppercase;
  color: var(--clarte-douce);
  margin-block-end: var(--e-3);
}
.pied__liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.pied__lien {
  font-size: var(--t-petit);
  text-decoration: none;
  color: var(--clarte);
  transition: color var(--duree-1) var(--sortie-quart);
}
.pied__lien:hover { color: var(--solaire); }

.pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-4);
  margin-block-start: var(--e-7);
  padding-block-start: var(--e-5);
  border-block-start: 1px solid color-mix(in srgb, var(--clarte) 16%, transparent);
  font-size: var(--t-micro);
  color: var(--clarte-douce);
}
.pied__paiements { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.moyen-paiement {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px solid color-mix(in srgb, var(--clarte) 20%, transparent);
  border-radius: var(--arrondi-1);
  font-family: var(--f-titre);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (min-width: 62rem) {
  .pied__haut { grid-template-columns: 1fr 1.6fr; gap: var(--e-9); align-items: start; }
}

/* -----------------------------------------------------------------------------
   22. BANDEAU COOKIES — refus aussi accessible qu'acceptation
   -------------------------------------------------------------------------- */

.bandeau-cookies {
  position: fixed;
  inset-inline: var(--e-4);
  inset-block-end: var(--e-4);
  z-index: var(--z-bandeau);
  max-width: 34rem;
  padding: var(--e-5);
  background: var(--jour-haut);
  color: var(--encre);
  border: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
  border-radius: var(--arrondi-3);
  box-shadow: var(--ombre-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  animation: monte-bandeau var(--duree-4) var(--sortie-quint) 900ms backwards;
}
@keyframes monte-bandeau {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to   { opacity: 1; transform: none; }
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies__titre { font-family: var(--f-titre); font-size: var(--t-h4); font-weight: 700; }
.bandeau-cookies__texte { font-size: var(--t-petit); color: var(--encre-douce); line-height: 1.55; }
.bandeau-cookies__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.bandeau-cookies__actions .bouton { flex: 1 1 8rem; }

@media (min-width: 62rem) {
  .bandeau-cookies { inset-inline-start: var(--e-5); inset-inline-end: auto; inset-block-end: var(--e-5); }
  /* Ne recouvre pas le rail composeur, qui est ancré à droite. */
}

/* -----------------------------------------------------------------------------
   23. DIALOGUE LANGUE ET DEVISE
   -------------------------------------------------------------------------- */

.dialogue {
  width: min(30rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--arrondi-3);
  background: var(--jour-haut);
  color: var(--encre);
  box-shadow: var(--ombre-3);
}
.dialogue::backdrop { background: color-mix(in srgb, var(--abysse) 62%, transparent); backdrop-filter: blur(3px); }
.dialogue__entete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-5);
  border-block-end: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
}
.dialogue__titre { font-family: var(--f-titre); font-size: var(--t-h4); font-weight: 700; }
.dialogue__corps { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-5); }
.dialogue__groupe-titre {
  font-family: var(--f-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--lettre-etiquette);
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-block-end: var(--e-3);
}
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--e-2); }
.option {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: var(--e-3) var(--e-4);
  border: 1px solid color-mix(in srgb, var(--encre) 16%, transparent);
  border-radius: var(--arrondi-2);
  background: transparent;
  cursor: pointer;
  text-align: start;
  transition: border-color var(--duree-1) var(--sortie-quart),
              background-color var(--duree-1) var(--sortie-quart);
}
.option:hover { border-color: var(--lac-vif); background: var(--jour); }
.option[aria-pressed='true'] { border-color: var(--solaire); background: color-mix(in srgb, var(--solaire) 16%, transparent); }
.option__nom { font-family: var(--f-titre); font-size: var(--t-petit); font-weight: 700; }
.option__note { font-size: var(--t-micro); color: var(--encre-douce); }

/* -----------------------------------------------------------------------------
   24. RÉVÉLATIONS AU DÉFILEMENT
   Le contenu est visible par défaut. L'état masqué n'est posé que par le script,
   avec une temporisation de secours : une section ne part jamais vide.
   -------------------------------------------------------------------------- */

.js-revele {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition: opacity var(--duree-4) var(--sortie-quart),
              transform var(--duree-4) var(--sortie-quint);
}
.js-revele[data-vu='true'] { opacity: 1; transform: none; }
.js-revele[style*='--rang'] { transition-delay: calc(var(--rang) * 90ms); }

/* -----------------------------------------------------------------------------
   25. UTILITAIRES
   -------------------------------------------------------------------------- */

.ratio-16-9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ratio-4-3  { aspect-ratio: 4 / 3;  object-fit: cover; width: 100%; }
.ratio-1-1  { aspect-ratio: 1 / 1;  object-fit: cover; width: 100%; }
.rond { border-radius: var(--arrondi-3); overflow: hidden; }
.centre-texte { text-align: center; }
.marge-auto { margin-inline: auto; }
.plein { width: 100%; }

.carte-lieu {
  width: 100%;
  min-height: 22rem;
  border: 0;
  border-radius: var(--arrondi-3);
  filter: grayscale(0.25) contrast(1.05);
}

/* -----------------------------------------------------------------------------
   26. MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__image { transform: none; animation: none; }
  .ligne-eau__onde { animation: none; }
  .js-revele { opacity: 1; transform: none; }
  .monde:hover .monde__image,
  .bande:hover .bande__image,
  .activite:hover .activite__image,
  .galerie__element:hover .galerie__image { transform: none; }
}

/* -----------------------------------------------------------------------------
   27. IMPRESSION — la confirmation de réservation doit s'imprimer proprement
   -------------------------------------------------------------------------- */

@media print {
  .entete, .composeur, .bandeau-cookies, .pied, .menu-mobile, .ligne-eau { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.75em; }
}

/* -----------------------------------------------------------------------------
   28. EN-TÊTE DE PAGE INTÉRIEURE — plus bas que le héro d'accueil
   -------------------------------------------------------------------------- */

.entete-page {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(30rem, 74svh);
  margin-block-start: calc(-1 * (var(--hauteur-entete) + 1px));
  padding-block: calc(var(--hauteur-entete) + var(--e-6)) var(--r-serre);
  overflow: hidden;
  background: var(--abysse);
  color: var(--clarte);
}
.entete-page__image {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.entete-page__voile {
  position: absolute; inset: 0; z-index: -1;
  background: var(--image-overlay);
}
.entete-page__voile::before { display: none; }
.entete-page__titre { font-size: var(--t-titre); font-variation-settings: 'wdth' 116; max-width: 18ch; }
.entete-page__chapo { color: color-mix(in srgb, var(--clarte) 88%, transparent); max-width: 52ch; font-size: var(--t-chapo); line-height: 1.55; }

/* Fil d'Ariane */
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); list-style: none; padding: 0; margin: 0;
       font-family: var(--f-titre); font-size: var(--t-micro); font-weight: 600; }
.fil li { display: flex; align-items: center; gap: var(--e-2); color: color-mix(in srgb, var(--clarte) 70%, transparent); }
.fil li:not(:last-child)::after { content: '/'; opacity: 0.5; }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--solaire); }

/* Filtres d'inventaire */
.filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
.filtre {
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--arrondi-plein);
  background: transparent;
  font-family: var(--f-titre); font-size: var(--t-petit); font-weight: 700;
  cursor: pointer;
  transition: background-color var(--duree-2) var(--sortie-quart),
              border-color var(--duree-2) var(--sortie-quart),
              color var(--duree-2) var(--sortie-quart);
}
.filtre:hover { background: var(--voile); border-color: var(--lac-encre); }
.filtre[aria-pressed='true'] { background: var(--texte); color: var(--fond); border-color: var(--texte); }

/* Bloc d'appel final, présent au bas de chaque page intérieure */
.rappel {
  display: grid;
  gap: var(--e-5);
  padding: clamp(var(--e-6), 5vw, var(--e-8));
  border-radius: var(--arrondi-4);
  background: var(--lac);
  color: var(--jour-haut);
  align-items: center;
}
.rappel__titre { font-size: var(--t-sous); max-width: 20ch; }
.rappel__texte { color: oklch(1 0 0 / 0.86); max-width: 46ch; }
.rappel {
  --texte: var(--encre);
  --texte-doux: var(--encre);
  --bordure: color-mix(in srgb, var(--charbon) 28%, transparent);
  --bordure-forte: color-mix(in srgb, var(--charbon) 55%, transparent);
  --voile: color-mix(in srgb, var(--charbon) 8%, transparent);
  color: var(--encre);
}
.rappel__texte { color: var(--encre); }

.rappel .bouton--principal { --bouton-texte: var(--encre); --bouton-bordure: var(--solaire); }
@media (min-width: 55rem) { .rappel { grid-template-columns: 1.4fr auto; } }

/* -----------------------------------------------------------------------------
   29. EN-TÊTE SUR PETIT ÉCRAN
   Le bloc de marque est long : sans contrainte, il pousse le bouton de menu
   hors de l'écran, où il devient inatteignable. On resserre jusqu'à 62rem,
   point où la navigation complète apparaît.
   -------------------------------------------------------------------------- */

@media (max-width: 74.999rem) {
  .entete__interieur { gap: var(--e-3); }

  .marque { min-width: 0; }
}

/* Au-delà de 48rem la barre respire : on rend son format complet à la marque. */
@media (min-width: 48rem) and (max-width: 74.999rem) {

  .entete__actions { gap: var(--e-2); }
  .entete__actions .bouton--petit { padding-inline: var(--e-4); }
}

/* Le sélecteur langue et devise, tel qu'il apparaît dans le menu mobile. */
.menu-mobile__region {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
  padding: var(--e-4);
  border: 1px solid color-mix(in srgb, var(--clarte) 28%, transparent);
  border-radius: var(--arrondi-2);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--f-titre);
  font-size: var(--t-petit);
  font-weight: 700;
  transition: background-color var(--duree-2) var(--sortie-quart);
}
.menu-mobile__region:hover { background: color-mix(in srgb, var(--clarte) 8%, transparent); }
.menu-mobile__region .data { color: var(--solaire); }

/* -----------------------------------------------------------------------------
   30. HÉRO SUR PETIT ÉCRAN
   La ligne de lieu et la liste des trois métiers cassaient en laissant un
   séparateur orphelin en fin de ligne. On resserre pour qu'elles tiennent.
   -------------------------------------------------------------------------- */

@media (max-width: 30rem) {
  .hero__lieu { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .hero__metiers { gap: var(--e-2) var(--e-3); font-size: 0.875rem; }
  .hero__metiers li { gap: var(--e-3); }
  .hero__titre { max-width: none; }
}

/* Vidéo d'accueil : le mouvement vient du film, sans zoom supplémentaire. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__image { position: absolute; inset: 0; animation: none; transform: none; }
.hero__video[hidden] { display: none; }
.hero__lecture {
  position: absolute; z-index: var(--z-eleve);
  inset-inline-end: var(--gouttiere); inset-block-start: calc(var(--hauteur-entete) + var(--e-4));
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--clarte-douce); border-radius: 50%;
  background: var(--charbon); color: var(--blanc); cursor: pointer;
}
.hero__lecture[hidden] { display: none; }
.hero__lecture svg { width: 18px; height: 18px; fill: currentColor; }
.hero__lecture:hover { background: var(--solaire); color: var(--charbon); }
.hero__lecture:active { transform: scale(0.95); }
.hero__lecture:focus-visible { outline: 3px solid var(--solaire); outline-offset: 4px; }
.hero__lecture [data-icone-jouer] { display: none; }
.hero__lecture[data-pause='true'] [data-icone-pause] { display: none; }
.hero__lecture[data-pause='true'] [data-icone-jouer] { display: block; }
@media (max-width: 47.999rem) {
  /* La langue reste visible dans la barre, en format compact. */
  .entete__actions > .selecteur-region { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 var(--e-3); }
  .entete__actions { gap: var(--e-2); }
}
/* Logo, accueil, langue et menu tiennent sur une ligne ; « Réserver » reste dans le menu. */
@media (max-width: 29.999rem) {
  .marque__logo { width: 140px; }
}
@media (max-width: 22.499rem) {
  .marque__logo { width: 128px; }
}
@media (max-width: 27.749rem) {
  .entete__actions > .bouton { display: none; }
}

/* Le parcours à la journée masque réellement les contrôles de nuitée. */
[data-champ-depart][hidden], [data-jalon][hidden], [data-tunnel-navigation][hidden] { display: none; }
.billet-selection { grid-template-columns: minmax(0, 1fr) auto auto; }

.choix__nom, .choix__detail { display: block; }

/* Garder les accès inclus lisibles avec le prix et la quantité sur mobile. */
@media (max-width: 600px) {
  .billet-selection { grid-template-columns: minmax(0, 1fr) auto; }
  .billet-selection > span:first-child { grid-column: 1 / -1; }
}

/* Retour à l’accueil toujours accessible, même lorsque le menu est replié. */
.nav__accueil { display: inline-flex; align-items: center; gap: .4rem; }
.accueil-mobile { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--bordure-forte); border-radius: 50%; }
.accueil-mobile:hover { background: var(--voile); }
.accueil-mobile:active, .nav__accueil:active { transform: translateY(1px); }
@media (min-width: 81rem) { .accueil-mobile { display: none; } }
@media (min-width: 75rem) and (max-width: 80.999rem) { .nav { display: none; } .bascule-menu { display: inline-grid; } }

/* Fondation Lamba : partenaire de conservation, dans les sections dédiées. */
.fondation-lamba {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--e-5);
  align-items: center;
  padding: var(--e-5);
  border-radius: var(--arrondi-3);
  color: #1D1D1B;
  background: #FEFEFE;
  border: 1px solid rgb(29 29 27 / 12%);
}
.fondation-lamba__logo { width: 100%; height: auto; object-fit: contain; }
.fondation-lamba .amorce { color: #1D1D1B; }
.fondation-lamba__lien { width: fit-content; font-weight: 700; }
.fondation-lamba__lien:hover { text-decoration-thickness: 2px; }
.fondation-lamba__lien:active { opacity: .75; }
.faune-grille { display: grid; gap: var(--e-7); align-items: center; }
.faune-surface { font-family: var(--f-titre); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.faune-portraits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.faune-portraits .espece { margin: 0; min-height: 0; }

.especes-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
.espece--fiche { margin: 0; min-height: 29rem; }
.espece__description { display: block; font-size: 1rem; line-height: 1.5; margin-block-start: var(--e-2); }
.espece__credit { display: block; font-size: .75rem; line-height: 1.5; margin-block-start: var(--e-3); }
.espece__credit a { text-decoration: underline; text-underline-offset: .2em; }
.espece__credit a:hover { text-decoration-thickness: 2px; }
.espece__credit a:active { opacity: .75; }
.espece--fiche .espece__voile { background: none; }
.credits-photos { padding-block: var(--e-4); border-block: 1px solid currentColor; }
.credits-photos summary { cursor: pointer; width: fit-content; padding-block: var(--e-2); }
.credits-photos summary:hover { text-decoration: underline; }
.credits-photos summary:active { opacity: .75; }
.credits-photos ul { display: grid; gap: var(--e-3); padding: var(--e-4) var(--e-5); font-size: .875rem; line-height: 1.7; }
.credits-photos li { scroll-margin-top: 12rem; }
.conservation-reperes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3) var(--e-6); padding-inline-start: var(--e-5); }
@media (max-width: 61.99rem) { .especes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) {
  .fondation-lamba { grid-template-columns: 1fr; padding: var(--e-5); }
  .fondation-lamba__logo { width: 7rem; }
  .faune-portraits { grid-template-columns: 1fr; gap: var(--e-5); }
  .faune-portraits .espece { min-height: 0; padding: 0; }
  .faune-portraits .espece__nom { font-size: 1.25rem; }
  .faune-portraits .espece__description { font-size: var(--t-petit); }
  .especes-grille, .conservation-reperes { grid-template-columns: 1fr; }
}

/* Photos lisibles en entier, légendes séparées du sujet. */
.espece--fiche { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; background: var(--abysse-haut); }
.espece--fiche .espece__media { position: relative; isolation: isolate; }
.espece--fiche .espece__image { position: relative; display: block; aspect-ratio: 4 / 3; height: auto; }
.espece--fiche .espece__voile { background: none; }
.espece--fiche .espece__voile::before { display: none; }
.espece--fiche figcaption { padding: var(--e-5); }

/* Corrections de composition communes aux cartes — téléphone et tablette. */
.activite__marqueur { max-width: calc(100% - 2 * var(--e-3)); white-space: normal; line-height: 1.4; }
.media-attente {
  display: grid; place-content: center; min-height: 13rem; height: 100%;
  padding: var(--e-7) var(--e-5); margin: 0;
  color: var(--blanc); background: var(--charbon);
  font-family: var(--f-titre); font-size: var(--t-petit); line-height: 1.6;
}
.histoire { display: flow-root; padding: clamp(var(--e-5), 3vw, var(--e-7)); }
.histoire .vedette__media { min-height: 0; aspect-ratio: auto; margin-block-end: var(--e-5); border-radius: var(--arrondi-2); overflow: hidden; }
.histoire .vedette__image { position: static; height: auto; object-fit: contain; }
.histoire .vedette__corps { display: block; padding: 0; }
.histoire .vedette__corps > * + * { margin-block-start: var(--e-4); }
.histoire .vedette__corps > p.doux,
[data-page='cite'] #histoire .prose { font-size: clamp(1.125rem, 1rem + .25vw, 1.1875rem); line-height: 1.7; }
[data-page='cite'] #histoire .prose { max-width: 72rem; }
@media (min-width: 62rem) {
  .histoire .vedette__media { float: left; width: 42%; margin-inline-end: var(--e-6); }
}
@media (max-width: 47.999rem) {
  .billet { padding: var(--e-4); gap: var(--e-4); }
  .activite__pied { flex-direction: column; align-items: flex-start; gap: var(--e-4); }
  .activite__corps { gap: var(--e-4); }
  .bouton--petit, .filtre { min-height: 2.75rem; }
  .compteur__bouton { width: 2.75rem; height: 2.75rem; }
  .choix { grid-template-columns: auto minmax(0, 1fr); }
  .choix__prix { grid-column: 2; justify-self: start; text-align: start; }
  .composeur__mention { text-align: start; }
}

/* Les liens éditoriaux ne doivent pas recolorer les actions principales. */
.prose .bouton--principal { color: var(--charbon); }

/* Phase front : photographies naturelles, galeries et accès. */
.hero__corps, .entete-page .enveloppe, .monde, .galerie__legende { text-shadow: 0 1px 3px rgb(0 0 0 / .65); }
.hero__chapo, .entete-page__chapo, .monde__texte { color: var(--blanc); }
.prose--large { max-width: 72rem; font-size: clamp(1.125rem, 1rem + .25vw, 1.1875rem); line-height: 1.7; }
.brochure-lamba { max-width: 65ch; }
.brochure-lamba .bouton { align-self: flex-start; white-space: normal; }
.galerie-chambre { position: relative; width: 100%; height: 100%; min-height: 220px; }
.galerie-chambre__piste { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; height: 100%; width: 100%; border-radius: inherit; }
.galerie-chambre__piste::-webkit-scrollbar { display: none; }
.galerie-chambre__piste:focus-visible { outline: 3px solid var(--solaire); outline-offset: -4px; }
.galerie-chambre__photo { flex: 0 0 100%; width: 100%; min-width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; }
.vedette__media > .galerie-chambre, .vedette__media > .chambre-placeholder, .bande__media > .galerie-chambre, .bande__media > .chambre-placeholder { position: absolute; inset: 0; }
.galerie-chambre__points { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; background: var(--blanc); border-radius: 28px; box-shadow: 0 2px 8px rgb(29 29 27 / .12); }
.galerie-chambre__points button { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.galerie-chambre__points span { width: 6px; height: 6px; border-radius: 50%; background: var(--charbon); opacity: .35; }
.galerie-chambre__points [aria-pressed='true'] span { opacity: 1; }
.galerie-chambre__points button:hover { background: var(--lac-brume); }
.galerie-chambre__points button:active { transform: scale(.9); }
.galerie-chambre__points button:focus-visible { outline: 2px solid var(--charbon); outline-offset: -4px; }
.chambre-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-3); background: var(--lac-brume); color: var(--charbon); width: 100%; height: 100%; min-height: 220px; padding: var(--e-5); text-align: center; }
.chambre-placeholder span { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-h4); }
.chambre-placeholder small { font-size: var(--t-petit); }
[data-page='accueil'] #groupes .titre { max-width: 28ch; }
@media (prefers-reduced-motion: reduce) { .galerie-chambre__piste { scroll-behavior: auto; } }
/* Des contrôles opaques lisibles sans assombrir le ciel des photographies. */
.entete--sur-visuel:not(.entete--pose) .nav__liste,
.entete--sur-visuel:not(.entete--pose) .entete__actions { background: var(--charbon); border-radius: var(--arrondi-plein); padding: var(--e-2); }
@media (max-width: 47.99rem) {
  .entete--sur-visuel:not(.entete--pose) .entete__actions { gap: var(--e-1); padding: 4px; }
}
@media (min-width: 48rem) {
  .bande { min-height: 260px; }
  .bande__media { min-height: 260px; }
}

/* -----------------------------------------------------------------------------
   Safari : bandeau de photos qui défile seul, de gauche à droite.
   La liste est doublée ; la piste glisse d'une demi-largeur puis reboucle.
   Survol ou focus : pause. Mouvement réduit : défilement manuel.
   -------------------------------------------------------------------------- */
.defile {
  overflow: hidden;
  padding-block: var(--e-2);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.defile__piste {
  display: flex;
  gap: var(--e-4);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: defile-droite 70s linear infinite;
}
.defile:hover .defile__piste,
.defile:focus-within .defile__piste { animation-play-state: paused; }
@keyframes defile-droite {
  from { transform: translateX(calc(-50% - var(--e-4) / 2)); }
  to   { transform: translateX(0); }
}
.defile__carte {
  position: relative;
  flex: none;
  width: clamp(15rem, 24vw, 20rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--arrondi-3);
  overflow: hidden;
  isolation: isolate;
  color: var(--clarte);
}
.defile__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.defile__carte::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--image-overlay); }
.defile__legende {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: grid; gap: var(--e-1);
  padding: var(--e-5);
}
.defile__nom { font-family: var(--f-titre); font-size: var(--t-h4); font-weight: 700; line-height: 1.15; }
.defile__texte { font-size: var(--t-petit); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .defile { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .defile__piste { animation: none; padding-inline: var(--gouttiere); }
  .defile__carte { scroll-snap-align: start; }
  .defile__carte[aria-hidden='true'] { display: none; }
}

/* Brochure : l'e-mail et le bouton sur une ligne quand la place le permet. */
.brochure-lamba__ligne { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: stretch; }
.brochure-lamba__ligne .champ__saisie { flex: 1 1 16rem; min-width: 0; }
.brochure-lamba__ligne .bouton { flex: none; }
@media (max-width: 29.999rem) { .brochure-lamba__ligne .bouton { flex: 1 1 100%; } }
.safari-brochure { padding-block-start: var(--e-7); }
/* L'encart Fondation Lamba reste clair, même posé dans une section sombre. */
.fondation-lamba {
  --surface:       #FEFEFE;
  --texte:         #1D1D1B;
  --texte-doux:    color-mix(in srgb, #1D1D1B 72%, transparent);
  --bordure-forte: color-mix(in srgb, #1D1D1B 34%, transparent);
  color-scheme: light;
}

/* Superficie mise en avant sur La Cité et le parc animalier. */
.faune-surface--mise-en-avant { font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.08; letter-spacing: -.03em; max-width: 16ch; text-wrap: balance; }

/* Tarifs de l’accueil : une seule liste par activité, sans nouvelle carte. */
.tarifs-activite { margin: 0; }
.tarifs-activite > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--e-2) var(--e-3); padding-block: var(--e-3); border-block-end: 1px solid var(--bordure); }
.tarifs-activite dt { flex: 1 1 9rem; }
.tarifs-activite dd { margin: 0; font-family: var(--f-data); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Pictogrammes au pochoir pour les consignes et informations pratiques. */
.stencils-source { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.stencil { display: block; flex: none; width: 3.5rem; height: 3.5rem; color: var(--orange-marque); fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: butt; stroke-linejoin: round; margin-block-end: var(--e-2); }
.monde-lac .stencil { color: var(--charbon); }
.activite__media--pictogramme { display: grid; place-items: center; background: var(--lac-brume); }
.activite__media--pictogramme .stencil { width: 6rem; height: 6rem; margin: 0; color: var(--charbon); }

/* Availability remains legible, including disabled choices. */
.choix[data-indisponible="true"] { cursor: not-allowed; background: var(--lac-brume); }
.choix .disponibilite { font-weight: 700; color: var(--encre); margin-block-start: var(--e-2); }
[data-paiement-reprendre]:not([href]) { display: none; }

[data-disponibilites-retour], [data-disponibilites-message], [data-paiement-configuration] {
  display: block; color: var(--encre); background: var(--lac-brume); border: 1px solid var(--bordure);
}
[data-recharger-disponibilites][hidden], [data-paiement-contact][hidden],
[data-paiement-reprendre][hidden], [data-paiement-recommencer][hidden], [data-modifier-dates][hidden] { display: none; }

[data-paiement-methodes][hidden] { display: none; }