@charset "UTF-8";
/* ==========================================================================
   Deep Road Trip Africa — feuille de styles principale
   Portage du projet Claude Design « Deep Road Trip » (Accueil v3 & co).

   Règle de marque : DEUX couleurs, pas six. Vert forêt + ambre.
   Règle de contraste : l'ambre ne se pose JAMAIS sur un fond clair.
   Sur crème ou blanc, on utilise --ambre-texte (ambre foncé, ratio ≥ 4.5:1).
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  --vert: #124747;          /* primaire — texte sur clair, fonds de section */
  --vert-nuit: #0D3838;     /* fonds sombres profonds */
  --vert-clair: #1E5952;
  --vert-texte: #2A5555;    /* corps de texte sur fond clair */
  --vert-doux: #6B7F76;     /* texte secondaire */
  --ambre: #F9AE00;         /* accent — uniquement sur fond sombre */
  --ambre-vif: #FFC23A;     /* survol des boutons pleins */
  --ambre-texte: #B57F00;   /* ambre lisible sur fond clair (contraste AA) */
  --creme: #F5F3EF;
  --blanc: #FFFFFF;

  --titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --corps: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --page: 1240px;
  --gouttiere: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 110px);
  --header-h: 76px;
  --r: 10px;
}

/* --------------------------------------------------------------- 2. Socle */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* l'en-tête est fixe : on décale les ancres pour ne pas passer dessous */
  scroll-padding-top: calc(var(--header-h) + 10px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* initReveal() ne s'exécute pas dans ce mode, mais si la préférence change
     en cours de session les blocs déjà masqués doivent réapparaître. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.6;
  color: var(--vert);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  /* garde-fou : aucun débordement horizontal, quelle que soit la largeur */
  overflow-x: hidden;
}

img, svg, canvas { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--ambre);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ambre);
  color: var(--vert);
  font: 700 14px var(--corps);
  padding: 12px 20px;
  border-radius: 0 0 var(--r) 0;
}
.saut-contenu:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- 3. Typographie */
.kicker {
  margin: 0 0 10px;
  font: 700 13px var(--corps);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--vert);
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 3px;
  background: var(--ambre);
  flex: none;
}
.kicker--nu::before { display: none; }
.kicker--sombre { color: var(--ambre); }

.titre-section {
  margin: 0;
  font-family: var(--titre);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 54px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1.05;
  text-wrap: balance;
}
.titre-section--clair { color: var(--blanc); }

/* Mot accentué — procédé signature de la marque.
   Sur fond clair : pavé ambre + texte vert (jamais d'ambre sur crème).
   Sur fond sombre : texte ambre. */
.accent {
  background: var(--ambre);
  color: var(--vert);
  padding: 0 10px;
  /* évite que le pavé colle aux lignes voisines sur les titres qui bouclent */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.accent--texte { background: none; color: var(--ambre); padding: 0; }

.chapo {
  margin: 0;
  font: 400 16px/1.65 var(--corps);
  color: var(--vert-texte);
  text-wrap: pretty;
}
.chapo--clair { color: rgba(255, 255, 255, .75); }

/* ------------------------------------------------------------- 4. Boutons */
/* Tout bouton est un vrai lien ou un vrai <button>, réellement cliquable :
   c'est le défaut central du site actuel qu'on vient corriger. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 700 15px var(--corps);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  border-radius: var(--r);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--principal { background: var(--ambre); color: var(--vert); }
.btn--principal:hover { background: var(--ambre-vif); }

.btn--contour { background: transparent; color: var(--ambre); border-color: var(--ambre); }
.btn--contour:hover { background: var(--ambre); color: var(--vert); }

/* variante contour sur fond clair : le trait reste ambre, le texte se fonce */
.btn--contour-clair { background: transparent; color: var(--vert); border-color: var(--ambre); }
.btn--contour-clair:hover { background: var(--ambre); color: var(--vert); }

.btn--petit { font-size: 13px; padding: 11px 22px; }

/* Inverse : vert plein sur fond ambre (Workout Banco) */
.btn--sombre { background: var(--vert); color: var(--ambre); }
.btn--sombre:hover { background: var(--vert-nuit); }
.btn--contour-sombre { background: transparent; color: var(--vert); border-color: var(--vert); }
.btn--contour-sombre:hover { background: var(--vert); color: var(--ambre); }

.lien-souligne {
  font: 600 15px var(--corps);
  color: var(--vert);
  text-decoration: underline;
  text-decoration-color: var(--ambre);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.lien-souligne:hover { color: var(--ambre-texte); }
.lien-souligne--clair { color: rgba(255, 255, 255, .9); }
.lien-souligne--clair:hover { color: var(--ambre); }

/* ------------------------------------------------------- 5. Mise en page */
.section { padding: var(--section-y) var(--gouttiere); }
.section--creme { background: var(--creme); }
.section--blanc { background: var(--blanc); }
.section--vert { background: var(--vert); }
.section--nuit { background: var(--vert-nuit); }
.conteneur { max-width: var(--page); margin: 0 auto; }
.conteneur--etroit { max-width: 1100px; margin: 0 auto; }

/* --------------------------------------------------------- 6. En-tête */
.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
}
.entete__barre {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(13, 56, 56, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(249, 174, 0, .28);
}
.entete__logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.entete__logo img { height: 44px; width: auto; }

.entete__nav { display: flex; align-items: center; gap: 26px; margin: 0 auto; }
.entete__lien {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(255, 255, 255, .88);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  transition: color .15s ease, border-color .15s ease;
}
.entete__lien:hover { color: var(--ambre); }
.entete__lien[aria-current="page"] { color: var(--ambre); border-bottom-color: var(--ambre); }

.entete__actions { display: flex; align-items: center; gap: 14px; flex: none; position: relative; }

.langue { display: flex; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; overflow: hidden; }
.langue__actif { padding: 5px 12px; background: var(--ambre); color: var(--vert); font: 700 12px var(--corps); }
/* C'est un <a> vers la page équivalente dans l'autre langue : display:flex
   rétablit le centrage vertical qu'un inline ne donne pas dans la pilule. */
.langue__autre {
  padding: 5px 12px; background: transparent; color: rgba(255, 255, 255, .75);
  font: 600 12px var(--corps); border: none; cursor: pointer;
  display: flex; align-items: center; text-decoration: none;
}
.langue__autre:hover { color: var(--ambre); }

.burger { background: transparent; border: none; cursor: pointer; padding: 8px; display: none; }

/* Tiroir mobile */
.tiroir__voile {
  position: fixed; inset: 0;
  background: rgba(6, 26, 26, .55);
  backdrop-filter: blur(3px);
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
}
.tiroir {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--vert-nuit);
  border-left: 1px solid rgba(249, 174, 0, .3);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .4);
  display: flex;
  flex-direction: column;
  padding: 14px 26px calc(24px + env(safe-area-inset-bottom));
  overflow: auto;
  animation: drt-drawer .28s cubic-bezier(.22, .85, .35, 1) both;
}
@keyframes drt-drawer { from { transform: translateX(100%); } to { transform: translateX(0); } }

