/* =========================================================
   Maroc Experience — feuille de styles principale
   Couleurs et typographies reprises de ton projet Framer.
   Pour changer une couleur partout : modifie la variable ici.
   ========================================================= */

/* Polices hébergées sur le site (plus rapide, et aucun appel à Google).
   Fichiers WOFF2 limités aux caractères latins (français compris). */

/* Titres : Caviar Dreams Bold */
@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/caviar-dreams-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Texte : Lato (normal, gras, italique, italique fin) */
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400-italique.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-300-italique.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Couleurs (styles de couleur Framer) */
  --creme: rgb(240, 230, 197);
  --ivoire: rgb(250, 246, 236);
  --sable: rgb(234, 201, 97);
  --ocre: rgb(228, 150, 60);
  --terracotta: rgb(225, 125, 83);
  /* Terracotta assombrie pour le texte : lisible sur crème et ivoire
     (contraste 4,6:1 et 5,3:1). L'ocre et la terracotta d'origine sont
     trop claires pour du texte : garde-les pour les fonds et boutons. */
  --terracotta-texte: rgb(168, 74, 42);
  --brun: rgb(59, 26, 6);
  --brun-doux: rgb(122, 74, 42);
  --brun-eclairci: rgb(78, 38, 16);
  --bordure-claire: rgba(59, 26, 6, 0.15);
  --bordure-foncee: rgba(240, 230, 197, 0.2);

  /* Typographies */
  --titre: "Caviar Dreams", "Lato", sans-serif;
  --texte: "Lato", sans-serif;

  /* Mise en page */
  --largeur-max: 1280px;
  --espace-section: 112px;
}

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

html {
  scroll-behavior: smooth;
  /* Permet d'animer une hauteur jusqu'à « auto » (FAQ) */
  interpolate-size: allow-keywords;
}

/* Un lien vers une section (#programme…) s'arrête sous la barre du haut */
section[id] {
  scroll-margin-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--brun);
  background: var(--ivoire);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  /* Avec les attributs width/height du HTML, réserve la place
     de l'image avant son chargement (évite les sauts de page). */
  height: auto;
}

