/* ==========================================================================
   tanah — pages.css
   Mises en page propres à chaque page (étapes 3 à 5).
   ========================================================================== */

/* ==========================================================================
   Pages intérieures : éléments communs (mobile d'abord)
   ========================================================================== */
.page-entete { padding-block: var(--esp-7) var(--esp-6); }
.page-entete h1 { max-width: 18ch; }
.page-entete p { max-width: var(--largeur-texte); }
.page-entete__chiffres { margin-top: var(--esp-6); }

/* Ancres internes : liens de section en capitales, passent à la ligne */
.ancres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4) var(--esp-5);
  margin-top: var(--esp-6);
}

/* Grande photo d'ouverture, pleine largeur */
.page-visuel { display: block; aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .page-visuel { aspect-ratio: 21 / 9; } }
.page-visuel .photo { height: 100%; aspect-ratio: auto; }

/* Appel final des pages intérieures */
.page-cta h2 { max-width: 16ch; }
.page-final { min-height: 60svh; }
.page-final .titre-2 { max-width: 18ch; margin-bottom: var(--esp-5); }

/* ---------- Bali : chapitres ROOT / RISE ---------- */
.chapitre[data-univers] { border-top: 0; background: none; }
.chapitre__bandeau { padding-block: var(--esp-7) var(--esp-6); }
.chapitre[data-univers="root"] .chapitre__bandeau {
  background: var(--olive-fonce);
  color: var(--sable-clair);                 /* 4,7:1 */
  --accent-texte: var(--sable-clair);
  --focus: var(--sable-clair);
}
.chapitre[data-univers="rise"] .chapitre__bandeau {
  background: var(--ocean);
  color: var(--encre);                       /* 4,9:1 */
  --accent-texte: var(--encre);
  --focus: var(--encre);
}
.chapitre__titre {
  margin-bottom: var(--esp-3);
  font-size: var(--texte-3xl);
  color: inherit;
}
.chapitre__intro { max-width: 32rem; margin: 0; font-size: var(--texte-lg); line-height: 1.5; }
.chapitre__corps { padding-block: var(--esp-6) var(--esp-section); background: var(--fond); }
.chapitre[data-univers="root"] .chapitre__corps { --fond: var(--root-pale); }
.chapitre[data-univers="rise"] .chapitre__corps { --fond: var(--rise-pale); }
.chapitre__corps .grille { align-items: start; }
.chapitre__photo .aplat, .chapitre__photo .photo { aspect-ratio: 3 / 2; }

.transition__contenu { text-align: center; }
.transition__contenu p { margin: 0; }

/* Déroulé du programme : texte seul, filets */
.deroule { margin: var(--esp-6) 0 var(--esp-4); padding: 0; list-style: none; border-bottom: 1px solid var(--trait); }
.deroule__etape {
  display: grid;
  gap: var(--esp-2) var(--gouttiere-grille);
  padding: var(--esp-4) 0;
  border-top: 1px solid var(--trait);
}
@media (min-width: 48rem) { .deroule__etape { grid-template-columns: 12rem 1fr; } }
.deroule__repere {
  font-size: var(--texte-xs);
  font-weight: 500;
  letter-spacing: var(--interlettrage-surtitre);
  text-transform: uppercase;
  color: var(--accent-texte);
}
.deroule__etape h3 { margin-bottom: var(--esp-1); }
.deroule__etape p { margin: 0; color: var(--texte-doux); }

.hebergement__villas { margin-top: var(--esp-5); gap: var(--esp-5) var(--gouttiere-grille); }
.villa { margin: 0; }
.villa figcaption { margin-top: var(--esp-3); }
.hebergement__intitule {
  margin: var(--esp-6) 0 var(--esp-2);
  font-family: var(--police-texte);
  font-size: var(--texte-xs);
  font-weight: 500;
  letter-spacing: var(--interlettrage-surtitre);
  text-transform: uppercase;
  color: var(--texte-doux);
}
@media (min-width: 40rem) { .hebergement__intitule { margin-top: var(--esp-7); } }
.hebergement__chambres { margin: 0; }
/* Tablette et ordinateur : les types de chambre sur toute la largeur, sous les deux villas */
@media (min-width: 40rem) {
  .hebergement__chambres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gouttiere-grille);
    border-top: 1px solid var(--trait);
    border-bottom: 1px solid var(--trait);
  }
  .hebergement__chambres > li + li { border-top: 0; }
}