.tiroir__haut { display: flex; align-items: center; justify-content: space-between; height: 56px; flex: none; }
.tiroir__fermer {
  width: 42px; height: 42px;
  border: 1.5px solid rgba(249, 174, 0, .5);
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tiroir__titre {
  margin: 22px 0 6px;
  font: 700 11px var(--corps);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(249, 174, 0, .8);
}
.tiroir__nav { display: flex; flex-direction: column; }
.tiroir__lien {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: var(--titre); font-weight: 700; font-size: 27px;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  padding: 15px 2px;
  color: var(--blanc);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.tiroir__lien[aria-current="page"] { color: var(--ambre); }
.tiroir__bas { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.tiroir__contact { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 16px; }
.tiroir__contact a { font: 600 15px var(--corps); color: var(--blanc); text-decoration: none; }
.tiroir__contact a:hover { color: var(--ambre); }

.puce {
  padding: 6px 14px; border-radius: 999px;
  font: 600 13px var(--corps);
}
.puce--pleine { background: var(--ambre); color: var(--vert); font-weight: 700; }
.puce--vide { border: 1px solid rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .7); text-decoration: none; }
.puce--vide:hover { color: var(--ambre); border-color: var(--ambre); }

/* Bascule desktop / mobile : c'est la CSS qui décide, jamais le JS.
   La maquette utilisait <sc-if isDesktop> ; ici les deux blocs sont dans le
   HTML (donc indexables) et l'affichage est piloté par media query. */
@media (max-width: 939px) {
  .entete__nav, .entete__actions .langue { display: none; }
  .burger { display: flex; }
  .entete__actions { margin-left: auto; }

  /* Le CTA partage une barre de 390 px avec le logo et le burger : a 13px et
     22px de padding il en prenait le tiers. Ramene a ~86x35, soit 22% de la
     largeur. Plancher assume : on passe sous les 44 px de cible tactile
     recommandes, comme c'etait deja le cas a 42 px. Ne pas descendre plus. */
  .entete__actions .btn--petit { font-size: 11px; padding: 9px 14px; letter-spacing: .05em; }

  /* Le libelle du CTA du tiroir passait sur deux lignes, d'ou 72 px de haut. */
  .tiroir .btn { font-size: 13px; padding: 13px 20px; }
  .tiroir__lien { font-size: 23px; padding: 13px 2px; }
}
@media (min-width: 940px) {
  .tiroir, .tiroir__voile { display: none !important; }
}

/* ------------------------------------------------------------- 7. Hero */
.hero {
  position: relative;
  min-height: max(560px, 100svh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--vert-nuit);
}
.hero__fonds { position: absolute; inset: 0; }
.hero__fond {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__fond.est-actif { opacity: 1; }
.hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13, 56, 56, .72) 0%, rgba(13, 56, 56, .38) 45%, rgba(13, 56, 56, .55) 100%);
  pointer-events: none;
}
.hero__interieur {
  position: relative;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 130px var(--gouttiere) 90px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 52px;
}
.hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 600px; }
.hero__surtitre {
  margin: 0;
  font: 700 13px var(--corps);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ambre);
}
.hero__titre {
  margin: 0;
  font-family: var(--titre);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(52px, 8vw, 98px);
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--blanc);
  text-shadow: 0 3px 30px rgba(13, 56, 56, .45);
}
.hero__promesse {
  margin: 0;
  font: 400 18px/1.65 var(--corps);
  color: rgba(255, 255, 255, .92);
  max-width: 520px;
  text-wrap: pretty;
}
.hero__carte { flex: 1 1 340px; min-width: min(100%, 290px); max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero__carte drt-africa { display: block; width: 100%; height: clamp(320px, 34vw, 440px); filter: drop-shadow(0 18px 50px rgba(0, 0, 0, .4)); }
.hero__infobulle {
  margin: 0; min-height: 26px; text-align: center;
  font-family: var(--titre); font-weight: 700; font-size: 22px;
  text-transform: uppercase; color: var(--blanc);
  text-shadow: 0 2px 12px rgba(13, 56, 56, .6);
}
.hero__aide { margin: 0; text-align: center; font: 500 12.5px var(--corps); color: rgba(255, 255, 255, .6); }

/* Raccourci mobile vers la carte : reprend le pays affiché par le hero. */
.hero__pastille {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 18px;
  background: rgba(13, 56, 56, .55);
  border: 1.5px solid rgba(249, 174, 0, .55);
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(4px);
}
.hero__pastille::before {
  content: "";
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: var(--ambre);
}
.hero__pastille-nom {
  font-family: var(--titre); font-weight: 700; font-size: 18px;
  text-transform: uppercase; color: var(--blanc); white-space: nowrap;
}
.hero__pastille-prix { font: 700 13px var(--corps); color: var(--ambre); white-space: nowrap; }
.hero__pastille-aide { font: 600 12px var(--corps); color: rgba(255, 255, 255, .7); white-space: nowrap; }

.defilement {
  position: absolute; bottom: 22px; left: 50%;
  transform: translateX(-50%);
  animation: drt-bob 1.7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes drt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

/* La carte vit dans le hero au-dessus de 820 px, dans sa propre section en
   dessous. Une seule instance tourne à la fois (cf. garde dans globe.v2.js). */
@media (max-width: 819px) {
  .hero__carte { display: none; }
  .hero__pastille { display: flex; }
  /* Sans la carte à droite, le texte est seul dans le hero : on le centre
     plutôt que de le laisser calé à gauche sur une colonne étroite. */
  .hero__interieur { justify-content: center; }
  .hero__texte { align-items: center; text-align: center; margin-inline: auto; }
}
@media (min-width: 820px) { .carte-mobile { display: none; } }

.carte-mobile {
  background: var(--vert-nuit);
  padding: 44px 20px 48px;
  border-bottom: 1px solid rgba(249, 174, 0, .25);
  scroll-margin-top: var(--header-h);
}
.carte-mobile drt-africa { display: block; width: 100%; max-width: 400px; height: 320px; margin: 0 auto; }

/* Vignette du pays sélectionné : mêmes couches [data-fond] que le hero. */
.vignette-pays {
  position: relative;
  max-width: 440px;
  margin: 20px auto 0;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
.vignette-pays__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 56, 56, 0) 35%, rgba(13, 56, 56, .9) 100%);
  pointer-events: none;
}
.vignette-pays__pied {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.vignette-pays__label { margin: 0; font: 700 11px var(--corps); letter-spacing: .22em; text-transform: uppercase; color: var(--ambre); }
.vignette-pays__nom {
  margin: 2px 0 0;
  font-family: var(--titre); font-style: italic; font-weight: 800;
  font-size: 32px; line-height: .95; text-transform: uppercase; color: var(--blanc);
}
.vignette-pays__prix { margin: 4px 0 0; font-family: var(--titre); font-weight: 700; font-size: 19px; color: var(--ambre); }

/* ------------------------------------------------- 8. Qui nous sommes */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.duo__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.chiffres { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 54px); margin-top: 12px; }
.chiffre__valeur { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 44px; line-height: 1; color: var(--vert); }
.chiffre__label { margin: 4px 0 0; font: 500 13px var(--corps); letter-spacing: .06em; text-transform: uppercase; color: var(--vert-doux); }