a {
  color: inherit;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- Styles de texte (repris de Framer) ---------- */
.h1 {
  font-size: 64px;
  line-height: 1.1;
}

.h2 {
  font-size: 44px;
  line-height: 1.2;
}

.h3 {
  font-size: 26px;
  line-height: 1.3;
  color: var(--terracotta-texte);
}

.sous-titre {
  font-family: var(--titre);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.legende {
  font-size: 14px;
  letter-spacing: -0.01em;
}

.centre {
  text-align: center;
}

.italique {
  font-style: italic;
}

/* ---------- Structure ---------- */
.section {
  padding: var(--espace-section) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.fond-ivoire {
  background: var(--ivoire);
}

.fond-creme {
  background: var(--creme);
}

.fond-sable {
  background: var(--sable);
}

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
}

.titre-section {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

/* Le petit motif décoratif au-dessus des sections */
.ornement {
  width: 49px;
  height: 34px;
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  background: var(--ocre);
  color: var(--brun);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.bouton:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.bouton-contour {
  background: transparent;
  border: 1px solid var(--brun);
  padding: 13px 27px;
}

.bouton-contour img {
  width: 20px;
  height: 20px;
}

/* ---------- Barre de navigation (ordinateur) ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(240, 230, 197, 0.9);
  padding: 20px 24px;
}

.navbar .conteneur {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.navbar .logo img {
  width: 105px;
  height: 39px;
  object-fit: contain;
}

.navbar ul {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar ul a {
  font-weight: 700;
  text-decoration: none;
}

.navbar ul a:hover {
  color: var(--brun-doux);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 112px 24px;
  /* Version 1280 px ; 2048 px sur les grands écrans (voir plus bas).
     Préchargée dans le <head> d'index.html : garder les deux synchronisés. */
  background: url("../images/accueil-fond-dunes-crepuscule-1280.webp") center /
    cover no-repeat;
}

@media (min-width: 1281px) {
  .hero {
    background-image: url("../images/accueil-fond-dunes-crepuscule-2048.webp");
  }
}

.hero .conteneur {
  position: relative;
  z-index: 1;
  /* Texte clair sur la photo, avec une légère ombre foncée
     pour rester lisible sur le ciel comme sur la dune. */
  color: var(--ivoire);
  text-shadow: 0 1px 8px rgba(59, 26, 6, 0.55);
}

.hero .bouton {
  text-shadow: none;
}

.hero-contenu {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero-titres {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-titres .sous-titre:last-child {
  margin-top: 8px;
}

.hero .note {
  font-weight: 300;
  font-style: italic;
}


/* ---------- Chiffres ---------- */
.chiffres {
  background: var(--sable);
  padding: 48px 24px;
}

.chiffres .conteneur {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

/* Icônes des sections Chiffres, Le séjour et Ce qui nous tient à cœur */
.icone {
  width: 40px;
  height: 40px;
  align-self: center;
  flex: none;
}

.chiffre p {
  margin: 0;
}

/* Étoile à côté de « 5/5 » */
.chiffre .note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chiffre .icone-note {
  width: 32px;
  height: 32px;
}

.chiffre {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
  text-align: center;
  font-family: var(--titre);
  font-size: 26px;
  line-height: 1.3;
}

.chiffre img {
  width: 92px;
  height: 86px;
  object-fit: contain;
}

.chiffre-pastille {
  background: var(--ivoire);
  border-radius: 79px;
}

/* ---------- Problème / solution ---------- */
.deux-colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  align-items: center;
}

.deux-colonnes > * {
  flex: 1 1 320px;
}

.colonne-texte {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.colonne-texte p {
  font-weight: 700;
}

.image-yoga {
  width: 100%;
  height: 400px;
  object-fit: cover;
  /* Garde la voyageuse dans le cadre, quelle que soit la hauteur */
  object-position: center 40%;
  border-radius: 8px;
}

/* ---------- Le séjour ---------- */
.sejour-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.sejour-colonne {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

.argument {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 322px;
  margin: 0 auto;
  text-align: center;
}

.sejour-image {
  flex: 0 1 33%;
  min-width: 280px;
  height: 539px;
  object-fit: cover;
  /* Salah à gauche reste toujours dans le cadre */
  object-position: left 40%;
  border-radius: 8px;
}

/* ---------- Équipe ---------- */
/* Deux moitiés : Salah puis Camille à gauche, valeurs à droite */
.equipe-valeurs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Les deux personnes l'une sous l'autre : photo à gauche, texte à droite */
.equipe-valeurs .equipe {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 48px;
}

.equipe-valeurs .carte-personne {
  flex: none;
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 32px;
  row-gap: 12px;
  align-items: start;
  text-align: left;
}

.equipe-valeurs .carte-personne img {
  grid-row: 1 / 3;
  width: 160px;
  height: 160px;
}

/* Les valeurs dans un encadré, une ligne par valeur : icône puis texte */
.equipe-valeurs .valeurs-bloc {
  max-width: none;
  margin: 0;
  padding: 40px;
  background: var(--ivoire);
  border-radius: 12px;
  align-items: stretch;
  gap: 28px;
}

.equipe-valeurs .valeurs-bloc .ornement {
  display: none;
}

.equipe-valeurs .valeurs-bloc > .h3 {
  text-align: left;
}

.equipe-valeurs .valeurs {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 24px;
}

.equipe-valeurs .valeur {
  flex: none;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 20px;
  row-gap: 4px;
  padding: 0;
  text-align: left;
}

.equipe-valeurs .valeur .icone {
  grid-row: 1 / 3;
  align-self: start;
}

/* Tablette : photos plus petites pour laisser de la place au texte */
@media (min-width: 810px) and (max-width: 1199px) {
  .equipe-valeurs .carte-personne {
    grid-template-columns: 120px 1fr;
    column-gap: 24px;
  }

  .equipe-valeurs .carte-personne img {
    width: 120px;
    height: 120px;
  }
}

.equipe-valeurs .valeur .h3 {
  font-size: 20px;
}

/* Mobile : tout s'empile, les personnes reprennent leur mise en page centrée */
@media (max-width: 809px) {
  .equipe-valeurs {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .equipe-valeurs .equipe {
    gap: 40px;
  }

  .equipe-valeurs .carte-personne {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .equipe-valeurs .carte-personne img {
    width: 160px;
    height: 160px;
  }

  .equipe-valeurs .valeurs-bloc {
    padding: 28px 24px;
  }
}

.equipe {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.carte-personne {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.carte-personne img {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
}

.carte-personne .role {
  margin-top: 4px;
  color: var(--terracotta-texte);
}

.valeurs-bloc {
  max-width: 951px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
}

.valeurs {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  width: 100%;
}

.valeur {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 20px;
  text-align: center;
}

/* ---------- Avis (trois bandeaux répartis dans la page) ---------- */
.temoignage {
  padding: 64px 24px;
}

.temoignage-contenu {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.temoignage blockquote {
  margin: 0;
  font-family: var(--titre);
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.temoignage-auteur {
  font-weight: 700;
}

@media (max-width: 809px) {
  .temoignage {
    padding: 48px 24px;
  }

  .temoignage blockquote {
    font-size: 20px;
  }
}

/* Bandeau des chiffres : source de la note */
.note-source {
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.4;
}

/* ---------- Le voyage concrètement ---------- */
.grille-inclus {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 24px;
}

.carte-inclus {
  background: var(--creme);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.carte-inclus img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
}

/* Photo dont le sujet est à gauche (enseigne du hammam) : jamais coupé */
.carte-inclus img.image-gauche {
  object-position: left center;
}

/* Photo dont le sujet est dans le haut (voyageuse au foulard) */
.carte-inclus img.image-haut {
  object-position: center 30%;
}

.carte-inclus h3 {
  margin-bottom: -8px;
}

/* Cartes « Le voyage concrètement » : listes à puces */
.carte-bloc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Encadré solo / duo dans la carte Hébergement */
.encadre-formule {
  margin-top: auto;
  padding: 16px 20px;
  background: var(--ivoire);
  border-left: 3px solid var(--terracotta);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
}

.encadre-formule strong {
  color: var(--terracotta-texte);
}

.liste-puces {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.non-inclus {
  margin-top: 0;
}

.conteneur.pile {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* ---------- Itinéraire ---------- */
/* Carte + jours : l'un sous l'autre sur téléphone et tablette,
   côte à côte sur ordinateur, pour voir la carte en faisant défiler les jours. */
.itineraire-interactif {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .itineraire-interactif {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .itineraire-interactif .carte-itineraire {
    max-width: none;
  }

  .itineraire-interactif .jour {
    flex-basis: 300px;
  }

  .itineraire-interactif .jour img {
    height: 200px;
  }
}

/* Tablette et téléphone : carte et photos plus petites, pour que la carte
   et le jour affiché tiennent ensemble à l'écran */
@media (max-width: 1023px) {
  .itineraire-interactif .carte-itineraire {
    max-width: 560px;
  }

  .itineraire-interactif .jour img {
    height: 170px;
  }
}

/* Téléphone : étiquette du jour plus discrète, pour ne pas masquer la carte */
@media (max-width: 600px) {
  .carte-itineraire .carte-legende {
    top: 3%;
    left: 2%;
    padding: 3px 10px;
    font-size: 12px;
  }
}
.itineraire-entete {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.carte-itineraire {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.carte-itineraire img {
  display: block;
  width: 100%;
  border-radius: 12px;
}

/* Étiquette du jour affiché, en haut à gauche de la carte */
.carte-legende {
  position: absolute;
  top: 4%;
  left: 3%;
  margin: 0;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--brun);
  color: var(--ivoire);
  font-size: 14px;
  font-weight: 700;
}

/* Points des étapes : anneau ocre quand le jour correspondant est actif */
.etape-carte {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  /* Simple affichage : la carte ne réagit ni au survol ni au clic */
  pointer-events: none;
}

.etape-carte::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 3px solid var(--ocre);
  border-radius: 50%;
  background: rgba(228, 150, 60, 0.3);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.etape-carte.actif::after {
  opacity: 1;
  transform: scale(1);
  animation: pulsation 1.8s ease-out infinite;
}

@keyframes pulsation {
  0% {
    box-shadow: 0 0 0 0 rgba(228, 150, 60, 0.6);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(228, 150, 60, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .etape-carte.actif::after {
    animation: none;
  }
}

.carrousel-jours-cadre {
  position: relative;
}

.carrousel-jours {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.carrousel-jours::-webkit-scrollbar {
  display: none;
}

.jour {
  flex: 0 0 360px;
  scroll-snap-align: start;
  background: var(--ivoire);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition: outline-color 0.3s ease;
}

/* Toute la carte du jour est cliquable : le lien du titre la recouvre */
.jour {
  position: relative;
}

.jour-lien {
  color: inherit;
  text-decoration: none;
}

.jour-lien::after {
  content: "";
  position: absolute;
  inset: 0;
}

.jour:hover .jour-lien {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.jour:has(.jour-lien:focus-visible) {
  outline-color: var(--brun);
}

.jour-lien:focus-visible {
  outline: none;
}

/* Carrousels utilisables au clavier (Tab puis flèches ← →) */
.carrousel-jours:focus-visible,
.grille-inclus:focus-visible {
  outline: 2px solid var(--brun);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Jour dont l'étape est allumée sur la carte */
.jour.actif {
  outline-color: var(--ocre);
}

.jour img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.jour-texte {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jour-etape {
  font-size: 14px;
  color: var(--terracotta-texte);
}

.fleches {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.fleche {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bordure-claire);
  background: var(--ivoire);
  color: var(--brun);
  font-size: 20px;
  cursor: pointer;
}

.fleche:hover {
  background: var(--sable);
}

.centrer {
  display: flex;
  justify-content: center;
}

/* ---------- Tarifs ---------- */
.formules {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.formule {
  flex: 1 1 300px;
  background: var(--creme);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.formule-prix {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.prix {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--terracotta-texte);
}

.liste-coche {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.liste-coche li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.liste-coche svg {
  flex: 0 0 24px;
}

.formule-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 23px 0;
}

.mention-acompte {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.faq details {
  border-bottom: 1px solid var(--bordure-claire);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary svg {
  flex: 0 0 20px;
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}

.faq details[open] summary svg {
  transform: rotate(0deg);
}

.faq details p {
  margin: 0;
  padding: 0 0 24px;
  max-width: 768px;
}

.faq summary:focus-visible {
  outline: 2px solid var(--brun);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Ouverture / fermeture en douceur (comme sur Framer).
   Navigateurs récents ; ailleurs la réponse s'affiche simplement. */
@supports selector(::details-content) {
  .faq details::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size 0.3s ease-out,
      opacity 0.3s ease-out,
      content-visibility 0.3s allow-discrete;
  }

  .faq details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq details::details-content {
    transition: none;
  }
}

/* ---------- Appel à l'action final ---------- */
.cta-final {
  background: url("../images/appel-final-fond-mer-de-dunes-1280.webp") center /
    cover no-repeat;
}

@media (min-width: 1281px) {
  .cta-final {
    background-image: url("../images/appel-final-fond-mer-de-dunes-2048.webp");
  }
}

.cta-final .titre-section {
  align-items: center;
  gap: 32px;
  /* Texte clair sur la photo, comme dans l'accueil */
  color: var(--ivoire);
  text-shadow: 0 1px 8px rgba(59, 26, 6, 0.55);
}

.cta-final .bouton {
  text-shadow: none;
}

/* ---------- Pied de page ---------- */
.footer {
  background: var(--ivoire);
  padding-block: 56px 24px;
}

.footer .pile {
  gap: 40px;
}

.footer-haut {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer-haut .logo img {
  width: 160px;
  height: 60px;
  object-fit: contain;
}

.footer-accroche {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-accroche p {
  font-size: 15px;
  letter-spacing: -0.01em;
}

.reseaux {
  display: flex;
  gap: 16px;
}

.reseaux a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bordure-claire);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reseaux img {
  width: 22px;
  height: 22px;
}

.footer-bas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Ordinateur : copyright à gauche, liens légaux à droite, sur une ligne */
@media (min-width: 810px) {
  .footer-bas {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--bordure-claire);
  }

  .footer-bas hr {
    display: none;
  }
}

.footer-bas hr {
  width: 100%;
  border: 0;
  height: 1px;
  background: var(--bordure-foncee);
  margin: 0;
}

.footer-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.footer-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.footer-liens a:hover {
  text-decoration: underline;
}

/* ---------- Rail de navigation (tablette et téléphone) ----------
   Points fixés sur le bord droit, dans la marge du texte.
   Le nom de la section s'affiche quand on en change, au survol et au clavier. */
.nav-sections {
  position: fixed;
  top: 50%;
  right: max(2px, env(safe-area-inset-right));
  z-index: 20;
  transform: translate(8px, -50%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.nav-sections.visible {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}

.nav-sections .rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nav-sections a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 36px;
  text-decoration: none;
}

/* Le point */
.nav-sections a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brun);
  box-shadow: 0 0 0 2px var(--ivoire);
  opacity: 0.45;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    opacity 0.25s ease;
}

.nav-sections a.actif::after {
  background: var(--ocre);
  opacity: 1;
  transform: scale(1.5);
}

/* L'étiquette, à gauche du point */
.rail-nom {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 4px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--brun);
  color: var(--ivoire);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(6px, -50%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.nav-sections.annonce a.actif .rail-nom,
.nav-sections a:hover .rail-nom,
.nav-sections a:focus-visible .rail-nom {
  opacity: 1;
  transform: translate(0, -50%);
}

.nav-sections a:focus-visible {
  outline: 2px solid var(--brun);
  outline-offset: -2px;
  border-radius: 12px;
}

/* ---------- Pages simples (légales, merci, itinéraire) ---------- */
.page-simple {
  max-width: 768px;
  margin: 0 auto;
  padding: 80px 24px 112px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-simple h1 {
  font-size: 44px;
  line-height: 1.2;
}

.page-simple h2 {
  font-size: 26px;
  line-height: 1.3;
  margin-top: 24px;
}

.retour {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
}

.a-completer {
  background: rgba(228, 150, 60, 0.18);
  padding: 16px;
  border-radius: 8px;
}

.jour-detail img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 12px;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablette et téléphone : on masque les liens de la barre du haut
   (le rail de points prend le relais). On masque tout le <nav>, sinon
   il garde un écart vide qui fait passer le bouton à la ligne. */
@media (max-width: 1199px) {
  .navbar nav {
    display: none;
  }
}

@media (min-width: 1200px) {
  .nav-sections {
    display: none;
  }
}

@media (max-width: 809px) {
  :root {
    --espace-section: 72px;
  }

  .section {
    gap: 48px;
  }

  .h1 {
    font-size: 46px;
  }

  .h2 {
    font-size: 34px;
  }

  .h3 {
    font-size: 22px;
  }

  .sous-titre {
    font-size: 19px;
  }

  .navbar .bouton {
    padding: 12px 20px;
    font-size: 15px;
  }

  .sejour-image {
    flex-basis: 100%;
    height: 360px;
  }

  .jour {
    flex-basis: 82%;
  }

  .faq summary {
    font-size: 17px;
    padding: 16px 0;
    gap: 16px;
  }

  .faq summary svg {
    width: 16px;
    height: 16px;
  }

  .faq details p {
    font-size: 15px;
    padding-bottom: 18px;
  }

  .page-simple h1 {
    font-size: 34px;
  }
}

/* ---------- Lien « Aller au contenu » (navigation au clavier) ----------
   Invisible tant qu'on n'appuie pas sur Tab. */
.lien-evitement {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--brun);
  color: var(--ivoire);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.lien-evitement:focus {
  transform: none;
}

/* =========================================================
   Mise en page compacte : moins de défilement
   (marges, photos et espacements réduits). Pour revenir aux
   espacements d'origine, supprime ce bloc jusqu'à la fin du fichier.
   ========================================================= */
:root {
  --espace-section: 72px;
}

.section {
  gap: 48px;
}

.conteneur.pile {
  gap: 48px;
}

.sejour-image {
  height: 440px;
}

.carte-personne img {
  width: 200px;
  height: 200px;
}

.valeurs-bloc {
  gap: 24px;
}

.valeur {
  gap: 16px;
  padding: 12px;
}

.carte-inclus {
  padding: 24px;
  gap: 16px;
}

.formule {
  padding: 28px;
  gap: 24px;
}

.faq summary {
  padding: 14px 0;
}

@media (max-width: 809px) {
  :root {
    --espace-section: 48px;
  }

  .section,
  .conteneur.pile {
    gap: 32px;
  }

  /* Chiffres : deux par ligne, la pastille en dessous */
  .chiffres {
    padding: 32px 16px;
  }

  .chiffres .conteneur {
    gap: 12px;
  }

  .chiffre {
    flex: 1 1 140px;
    gap: 8px;
    padding: 8px 0;
    font-size: 19px;
  }

  .chiffre .icone {
    width: 32px;
    height: 32px;
  }

  .chiffre-pastille {
    flex-basis: 100%;
    padding: 16px;
  }

  .sejour-grille,
  .sejour-colonne {
    gap: 32px;
  }

  .sejour-image {
    height: 240px;
  }

  .equipe {
    gap: 40px;
  }

  .carte-personne {
    gap: 16px;
  }

  .valeurs {
    gap: 8px;
  }

  .carte-personne img {
    width: 160px;
    height: 160px;
  }

  /* « Le voyage concrètement » : carrousel à faire glisser */
  .grille-inclus {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    margin-inline: -24px;
    padding: 0 24px 8px;
    scrollbar-width: none;
  }

  .grille-inclus::-webkit-scrollbar {
    display: none;
  }

  .carte-inclus {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .carte-inclus img {
    height: 150px;
  }

  .formule {
    padding: 24px;
  }
}

/* =========================================================
   Animations douces
   Toutes coupées si l'appareil demande moins de mouvement
   (réglage d'accessibilité « Réduire les animations »).
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Accueil : la photo grossit très lentement, comme une respiration.
        Copie du fond dans ::before, agrandie sans déborder. */
  .hero {
    overflow: hidden;
    isolation: isolate;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: inherit;
    animation: respiration 20s ease-out infinite alternate;
  }

  @keyframes respiration {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.12);
    }
  }

  /* 2. Blocs qui apparaissent en fondu au défilement (CSS seul).
        Navigateurs plus anciens : les blocs s'affichent normalement. */
  @supports (animation-timeline: view()) {
    .titre-section,
    .itineraire-entete,
    .deux-colonnes > *,
    .argument,
    .sejour-image,
    .carte-personne,
    .valeur,
    .temoignage-contenu,
    .grille-inclus,
    .itineraire-interactif,
    .formule,
    .faq {
      animation: apparition linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    @keyframes apparition {
      from {
        opacity: 0;
        transform: translateY(48px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }

  /* 3. Cartes des jours : la photo zoome légèrement au survol (souris) */
  @media (hover: hover) {
    .jour img {
      transition: transform 0.6s ease;
    }

    .jour:hover img {
      transform: scale(1.08);
    }
  }

  /* 4. Fondu entre l'accueil et les pages des jours (et autres pages) */
  @view-transition {
    navigation: auto;
  }
}

/* ---------- Bandeau cookies (créé par js/consentement.js) ---------- */
.bandeau-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--ivoire);
  color: var(--brun);
  border: 1px solid var(--bordure-claire);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(59, 26, 6, 0.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  font-size: 15px;
}

.bandeau-cookies[hidden] {
  display: none;
}

.bandeau-cookies p {
  flex: 1 1 320px;
}

.bandeau-cookies-boutons {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

/* Refuser et Accepter : même taille, même importance */
.bandeau-cookies .bouton {
  min-width: 120px;
  font: inherit;
  cursor: pointer;
}

.bandeau-cookies .bouton:not(.bouton-contour) {
  border: none;
}

@media (max-width: 600px) {
  .bandeau-cookies-boutons {
    width: 100%;
  }

  .bandeau-cookies .bouton {
    flex: 1;
  }
}

/* ---------- Barre fixe en bas de l'écran (toutes tailles) ---------- */
.barre-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(240, 230, 197, 0.95);
  border-top: 1px solid var(--bordure-claire);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.barre-cta.visible {
  transform: none;
}

/* Icône visio dans « Échanger avec Salah » */
.barre-cta .icone-visio {
  flex: none;
}

/* « J'ai une question » : bouton contour avec l'icône WhatsApp */
.barre-cta-whatsapp {
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--brun);
  border-radius: 100px;
  color: var(--brun);
  font-weight: 700;
  text-decoration: none;
}

.barre-cta-whatsapp svg {
  width: 22px;
  height: 22px;
  flex: none;
}

/* Un seul bouton à la fois : celui de la barre du haut laisse la place
   à la barre fixe (page d'accueil uniquement) */
body:has(.barre-cta) .navbar .bouton {
  display: none;
}

/* Le pied de page reste lisible au-dessus de la barre */
body:has(.barre-cta) .footer {
  padding-bottom: 104px;
}

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

.indice-glisser {
  display: none;
}

@media (max-width: 809px) {
  /* Téléphone : bouton principal en grand, WhatsApp réduit à son icône */
  .barre-cta .bouton {
    flex: 1;
  }

  .barre-cta-whatsapp {
    flex: 0 0 48px;
    width: 48px;
    padding: 0;
  }

  .barre-cta-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Indice sous les cartes à faire glisser */
  .indice-glisser {
    display: block;
    margin-top: -20px;
    text-align: right;
    font-size: 14px;
    color: var(--brun-doux);
  }
}

/* ---------- Page pilier « Voyage dans le désert marocain » ---------- */
.guide .guide-image {
  width: 100%;
  border-radius: 12px;
}

.guide h3 {
  margin-top: 8px;
}

.sommaire {
  padding: 20px 24px;
  background: var(--creme);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-appel {
  margin-top: 24px;
  padding: 28px;
  background: var(--sable);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.guide-appel p:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* ---------- Bloc A : premier échange (sous le programme et sous les prix) ---------- */
.bloc-echange {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* ---------- Bloc B : pas encore le bon moment (plus discret) ---------- */
.bloc-attente {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid var(--bordure-claire);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bloc-attente-titre {
  text-align: center;
  font-family: var(--titre);
  font-size: 22px;
}

.bloc-attente-colonnes {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
}

.bloc-attente-colonne {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.bloc-attente .h3 {
  font-size: 20px;
}

.form-attente {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-attente input[type="email"] {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--bordure-claire);
  border-radius: 100px;
  background: var(--ivoire);
  color: var(--brun);
  font: inherit;
}

.form-attente input[type="email"]:focus-visible {
  outline: 2px solid var(--brun);
  outline-offset: 2px;
}

.form-attente .bouton {
  border: none;
  font: inherit;
  cursor: pointer;
}

.form-attente-message {
  font-weight: 700;
  color: var(--terracotta-texte);
}

@media (max-width: 809px) {
  .bloc-attente-colonnes {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Texte lu par les lecteurs d'écran, invisible à l'écran */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Lien saisonnier « Offrir ce voyage » dans le menu (à retirer début janvier) */
.navbar .nav-offrir {
  color: var(--terracotta-texte);
}

/* Question de la FAQ visée par un lien : pas cachée sous la barre du haut */
.faq details[id] {
  scroll-margin-top: 104px;
}

/* Ligne « Vous souhaitez l'offrir ? » sous les tarifs (saisonnière) */
.mention-offrir {
  align-self: center;
  margin-top: -16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: var(--ivoire);
  border: 1px solid var(--terracotta);
  border-radius: 100px;
  color: var(--terracotta-texte);
  text-decoration: none;
  transition: background 0.2s ease;
}

.mention-offrir svg {
  flex: none;
}

.mention-offrir:hover {
  background: var(--creme);
}

.mention-offrir:hover strong {
  text-decoration: underline;
}

@media (max-width: 809px) {
  .mention-offrir {
    margin-top: -16px;
  }
}

/* Section « Votre téléphone n'arrête jamais de vibrer » : plus compacte */
.section-resserree {
  padding-top: 72px;
  padding-bottom: 72px;
  gap: 32px;
}

.section-resserree .deux-colonnes {
  gap: 48px;
}

@media (max-width: 1199px) {
  .image-yoga {
    height: 320px;
  }
}

@media (max-width: 809px) {
  .section-resserree {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .image-yoga {
    height: 240px;
  }
}

/* =========================================================
   Version 2 (octobre 2026) : plus de contraste par l'échelle,
   le rythme et la terracotta. Placée en fin de fichier : ces règles
   priment sur celles du dessus.
   ========================================================= */

/* ---------- 1. Échelle typographique plus marquée ---------- */
.hero .h1 {
  font-size: 88px;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.h2 {
  font-size: 52px;
  line-height: 1.1;
}

/* Surtitre : étiquette courte au-dessus des titres de section */
.surtitre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta-texte);
  margin-bottom: -12px;
}

/* Trait terracotta sous les titres de section */
.section .h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 20px auto 0;
  background: var(--terracotta);
}

/* Titres alignés à gauche : le trait suit */
.titre-gauche,
.colonne-texte,
.itineraire-entete,
#inclus .conteneur > .h2 {
  text-align: left;
}

.titre-gauche .h2::after,
.colonne-texte .h2::after,
.itineraire-entete .h2::after,
#inclus .h2::after {
  margin-left: 0;
}

.titre-gauche {
  margin: 0;
  align-items: flex-start;
}

/* ---------- 3. Avis : fond clair, encadrés de deux traits terracotta ---------- */
.temoignage {
  padding-top: 80px;
  padding-bottom: 80px;
}

.temoignage-contenu {
  position: relative;
}

.temoignage-contenu {
  padding: 40px 0;
  border-top: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
}

.temoignage blockquote {
  font-size: 28px;
}

/* ---------- 4. La terracotta comme fil conducteur ---------- */
/* Étapes de l'itinéraire en pastille */
.jour-etape {
  align-self: flex-start;
  padding: 4px 12px;
  border: 1px solid var(--terracotta);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
}

/* ---------- 5. Mouvement sobre ---------- */
@media (prefers-reduced-motion: no-preference) {
  .carte-inclus,
  .formule,
  .jour {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .carte-inclus:hover,
  .formule:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 -3px 0 var(--terracotta);
  }

  .carte-inclus img,
  .jour img {
    transition: transform 0.6s ease;
  }

  .carte-inclus:hover img,
  .jour:hover img {
    transform: scale(1.03);
  }

  .jour {
    overflow: hidden;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 809px) {
  .hero .h1 {
    font-size: 48px;
  }

  .h2 {
    font-size: 36px;
  }

  .temoignage {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .temoignage blockquote {
    font-size: 21px;
  }

  .temoignage-contenu {
    padding: 28px 0;
  }
}

/* ---------- « Le voyage concrètement » : cartes plus compactes ---------- */
#inclus .grille-inclus {
  gap: 20px;
}

#inclus .carte-inclus {
  padding: 20px;
  gap: 12px;
  font-size: 15px;
}

#inclus .carte-inclus img {
  height: 150px;
}

#inclus .carte-inclus .h3 {
  font-size: 22px;
}

#inclus .liste-puces {
  gap: 2px;
}

#inclus .encadre-formule {
  padding: 12px 16px;
  font-size: 14px;
}

#inclus .non-inclus {
  font-size: 15px;
}

/* ---------- Tarifs sur fond crème : cartes en ivoire ---------- */
#tarifs .formule {
  background: var(--ivoire);
}

/* ---------- Preuve Tripadvisor sous la carte de Salah ---------- */
.preuve-tripadvisor {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 16px;
  border: 1px solid var(--terracotta);
  border-radius: 100px;
  font-size: 14px;
  color: var(--brun);
  text-decoration: none;
}

.preuve-tripadvisor:hover span {
  text-decoration: underline;
}

.preuve-tripadvisor img {
  flex: none;
}

/* Section « Pas encore le bon moment » : plus de trait au-dessus */
#echange .bloc-attente {
  padding-top: 0;
  border-top: none;
}

/* L'étoile garde sa petite taille (les règles des portraits ne s'appliquent pas) */
.carte-personne .preuve-tripadvisor img {
  grid-row: auto;
  width: 20px;
  height: 20px;
  border-radius: 0;
}

/* =========================================================
   Tablette (810 à 1199 px)
   ========================================================= */
@media (min-width: 810px) and (max-width: 1199px) {
  .hero .h1 {
    font-size: 68px;
  }

  .h2 {
    font-size: 44px;
  }

  /* Chiffres : le texte reste dans la pastille */
  .chiffre {
    font-size: 21px;
  }

  .chiffre-pastille {
    padding: 20px 24px;
  }

  /* Le séjour : la photo en bandeau au-dessus, les deux colonnes côte à côte */
  .sejour-image {
    order: -1;
    flex-basis: 100%;
    height: 360px;
  }

  .sejour-colonne {
    flex-basis: calc(50% - 24px);
  }
}

/* =========================================================
   Téléphone (jusqu'à 809 px)
   ========================================================= */
@media (max-width: 809px) {
  /* Preuve Tripadvisor centrée sous la carte de Salah */
  .preuve-tripadvisor {
    justify-self: center;
    text-align: left;
  }

  /* Listes des tarifs plus compactes */
  .formule .liste-coche {
    gap: 10px;
    font-size: 15px;
  }

  .formule .liste-coche svg {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
}

/* Téléphone : photos de fond en 800 px (plus légères) */
@media (max-width: 809px) {
  .hero {
    background-image: url("../images/accueil-fond-dunes-crepuscule-800.webp");
  }

  .cta-final {
    background-image: url("../images/appel-final-fond-mer-de-dunes-800.webp");
  }
}

/* Téléphone : surtitre du hero plus discret, pour laisser respirer le titre */
@media (max-width: 809px) {
  .hero-titres .sous-titre:first-child {
    font-size: 14px;
    letter-spacing: 0.06em;
  }
}

/* « Pas encore le bon moment ? » : titre de section et deux cartes */
#echange .bloc-attente-colonnes {
  gap: 24px;
}

#echange .bloc-attente-colonne {
  padding: 32px;
  background: var(--creme);
  border-radius: 12px;
  gap: 14px;
}

#echange .bloc-attente .h3 {
  font-size: 24px;
}

@media (max-width: 809px) {
  #echange .bloc-attente-colonne {
    padding: 24px;
  }
}

/* ---------- « Qui vous accompagne ? » : trois cartes ---------- */
.equipe-cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Les deux portraits deviennent des cartes de la grille */
.equipe-cartes .equipe {
  display: contents;
}

.equipe-cartes .carte-personne {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 0 0 28px;
  background: var(--ivoire);
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
}

.equipe-cartes .carte-personne > img {
  width: 100%;
  height: 260px;
  border-radius: 0;
  object-fit: cover;
  object-position: center 30%;
}

.equipe-cartes .carte-personne > :not(img) {
  margin: 0 28px;
}

.equipe-cartes .carte-personne > div:first-of-type {
  margin-top: 8px;
}

.equipe-cartes .preuve-tripadvisor {
  justify-self: auto;
  align-self: flex-start;
  margin-top: auto;
}

/* Carte des valeurs */
.equipe-cartes .valeurs-bloc {
  max-width: none;
  margin: 0;
  padding: 32px 28px;
  background: var(--ivoire);
  border-radius: 12px;
  align-items: stretch;
  justify-content: center;
  gap: 28px;
}

.equipe-cartes .valeurs {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 24px;
}

.equipe-cartes .valeur {
  flex: none;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 16px;
  row-gap: 4px;
  padding: 0;
  text-align: left;
}

.equipe-cartes .valeur .icone {
  grid-row: 1 / 3;
  align-self: start;
  width: 36px;
  height: 36px;
}

.equipe-cartes .valeur .h3 {
  font-size: 19px;
}

/* Tablette : les deux portraits côte à côte, les valeurs en dessous */
@media (max-width: 1199px) {
  .equipe-cartes {
    grid-template-columns: 1fr 1fr;
  }

  .equipe-cartes .valeurs-bloc {
    grid-column: 1 / -1;
  }

  .equipe-cartes .valeurs {
    flex-direction: row;
  }

  .equipe-cartes .valeur {
    flex: 1;
  }
}

/* Téléphone : tout s'empile */
@media (max-width: 809px) {
  .equipe-cartes {
    grid-template-columns: 1fr;
  }

  .equipe-cartes .valeurs {
    flex-direction: column;
  }

  .equipe-cartes .carte-personne > img {
    height: 240px;
  }

  .equipe-cartes .carte-personne > :not(img) {
    margin: 0 24px;
  }
}

/* Carte des valeurs : se distingue des portraits (sable, contour terracotta), tout centré */
.equipe-cartes .valeurs-bloc {
  background: transparent;
  border: 2px solid var(--terracotta);
  align-items: center;
  text-align: center;
}

.equipe-cartes .valeurs-bloc > .h3 {
  text-align: center;
}

.equipe-cartes .valeur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.equipe-cartes .valeur .icone {
  align-self: center;
  margin-bottom: 4px;
}

/* Le séjour (ordinateur) : la photo prend exactement la hauteur des deux colonnes
   de texte, qui s'alignent sur son haut et son bas */
@media (min-width: 1200px) {
  .sejour-grille {
    align-items: stretch;
  }

  .sejour-image {
    height: auto;
    min-height: 0;
    align-self: stretch;
  }

  .sejour-colonne {
    justify-content: space-between;
    gap: 40px;
  }
}

/* Téléphone : pastille « Vous souhaitez l'offrir ? » compacte et centrée */
@media (max-width: 809px) {
  .mention-offrir {
    padding: 10px 18px;
    font-size: 14px;
    text-align: center;
  }

  .mention-offrir strong {
    white-space: nowrap;
  }
}

/* Téléphone : surtitre du hero raccourci (« Parenthèse n°1 · fin janvier 2027 ») */
@media (max-width: 809px) {
  .masque-phone {
    display: none;
  }
}