.inclus__colonnes { margin-top: var(--esp-6); }

/* ---------- Esprit tanah ---------- */
.esprit-position__piliers { margin-top: var(--esp-6); }
@media (max-width: 63.99rem) { .esprit-photo .photo-fondatrices { aspect-ratio: 4 / 5; max-width: 26rem; } }
.esprit-valeurs {
  display: grid;
  margin: var(--esp-6) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--trait);
}
.esprit-valeurs li {
  padding: var(--esp-4) 0;
  border-top: 1px solid var(--trait);
  font-family: var(--police-titre);
  font-size: var(--texte-xl);
  line-height: 1.2;
}
@media (min-width: 64rem) {
  .esprit-valeurs { grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 0; }
  .esprit-valeurs li { padding: var(--esp-4) var(--esp-4) var(--esp-4) 0; font-size: var(--texte-lg); }
}

/* ---------- FAQ ---------- */
.faq__groupe + .faq__groupe { margin-top: var(--esp-7); }
.faq__titre { margin-bottom: var(--esp-3); font-size: var(--texte-xl); }
.faq .accordeon { max-width: 46rem; }
/* Ordinateur : thème à gauche, questions sur la largeur restante */
@media (min-width: 64rem) {
  .faq__groupe {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--gouttiere-grille);
    align-items: start;
  }
  .faq__groupe + .faq__groupe { padding-top: var(--esp-6); margin-top: var(--esp-6); border-top: 1px solid var(--trait); }
  .faq__titre { position: sticky; top: calc(var(--hauteur-header) + var(--esp-4)); margin: 0; }
  .faq .accordeon { max-width: none; }
}
.faq__contact h2 { max-width: 20ch; }

/* ---------- Réserver ---------- */
.infos-cles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gouttiere-grille);
  margin: var(--esp-6) 0 0;
}
@media (min-width: 64rem) { .infos-cles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.infos-cles > div { padding: var(--esp-3) 0; border-top: 1px solid var(--trait); }
.infos-cles dt { font-size: var(--texte-xs); letter-spacing: var(--interlettrage-surtitre); text-transform: uppercase; color: var(--texte-doux); }
.infos-cles dd { margin: var(--esp-1) 0 0; }
.places-restantes { margin-top: var(--esp-4); color: var(--terracotta-fonce); }

.reserver__bloc > * { max-width: 40rem; }
.reserver__form { margin-top: 0; }
#pre-reservation .grille { row-gap: var(--esp-5); align-items: start; }
/* Ordinateur : titre à gauche, texte et action à droite */
@media (min-width: 64rem) {
  .reserver__bloc {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--gouttiere-grille);
    align-items: end;
  }
  .reserver__bloc > * { max-width: none; }
  .reserver__bloc > .surtitre,
  .reserver__bloc > h2 { grid-column: 1; }
  .reserver__bloc > h2 { margin-bottom: 0; }
  .reserver__bloc > :not(.surtitre):not(h2) { grid-column: 2; }
  .reserver__bloc > p:first-of-type { grid-row: 1 / span 2; align-self: end; margin: 0; }
  .reserver__intro { position: sticky; top: calc(var(--hauteur-header) + var(--esp-5)); }
}