.photo-legendee { position: relative; height: min(280px, 36vw); min-height: 220px; }
.photo-legendee img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.photo-legendee__legende {
  position: absolute; left: 14px; bottom: 14px; margin: 0;
  background: rgba(13, 56, 56, .85); color: var(--blanc);
  font-family: var(--titre); font-style: italic; font-weight: 600; font-size: 19px;
  padding: 7px 15px; border-radius: 8px; pointer-events: none;
}
.photo-legendee__legende b { color: var(--ambre); font-weight: 700; }

/* ------------------------------------------------------- 9. Séjours */
.sejours__entete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: clamp(36px, 5vw, 52px);
}
.sejours__pilotage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fleche {
  width: 46px; height: 46px;
  border: 2px solid var(--vert);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.fleche:hover { background: var(--ambre); border-color: var(--ambre); }
.fleche:disabled { opacity: .35; cursor: default; }
.fleche:disabled:hover { background: transparent; border-color: var(--vert); }

.carrousel {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  overflow-x: auto;
  padding: 6px var(--gouttiere) 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.carrousel::-webkit-scrollbar { display: none; }
.carrousel.est-tire { cursor: grabbing; }

.carte-sejour {
  flex: none;
  position: relative;
  width: clamp(260px, 23vw, 330px);
  height: clamp(400px, 36vw, 480px);
  scroll-snap-align: start;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  background: var(--vert-nuit);
  color: rgba(255, 255, 255, .85);
}
.carte-sejour img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-sejour::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 56, 56, 0) 42%, rgba(13, 56, 56, .88) 100%);
  pointer-events: none;
}
.carte-sejour:hover img { transform: scale(1.04); }
.carte-sejour img { transition: transform .5s ease; }

.etiquette {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--ambre); color: var(--vert);
  font: 700 11px var(--corps); letter-spacing: .12em;
  padding: 6px 10px; border-radius: 6px;
  pointer-events: none;
}
.carte-sejour__pied { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; pointer-events: none; }
.carte-sejour__format { margin: 0; font: 700 11.5px var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--ambre); }
.carte-sejour__nom {
  margin: 4px 0 0;
  font-family: var(--titre); font-style: italic; font-weight: 800;
  font-size: clamp(30px, 2.6vw, 38px); line-height: .95;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--blanc);
}
.carte-sejour__prix { margin: 8px 0 0; font-family: var(--titre); font-weight: 700; font-size: 21px; color: var(--ambre); }
.carte-sejour__prix span { font: 500 12.5px var(--corps); color: rgba(255, 255, 255, .75); }