.etapes {
  display: grid;
  gap: var(--esp-5) var(--gouttiere-grille);
  margin: var(--esp-6) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etapes__item { padding-top: var(--esp-4); border-top: 1px solid var(--encre); }
.etapes__numero {
  display: block;
  margin-bottom: var(--esp-3);
  font-family: var(--police-titre);
  font-size: var(--texte-2xl);
  line-height: 1;
  color: var(--terracotta);                  /* grand texte : 4,0:1 */
}
.etapes__item h3 { margin-bottom: var(--esp-2); }
.etapes__item p { margin: 0; color: var(--texte-doux); }

.calendrier { margin: var(--esp-6) 0 var(--esp-4); padding: 0; list-style: none; border-bottom: 1px solid var(--trait); }
.calendrier li {
  display: grid;
  gap: var(--esp-2) var(--gouttiere-grille);
  padding: var(--esp-4) 0;
  border-top: 1px solid var(--trait);
}
@media (min-width: 48rem) { .calendrier li { grid-template-columns: 14rem 1fr; } }
.calendrier__date { color: var(--terracotta-fonce); }
.calendrier h3 { margin-bottom: var(--esp-1); }
.calendrier p { margin: 0; color: var(--texte-doux); }


/* ==========================================================================
   Accueil (mobile d'abord)
   ========================================================================== */

/* 1. Hero : tout l'écran sous l'en-tête, texte en bas sur mobile (zone du pouce) */
.hero-accueil {
  min-height: calc(100vh - var(--hauteur-header));
  min-height: calc(100svh - var(--hauteur-header) - env(safe-area-inset-top));
  align-items: end;
}
/* Dégradé sombre derrière le texte : intensité --hero-degrade (0 à 1), réglée dans config.js → medias.heroDegrade */
.hero-accueil { --hero-degrade: 0.7; }
.hero-accueil .media-texte__voile {
  /* Mobile : texte en bas, dégradé depuis le bas */
  background: linear-gradient(0deg,
    rgba(43, 38, 33, calc(1 * var(--hero-degrade))) 0%,
    rgba(43, 38, 33, calc(0.7 * var(--hero-degrade))) 40%,
    rgba(43, 38, 33, calc(0.15 * var(--hero-degrade))) 75%,
    rgba(43, 38, 33, 0) 100%);
}
.hero-accueil .media-texte__contenu { padding-block: var(--esp-7) calc(var(--esp-6) + env(safe-area-inset-bottom)); }
.hero-accueil h1 { margin-bottom: var(--esp-4); }
/* Petits téléphones (iPhone SE) : tout le hero tient dans l'écran */
@media (max-height: 42rem) and (max-width: 47.99rem) {
  .hero-accueil .media-texte__contenu { padding-top: var(--esp-5); padding-bottom: calc(var(--esp-5) + env(safe-area-inset-bottom)); }
  .hero-accueil h1 { font-size: 2.25rem; }
  .hero-accueil .chapeau { font-size: var(--texte-base); margin-bottom: var(--esp-4); }
}
.hero-accueil .chapeau { max-width: 30rem; }
@media (min-width: 64rem) {
  .hero-accueil { align-items: center; }
  /* Ordinateur : texte à gauche, dégradé depuis la gauche */
  .hero-accueil .media-texte__voile {
    background: linear-gradient(90deg,
      rgba(43, 38, 33, calc(0.95 * var(--hero-degrade))) 0%,
      rgba(43, 38, 33, calc(0.6 * var(--hero-degrade))) 45%,
      rgba(43, 38, 33, calc(0.1 * var(--hero-degrade))) 80%,
      rgba(43, 38, 33, 0) 100%);
  }
  .hero-accueil .media-texte__contenu { padding-block: var(--esp-8); }
}

/* 2. Introduction + piliers (alignés à gauche, comme le reste de la page) */
.accueil-intro { padding-bottom: max(var(--esp-6), calc(var(--esp-section) / 2)); }
.accueil-intro__titre { max-width: 40rem; }
.accueil-intro__texte {
  max-width: var(--largeur-texte);
  margin: 0;
}
.accueil-intro__piliers { margin-top: var(--esp-6); }

/* 3. ROOT / RISE */
.accueil-rootrise__entete { padding-bottom: var(--esp-6); }
.accueil-rootrise__chiffres { margin: var(--esp-5) 0 0; }   /* 9 jours · 8 nuits · 2 visages de Bali · 10 femmes max */
.accueil-rootrise__infos { margin: var(--esp-5) 0 0; color: var(--texte-doux); }

/* Photos : paysage sur mobile (page plus courte), formats éditoriaux sur desktop */
@media (max-width: 63.99rem) {
  .accueil-photo .aplat, .accueil-photo .photo { aspect-ratio: 3 / 2; }
}

/* 4. Inclus */
.accueil-inclus__grille { margin-top: var(--esp-6); align-items: start; }
.accueil-inclus__lien { margin: var(--esp-6) 0 0; }

/* 7. Confiance */
.accueil-confiance__liste {
  display: grid;
  gap: var(--esp-5) var(--gouttiere-grille);
  margin: var(--esp-6) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) { .accueil-confiance__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .accueil-confiance__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.accueil-confiance__liste li { padding-top: var(--esp-4); border-top: 1px solid var(--encre); }
.accueil-confiance__liste h3 { margin-bottom: var(--esp-2); }
.accueil-confiance__liste p { margin: 0; color: var(--texte-doux); }

/* Hero : boutons */
.hero-accueil__actions { gap: var(--esp-4) var(--esp-5); }
@media (max-width: 39.99rem) {
  .hero-accueil__actions { flex-direction: column; align-items: stretch; }
  .hero-accueil__actions .lien-trait { align-self: flex-start; }
}

/* 7 bis. Être prévenue (avant l'ouverture des ventes) */
.accueil-prevenue__bloc { max-width: 40rem; }
.accueil-prevenue__form { margin-top: var(--esp-5); }
.accueil-prevenue__champs { display: grid; gap: var(--esp-4); }
@media (min-width: 40rem) { .accueil-prevenue__champs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 8. CTA final */
.accueil-final { min-height: 70svh; }
.accueil-final h2 { font-size: var(--texte-3xl); line-height: 1.04; margin-bottom: var(--esp-5); }

/* ==========================================================================
   Guide de style (page interne guide-de-style.html)
   ========================================================================== */
.guide-sommaire ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  margin: var(--esp-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: guide;
  font-size: var(--texte-sm);
}
.guide-sommaire li { counter-increment: guide; }
.guide-sommaire li::before {
  content: counter(guide, decimal-leading-zero) " ";
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.guide-sous-titre {
  margin: var(--esp-7) 0 var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--trait);
  font-family: var(--police-texte);
  font-size: var(--texte-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.guide-note {
  max-width: var(--largeur-texte);
  margin-top: var(--esp-5);
  padding-left: var(--esp-3);
  border-left: 2px solid var(--terracotta);
  font-size: var(--texte-sm);
}

/* Nuancier */
.guide-nuancier {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--esp-4) var(--gouttiere-grille);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nuance { display: flex; flex-direction: column; }
.nuance__couleur { display: block; aspect-ratio: 4 / 3; }
.nuance__couleur--bord { box-shadow: inset 0 0 0 1px var(--trait); }
.nuance__infos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--esp-3);
  font-size: var(--texte-xs);
  font-variant-numeric: tabular-nums;
}
.nuance__infos strong { font-size: var(--texte-sm); font-weight: 500; }
.nuance__infos span { color: var(--texte-doux); }
.nuance__infos .nuance__ratio { color: var(--texte); }

/* Typographie */
.guide-specimens { margin-top: var(--esp-5); }
.guide-specimen__aa {
  margin: 0;
  font-family: var(--police-texte);
  font-size: clamp(5rem, 3rem + 8vw, 9rem);
  line-height: 1;
}
.guide-specimen__aa--titre { font-family: var(--police-titre); font-weight: 500; letter-spacing: -0.03em; }
.guide-specimen__alphabet { font-size: var(--texte-lg); line-height: 1.5; overflow-wrap: anywhere; }
.guide-specimen__alphabet--titre { font-family: var(--police-titre); }

.guide-echelle { margin: 0; }
.guide-echelle > div {
  display: grid;
  gap: var(--esp-2) var(--gouttiere-grille);
  padding: var(--esp-4) 0;
  border-top: 1px solid var(--trait);
}
@media (min-width: 64rem) {
  .guide-echelle > div { grid-template-columns: 14rem 1fr; align-items: baseline; }
}
.guide-echelle dt { font-size: var(--texte-xs); color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.guide-echelle dd { margin: 0; }
.guide-echelle dd.titre-1, .guide-echelle dd.titre-2,
.guide-echelle dd.titre-3, .guide-echelle dd.titre-4,
.guide-echelle dd .surtitre { margin: 0; }

/* Espacements */
.guide-espaces { margin: var(--esp-5) 0 0; padding: 0; list-style: none; }
.guide-espaces li {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) 0;
  font-size: var(--texte-xs);
  font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
}
.guide-barre { display: block; height: var(--esp-3); background: var(--terracotta); }
.guide-barre--section { background: var(--encre); }

/* Grille */
.guide-colonnes { gap: var(--gouttiere-grille); margin-top: var(--esp-5); }
.guide-colonnes > span {
  grid-column: span 1;
  height: 6rem;
  background: rgba(181, 98, 47, 0.14);
}
.guide-colonnes > span:nth-child(n + 5) { display: none; }
@media (min-width: 40rem) { .guide-colonnes > span:nth-child(n + 5) { display: block; } .guide-colonnes > span:nth-child(n + 7) { display: none; } }
@media (min-width: 64rem) { .guide-colonnes > span:nth-child(n + 7) { display: block; } }

/* Tableau des états */
.guide-tableau { margin-top: var(--esp-5); border-bottom: 1px solid var(--trait); }
.guide-tableau__ligne {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-4) 0;
  border-top: 1px solid var(--trait);
  align-items: center;
}
.guide-tableau__entete { display: none; }
@media (min-width: 64rem) {
  .guide-tableau__ligne { grid-template-columns: 12rem repeat(4, minmax(0, 1fr)); }
  .guide-tableau__entete { display: grid; font-size: var(--texte-xs); color: var(--texte-doux); }
}
.guide-tableau__ligne > span:first-child { font-size: var(--texte-sm); font-weight: 500; }
@media (max-width: 63.99rem) {
  .guide-tableau__ligne:not(.guide-tableau__entete) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-tableau__ligne > span:first-child { grid-column: 1 / -1; }
}

.guide-note ul { margin: 0; padding-left: 1.1em; }
.guide-note li + li { margin-top: var(--esp-1); }

/* Aperçu de l'en-tête (maquette) */
.guide-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-5);
  margin-bottom: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  background: var(--sable);
  border: 1px solid var(--trait);
}
.guide-entete__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-5); font-size: var(--texte-sm); }