/* -------------------------------------------------- 10. Workout Banco */
.banco { background: var(--ambre); }
.banco__interieur {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(56px, 7vw, 84px) var(--gouttiere);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
.banco__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.banco__surtitre { margin: 0; font: 700 13px var(--corps); letter-spacing: .22em; text-transform: uppercase; color: var(--vert); }
.banco__titre {
  margin: 0;
  font-family: var(--titre); font-style: italic; font-weight: 800;
  font-size: clamp(46px, 6.5vw, 78px); letter-spacing: -.02em;
  text-transform: uppercase; line-height: .95; color: var(--vert);
}
.banco__texte { margin: 0; font: 500 17px/1.6 var(--corps); color: #1D4B44; max-width: 520px; text-wrap: pretty; }
.jetons { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
.jeton { border: 2px solid var(--vert); color: var(--vert); font: 600 13px var(--corps); padding: 7px 14px; border-radius: 999px; }
.banco__galerie { display: flex; gap: 12px; margin-top: 8px; }
.banco__galerie figure { flex: 1; min-width: 0; margin: 0; height: 112px; }
.banco__galerie img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.banco__compteur { margin: 2px 0 0; font: 600 14px var(--corps); color: #1D4B44; }

.reservation {
  background: var(--vert);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 60px rgba(18, 71, 71, .28);
  max-width: 460px; justify-self: center; width: 100%;
}
.reservation__label { margin: 0; font: 700 13px var(--corps); letter-spacing: .22em; text-transform: uppercase; color: var(--ambre); }
.reservation__date { margin: 0; font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 42px; line-height: 1; color: var(--blanc); }
.reservation__lieu { margin: 0; font: 500 15px/1.5 var(--corps); color: rgba(255, 255, 255, .85); }
.jauge { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.jauge__barre { height: 100%; background: var(--ambre); border-radius: 999px; transition: width .3s ease; }
.reservation__places { margin: 0; font: 600 14px var(--corps); color: var(--ambre); }
.reservation__places span { color: rgba(255, 255, 255, .55); font-weight: 500; }
.reservation__tarif { margin: 0; font: 500 14.5px var(--corps); color: rgba(255, 255, 255, .85); }
.reservation__tarif b { font-family: var(--titre); font-weight: 700; font-size: 21px; color: var(--ambre); }

/* --------------------------------------------- 11. Comment ça marche */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(28px, 4vw, 48px); }
.etape { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.etape img { width: 92px; height: 92px; }
.etape__titre { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--vert); }
/* ambre foncé : l'ambre pur serait illisible sur crème */
.etape__numero { color: var(--ambre-texte); }
.etape__texte { margin: 0; font: 400 15px/1.6 var(--corps); color: var(--vert-texte); max-width: 280px; }

/* ------------------------------------------------ 12. Destinations monde */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: rgba(255, 255, 255, .85);
  font: 600 12.5px var(--corps);
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--ambre); color: var(--ambre); }
.chip[aria-selected="true"] { background: var(--ambre); border-color: var(--ambre); color: var(--vert); }

.panneau-pays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 44px);
  align-items: stretch;
  margin-top: 18px;
}
.panneau-pays[hidden] { display: none; }
.panneau-pays__visuel { position: relative; min-height: clamp(240px, 26vw, 320px); border-radius: 14px; overflow: hidden; background: var(--vert-nuit); }
.panneau-pays__visuel img { width: 100%; height: 100%; object-fit: cover; }
.panneau-pays__region {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  white-space: nowrap; background: var(--ambre); color: var(--vert);
  font: 700 11px var(--corps); letter-spacing: .12em; padding: 5px 10px; border-radius: 6px;
}
.panneau-pays__corps { min-width: 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.panneau-pays__nom {
  margin: 0; font-family: var(--titre); font-style: italic; font-weight: 800;
  font-size: clamp(30px, 3vw, 40px); line-height: .95; text-transform: uppercase;
  letter-spacing: -.01em; color: var(--blanc);
}
.panneau-pays__pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.panneau-pays__prix { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 24px; color: var(--ambre); }

/* --------------------------------------------------- 13. Témoignages */
/* Avatar et citation côte à côte tant que le texte tient sur 260px, empilés en
   dessous : le figure passe donc en flex-wrap plutôt qu'en grille à colonnes
   fixes, qui écrasait la citation à ~100px sur mobile. */
.temoignage-phare {
  display: flex; flex-wrap: wrap;
  gap: clamp(24px, 4vw, 44px); align-items: center;
  background: var(--blanc); border-radius: 18px;
  padding: clamp(24px, 4vw, 40px);
  /* la marge UA du <figure> décalait la carte de 40px par rapport aux
     témoignages courts, qui la remettent déjà à zéro */
  margin: 0 0 26px;
}
.temoignage-phare__corps { flex: 1 1 260px; min-width: 0; }
.avatar {
  width: 110px; height: 110px; flex: none; border-radius: 50%;
  background: var(--ambre);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titre); font-style: italic; font-weight: 800;
  font-size: 42px; color: var(--vert);
}
.temoignage-phare__citation { margin: 0; font: 500 19px/1.55 var(--corps); color: var(--vert); text-wrap: pretty; }
.temoignage__auteur { margin: 14px 0 0; font: 700 15px var(--corps); color: var(--vert); }
.temoignage__auteur span { font-weight: 400; color: var(--vert-doux); }