.guide-contenu { margin-top: var(--esp-6); }

code { font-family: var(--police-texte); font-size: inherit; overflow-wrap: anywhere; }

.guide-aplats { gap: var(--gouttiere-grille); }
.guide-aplats > * { grid-column: span 2; }
@media (min-width: 40rem) { .guide-aplats > * { grid-column: span 3; } .guide-aplats > .d-8 { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  .guide-aplats > .d-3 { grid-column: span 3; }
  .guide-aplats > .d-4 { grid-column: span 4; }
  .guide-aplats > .d-6 { grid-column: span 6; }
  .guide-aplats > .d-8 { grid-column: span 8; }
}

/* ---------- Bali : conditions de réservation ---------- */
.conditions { margin: var(--esp-6) 0 var(--esp-4); border-bottom: 1px solid var(--trait); }
.conditions > div {
  display: grid;
  gap: var(--esp-1) var(--gouttiere-grille);
  padding: var(--esp-4) 0;
  border-top: 1px solid var(--trait);
}
@media (min-width: 48rem) { .conditions > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.conditions dt { color: var(--texte-doux); }
.conditions dd { margin: 0; }
.conditions__note { display: block; margin-top: var(--esp-1); color: var(--texte-doux); }
.groupe__aide { margin-top: var(--esp-3); }

/* ==========================================================================
   Pages légales : lecture confortable, sommaire repliable
   ========================================================================== */
.page-entete--legal { padding-block: var(--esp-6) var(--esp-5); }
.page-entete--legal h1 { max-width: 24ch; font-size: var(--texte-2xl); }
@media (min-width: 64rem) { .page-entete--legal h1 { font-size: 2.75rem; } }
.legal-version { margin: 0 0 var(--esp-4); font-size: var(--texte-sm); color: var(--texte-doux); }
.page-entete--legal .bandeau-provisoire { margin-bottom: 0; }
.page-entete--legal .conteneur > :last-child { margin-bottom: 0; }

.legal { padding-bottom: var(--esp-section); }
.legal__sommaire { margin-bottom: var(--esp-4); }

.sommaire-legal {
  max-width: var(--largeur-texte);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}
.sommaire-legal summary {
  display: flex;
  justify-content: space-between;
  min-height: 2.75rem;
  align-items: center;
  font-size: var(--texte-xs);
  font-weight: 500;
  letter-spacing: var(--interlettrage-surtitre);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.sommaire-legal summary::-webkit-details-marker { display: none; }
.sommaire-legal summary::after { content: "+"; font-size: var(--texte-lg); font-weight: 300; letter-spacing: 0; }
.sommaire-legal[open] summary::after { content: "–"; }
.sommaire-legal ol { margin: 0 0 var(--esp-4); padding: 0; list-style: none; }
.sommaire-legal li a {
  display: block;
  padding: var(--esp-2) 0;
  font-size: var(--texte-sm);
  text-decoration: none;
}
.sommaire-legal li a:hover { text-decoration: underline; }

/* Tablette et ordinateur : sommaire fixe à gauche, texte à droite */
@media (min-width: 48rem) {
  .legal__grille {
    display: grid;
    grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
  }
  .legal__sommaire {
    position: sticky;
    top: calc(var(--hauteur-header) + var(--esp-4));
    max-height: calc(100vh - var(--hauteur-header) - var(--esp-6));
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sommaire-legal { max-width: none; border-bottom: 0; }
  .sommaire-legal summary { min-height: 0; padding: var(--esp-3) 0 var(--esp-2); color: var(--texte-doux); cursor: default; }
  .sommaire-legal summary::after,
  .sommaire-legal[open] summary::after { content: none; }
  .sommaire-legal ol { margin: 0; }
  .sommaire-legal li a {
    padding: 0.4rem 0 0.4rem var(--esp-3);
    border-left: 2px solid var(--trait);
    line-height: 1.35;
    color: var(--texte-doux);
  }
  .sommaire-legal li a:hover { color: var(--texte); }
  .sommaire-legal li a[aria-current="true"] {
    border-left-color: var(--terracotta-fonce);
    color: var(--terracotta-fonce);
    font-weight: 500;
  }
  .texte-legal > * { max-width: 44rem; }
  .texte-legal > :first-child { margin-top: 0; }
}

.texte-legal { font-size: var(--texte-base); }
.texte-legal h2 {
  margin: var(--esp-6) 0 var(--esp-3);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--trait);
  font-size: var(--texte-xl);
  color: var(--texte);
}
.texte-legal h3 { margin: var(--esp-5) 0 var(--esp-2); font-size: var(--texte-lg); }
.texte-legal a { overflow-wrap: anywhere; }
.liste-legale { padding-left: 1.2em; }
.liste-legale li + li { margin-top: var(--esp-1); }

.tableau-defilant { max-width: none !important; overflow-x: auto; margin-block: var(--esp-4); }
.tableau-defilant:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tableau-legal { width: 100%; border-collapse: collapse; }
/* Mobile : chaque cookie devient une fiche lisible, sans défilement horizontal */
@media (max-width: 47.99rem) {
  .tableau-legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-legal tr { display: block; padding: var(--esp-3) 0; border-top: 1px solid var(--trait); }
  .tableau-legal td { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--esp-3); padding: var(--esp-1) 0; border: 0; }
  .tableau-legal td::before { content: attr(data-label); font-size: var(--texte-xs); color: var(--texte-doux); }
}
@media (min-width: 48rem) { .tableau-legal { min-width: 44rem; } }
.tableau-legal th, .tableau-legal td { padding: var(--esp-2) var(--esp-3) var(--esp-2) 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.tableau-legal th { font-size: var(--texte-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }

/* ==========================================================================
   Textes du copywriting (COPYWRITING_SITE.md) : éléments ajoutés
   ========================================================================== */
/* Accueil, ROOT & RISE : phrase d'introduction et lieu de chaque bloc */
.accueil-rootrise__intro { margin: var(--esp-4) 0 0; max-width: var(--largeur-texte); }
.duo__lieu {
  margin: 0 0 var(--esp-2);
  font-size: var(--texte-xs);
  font-weight: 500;
  letter-spacing: var(--interlettrage-surtitre);
  text-transform: uppercase;
}

/* Le voyage : texte d'introduction, ligne de repères, texte du programme */
.page-entete__texte { margin-top: var(--esp-4); max-width: var(--largeur-texte); }
.page-entete__infos { margin: var(--esp-5) 0 0; }
.programme__texte { max-width: var(--largeur-texte); margin-bottom: var(--esp-6); }

/* Inclus / À la carte / Non inclus : trois colonnes séparées par un filet */
@media (min-width: 64rem) {
  .colonnes-filet--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .colonnes-filet--3 > * + * { padding-right: var(--esp-6); }
  .colonnes-filet--3 > :last-child { padding-right: 0; }
}

/* L'esprit tanah : ce en quoi on croit */
.esprit-croyances__liste > li { padding-block: var(--esp-3); }
.esprit-croyances__promesse {
  margin-top: var(--esp-6);
  font-family: var(--police-titre);
  font-size: var(--texte-xl);
  line-height: 1.2;
  color: var(--accent-texte);
}

/* Réserver au statut "bientot" : page « Être prévenue » */
.reserver-prevenue__bloc { max-width: 40rem; }
.reserver-prevenue__texte { margin-top: var(--esp-4); }
.reserver-prevenue__form { margin-top: var(--esp-6); }

/* Formulaires : message « après inscription » */
.formulaire__succes > * + * { margin-top: var(--esp-3); }
.formulaire__succes h2, .formulaire__succes h3 { margin: 0; }
.formulaire__succes h2:focus, .formulaire__succes h3:focus { outline: none; }

/* ==========================================================================
   Photos pleine largeur (respirations) : vertical sur mobile, horizontal sur ordinateur
   ========================================================================== */
.respiration { width: 100%; aspect-ratio: 4 / 5; }
@media (min-width: 48rem) { .respiration { aspect-ratio: 21 / 9; } }
.respiration img, .respiration picture { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Frise du programme (Le voyage) : ROOT → Transition → RISE, de l'olive à l'océan
   Mobile : verticale ; ordinateur : horizontale.
   La couleur est portée par la barre ; les textes restent en encre (contraste).
   ========================================================================== */
.frise {
  --frise-root: var(--olive);
  --frise-transition: #748985;                /* mi-chemin entre olive et océan */
  --frise-rise: var(--ocean);
  display: grid;
  gap: 0;
  margin: 0 0 var(--esp-5);
  padding: 0;
  list-style: none;
}
.frise__etape {
  position: relative;
  padding: 0 0 var(--esp-5) var(--esp-5);
}
/* Barre de progression : segment coloré à gauche (mobile) */
.frise__etape::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: var(--frise-couleur);
}
.frise__etape[data-etape="root"] { --frise-couleur: linear-gradient(180deg, var(--frise-root), var(--frise-transition)); }
.frise__etape[data-etape="transition"] { --frise-couleur: var(--frise-transition); }
.frise__etape[data-etape="rise"] { --frise-couleur: linear-gradient(180deg, var(--frise-transition), var(--frise-rise)); }
.frise__repere {
  display: block;
  font-size: var(--texte-xs);
  font-weight: 500;
  letter-spacing: var(--interlettrage-surtitre);
  text-transform: uppercase;
}
.frise__jours { display: block; margin-top: var(--esp-1); color: var(--texte-doux); }
.frise__titre { margin: var(--esp-3) 0 var(--esp-2); font-size: var(--texte-xl); }
.frise__etape p { margin: 0; max-width: 32rem; }
@media (min-width: 64rem) {
  .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frise__etape { padding: var(--esp-5) var(--esp-5) 0 0; }
  .frise__etape::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 6px; }
  .frise__etape[data-etape="root"] { --frise-couleur: linear-gradient(90deg, var(--frise-root), var(--frise-transition)); }
  .frise__etape[data-etape="rise"] { --frise-couleur: linear-gradient(90deg, var(--frise-transition), var(--frise-rise)); }
  .frise__etape:last-child { padding-right: 0; }
}

/* ==========================================================================
   Corrections visuelles ciblées
   ========================================================================== */
/* Boutons sur fond olive (sections olive, grands visuels olive) : sable clair + encre */
.section--olive .bouton,
.media-texte--olive .bouton {
  --btn-fond: var(--sable-clair);
  --btn-texte: var(--encre);
  --btn-bord: var(--sable-clair);
  --btn-fond-survol: transparent;
  --btn-texte-survol: var(--sable-clair);
  --btn-bord-survol: var(--sable-clair);
}

/* Être prévenue (accueil et page Réserver) : texte et formulaire à gauche, photo verticale à droite.
   Mobile : la photo est masquée (elle repousserait le formulaire d'un écran entier). */
.prevenue-photo { display: none; }
@media (min-width: 48rem) {
  .prevenue-deux-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
  }
  .prevenue-photo { display: block; aspect-ratio: 4 / 5; }
  .accueil-prevenue__bloc, .reserver-prevenue__bloc { max-width: none; }
}

/* L'esprit tanah, « Pourquoi tanah ? » : photo dans la colonne de droite (dès la tablette) */
.esprit-pourquoi__photo .aplat, .esprit-pourquoi__photo .photo { aspect-ratio: 4 / 5; }
@media (max-width: 47.99rem) { .esprit-pourquoi__photo { max-width: 26rem; } }
@media (min-width: 48rem) {
  .esprit-pourquoi { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 6rem); }
  .esprit-pourquoi > * { grid-column: auto; }
}

/* Frise (ordinateur) : trois colonnes égales, chacune sous son segment de barre ;
   espace réduit entre la frise et la section Inclus */
@media (min-width: 64rem) {
  .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#programme { padding-bottom: var(--esp-6); }
#programme .legende { margin-bottom: 0; }
#programme + #inclus { padding-top: var(--esp-6); }

/* Réserver (statut « ouvertes ») : formulaire seul sous l'en-tête, largeur de lecture confortable */
.reserver__formulaire { max-width: 48rem; }

/* Garantie de remboursement, sous le bouton principal des formulaires (accueil, Réserver) */
.formulaire__garantie { margin: var(--esp-4) 0 0; }
.section--olive .formulaire__garantie { color: var(--sable-clair); }

/* Réserver : acompte affiché dans le formulaire de pré-réservation */
.reserver__acompte p { margin: 0; }
.reserver__acompte .champ__aide { margin-top: var(--esp-1); }

/* Réserver : appel WhatsApp, quel que soit le statut */
.reserver-whatsapp { padding-top: 0; }