.temoignages { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.temoignage { background: var(--blanc); border-radius: 14px; padding: 22px 24px; margin: 0; }
.temoignage p { margin: 0; font: 400 15px/1.6 var(--corps); color: var(--vert-texte); }

/* --------------------------------------------------- 14. Engagement */
.piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(28px, 4vw, 48px); }
.pilier { display: flex; flex-direction: column; gap: 14px; }
.pilier img { width: 84px; height: 84px; }
.pilier__titre { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 23px; text-transform: uppercase; color: var(--blanc); }
.pilier__texte { margin: 0; font: 400 15px/1.6 var(--corps); color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------- 15. Newsletter */
.newsletter {
  background: var(--vert-nuit);
  padding: clamp(56px, 7vw, 84px) var(--gouttiere);
  border-top: 1px solid rgba(249, 174, 0, .2);
  border-bottom: 1px solid rgba(249, 174, 0, .25);
}
.newsletter__interieur { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; width: 100%; }
.champ {
  flex: 1 1 260px; max-width: 380px;
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 9px;
  padding: 15px 18px;
  font: 400 15px var(--corps);
  color: var(--blanc);
  outline: none;
}
.champ::placeholder { color: rgba(255, 255, 255, .55); }
.champ:focus { border-color: var(--ambre); }
.message-ok {
  margin-top: 10px;
  background: rgba(249, 174, 0, .14);
  border: 1.5px solid var(--ambre);
  color: var(--ambre);
  font: 600 15px var(--corps);
  padding: 14px 26px; border-radius: var(--r);
}
.message-erreur { margin: 0; font: 600 14px var(--corps); color: #FFD9A0; }
[hidden] { display: none !important; }

/* ------------------------------------- 15 bis. Réservation Banco */
/* Brief §6 : on réserve, on ne demande pas un devis. */
.reserver { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 52px); align-items: flex-start; }
.reserver__choix { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.reserver__recap { flex: 1 1 320px; max-width: 420px; position: sticky; top: calc(var(--header-h) + 16px); }

/* L'ecart legende / options doit rester nettement superieur au gap de 12px
   entre les options, sinon l'intitule se lit comme une carte de plus. La
   legende etant en capitales sans jambages, son ecart optique est plus petit
   que sa valeur : 22px pour un rendu equivalent a ~18px.
   Valeur desktop uniquement — en colonne unique il faut davantage, voir la
   media query max-width:939px.

   L'ecart est porte par le margin-bottom de la legende, JAMAIS par le gap du
   fieldset : WebKit ne traite pas un <legend> comme un enfant flex, il le rend
   comme boite de legende du fieldset. Un gap n'y a donc aucun effet sous
   Safari, alors qu'il fonctionne sous Blink — trois valeurs successives
   (14, 22, 30px) n'ont rien change sur iPhone. Une marge, elle, est honoree
   dans les deux modeles. Le fieldset n'ayant que deux enfants, le gap ne
   gouvernait que cet unique intervalle : il passe a 0. */
.bloc-choix { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.bloc-choix__titre {
  padding: 0; float: left; width: 100%;
  font: 700 13px var(--corps); letter-spacing: .2em;
  text-transform: uppercase; color: var(--ambre);
  margin-bottom: 22px;
}
.grille-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; width: 100%; }
.grille-options--large { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.option {
  text-align: left; padding: 14px 16px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .05);
  border: 2px solid rgba(255, 255, 255, .18);
  color: var(--blanc);
  font-family: var(--corps);
  transition: background-color .15s ease, border-color .15s ease;
}
.option:hover:not(:disabled) { border-color: rgba(249, 174, 0, .6); }
.option[aria-checked="true"] { background: rgba(249, 174, 0, .14); border-color: var(--ambre); }
.option:disabled { cursor: not-allowed; opacity: .5; }
.option__label { font-family: var(--titre); font-weight: 700; font-size: 21px; line-height: 1.05; display: block; }
.option__sub { font: 600 12.5px var(--corps); display: block; margin-top: 5px; color: rgba(255, 255, 255, .65); }
.option__sub--tendu { color: var(--ambre); }
.option__sub--complet { color: rgba(255, 255, 255, .45); }
.option__nom { font: 700 14px var(--corps); letter-spacing: .04em; text-transform: uppercase; display: block; }
.option__prix { font-family: var(--titre); font-weight: 700; font-size: 27px; color: var(--ambre); display: block; margin-top: 6px; }
.option__prix span { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.option__note { font: 500 12.5px var(--corps); color: rgba(255, 255, 255, .65); display: block; margin-top: 5px; }

/* Mobile : le formulaire passe en colonne unique, les cartes d'option prennent
   toute la largeur et l'ecart de 22px ne detache plus l'intitule de l'etape.
   La legende repasse aussi au-dessus du titre des cartes qu'elle chapeaute
   (.option__nom, 14px) : a 13px la hierarchie etait inversee.
   Ce bloc doit rester APRES les regles ci-dessus — a specificite egale, c'est
   l'ordre source qui tranche, et la media query de l'en-tete est trop haut
   dans le fichier pour les surcharger. */
@media (max-width: 939px) {
  .bloc-choix__titre { font-size: 15px; margin-bottom: 30px; }
}

.compteur { display: flex; align-items: center; gap: 16px; }
.compteur__btn {
  width: 46px; height: 46px; border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .35);
  background: transparent; color: var(--blanc);
  font: 700 22px var(--corps); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.compteur__btn:hover:not(:disabled) { border-color: var(--ambre); color: var(--ambre); }
.compteur__btn:disabled { opacity: .35; cursor: not-allowed; }
.compteur__valeur { font-family: var(--titre); font-weight: 700; font-size: 34px; min-width: 140px; text-align: center; color: var(--blanc); }

.recap {
  background: var(--ambre); border-radius: 18px; padding: 28px 30px;
  color: var(--vert); display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.recap__titre { margin: 0; font: 700 13px var(--corps); letter-spacing: .2em; text-transform: uppercase; }
.recap__ligne {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1.5px solid rgba(18, 71, 71, .2); padding-bottom: 9px;
}
.recap__ligne span { font: 500 14px var(--corps); }
.recap__ligne b { font: 700 14.5px var(--corps); text-align: right; }
.recap__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; }
.recap__total span { font: 700 14px var(--corps); letter-spacing: .06em; text-transform: uppercase; }
.recap__total b { font-family: var(--titre); font-weight: 700; font-size: 42px; line-height: 1; }
.recap__note { margin: 0; font: 500 13px/1.5 var(--corps); color: #1D4B44; }
.recap__mention { margin: 0; font: 500 12.5px/1.5 var(--corps); color: #1D4B44; text-align: center; }
.recap__bravo { margin: 0; font-family: var(--titre); font-style: italic; font-weight: 800; font-size: 36px; line-height: 1; text-transform: uppercase; }
.recap__resume { margin: 0; font: 600 15.5px/1.55 var(--corps); }

/* Frise horaire de la séance */
.frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.frise__etape { border-left: 3px solid var(--ambre); padding: 0 22px 8px 18px; margin-bottom: 18px; }
.frise__heure {
  background: var(--vert); color: var(--ambre);
  font-family: var(--titre); font-weight: 700; font-size: 19px;
  padding: 5px 12px; border-radius: 7px; display: inline-block;
}
.frise__titre { margin: 12px 0 4px; font-family: var(--titre); font-weight: 700; font-size: 21px; text-transform: uppercase; color: var(--vert); line-height: 1.05; }
.frise__texte { margin: 0; font: 400 14px/1.55 var(--corps); color: var(--vert-texte); }

.mosaique { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mosaique img { width: 100%; height: 240px; object-fit: cover; border-radius: 14px; }

/* --------------------------------------- 15 ter. Page contact */
.contact {
  padding-top: var(--header-h);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  min-height: calc(100vh - var(--header-h));
}
.contact__infos {
  background: var(--vert); color: var(--blanc);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  display: flex; flex-direction: column; gap: 26px;
}
/* Photo d'atterrissage au couchant derrière la carte du formulaire. Aucun texte ne
   repose sur ce fond — la carte est un aplat blanc opaque — le voile ne sert donc
   pas la lisibilité mais à détacher la carte d'un ciel presque aussi clair qu'elle,
   et à ramener la photo vers le vert de marque. Il remplace les dégradés décoratifs
   qui habillaient le crème : superposés, ils auraient sali l'image. */
.contact__form-zone {
  background:
    linear-gradient(200deg, rgba(18, 71, 71, .18) 0%, rgba(13, 56, 56, .30) 100%),
    var(--creme) url('img/contact-fond.webp') center / cover no-repeat;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px);
  display: flex; align-items: flex-start; justify-content: center;
}

.coordonnees { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.coordonnees dt {
  margin: 0 0 3px; font: 700 11.5px var(--corps);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ambre);
}
.coordonnees dd { margin: 0; font: 500 16px var(--corps); color: rgba(255, 255, 255, .9); }
.coordonnees a { font: 500 16px var(--corps); color: rgba(255, 255, 255, .9); text-decoration: none; }
.coordonnees a:hover { color: var(--ambre); }

.badge-reponse {
  display: inline-block;
  border: 2px solid var(--ambre); color: var(--ambre);
  font: 700 13px var(--corps); letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px;
}

.carte-form {
  background: var(--blanc); border-radius: 20px;
  box-shadow: 0 20px 50px rgba(18, 71, 71, .14);
  padding: clamp(24px, 3.5vw, 40px);
  width: 100%; max-width: 640px;
}

.progression { list-style: none; margin: 0 0 24px; padding: 0; display: flex; gap: 8px; }
.progression li { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.progression__barre { display: block; height: 6px; border-radius: 999px; background: rgba(18, 71, 71, .12); transition: background-color .2s ease; }
.progression__label { font: 600 12px var(--corps); letter-spacing: .06em; text-transform: uppercase; color: #9AA8A0; }
.progression li.est-faite .progression__barre { background: var(--ambre); }
.progression li.est-active .progression__label { color: var(--vert); }

/* Meme piege que .bloc-choix : la legende n'est pas un enfant flex sous WebKit,
   donc un gap ne l'espace pas du premier champ. Ici le gap sert aussi entre les
   champs, on ne peut pas le mettre a 0 — le fieldset passe donc en block et
   l'intervalle est repris par les marges, identiques dans les deux moteurs. */
.etape-form { border: 0; margin: 0; padding: 0; display: block; }
.etape-form > * + * { margin-top: 16px; }
/* Les marges du <legend> ne fusionnent pas avec celles du frere suivant (la
   boite de contenu du fieldset etablit son propre contexte) : sans ce retour a
   zero, l'ecart vaudrait 20 + 16. C'est le margin-bottom de la legende qui
   fait foi. */
.etape-form__titre + * { margin-top: 0; }
.etape-form[hidden] { display: none; }
/* Pas de float ici : c'etait un contournement du display:flex du fieldset. En
   block, il sort la legende du flux sans pousser le contenu — le premier champ
   remontait alors sous elle, dans les deux moteurs. */
.etape-form__titre {
  padding: 0; width: 100%;
  font-family: var(--titre); font-weight: 700; font-size: 30px;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1; color: var(--vert);
  margin-bottom: 20px;
}
.champ-label {
  display: flex; flex-direction: column; gap: 6px;
  font: 600 13px var(--corps); letter-spacing: .04em; color: var(--vert);
}
.champ-form {
  border: 1.5px solid rgba(18, 71, 71, .25); border-radius: 9px;
  padding: 13px 14px; font: 400 15px var(--corps);
  color: var(--vert); background: #FDFCFA; outline: none;
  width: 100%;
}
.champ-form:focus { border-color: var(--ambre); }
select.champ-form { cursor: pointer; }
textarea.champ-form { resize: vertical; }

.recap-demande { background: var(--creme); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; }
.recap-demande div { display: flex; justify-content: space-between; gap: 16px; font: 400 14.5px var(--corps); color: var(--vert-texte); }
.recap-demande b { font-weight: 700; color: var(--vert); text-align: right; }

.consentement { display: flex; gap: 10px; align-items: flex-start; font: 400 13.5px/1.5 var(--corps); color: var(--vert-texte); cursor: pointer; }
.consentement input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--ambre); cursor: pointer; flex: none; }

.message-erreur-form { margin: 16px 0 0; font: 600 13.5px var(--corps); color: #B0433A; }
.etape-form__actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.etape-form__actions [data-suivant], .etape-form__actions [data-envoyer] { margin-left: auto; }

.confirmation-demande { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 10px; }
.confirmation-demande__titre {
  margin: 0; font-family: var(--titre); font-style: italic; font-weight: 800;
  font-size: 38px; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; color: var(--vert);
}
.confirmation-demande__texte { margin: 0; font: 400 15.5px/1.6 var(--corps); color: var(--vert-texte); max-width: 380px; }

/* -------------------------------- 15 quater. Bloc texte + globe
   Partagé par l'en-tête de destinations.html et la section #monde de
   l'accueil : une colonne de texte, une colonne portant le globe. */
.globe-duo { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 56px); }
.globe-duo__texte { flex: 1 1 460px; min-width: min(100%, 320px); display: flex; flex-direction: column; gap: 16px; }
.globe-duo__media {
  flex: 1 1 300px; min-width: min(100%, 300px); max-width: 440px;
  margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* Sur l'accueil le globe accompagne 11 chips : colonne texte plus large. */
#monde .globe-duo__texte { flex: 1 1 520px; }
.globe-cadre { width: 100%; height: clamp(300px, 28vw, 380px); filter: drop-shadow(0 18px 50px rgba(0, 0, 0, .35)); }
.globe-cadre drt-globe { display: block; width: 100%; height: 100%; }
.globe-legende { margin: 0; text-align: center; font-family: var(--titre); font-weight: 700; font-size: 21px; text-transform: uppercase; color: var(--blanc); }

/* ------------------------------ 15 quinquies. Page destinations */
.entete-destinations {
  background: var(--vert); color: var(--blanc);
  padding: calc(var(--header-h) + clamp(40px, 6vw, 64px)) var(--gouttiere) clamp(36px, 5vw, 52px);
}
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.filtre {
  font: 700 13.5px var(--corps); letter-spacing: .07em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  background: transparent; color: rgba(255, 255, 255, .85);
  border: 2px solid rgba(255, 255, 255, .35);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filtre:hover { border-color: var(--ambre); color: var(--ambre); }
.filtre[aria-selected="true"] { background: var(--ambre); border-color: var(--ambre); color: var(--vert); }

.grille-destinations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); gap: clamp(24px, 3vw, 36px); }
.fiche { background: var(--vert); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.fiche[hidden] { display: none; }
.fiche__visuel { position: relative; height: clamp(230px, 24vw, 280px); background: var(--vert-nuit); }
.fiche__visuel img { width: 100%; height: 100%; object-fit: cover; }
.fiche__corps { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.fiche__sur { margin: 0; font: 700 11.5px var(--corps); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.fiche__nom {
  margin: 0; font-family: var(--titre); font-style: italic; font-weight: 800;
  font-size: 34px; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--blanc); line-height: .95;
}
.fiche__accroche { margin: 0; font: 400 15px/1.55 var(--corps); color: rgba(255, 255, 255, .78); text-wrap: pretty; }
.fiche__pied {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.fiche__prix { font-family: var(--titre); font-weight: 700; font-size: 27px; color: var(--ambre); white-space: nowrap; }
.fiche__lien {
  font: 700 13px var(--corps); letter-spacing: .08em; text-transform: uppercase;
  color: var(--blanc); text-decoration: underline;
  text-decoration-color: var(--ambre); text-decoration-thickness: 2px;
  text-underline-offset: 5px; white-space: nowrap;
}
.fiche__lien:hover { color: var(--ambre); }

.separateur-intl { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.separateur-intl__titre { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 26px; letter-spacing: .01em; text-transform: uppercase; color: var(--vert); }
.separateur-intl__filet { flex: 1; height: 2px; background: rgba(18, 71, 71, .14); }
.separateur-intl__mention { font: 500 13px var(--corps); color: var(--vert-doux); }

.grille-intl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.carte-intl {
  background: var(--blanc); border: 1.5px solid rgba(18, 71, 71, .18);
  border-radius: 16px; padding: 24px 26px;
  display: flex; flex-direction: column; gap: 7px; text-decoration: none;
  transition: border-color .15s ease;
}
.carte-intl:hover { border-color: var(--ambre); }
.carte-intl__nom { font-family: var(--titre); font-weight: 700; font-size: 23px; text-transform: uppercase; color: var(--vert); line-height: 1; }
.carte-intl__prix { font: 600 14px var(--corps); color: var(--vert); }
.carte-intl__cta { font: 600 12.5px var(--corps); letter-spacing: .06em; text-transform: uppercase; color: var(--vert-doux); }
[data-bloc-intl][hidden] { display: none; }

/* ------------------------------ 15 quinquies. Fiche destination */
.fiche-hero { position: relative; height: min(430px, 58vh); min-height: 340px; overflow: hidden; display: flex; align-items: flex-end; }
.fiche-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fiche-hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 62, 60, .35) 0%, rgba(16, 62, 60, .12) 45%, rgba(18, 71, 71, .72) 100%);
}
.fiche-hero__barre {
  position: relative; width: 100%; max-width: var(--page); margin: 0 auto;
  padding: 100px var(--gouttiere) 28px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.fil-ariane { font: 600 13px var(--corps); letter-spacing: .06em; color: rgba(255, 255, 255, .85); }
.fil-ariane a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.fil-ariane a:hover { color: var(--ambre); }
.fil-ariane span { margin: 0 8px; color: var(--ambre); }
.fil-ariane [aria-current] { color: var(--blanc); margin: 0; }

.carte-situation { position: relative; width: 96px; flex: none; }
.carte-situation img { display: block; width: 100%; filter: drop-shadow(0 6px 16px rgba(13, 56, 56, .4)); }
/* Position de Man sur la silhouette du pays (coordonnées de la maquette). */
.carte-situation__point {
  position: absolute; left: 17.4%; top: 50.5%; transform: translate(-50%, -50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--vert); border: 2.5px solid var(--creme);
}

.jeton--clair { border-width: 1.5px; border-color: rgba(18, 71, 71, .3); }

.fiche-detail { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 48px); align-items: flex-start; }
.fiche-detail__corps { flex: 1 1 580px; min-width: 0; display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); }

.galerie-fiche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.galerie-fiche img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; aspect-ratio: 4 / 3; }
.galerie-fiche__grande { grid-column: 1 / -1; aspect-ratio: auto !important; height: min(320px, 38vw); min-height: 200px; }

.programme { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.programme__jour { display: flex; gap: 20px; }
.programme__marque { display: flex; flex-direction: column; align-items: center; flex: none; }
.programme__puce {
  background: var(--ambre); color: var(--vert);
  font: 700 12px var(--corps); letter-spacing: .1em;
  padding: 7px 11px; border-radius: 7px; white-space: nowrap;
}
.programme__filet { flex: 1; width: 3px; background: var(--ambre); margin-top: 8px; }
.programme__contenu { padding-bottom: 30px; }
.programme__jour:last-child .programme__contenu { padding-bottom: 0; }
.programme__titre { margin: 0 0 6px; font-family: var(--titre); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--vert); line-height: 1.1; }
.programme__texte { margin: 0; font: 400 15.5px/1.65 var(--corps); color: var(--vert-texte); }

.inclus-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.inclus, .exclus { border-radius: 16px; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.inclus { background: var(--vert); }
.exclus { background: var(--blanc); border: 1.5px solid rgba(18, 71, 71, .18); }
.inclus__titre { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--ambre); }
.exclus__titre { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--vert); }
.inclus ul, .exclus ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.inclus li, .exclus li { position: relative; padding-left: 28px; font: 400 15px/1.5 var(--corps); }
.inclus li { color: rgba(255, 255, 255, .9); }
.exclus li { color: var(--vert-texte); }
/* Coche et croix en CSS : évite de répéter 8 fois le même SVG inline. */
.inclus li::before {
  content: ""; position: absolute; left: 2px; top: 4px;
  width: 14px; height: 8px;
  border-left: 2.6px solid var(--ambre); border-bottom: 2.6px solid var(--ambre);
  transform: rotate(-45deg);
}
.exclus li::before {
  content: "✕"; position: absolute; left: 2px; top: 0;
  color: #B0433A; font-weight: 700; font-size: 15px;
}

.encart-prix {
  flex: 1 1 300px; max-width: 390px;
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--vert); border-radius: 18px; padding: 28px 30px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 22px 54px rgba(18, 71, 71, .22);
}
.encart-prix__label { margin: 0; font: 700 13px var(--corps); letter-spacing: .22em; text-transform: uppercase; color: var(--ambre); }
.encart-prix__montant { font-family: var(--titre); font-weight: 700; font-size: 42px; line-height: 1; color: var(--ambre); }

.suggestions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.suggestion { background: var(--vert); border-radius: 14px; overflow: hidden; text-decoration: none; display: block; }
.suggestion img { display: block; width: 100%; height: 140px; object-fit: cover; }
.suggestion__pied { padding: 16px 18px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.suggestion__nom { font-family: var(--titre); font-weight: 700; font-size: 23px; text-transform: uppercase; color: var(--blanc); }
.suggestion__prix { font-family: var(--titre); font-weight: 700; font-size: 18px; color: var(--ambre); white-space: nowrap; }

/* Barre de réservation collante — sous 900 px seulement */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--vert); border-top: 2px solid var(--ambre);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px clamp(16px, 4vw, 24px) calc(12px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .barre-mobile { display: none; } }
@media (max-width: 899px) {
  /* réserve la place de la barre pour ne pas masquer le pied de page */
  .pied { padding-bottom: 80px; }
  .encart-prix { position: static; max-width: none; }
}

/* ---------------------------------------------------- 16. Partenaires */
/* Aplat ambre : la bande tombe entre deux sections sombres et la section crème,
   elle tranche donc sans avoir besoin de filet — un trait vert à 8 % sur du jaune
   lirait comme une salissure. Même traitement de fond que la section Banco. */
.bandeau-partenaires {
  background: var(--ambre);
  padding: clamp(24px, 3vw, 34px) var(--gouttiere);
}
.bandeau-partenaires__interieur {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px; align-items: center;
}
.bandeau-partenaires__titre {
  margin: 0;
  font: 700 12.5px var(--corps);
  letter-spacing: .26em;
  text-transform: uppercase;
  /* --vert-doux tomberait à 2,25:1 sur l'ambre : on remonte sur le vert de marque, 5,49:1. */
  color: var(--vert);
  text-align: center;
}
.partenaires {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 40px);
  justify-content: center; align-items: center; width: 100%;
}
/* Hauteur de ligne commune, largeur laissée au ratio de chaque marque. */
.partenaire {
  height: 56px;
  display: flex; align-items: center; justify-content: center;
}
/* Les logos sont pilotés par la hauteur (--h, posée en HTML marque par marque) et
   non par une boîte fixe : à largeur égale, un wordmark 7:1 rend deux fois plus
   léger qu'un emblème carré. Désaturés au repos pour que la bande lise comme un
   ensemble, couleur rendue au survol.
   Le gris n'est pas éclairci ici comme il l'était sur fond blanc : sur l'ambre,
   baisser l'opacité rapprocherait les logos de la teinte du fond au lieu de les
   apaiser. La nuance vient du seul passage en niveaux de gris. */
.partenaires img {
  height: var(--h, 32px);
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter .3s ease;
}
.partenaire:hover img,
.partenaire:focus-within img { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .partenaires img { transition: none; }
}

/* --------------------------------------------------- 17. Pied de page */
.pied { background: var(--vert-nuit); color: var(--blanc); }
.pied__grille {
  max-width: 1200px; margin: 0 auto;
  padding: 56px var(--gouttiere) 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.pied__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pied__logo { width: 158px; }
.pied__signature {
  margin: 0; font-family: var(--titre); font-style: italic; font-weight: 700;
  font-size: 22px; letter-spacing: .02em; color: var(--ambre); text-transform: uppercase;
}
.pied__titre {
  margin: 0 0 6px; font-family: var(--titre); font-weight: 600; font-size: 16px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ambre);
}
.pied__texte { margin: 0; font: 400 14px/1.6 var(--corps); color: rgba(255, 255, 255, .65); }
.pied__adresse { margin: 0; font: 400 15px/1.6 var(--corps); color: rgba(255, 255, 255, .85); }
.pied a { font: 500 15px var(--corps); color: rgba(255, 255, 255, .85); text-decoration: none; }
.pied a:hover { color: var(--ambre); }
.paiements { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.paiement { border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; padding: 5px 10px; font: 600 11.5px var(--corps); color: rgba(255, 255, 255, .7); }
.pied__bas {
  max-width: 1200px; margin: 0 auto;
  padding: 18px var(--gouttiere) 30px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
}
.pied__bas p { margin: 0; font: 400 13px var(--corps); color: rgba(255, 255, 255, .55); }
/* Attribution Creative Commons des photos Wikimedia — exigée par la licence. */
.pied__credits { flex: 1 1 100%; font-size: 12px !important; color: rgba(255, 255, 255, .4) !important; }
.pied__credits a { font: inherit; color: rgba(255, 255, 255, .55); text-decoration: underline; }