/* ============================================================
   PAGES & SECTIONS — hero, essences, expériences, avis, contact
   ============================================================ */

/* ---- ANIMATIONS DE RÉVÉLATION (scroll) ---------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity 1.5s var(--ease-out), transform 1.5s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal].in { opacity: 1; transform: none; }

[data-reveal="mask"] {
  opacity: 1; transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.6s var(--ease-inout);
  transition-delay: var(--d, 0s);
}
[data-reveal="mask"].in { clip-path: inset(0 0 0 0); }

/* mots du titre qui montent */
.reveal-lines .line { overflow: hidden; display: block; }
.reveal-lines .line > span {
  display: block; transform: translateY(110%);
  transition: transform 1.55s var(--ease-inout);
  transition-delay: var(--d, 0s);
}
.reveal-lines.in .line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="mask"], .reveal-lines .line > span {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero,
.page-hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* `padding-top` : le contenu est calé en bas, mais dès qu'il dépasse la
     hauteur de l'écran (téléphone, gros titre sur trois lignes) la section
     grandit vers le HAUT et le surtitre passait sous la nav fixe. Cette
     réserve garantit qu'il reste toujours de la place pour elle. Sans
     effet tant que le contenu tient dans l'écran. */
  padding-top: calc(var(--space-2xl) + 1.5rem);
  padding-bottom: var(--space-xl); overflow: hidden; isolation: isolate;
  color: var(--on-dark);
}
.hero::before,
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,36,48,.5) 0%, rgba(11,36,48,.18) 30%, rgba(11,36,48,.4) 62%, rgba(11,36,48,.92) 100%);
  pointer-events: none;
}
.hero-media, .page-hero .media { position: absolute; inset: 0; z-index: -2; }
.hero-media img,
.page-hero .media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.08) contrast(1.05) brightness(.92);
}
.hero-inner, .page-hero .wrap { position: relative; z-index: 1; }
.hero .lede, .page-hero .lede { color: var(--on-dark-soft); text-shadow: 0 10px 32px rgba(0,0,0,.22); }
.page-hero .lede { max-width: 54ch; }
.hero .eyebrow, .page-hero .eyebrow { color: var(--sand); margin-bottom: var(--space-s); text-shadow: 0 8px 24px rgba(0,0,0,.2); }
.hero h1, .page-hero h1 {
  font-size: var(--step-6); font-weight: 300; line-height: .94;
  margin-bottom: var(--space-m); letter-spacing: -.03em;
  text-shadow: 0 16px 42px rgba(0,0,0,.25);
}
.page-hero h1 { font-size: var(--step-5); }
.hero h1 em { color: var(--sand); }
/* `margin-top` : le reset pose `* { margin: 0 }` et `.lede` n'a pas de
   marge basse — le bouton « Réserver un séjour » venait donc se coller à
   la dernière ligne du paragraphe, jusqu'à sembler la chevaucher sur un
   écran étroit. Vaut aussi pour les bandeaux d'appel (`.cta-band`), qui
   avaient le même défaut. */
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin-top: var(--space-m);
}

.hero-stats {
  position: absolute; right: var(--gutter); bottom: var(--space-xl);
  display: flex; gap: var(--space-l); text-align: right; z-index: 1;
}
.hero-stats .stat b {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: var(--step-4); line-height: 1; color: var(--on-dark);
}
.hero-stats .stat span {
  font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-soft);
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6em;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--on-dark-soft);
  z-index: 1;
}
.scroll-cue .rail { width: 1px; height: 46px; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue .rail::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 40%;
  background: var(--accent-lit); animation: scrolldot 3s var(--ease-inout) infinite;
}
@keyframes scrolldot { 0%{transform:translateY(-100%);} 60%,100%{transform:translateY(250%);} }

/* ---- HERO SUR PETIT ÉCRAN : que ça respire -------------------
   Sous 900px les chiffres clés quittent leur ancrage absolu et
   repassent dans le flux. Trois choses manquaient alors :

   1. La GOUTTIÈRE. `.hero-stats` est un enfant direct de `.hero`, pas
      de `.wrap` : en flux il démarrait à x=0, collé au bord de l'écran
      pendant que tout le reste était en retrait.
   2. Le RETOUR À LA LIGNE. Trois chiffres et leurs libellés capitalisés
      sur une seule ligne flex sans `flex-wrap` : la rangée débordait et
      « 12+ HÉBERGEMENTS » se faisait rogner.
   3. La PLACE. Le repère de défilement, lui, restait en absolu au
      centre-bas — il atterrissait pile au milieu des chiffres. Il n'est
      masqué qu'en dessous de 680px de haut, or un téléphone moderne fait
      850px : la collision était systématique. Sur un écran tactile le
      repère n'apprend rien de toute façon, on le retire.       */
@media (max-width: 900px) {
  .hero-stats {
    position: static; text-align: left;
    margin-top: var(--space-l);
    padding-inline: var(--gutter);
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
  }
  .hero-stats .stat b { font-size: var(--step-3); }
  .hero-stats .stat span { letter-spacing: .12em; }
  .scroll-cue { display: none; }
}

/* Le titre est la pièce maîtresse, mais son plancher de 3,6rem occupe
   trois lignes soit ~160px sur un téléphone — tout le reste s'en trouve
   comprimé. On le ramène à une taille qui laisse vivre la lede et les
   boutons, sans qu'il cesse d'être imposant. */
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(2.9rem, 10.5vw, 4.4rem); }
  .hero .lede, .page-hero .lede { max-width: 38ch; }
}

/* Sur les téléphones courants (390–430px), le bouton et le lien secondaire
   se partageaient mal la ligne. Le bouton prend toute la largeur et le
   lien passe dessous, avec de l'air entre les deux. */
@media (max-width: 460px) {
  .hero-actions { gap: .9rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: var(--space-s); }
  .hero-stats .stat b { font-size: var(--step-2); }
  .hero-stats .stat span { font-size: .68rem; letter-spacing: .1em; }
}
/* Sous 400px « ANNÉES D'EXISTENCE » ne tient plus sur la ligne : en flex
   il partait seul à la ligne suivante et la bande se lisait de travers.
   Trois colonnes égales laissent chaque libellé se replier dans SA
   colonne — les trois chiffres restent alignés sur une seule rangée. */
@media (max-width: 400px) {
  .hero-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-s); align-items: start;
  }
  .hero-stats .stat span { line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue .rail::after {
    animation: none !important;
  }
}

/* ============================================================
   HERO REVOLUTION — carrousel plein écran piloté depuis l'admin
   Le carrousel fait défiler les IMAGES DE FOND (Ken Burns + fondu
   enchaîné) derrière le texte existant de chaque page. Si aucune
   image n'est configurée, on retombe sur l'image statique du HTML.
   ============================================================ */
.hero-rev { position: absolute; inset: 0; overflow: hidden; }
.hero-rev-slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  filter: saturate(1.08) contrast(1.05) brightness(.92);
  transform: scale(1.05);
  transition: opacity 1.6s var(--ease-out);
  will-change: opacity, transform;
}
.hero-rev-slide.is-active { opacity: 1; z-index: 1; }

/* Ken Burns : zoom/travelling lent sur la slide affichée */
.hero-rev-slide.kb-in.is-active       { animation: hero-kb-in       var(--kb, 10s) var(--ease-out) forwards; }
.hero-rev-slide.kb-in-left.is-active  { animation: hero-kb-in-left  var(--kb, 10s) var(--ease-out) forwards; }
.hero-rev-slide.kb-in-right.is-active { animation: hero-kb-in-right var(--kb, 10s) var(--ease-out) forwards; }
.hero-rev-slide.kb-up.is-active       { animation: hero-kb-up       var(--kb, 10s) var(--ease-out) forwards; }
@keyframes hero-kb-in       { from { transform: scale(1.02); }               to { transform: scale(1.16); } }
@keyframes hero-kb-in-left  { from { transform: scale(1.04) translate(0,0); } to { transform: scale(1.17) translate(-3%,-1.5%); } }
@keyframes hero-kb-in-right { from { transform: scale(1.04) translate(0,0); } to { transform: scale(1.17) translate(3%,-1.5%); } }
@keyframes hero-kb-up       { from { transform: scale(1.05) translate(0,2%); } to { transform: scale(1.17) translate(0,-2%); } }

/* ---- Slides vidéo ------------------------------------------------
   La vidéo se pose PAR-DESSUS l'affiche (l'image de fond de la slide),
   qui reste visible dessous. Elle démarre à `opacity: 0` et n'apparaît
   qu'une fois réellement lisible (`is-ready`, posé sur `canplay`) : le
   visiteur voit donc toujours quelque chose immédiatement, et jamais un
   rectangle noir en attendant le premier octet.

   Ken Burns coupé sur ces slides : il animerait une image de fond
   désormais masquée, soit une animation permanente pour rien. */
.hero-rev-slide.has-video,
.hero-rev-slide.has-video.is-active { animation: none; transform: none; }
.hero-rev-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1s var(--ease-out);
  pointer-events: none;
}
.hero-rev-video.is-ready { opacity: 1; }
/* Mouvement réduit : le moteur ne crée déjà aucune vidéo dans ce cas
   (voir heroVideoOk), cette règle n'est qu'une ceinture de plus si une
   configuration exotique en laissait passer une. */
@media (prefers-reduced-motion: reduce) {
  .hero-rev-video { display: none; }
}

/* Bouton de son — en bas à droite, à l'opposé des points du carrousel.
   Présent uniquement sur les vues dont l'admin a déclaré une piste son.
   La vidéo démarre TOUJOURS muette : aucun navigateur n'accepte l'autoplay
   avec le son sans geste du visiteur. Ce bouton est ce geste. */
.hero-rev-sound {
  position: absolute; right: var(--gutter); bottom: 1.6rem; z-index: 3;
  appearance: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  display: grid; place-items: center; line-height: 1;
  font-size: 1.05rem; color: var(--on-dark);
  background: rgba(251,248,240,.06); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.hero-rev-sound:hover { background: rgba(251,248,240,.14); border-color: var(--sand); transform: translateY(-2px); }
.hero-rev-sound:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.hero-rev-sound[hidden] { display: none; }
/* Sur l'accueil, les chiffres clés occupent déjà le bas droit au-dessus de
   1180px de large ; on décale le bouton pour ne pas les recouvrir. */
@media (min-width: 901px) {
  .hero .hero-rev-sound { bottom: calc(var(--space-xl) + 5.5rem); }
}

/* Contrôles du carrousel — points + flèches, en bas à gauche */
.hero-rev-ui {
  position: absolute; left: var(--gutter); bottom: 1.6rem; z-index: 3;
  display: flex; align-items: center; gap: 1.1rem;
}
.hero-rev-dots { display: flex; gap: .55rem; }
.hero-rev-dot {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  width: 34px; height: 3px; border-radius: 3px;
  background: var(--line); position: relative; overflow: hidden;
  transition: background .4s var(--ease-out);
}
.hero-rev-dot::after {
  content: ""; position: absolute; inset: 0; transform: scaleX(0);
  transform-origin: left; background: var(--sand);
  transition: transform .4s var(--ease-out);
}
.hero-rev-dot.is-active { background: rgba(251,248,240,.32); }
.hero-rev-dot.is-active::after { animation: hero-dot-fill var(--kb, 10s) linear forwards; }
@keyframes hero-dot-fill { to { transform: scaleX(1); } }
.hero-rev-arrows { display: flex; gap: .5rem; }
.hero-rev-arrows button {
  appearance: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  display: grid; place-items: center; line-height: 1;
  font-size: 1.35rem; color: var(--on-dark);
  background: rgba(251,248,240,.06); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.hero-rev-arrows button:hover { background: rgba(251,248,240,.14); border-color: var(--sand); transform: translateY(-2px); }
.hero-rev-arrows button:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
@media (max-width: 560px) { .hero-rev-arrows { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-rev-slide { transform: none; }
  .hero-rev-slide.is-active { animation: none !important; transform: none !important; }
  .hero-rev-dot.is-active::after { animation: none !important; transform: scaleX(1); }
}

/* ============================================================
   BARRE DE RÉSERVATION
   ============================================================ */
.booking {
  position: relative; z-index: 5; margin-top: -2.5rem;
}
.booking-bar {
  background: var(--linen); color: var(--ink);
  border-radius: var(--radius-l); box-shadow: var(--shadow-lift);
  display: grid; grid-template-columns: repeat(4, 1fr) auto;
  align-items: stretch; overflow: hidden;
}
.booking-field {
  padding: 1.35rem 1.6rem; display: flex; flex-direction: column; gap: .25em;
  border-right: 1px solid var(--line-dark); position: relative;
}
.booking-field label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-soft); font-weight: 700;
}
.booking-field select, .booking-field input {
  border: 0; background: transparent; font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 400; color: var(--ink);
  width: 100%; padding: 0; appearance: none; cursor: pointer;
}
.booking-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.booking-submit {
  background: var(--heartwood); color: var(--linen);
  display: flex; align-items: center; justify-content: center; gap: .6em;
  padding-inline: 2rem; font-weight: 700; letter-spacing: .04em;
  transition: background .4s var(--ease-out); font-size: var(--step--1);
}
.booking-submit:hover { background: var(--heartwood-deep); }
.booking-results {
  margin-top: 1rem; padding: 1.2rem 1.4rem; border-radius: var(--radius-l);
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-lift);
}
.booking-results-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: .8rem; }
.booking-results-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; color: var(--on-light-soft); font-weight: 700; }
.booking-results-summary { color: var(--ink); font-size: var(--step--1); }
.booking-results-summary.is-error { color: var(--danger, #A7302B); }
.booking-results-list { display: grid; gap: .8rem; list-style: none; padding: 0; margin: 0; }
.booking-result-item {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: .9rem 1rem; border-radius: var(--radius-m); background: var(--linen);
  border: 1px solid rgba(0,0,0,.06);
}
.booking-result-item strong { display: block; font-family: var(--font-display); font-size: var(--step-0); }
.booking-result-item p { margin-top: .25rem; color: var(--on-light-soft); font-size: var(--step--1); }
.booking-result-pill { padding: .35rem .7rem; border-radius: 999px; background: rgba(0,97,143,.1); color: var(--heartwood-deep); font-size: .8rem; font-weight: 700; }
.booking-result-empty { padding: .8rem 0; color: var(--on-light-soft); }
@media (max-width: 860px) {
  .booking-bar { grid-template-columns: 1fr 1fr; }
  .booking-field:nth-child(even) { border-right: 0; }
  .booking-submit { grid-column: 1 / -1; padding-block: 1.15rem; }
}
/* Le chevauchement sur le hero (`margin-top: -2.5rem`) suppose que les
   chiffres clés sont ancrés en bas à droite. Ils repassent dans le flux à
   900px — pas 860 : c'est donc CE seuil qui commande, sinon la carte
   blanche leur rentre dedans sur la bande 861–900px. */
@media (max-width: 900px) {
  .booking { margin-top: var(--space-m); }
}

/* ============================================================
   MANIFESTE / INTRO
   ============================================================ */
.manifesto { max-width: 24ch; }
.manifesto-lead {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--step-3); line-height: 1.18; letter-spacing: -.02em;
}
.manifesto-lead em { color: var(--heartwood-deep); }
.two-col {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-xl);
  align-items: center;
}
.two-col .body p + p { margin-top: 1.2em; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: var(--space-l); } }

/* portrait figure avec légende */
.figure { position: relative; }
.figure img { width: 100%; border-radius: var(--radius-m); aspect-ratio: 4/5; object-fit: cover; }
.figure figcaption {
  position: absolute; left: 1.2rem; bottom: 1.2rem;
  background: rgba(11,36,48,.72); backdrop-filter: blur(8px);
  color: var(--on-dark); padding: .7em 1.1em; border-radius: var(--radius-pill);
  font-size: var(--step--1); letter-spacing: .04em; display: flex; gap: .6em; align-items: center;
}

/* ============================================================
   LES ESSENCES (collection de suites)
   ============================================================ */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-m); margin-bottom: var(--space-xl); flex-wrap: wrap;
}
.section-head h2 { font-size: var(--step-5); font-weight: 300; }
.section-head .lede { margin-top: .8em; }

.essences { display: flex; flex-direction: column; }
.essence {
  display: grid; grid-template-columns: 5rem 1.1fr 1fr; gap: var(--space-l);
  align-items: center; padding-block: var(--space-l);
  border-top: 1px solid var(--line-dark); position: relative;
}
.on-light .essence { border-color: var(--line-dark); }
.essence:last-child { border-bottom: 1px solid var(--line-dark); }
.essence-num {
  font-family: var(--font-body); font-weight: 700; font-size: var(--step--1);
  letter-spacing: .1em; color: var(--on-light-soft);
  display: flex; flex-direction: column; gap: .8em; align-items: flex-start;
}
.essence-swatch {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--sw, var(--heartwood));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 6px 18px -8px rgba(0,0,0,.5);
}
.essence-main h3 {
  font-size: var(--step-3); font-weight: 400; color: var(--ink);
  transition: color .4s;
}
.essence-main .latin {
  font-style: italic; color: var(--heartwood-deep); font-family: var(--font-display);
  font-size: var(--step-1); margin-bottom: .4em; display: block;
}
.essence-main p { color: var(--on-light-soft); max-width: 44ch; margin-top: .6em; font-size: var(--step-0); }
.essence-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; text-align: right;
}
.essence-meta { display: flex; gap: 1.4rem; color: var(--on-light-soft); font-size: var(--step--1); }
.essence-meta b { color: var(--ink); font-weight: 600; }
.essence-price { font-family: var(--font-display); font-size: var(--step-0); font-weight: 300; color: var(--on-light-soft); }
.essence-price small { font-size: .8em; color: var(--on-light-soft); letter-spacing: .08em; }
.essence:hover h3 { color: var(--heartwood-deep); }
.essence-img {
  position: fixed; top: 0; left: 0; width: 300px; height: 380px;
  border-radius: var(--radius-m); overflow: hidden; pointer-events: none;
  opacity: 0; transform: scale(.9) translate(-50%, -50%); z-index: 50;
  box-shadow: var(--shadow-lift); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.essence-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .essence { grid-template-columns: 3rem 1fr; }
  .essence-side { grid-column: 1 / -1; align-items: flex-start; text-align: left;
    flex-direction: row; justify-content: space-between; width: 100%; }
  .essence-img { display: none; }
}

/* ---- hébergements : rangées comparatives ---------------------------
   Une rangée par hébergement, pleine largeur : photo à gauche en pleine
   hauteur, identité au centre, caractéristiques alignées d'une rangée à
   l'autre (mêmes pistes de grille partout), tarif et action à droite.
   Rien n'est superposé, rien n'est comprimé : chaque donnée porte son
   étiquette et dispose de la place de se déployer. Le filet coloré au
   bord de la photo reprend la teinte du bois de l'essence. */
.rooms-list {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.6rem);
  counter-reset: room;
}

/* ---- FAMILLES D'HÉBERGEMENT (Suites · Villas · Chambres) ------
   Vingt-quatre rangées à la file ne se lisaient pas : la villa de 225 m²
   arrivait sans transition entre deux chambres de 40. Trois chapitres,
   chacun avec son intitulé, son décompte et sa promesse — et une barre de
   raccourcis en tête de page pour sauter directement au bon format. */
.rooms-jump {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: var(--space-l);
}
.rooms-jump a {
  display: inline-flex; align-items: baseline; gap: .6em;
  padding: .6em 1.15em; border-radius: var(--radius-pill);
  border: 1px solid var(--line-dark); background: var(--surface);
  color: var(--on-light); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .02em;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out),
              transform .4s var(--ease-out);
}
.rooms-jump a:hover {
  border-color: var(--accent-lit); transform: translateY(-2px);
}
.rooms-jump a b {
  font-size: .78em; font-weight: 700; color: var(--accent-lit);
  padding: .1em .55em; border-radius: var(--radius-pill);
  background: rgba(173, 90, 49, .1);
}
.rooms-group + .rooms-group { margin-top: var(--space-xl); }
/* la nav est fixe : sans marge de sécurité, l'ancre place le titre dessous */
.rooms-group { scroll-margin-top: 6.5rem; }
.rooms-group-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-m); align-items: end;
  padding-bottom: var(--space-s); margin-bottom: var(--space-m);
  border-bottom: 1px solid var(--line-dark);
}
.rooms-group-head h2 {
  margin-top: .3rem;
  font-family: var(--font-display); font-size: var(--step-4); font-weight: 300;
  line-height: 1.05; letter-spacing: -.02em;
}
.rooms-group-head .eyebrow { color: var(--on-light-soft); }
.rooms-group-num {
  font-family: var(--font-display); font-size: 1.3em; letter-spacing: 0;
  color: var(--accent-lit); margin-right: .55em;
}
.rooms-group-head .lede {
  font-size: var(--step-0); color: var(--on-light-soft); text-wrap: pretty;
  max-width: 52ch;
}
@media (max-width: 860px) {
  .rooms-group-head { grid-template-columns: minmax(0, 1fr); gap: .8rem; align-items: start; }
}

.room-row {
  --wood: var(--heartwood);
  --pad: clamp(1.4rem, 2vw, 2rem);
  position: relative; display: grid;
  grid-template-columns: 19rem minmax(14rem, 1.4fr) minmax(15rem, 1fr) minmax(12.5rem, auto);
  grid-template-areas: "media id specs foot";
  align-items: stretch;
  background: var(--surface); color: var(--on-light);
  border: 1px solid var(--line-dark); border-radius: var(--radius-l);
  overflow: hidden; isolation: isolate;
  box-shadow: 0 1px 2px rgba(11, 36, 48, .04);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out),
              border-color .6s var(--ease-out);
}
.room-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(202, 139, 61, .38);
}
/* La rangée était un <a> englobant : impossible d'y loger un second lien
   (« Visite immersive ») sans imbriquer deux ancres. Elle est devenue un
   <article> dont le titre porte le lien principal, étiré sur toute la
   carte par un ::after — l'ensemble reste cliquable, et les actions du
   pied repassent au-dessus. */
.room-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.room-row:focus-within { outline: 2px solid var(--accent-lit); outline-offset: 3px; }
.room-link:focus-visible { outline: none; }

/* photo : plein cadre à gauche, filet du bois en lisière */
.room-row .media {
  grid-area: media; position: relative; overflow: hidden;
  min-height: 16rem; background: var(--bg-alt);
}
.room-row .media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease-out);
}
.room-row:hover .media img { transform: scale(1.05); }
.room-row .media::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px;
  background: var(--wood); opacity: .9;
}
.room-row .tag-soon { position: absolute; top: .9rem; left: .9rem; }

/* identité : numéro, nom latin, nom de l'hébergement, promesse, équipements */
.room-id {
  grid-area: id; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad);
}
.room-latin {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--on-light-soft);
}
.room-latin::before {
  counter-increment: room;
  content: counter(room, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.15em; letter-spacing: 0;
  color: var(--accent-lit);
}
.room-latin .essence-swatch {
  flex: none; width: .55rem; height: .55rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.room-id h3 {
  margin-top: .5rem;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 400;
  line-height: 1.1; letter-spacing: -.01em; text-wrap: balance;
}
.room-tagline {
  margin-top: .45rem; max-width: 38ch;
  font-size: var(--step-0); line-height: 1.55; color: var(--on-light-soft);
  text-wrap: pretty;
}
.room-amenities { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.room-amenities li {
  padding: .32em .85em; border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  font-size: var(--step--1); color: var(--on-light-soft);
}

/* caractéristiques : lecture en colonnes, alignées de rangée en rangée */
.room-specs {
  grid-area: specs; min-width: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  padding: var(--pad) 0;
  border-left: 1px solid var(--line-dark);
}
.room-specs > div {
  display: flex; flex-direction: column; gap: .3rem; min-width: 0;
  padding: 0 calc(var(--pad) * .65);
  border-left: 1px solid var(--line-dark);
}
.room-specs > div:first-child { border-left: 0; }
.room-specs dt {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-light-soft);
}
.room-specs dd { font-size: var(--step-0); font-weight: 500; line-height: 1.35; }

/* tarif & action : le point d'arrivée du regard */
.room-foot {
  grid-area: foot;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 1rem; padding: var(--pad); text-align: right;
  border-left: 1px solid var(--line-dark);
}
.room-foot .price {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: var(--step-1); font-weight: 700; line-height: 1.15; letter-spacing: -.015em;
}
.room-foot .price-from {
  margin-bottom: .35rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-light-soft);
}
.room-foot .price small {
  margin-top: .3rem;
  font-size: var(--step--1); font-weight: 500; letter-spacing: .04em;
  color: var(--on-light-soft);
}
.room-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem; justify-content: flex-end;
}
.room-cta {
  display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
  padding: .78em 1.35em; border-radius: var(--radius-pill);
  background: var(--heartwood); color: var(--linen);
  font-size: var(--step--1); font-weight: 600; letter-spacing: .03em;
  transition: background .5s var(--ease-out);
}
.room-cta .arrow { transition: transform .5s var(--ease-out); }
.room-row:hover .room-cta { background: var(--sienne-deep); }
.room-row:hover .room-cta .arrow { transform: translateX(4px); }

/* Visite immersive : action secondaire, mais TOUJOURS présente et lisible
   — elle passe au-dessus du lien étiré de la carte (z-index) pour rester
   cliquable. */
.room-immersive {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
  padding: .7em 1.15em; border-radius: var(--radius-pill);
  border: 1px solid var(--line-dark); background: var(--surface);
  color: var(--on-light); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .02em;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out),
              color .4s var(--ease-out);
}
.room-immersive svg { flex: none; opacity: .7; transition: opacity .4s; }
.room-immersive:hover {
  border-color: var(--accent-lit); color: var(--accent-lit);
  background: rgba(173, 90, 49, .07);
}
.room-immersive:hover svg { opacity: 1; }
.room-immersive:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; }

/* ---- repli tablette : la photo garde sa hauteur, le reste s'empile -- */
@media (max-width: 1180px) {
  .room-row {
    grid-template-columns: 15rem minmax(0, 1fr);
    grid-template-areas:
      "media id"
      "media specs"
      "media foot";
  }
  .room-specs {
    padding: var(--pad); border-left: 0; border-top: 1px solid var(--line-dark);
  }
  .room-specs > div { padding: 0 1.1rem; }
  .room-specs > div:first-child { padding-left: 0; }
  .room-foot {
    flex-direction: row; align-items: center; justify-content: space-between;
    text-align: left; border-left: 0; border-top: 1px solid var(--line-dark);
  }
  .room-foot .price { align-items: flex-start; }
}

/* ---- repli mobile : tout en pile, photo panoramique ---------------- */
@media (max-width: 780px) {
  .room-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "id" "specs" "foot";
  }
  .room-row .media { min-height: 0; aspect-ratio: 16 / 10; }
  .room-row .media::after {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 3px;
  }
  .room-id { padding-bottom: calc(var(--pad) * .8); }
}
@media (max-width: 460px) {
  .room-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0; }
  .room-specs > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .room-foot { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .room-actions { width: 100%; flex-direction: column-reverse; align-items: stretch; }
  .room-cta, .room-immersive { width: 100%; justify-content: center; }
}
/* Entre 460 et 780px la rangée est déjà en pile : les deux actions
   tiennent côte à côte, mais le pied doit leur laisser toute la largeur
   plutôt que de les serrer contre le tarif. */
@media (max-width: 780px) and (min-width: 461px) {
  .room-foot { flex-wrap: wrap; row-gap: 1rem; }
  .room-actions { flex: 1 1 auto; }
}

/* Hébergement pas encore ouvert à la réservation : consultable, mais
   visiblement mis de côté — photo adoucie, ouverture annoncée en pastille. */
.room-row-soon .media img { filter: saturate(.7) brightness(.92); }
.room-row-soon .price { font-size: var(--step-0); font-weight: 600; color: var(--on-light-soft); }
.room-row-soon .room-cta {
  background: transparent; color: var(--accent-lit); border: 1px solid var(--line-dark);
}
.room-row-soon:hover .room-cta { background: transparent; border-color: var(--accent-lit); }
.tag-soon {
  background: rgba(252, 252, 240, .9); border-color: rgba(167, 78, 43, .35);
  color: var(--heartwood-deep); font-weight: 600;
  backdrop-filter: blur(8px); white-space: nowrap;
}
:root[data-theme="dark"] .tag-soon { background: rgba(10, 24, 32, .82); border-color: rgba(224, 161, 94, .4); }

/* ============================================================
   EXPÉRIENCES
   ============================================================ */
.exp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.exp {
  position: relative; border-radius: var(--radius-m); overflow: hidden;
  min-height: 340px; display: flex; align-items: flex-end;
  padding: 1.8rem; isolation: isolate; color: var(--on-dark);
}
.exp .media { position: absolute; inset: 0; z-index: -1; }
.exp .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.7s var(--ease-out); }
.exp:hover .media img { transform: scale(1.08); }
.exp::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,36,48,0) 35%, rgba(11,36,48,.92) 100%);
}
.exp .eyebrow { color: var(--sand); }
.exp h3 { font-size: var(--step-2); font-weight: 400; margin-top: .4em; }
.exp .link-underline { margin-top: 1em; }
.exp-content { position: relative; }
.exp-lg { grid-column: span 7; min-height: 480px; }
.exp-sm { grid-column: span 5; }
.exp-third { grid-column: span 4; min-height: 360px; }
@media (max-width: 860px) {
  .exp-lg, .exp-sm, .exp-third { grid-column: 1 / -1; min-height: 320px; }
}

/* ============================================================
   OFFRES — forfaits (cartes premium + bascule solo / à deux)
   ============================================================ */
.pkg-toggle {
  display: inline-flex; padding: .3rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-dark); background: var(--linen); gap: .2rem;
}
.pkg-toggle button {
  border: 0; background: transparent; padding: .55em 1.3em; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  color: var(--on-light-soft); cursor: pointer; transition: background .3s, color .3s;
}
.pkg-toggle button.active { background: var(--heartwood); color: var(--linen); }

.pkg-carousel { position: relative; }
.packages {
  display: flex; gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding-block: .3rem 1rem;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.packages::-webkit-scrollbar { display: none; }

.package {
  flex: 0 0 min(360px, 82vw); scroll-snap-align: start;
  display: flex; flex-direction: column; border-radius: var(--radius-m);
  border: 1px solid var(--line-dark); background: var(--linen); overflow: hidden;
  transition: border-color .4s, transform .4s var(--ease-out);
}
.package:hover { border-color: var(--heartwood); transform: translateY(-4px); }
.package .media { aspect-ratio: 4/3; overflow: hidden; }
.package .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.package:hover .media img { transform: scale(1.06); }
.package-body { padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.package-body .duration {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .04em;
  color: var(--accent-lit); text-transform: uppercase;
}
.package-body h3 { font-size: var(--step-1); font-weight: 400; color: var(--ink); }
.package-includes { display: flex; flex-direction: column; gap: .5em; }
.package-includes li { display: flex; gap: .6em; align-items: flex-start; color: var(--on-light-soft); font-size: var(--step--1); }
.package-includes li::before { content: "—"; color: var(--accent-lit); flex: none; }
.package-price {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-dark);
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.package-price b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 300; color: var(--ink); }
.package-price small { color: var(--on-light-soft); font-size: var(--step--2); letter-spacing: .06em; text-transform: uppercase; }
.packages[data-mode="duo"] .price-solo,
.packages:not([data-mode="duo"]) .price-duo { display: none; }
.pkg-activities {
  display: flex; flex-wrap: wrap; gap: .6em 1.6em; justify-content: center;
  margin-top: var(--space-m); color: var(--on-light-soft); font-size: var(--step--1);
}
.pkg-activities span::before { content: "✦ "; color: var(--accent); }

.pkg-nav {
  position: absolute; top: 40%; translate: 0 -50%; z-index: 2;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-dark);
  background: var(--surface); display: grid; place-items: center; cursor: pointer;
  transition: border-color .3s, background .3s;
}
.pkg-nav:hover { border-color: var(--heartwood); background: var(--heartwood); color: var(--linen); }
.pkg-nav.prev { left: -1.3rem; }
.pkg-nav.next { right: -1.3rem; }
.pkg-nav[disabled] { opacity: .35; cursor: default; pointer-events: none; }
@media (max-width: 720px) { .pkg-nav { display: none; } }

.pkg-dots { display: flex; justify-content: center; gap: .5rem; margin-top: .4rem; }
.pkg-dots button {
  width: .5rem; height: .5rem; border-radius: 50%; border: 0; padding: 0;
  background: var(--line-dark); cursor: pointer; transition: background .3s, width .3s;
}
.pkg-dots button.active { background: var(--heartwood); width: 1.4rem; border-radius: var(--radius-pill); }

/* ============================================================
   EVENTS — actualités + espaces à louer
   ============================================================ */
.spaces-carousel { padding-block: .4rem 1rem; }
.spaces-carousel .packages {
  gap: 1.4rem;
  padding-block: .6rem 1.2rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.spaces-carousel .package {
  flex: 0 0 min(380px, 84vw);
  background: linear-gradient(145deg, rgba(255,251,243,.985), rgba(245,236,223,.96));
  border: 1px solid rgba(152,112,68,.22);
  box-shadow: 0 24px 60px rgba(11,36,48,.12);
  position: relative;
  overflow: hidden;
}
.spaces-carousel .package::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(202,139,61,.12), transparent 45%, rgba(0,97,143,.08));
  pointer-events: none;
}
.spaces-carousel .package:hover {
  transform: translateY(-8px);
  border-color: rgba(202,139,61,.45);
  box-shadow: 0 30px 80px rgba(11,36,48,.18);
}
.spaces-carousel .package .media {
  aspect-ratio: 5 / 3;
  border-bottom: 1px solid rgba(11,36,48,.08);
}
.spaces-carousel .package .media img { transform: scale(1.01); }
.spaces-carousel .package-body {
  padding: 1.45rem 1.5rem 1.35rem;
  gap: .85rem;
}
.spaces-carousel .package-body .duration {
  display: inline-flex; align-items: center; width: fit-content;
  padding: .45rem .8rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(202,139,61,.24);
  background: rgba(202,139,61,.08);
  color: var(--heartwood);
}
.spaces-carousel .package-body h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}
.spaces-carousel .package-body p {
  line-height: 1.75;
  color: var(--on-light-soft);
}
.spaces-carousel .package-price {
  padding-top: 1.05rem;
  border-top: 1px solid rgba(11,36,48,.12);
}
.spaces-carousel .package-price .link-underline {
  color: var(--heartwood);
  font-weight: 700;
}
.spaces-carousel .pkg-nav {
  width: 2.9rem; height: 2.9rem;
  background: rgba(255,249,240,.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(11,36,48,.14);
}
.spaces-carousel .pkg-nav:hover {
  background: linear-gradient(135deg, var(--heartwood), var(--accent-lit));
  color: var(--linen);
}
.spaces-carousel .pkg-dots button.active {
  width: 1.6rem;
  background: linear-gradient(90deg, var(--heartwood), var(--accent-lit));
}

.event-list { display: flex; flex-direction: column; gap: 1.2rem; }
.event-item {
  display: grid; grid-template-columns: 140px 1fr; gap: 1.6rem; align-items: center;
  padding: 1.2rem; border: 1px solid var(--line-dark); border-radius: var(--radius-m); background: var(--linen);
}
.event-item:has(.media) { grid-template-columns: 140px 1fr; }
.event-item:not(:has(.media)) { grid-template-columns: 1fr; }
.event-item .media { aspect-ratio: 1; border-radius: var(--radius-s); overflow: hidden; }
.event-item .media img { width: 100%; height: 100%; object-fit: cover; }
.event-item .date {
  display: inline-block; font-size: var(--step--1); font-weight: 600; letter-spacing: .04em;
  color: var(--accent-lit); text-transform: uppercase; margin-bottom: .3em;
}
.event-item h3 { font-size: var(--step-1); font-weight: 400; margin-bottom: .3em; }
.event-item p { color: var(--on-light-soft); font-size: var(--step-0); }
@media (max-width: 560px) {
  .event-item, .event-item:has(.media) { grid-template-columns: 1fr; }
  .event-item .media { aspect-ratio: 16/9; }
}

.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 980px) { .spaces-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .spaces-grid { grid-template-columns: 1fr; } }

/* ============================================================
   AVIS
   ============================================================ */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
.review {
  padding: var(--space-l); border-radius: var(--radius-m);
  background: var(--surface); border: 1px solid var(--line-dark);
  display: flex; flex-direction: column; gap: 1.4rem;
}
.review .stars { color: var(--star); letter-spacing: .2em; font-size: var(--step-0); }
.review blockquote { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; font-weight: 300; }
.review .who { display: flex; align-items: center; gap: .9rem; margin-top: auto; }
.review .who .av {
  width: 40px; height: 40px; border-radius: 50%; background: var(--heartwood);
  display: grid; place-items: center; font-family: var(--font-display); color: var(--linen);
}
.review .who b { display: block; font-family: var(--font-body); font-weight: 600; }
.review .who span { font-size: var(--step--1); color: var(--on-light-soft); }

/* ============================================================
   BANDEAU CTA
   ============================================================ */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  padding-block: var(--space-3xl); isolation: isolate;
  color: var(--on-dark);
}
.cta-band .media { position: absolute; inset: 0; z-index: -2; }
.cta-band .media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,36,48,.75), rgba(11,36,48,.9));
}
.cta-band h2 { font-size: var(--step-5); font-weight: 300; margin-bottom: .4em; }
.cta-band h2 em { color: var(--sand); }
.cta-band p { color: var(--on-dark-soft); max-width: 52ch; margin: 0 auto var(--space-m); }
.cta-band .hero-actions { justify-content: center; }
.cta-band .fineprint { margin-top: var(--space-m); font-size: var(--step--1); color: var(--on-dark-soft); letter-spacing: .04em; }

/* ============================================================
   CONTACT / LOCALISATION
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-l); } }
.contact-block h4 {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-lit); margin-bottom: .8em;
}
.contact-block p, .contact-block a { color: var(--on-light-soft); line-height: 1.7; }
.contact-block a:hover { color: var(--accent-lit); }
.contact-block + .contact-block { margin-top: var(--space-m); }
.map-frame {
  border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line-dark);
  aspect-ratio: 4/3; width: 100%;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.3) contrast(1.05); }

/* formulaire */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .5em; }
.field label { font-size: var(--step--1); font-weight: 600; letter-spacing: .04em; color: var(--on-light-soft); }
.field input, .field textarea, .field select {
  background: var(--surface); border: 1px solid var(--line-dark); border-radius: var(--radius-s);
  padding: .9em 1em; color: var(--ink); transition: border-color .3s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent-lit); outline: none; }
.field textarea { resize: vertical; min-height: 130px; }

/* ============================================================
   EN-TÊTE DE PAGE INTÉRIEURE
   ============================================================ */
.breadcrumb { display: flex; gap: .6em; font-size: var(--step--1); color: var(--on-dark-soft); margin-bottom: var(--space-s); }
.breadcrumb a:hover { color: var(--accent-lit); }

/* ============================================================
   DÉTAIL SUITE — thème dynamique par couleur de bois (--suite-accent)
   ============================================================ */
.suite-accent-bar { height: 7px; width: 100%; background: var(--heartwood); }
.suite-badge {
  display: inline-flex; align-items: center; padding: .45em 1.1em; border-radius: var(--radius-pill);
  background: var(--heartwood); color: #fff; font-weight: 600; letter-spacing: .03em;
  text-transform: none; font-family: var(--font-body); font-size: var(--step--1); font-style: normal;
}
.eyebrow:has(.suite-badge)::before { display: none; }
.suite-meta { display: flex; flex-wrap: wrap; gap: .7em 1.6em; margin-block: .3em 1.1em; color: var(--on-light-soft); font-size: var(--step--1); }
.suite-meta span { display: inline-flex; align-items: center; gap: .55em; }
.suite-meta span::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: var(--suite-accent, var(--heartwood)); flex: none; }
.suite-amenities { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.suite-price-block {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
  padding-top: 1.3rem; border-top: 1px solid var(--line-dark);
}
.suite-price-block b { font-family: var(--font-display); font-size: var(--step-3); font-weight: 300; color: var(--ink); }
.suite-price-block small { font-size: var(--step--1); color: var(--on-light-soft); text-transform: uppercase; letter-spacing: .06em; }

.booking-widget { background: var(--surface); border: 1px solid var(--line-dark); border-radius: var(--radius-m); padding: var(--space-l); }
.booking-quote { font-weight: 600; color: var(--ink); margin-block: -.4rem 1.2rem; min-height: 1.4em; }
.booking-quote .q-row { display: flex; justify-content: space-between; gap: 1rem; font-weight: 500; padding: .15rem 0; }
.booking-quote .q-discount { color: var(--foliage, #4a6b3a); }
.booking-quote .q-total { font-weight: 700; border-top: 1px solid var(--line-dark); margin-top: .3rem; padding-top: .45rem; }
.booking-status { padding: .8em 1em; border-radius: var(--radius-s); background: var(--parchment); margin-bottom: 1.2rem; font-size: var(--step--1); }
.booking-widget button[type="submit"][disabled] { opacity: .6; pointer-events: none; }

/* ============================================================
   GALERIE (masonry)
   ============================================================ */
.gallery { columns: 3; column-gap: var(--gutter); }
@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 560px) { .gallery { columns: 1; } }
.gallery figure {
  break-inside: avoid; margin-bottom: var(--gutter); border-radius: var(--radius-m);
  overflow: hidden; position: relative; cursor: pointer;
}
.gallery img { width: 100%; transition: transform 1.5s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem 1.2rem .9rem;
  background: linear-gradient(transparent, rgba(11,36,48,.85));
  color: var(--on-dark);
  font-size: var(--step--1); letter-spacing: .04em; opacity: 0; transform: translateY(10px);
  transition: opacity .4s, transform .4s;
}
.gallery figure:hover figcaption { opacity: 1; transform: none; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 500; background: rgba(6,20,27,.94);
  display: grid; place-items: center; padding: var(--gutter);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 84vh; border-radius: var(--radius-s); box-shadow: var(--shadow-lift); }
.lightbox-close { position: absolute; top: 1.6rem; right: 1.8rem; font-size: 2rem; color: var(--on-dark); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.4rem; color: var(--on-dark); padding: 1rem; opacity: .7; transition: opacity .3s; }
.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { left: 1rem; } .lightbox-next { right: 1rem; }

/* ============================================================
   DÉTAIL SUITE
   ============================================================ */
.detail-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-xl); align-items: center; }
@media (max-width: 900px) { .detail-hero { grid-template-columns: 1fr; } }
.detail-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; height: 560px; }
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-m); }
.detail-gallery img:first-child { grid-row: 1 / 3; }
@media (max-width: 620px) { .detail-gallery { height: 380px; } }
.detail-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-block: var(--space-l); }
@media (max-width: 620px) { .detail-facts { grid-template-columns: repeat(2, 1fr); } }
.fact { border-top: 1px solid var(--line-dark); padding-top: 1rem; }
.fact b { display: block; font-family: var(--font-display); font-size: var(--step-2); font-weight: 300; color: var(--ink); }
.fact span { font-size: var(--step--1); color: var(--on-light-soft); letter-spacing: .1em; text-transform: uppercase; }
.amenities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem; }
@media (max-width: 620px) { .amenities { grid-template-columns: 1fr 1fr; } }
.amenities li { display: flex; align-items: center; gap: .7em; color: var(--on-light-soft); font-size: var(--step-0); }
.amenities li::before { content: "—"; color: var(--accent-lit); }
.booking-aside {
  position: sticky; top: 100px; background: var(--surface);
  border: 1px solid var(--line-dark); border-radius: var(--radius-m); padding: var(--space-m);
}
.booking-aside .price-lg { font-family: var(--font-display); font-size: var(--step-4); font-weight: 300; color: var(--ink); }
.booking-aside .price-lg small { font-size: .3em; color: var(--on-light-soft); letter-spacing: .1em; }

/* ============================================================
   VISITE IMMERSIVE (Matterport + vidéos)
   ============================================================ */
.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 980px) { .tour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tour-grid { grid-template-columns: 1fr; } }
.tour-empty {
  grid-column: 1 / -1; text-align: center; color: var(--on-light-soft);
  padding: var(--space-xl) var(--space-m); border: 1px dashed var(--line-dark);
  border-radius: var(--radius-m); font-size: var(--step-0);
}
.tour-card {
  position: relative; display: flex; flex-direction: column;
  width: 100%; min-height: 340px; border: 0; padding: 0; margin: 0;
  font-family: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius-m); overflow: hidden;
  background: var(--surface); color: var(--on-dark); isolation: isolate;
}
/* ---- PÔLE ÉQUESTRE : prestations du club --------------------
   Grille auto-ajustable (4 cartes, dont une avec sous-niveaux) : pas de
   media query à maintenir, les cartes se replient d'elles-mêmes. */
/* Les promenades portent trois formats décrits : sur des colonnes de
   230px leurs descriptions se lisaient en escalier, un mot par ligne. */
.equestre-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: var(--gutter); }
.equestre-grid .offer {
  background: var(--linen); border: 1px solid var(--line-dark);
  border-radius: var(--radius-m); padding: var(--space-l);
  display: flex; flex-direction: column; gap: 1rem;
}
.equestre-grid .offer .badge {
  font-family: var(--font-display); font-size: var(--step-3); color: var(--heartwood-deep);
}
.equestre-grid .offer h3 { font-size: var(--step-1); font-weight: 400; }
.equestre-grid .offer p { color: var(--on-light-soft); font-size: var(--step-0); }
.equestre-levels { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
/* Chaque format porte maintenant une ligne de description sous son titre :
   l'intitulé et la distance restent sur la même ligne (grille en deux
   colonnes), le texte passe dessous sur toute la largeur. */
.equestre-levels li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: .2rem 1rem;
  padding-top: .6rem; border-top: 1px solid var(--line-dark);
  font-size: var(--step--1);
}
.equestre-levels li b { font-weight: 600; color: var(--on-light); }
.equestre-levels li span { color: var(--on-light-soft); white-space: nowrap; }
.equestre-levels li em {
  grid-column: 1 / -1; font-style: normal;
  font-size: .92em; line-height: 1.5; color: var(--on-light-soft);
  text-wrap: pretty;
}
.equestre-note {
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line-dark);
  font-size: .9em; color: var(--on-light-soft);
}

/* Activité sans photo (ou sans page dédiée) : la carte reste présentable
   grâce à un dégradé de secours, et perd le curseur « cliquable ». */
.tour-card-plain { cursor: default; background: linear-gradient(155deg, var(--atlantide), var(--atlantide-deep)); }
.tour-card-plain::after { background: linear-gradient(180deg, rgba(11,36,48,0) 45%, rgba(11,36,48,.55) 100%); }
.tour-card .media { position: absolute; inset: 0; z-index: -1; }
.tour-card .media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-out); filter: brightness(.78);
}
.tour-card:hover .media img { transform: scale(1.07); }
.tour-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,36,48,.1) 35%, rgba(11,36,48,.92) 100%);
}
.tour-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: rgba(252,252,240,.16); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.35);
  display: grid; place-items: center; font-size: 1.4rem;
  transition: transform .4s var(--ease-out), background .4s;
}
.tour-card:hover .tour-play { transform: translate(-50%, -50%) scale(1.1); background: rgba(202,139,61,.85); }
.tour-body { margin-top: auto; padding: 1.6rem; display: flex; flex-direction: column; gap: .6em; }
.tour-title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.tour-desc { color: var(--on-dark-soft); font-size: var(--step--1); }

/* modale plein écran pour l'embed Matterport / vidéo */
.embed-modal {
  position: fixed; inset: 0; z-index: 500; background: rgba(6,20,27,.96);
  display: grid; place-items: center; padding: var(--gutter);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.embed-modal.open { opacity: 1; pointer-events: auto; }
.embed-modal-frame {
  width: min(1100px, 92vw); aspect-ratio: 16/9;
  border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-lift);
}
/* TikTok, Reels, Shorts : une vidéo verticale dans un cadre 16/9 se
   retrouve réduite à une colonne minuscule bordée de deux bandes noires.
   Le cadre bascule en 9/16 et se cale sur la hauteur de la fenêtre. */
.embed-modal-frame.portrait {
  width: auto; height: min(86vh, 900px); aspect-ratio: 9/16;
  max-width: 92vw;
}
.embed-modal-frame iframe, .embed-modal-frame video {
  width: 100%; height: 100%; border: 0; display: block; background: #000;
}
/* URL qu'aucun lecteur ne sait intégrer : on l'assume et on propose le
   lien, plutôt que d'ouvrir un cadre noir sans explication. */
.embed-fallback {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-m); padding: var(--space-l); text-align: center;
  background: var(--atlantide-deep); color: var(--on-dark);
}
.embed-fallback p { color: var(--on-dark-soft); font-size: var(--step-0); max-width: 34ch; }

/* ============================================================
   MENU RESTAURANT
   ============================================================ */
.menu-cat { margin-bottom: var(--space-xl); }
.menu-cat h3 { font-size: var(--step-3); font-weight: 300; margin-bottom: var(--space-m); color: var(--ink); }
.on-light .menu-item { border-color: var(--line-dark); }
.menu-item {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem;
  padding-block: 1.2rem; border-top: 1px solid var(--line-dark); align-items: baseline;
}
.menu-item .name { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.menu-item .desc { color: var(--on-light-soft); font-size: var(--step--1); margin-top: .2em; grid-column: 1 / -1; }
.menu-item .price { font-family: var(--font-display); color: var(--heartwood-deep); font-size: var(--step-1); white-space: nowrap; }

/* ---- CARTE DU RESTAURANT ------------------------------------ */
.carte-head { align-items: flex-end; }
.carte-print { white-space: nowrap; }
.carte-text { color: var(--on-light-soft); font-size: var(--step-0); line-height: 1.7; }
.carte-note {
  color: var(--on-light-soft); font-size: var(--step--1);
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-dark);
  font-style: italic;
}
.carte-footnote { color: var(--on-light-soft); font-size: var(--step--1); margin-top: var(--space-m); }

/* ---- IMPRESSION DE LA PAGE ------------------------------------
   « Télécharger la carte » ne passe PLUS par ici : le bouton pointe
   vers /content/carte.pdf, fabriqué par l'admin (admin/lib/cartePdf.js)
   à chaque enregistrement. Ce bloc ne sert donc plus qu'au visiteur
   qui imprime la page elle-même (Ctrl+P) : on lui donne la carte
   seule, en noir sur blanc, sans la nav ni le pied de page. */
@media print {
  /* Tout ce qui n'est pas la carte disparaît. Nav, footer, voile, barre de
     préférences et pop-ups sont tous des enfants directs de <body>. */
  body > *:not(main),
  main > section:not(#carte),
  .carte-print { display: none !important; }
  body::after { display: none !important; } /* grain filmique */

  body { background: #fff; color: #000; }
  main, #carte, #carte .wrap { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  #carte { break-inside: auto; }

  .menu-cat { break-inside: avoid; margin-bottom: 1.6rem; }
  .menu-cat h3 { font-size: 1.25rem; margin-bottom: .5rem; color: #000; }
  .menu-item { padding-block: .35rem; border-color: #ddd; }
  .menu-item .name { font-size: 1rem; color: #000; }
  .menu-item .price { font-size: 1rem; color: #000; }
  .menu-item .desc { font-size: .8rem; color: #444; }
  .carte-note, .carte-text, .carte-footnote { color: #444; font-size: .8rem; }

  #carte-title { font-size: 1.9rem; color: #000; }
  .eyebrow, .lede { color: #444 !important; }

  @page { margin: 14mm; }
}

/* ============================================================
   FINITION PREMIUM — retouches additives, sans collision
   ============================================================ */
/* Chiffres alignés & tabulaires pour les prix et statistiques */
.room-row .price,
.hero-stats .stat b,
.menu-item .price,
.essence-price { font-variant-numeric: tabular-nums; }

/* Lettrage un peu plus soigné sur les grands titres serif */
.hero h1, .page-hero h1 { text-wrap: balance; }

/* ---- Hero compact (pages fonctionnelles : espace client…) --------- */
.page-hero.page-hero-compact { min-height: 62svh; padding-bottom: var(--space-l); }
@media (max-width: 640px) { .page-hero.page-hero-compact { min-height: 56svh; } }

/* ---- Barre de défilement discrète, teinte maison ------------------ */
html { scrollbar-width: thin; scrollbar-color: var(--atlantide-pale) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--atlantide-pale); border-radius: 999px;
  border: 3px solid var(--bg); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--atlantide); }

/* ---- Anneau de focus doux sur les champs (au-delà du border-color) - */
.field input:focus,
.field textarea:focus,
.field select:focus { box-shadow: 0 0 0 3px rgba(0, 97, 143, .14); }

/* ---- Boutons pleins : profondeur feutrée + levée au survol -------- */
.btn:not(.btn-ghost) { box-shadow: 0 16px 34px -18px rgba(124, 59, 30, .55); }
.btn:not(.btn-ghost):hover { transform: translateY(-2px); }
.btn:not(.btn-ghost):active { transform: translateY(0); }

/* ---- Cartes « claires » : élévation cohérente au survol ----------- */
.review, .event-item, .exp, .figure {
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .6s var(--ease-out);
}
.review:hover, .event-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(202, 139, 61, .4);
}
.exp:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

/* ---- Carte : couleur qui se révèle au survol ---------------------- */
.map-frame iframe { transition: filter .8s var(--ease-out); }
.map-frame:hover iframe { filter: grayscale(0) contrast(1.05); }

/* ---- Avis : guillemet ouvrant, détail éditorial ------------------- */
.review blockquote { position: relative; }
.review blockquote::before {
  content: "\201C"; position: absolute; top: -.55em; left: -.12em;
  font-family: var(--font-display); font-size: 2.4em; line-height: 1;
  color: var(--heartwood-lit); opacity: .35; pointer-events: none;
}

/* ---- Filet doré sous les titres de section « on-light » ----------- */
.section-head h2 { position: relative; }

/* ---- Puces/tags : légère réaction au survol ----------------------- */
.suite-amenities .tag { transition: border-color .4s var(--ease-out), color .4s var(--ease-out), background .4s var(--ease-out); }

/* ---- Images : rendu un peu plus net au survol des cartes cliquables */
.room-row:hover .media img,
.package:hover .media img,
.exp:hover .media img { filter: saturate(1.12) contrast(1.06) brightness(1); }

/* ---- Respect du mouvement réduit --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .room-row, .review, .event-item, .exp, .figure, .btn:not(.btn-ghost) { transition: none; }
  .room-row:hover, .review:hover, .event-item:hover, .exp:hover,
  .btn:not(.btn-ghost):hover { transform: none; }
}

/* ============================================================
   DÉCOUVRIR LE TOGO — page destination (tourisme régional)
   Le fil conducteur chromatique de cette page est le VERT FORÊT
   (le reste du site est mené par l'Atlantide) : même charte,
   autre respiration. Tout ce qui peut être réutilisé l'est
   (exp-grid, packages, cta-band, marquee) ; ce bloc n'ajoute
   que ce qui n'existait pas.
   ============================================================ */
.tg { --thread: var(--foret); }
:root[data-theme="dark"] .tg { --thread: var(--foliage-lit); }
.tg .eyebrow { color: var(--thread); }

/* ---- Numérotation éditoriale des chapitres ----------------------- */
.tg-chapter { display: flex; align-items: baseline; gap: 1.1em; }
.tg-chapter .tg-num {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .18em; color: var(--thread); opacity: .75; flex: none;
}

/* ---- Manifeste + chiffres clés ----------------------------------- */
.tg-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);
  margin-top: var(--space-l);
}
.tg-facts .fact b { color: var(--thread); }
@media (max-width: 720px) { .tg-facts { grid-template-columns: repeat(2, 1fr); } }

/* ---- LA BOUSSOLE : l'image change au survol de la ligne ---------- */
.tg-compass { display: grid; grid-template-columns: .92fr 1.08fr; gap: var(--gutter); align-items: start; }
@media (max-width: 900px) { .tg-compass { grid-template-columns: 1fr; } }

.tg-compass-visual {
  position: sticky; top: calc(var(--space-l) + 3rem);
  aspect-ratio: 4 / 5; border-radius: var(--radius-m); overflow: hidden;
  background: var(--bg-alt); box-shadow: var(--shadow-soft);
}
.tg-compass-visual img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .9s var(--ease-out), transform 2.4s var(--ease-out);
}
.tg-compass-visual img.is-active { opacity: 1; transform: scale(1); }
.tg-compass-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,36,48,0) 55%, rgba(11,36,48,.55) 100%);
}
.tg-compass-caption {
  position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.2rem; z-index: 2;
  color: var(--on-dark); font-size: var(--step--1); letter-spacing: .14em;
  text-transform: uppercase; opacity: .9;
}
@media (max-width: 900px) { .tg-compass-visual { display: none; } }

.tg-compass-list { border-top: 1px solid var(--line-dark); }
.tg-row {
  display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center;
  gap: 1rem; padding: 1.35rem .4rem; width: 100%; text-align: left;
  border-bottom: 1px solid var(--line-dark); position: relative;
  transition: padding-inline-start .5s var(--ease-out), color .4s;
}
.tg-row::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--thread); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-inout);
}
.tg-row:hover, .tg-row.is-active { padding-inline-start: 1rem; }
.tg-row:hover::before, .tg-row.is-active::before, .tg-row:focus-visible::before { transform: scaleX(1); }
.tg-row .idx {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .1em;
  color: var(--thread); opacity: .6;
}
.tg-row .who { min-width: 0; }
.tg-row .who b {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-1); color: var(--ink); letter-spacing: -.01em;
}
.tg-row .who span { font-size: var(--step--1); color: var(--on-light-soft); }
.tg-row .far {
  display: flex; align-items: baseline; gap: .9rem; flex: none;
  font-size: var(--step--1); color: var(--on-light-soft); letter-spacing: .04em;
}
.tg-row .far em {
  font-style: normal; font-weight: 600; color: var(--thread);
  font-variant-numeric: tabular-nums;
}
.tg-row .thumb { display: none; }
@media (max-width: 900px) {
  .tg-row { grid-template-columns: 4.6rem 1fr; grid-template-areas: "thumb who" "thumb far"; row-gap: .3rem; }
  .tg-row .idx { display: none; }
  .tg-row .thumb { display: block; grid-area: thumb; }
  .tg-row .thumb img { width: 4.6rem; height: 4.6rem; object-fit: cover; border-radius: var(--radius-s); }
  .tg-row .who { grid-area: who; }
  .tg-row .far { grid-area: far; }
}

/* ============================================================
   03 · LES INCONTOURNABLES — séquence plein écran en fondu enchaîné
   Les panneaux sont superposés dans une scène collante ; opacité, échelle
   d'image et position du texte sont pilotées au scroll par
   js/tourisme.js → initSequence(). Aucune transition CSS sur ces
   propriétés : la valeur vient du scroll, une transition la ferait traîner.
   .tg-pin.is-static = repli en panneaux empilés (mobile, motion réduit).
   ============================================================ */
.tg-pin { position: relative; }
.tg-pin-stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--atlantide-deep);
}

.tg-panels { position: absolute; inset: 0; }

.tg-panel {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  color: var(--on-dark);
  opacity: 0; visibility: hidden;
  will-change: opacity;
}
/* Filet de sécurité : si initSequence() ne prend pas la main, le premier
   lieu reste lisible plutôt que d'afficher une scène vide. */
.tg-panel:first-child { opacity: 1; visibility: visible; }
.tg-panel-media { position: absolute; inset: 0; overflow: hidden; }
/* Pas de will-change ici ni sur le texte : le panneau est déjà promu pour
   son opacité, ses calques internes sont composités avec lui. En promouvoir
   dix-huit de plus (six images plein écran) coûterait plus de mémoire GPU
   que ça ne ferait gagner d'images par seconde. */
.tg-panel-media img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Voile de lecture : dense en bas, transparent en haut. */
.tg-panel-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,36,48,.55) 0%, rgba(11,36,48,0) 32%),
    linear-gradient(0deg, rgba(11,36,48,.94) 6%, rgba(11,36,48,.35) 46%, rgba(11,36,48,0) 72%);
}

.tg-panel-inner { position: relative; width: 100%; padding-bottom: clamp(6rem, 16svh, 10rem); }
.tg-panel-content { max-width: 62ch; }
.tg-panel-content .eyebrow { color: var(--sand); margin-top: 1.1em; }
.tg-panel-content h3 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1.02;
  margin-top: .12em; text-wrap: balance;
}
.tg-panel-desc {
  color: var(--on-dark-soft); margin-top: 1em;
  font-size: var(--step-0); max-width: 52ch;
}
/* Pas de backdrop-filter ici : l'arrière-plan devrait être re-flouté à
   chaque image, sur six panneaux plein écran en fondu. Un fond opaque
   rend exactement le même effet pour un coût nul. */
.tg-panel .tg-badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark); background: rgb(40 96 68);
  padding: .35em 1em; border-radius: var(--radius-pill);
}
.tg-panel .tg-when {
  display: block; margin-top: 1.2em; font-size: var(--step--1);
  color: var(--on-dark-soft); letter-spacing: .06em;
}

/* Repère de progression, fixe au-dessus des panneaux */
.tg-stage-ui {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 200;
  padding-bottom: clamp(1.6rem, 4svh, 2.6rem); pointer-events: none;
}
.tg-stage-ui-inner { display: flex; align-items: center; gap: 1.4rem; }
.tg-segments { display: flex; gap: .5rem; flex: 1; }
.tg-seg {
  flex: 1; height: 2px; background: rgba(251,248,240,.22); overflow: hidden;
}
.tg-seg i {
  display: block; height: 100%; background: var(--sand);
  transform: scaleX(0); transform-origin: left;
}
.tg-counter {
  font-size: var(--step--1); letter-spacing: .16em; color: var(--on-dark-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- Repli : panneaux empilés, défilement normal ----------------- */
.tg-pin.is-static { height: auto !important; }
.tg-pin.is-static .tg-pin-stage {
  position: static; height: auto; overflow: visible; background: none;
}
.tg-pin.is-static .tg-panels { position: static; }
.tg-pin.is-static .tg-panel {
  position: relative; inset: auto;
  min-height: 78svh;
  opacity: 1 !important; visibility: visible !important;
  transform: none !important;
  will-change: auto;   /* rien n'est animé ici : pas de calque composite */
}
.tg-pin.is-static .tg-panel + .tg-panel { margin-top: 2px; }
.tg-pin.is-static .tg-panel-media img { transform: none !important; }
.tg-pin.is-static .tg-panel-content {
  transform: none !important; opacity: 1 !important;
}
.tg-pin.is-static .tg-panel-inner { padding-block: clamp(3rem, 10svh, 5rem); }
.tg-pin.is-static .tg-stage-ui { display: none; }

/* ============================================================
   04 · ITINÉRAIRES — rosace de palmes
   Roue autonome : elle tourne d'elle-même, en continu, sans figer la page
   (aucun sticky ici — la section défile normalement). Rotation, échelle et
   opacité viennent de js/tourisme.js → initWheel() ; pas de transition CSS
   dessus, la valeur étant recalculée à chaque image.
   .tg-wheel.is-static = repli en cartes empilées (mobile, motion réduit).
   ============================================================ */
.tg-wheel {
  --taille: min(78vmin, 660px);
  --rayon: calc(var(--taille) * 0.405);
  position: relative;
  margin: var(--space-l) auto 0;
  width: var(--taille);
  display: grid; place-items: center;
}
.tg-wheel-disc {
  grid-area: 1 / 1;
  position: relative;
  width: var(--taille); height: var(--taille);
}

/* --- La rosace de palmes --- */
.tg-fronds { position: absolute; inset: 0; pointer-events: none; }
.tg-fronds svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tg-fronds-a, .tg-fronds-b { transform-origin: 200px 200px; }
.tg-frond { fill: var(--foret); opacity: .10; }
.tg-frond-court { fill: var(--foret-lit); opacity: .08; }

.tg-wheel-ring {
  position: absolute; inset: 9.5%;
  border: 1px solid var(--line-dark); border-radius: 50%;
  pointer-events: none;
}
/* Repère fixe : il désigne l'itinéraire en cours de lecture. */
.tg-wheel-pointer {
  position: absolute; top: calc(9.5% - 15px); left: 50%;
  width: 1px; height: 26px; margin-left: -.5px;
  background: linear-gradient(var(--accent-lit), transparent);
  pointer-events: none;
}
.tg-wheel-pointer::before {
  content: ""; position: absolute; top: -4px; left: -3.5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent-lit);
}

/* --- Les médaillons sur la jante --- */
.tg-wheel-items { position: absolute; inset: 0; }
.tg-wheel-item {
  position: absolute; top: 50%; left: 50%;
  width: 7rem; margin: -3.5rem 0 0 -3.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--on-light);
}
.tg-wheel-thumb {
  width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line-dark); background: var(--surface);
  box-shadow: 0 6px 22px rgba(23,38,44,.10);
}
.tg-wheel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-wheel-label {
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-light-soft); white-space: nowrap;
}
.tg-wheel-item:focus-visible .tg-wheel-thumb { outline: 2px solid var(--accent-lit); outline-offset: 3px; }

/* --- Le détail, immobile au centre --- */
.tg-wheel-center {
  grid-area: 1 / 1;
  position: relative; z-index: 2;
  width: min(42ch, calc(var(--taille) * 0.62));
  display: grid; place-items: center;
}
.tg-itin {
  grid-area: 1 / 1; text-align: center;
  opacity: 0; visibility: hidden; will-change: opacity;
}
.tg-itin:first-child { opacity: 1; visibility: visible; }
.tg-itin-thumb { display: none; }
.tg-itin .duration {
  display: inline-block; font-size: var(--step--1); letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-lit);
}
.tg-itin h3 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08;
  margin-top: .25em; text-wrap: balance;
}
.tg-itin-desc {
  color: var(--on-light-soft); font-size: var(--step--1);
  margin: .7em auto 0; max-width: 38ch;
}
.tg-itin-etapes {
  margin-top: 1.1em; display: flex; flex-direction: column; gap: .45rem;
  font-size: var(--step--1); color: var(--on-light);
}
.tg-itin-etapes li { padding-top: .45rem; border-top: 1px solid var(--line-dark); }
.tg-itin-foot {
  margin-top: 1.3em; display: flex; flex-direction: column;
  align-items: center; gap: .45rem;
}
.tg-itin-foot small { color: var(--on-light-soft); font-size: .78rem; }

/* --- Commande de pause : obligatoire dès qu'un mouvement dure et se répète --- */
.tg-wheel-controls { display: flex; justify-content: center; margin-top: var(--space-m); }
.tg-wheel-toggle {
  display: inline-flex; align-items: center; gap: .6em;
  background: none; border: 1px solid var(--line-dark); border-radius: var(--radius-pill);
  padding: .5em 1.2em; font: inherit; font-size: var(--step--1);
  color: var(--on-light-soft); cursor: pointer;
  transition: border-color .4s var(--ease-out), color .4s var(--ease-out);
}
.tg-wheel-toggle:hover { border-color: var(--accent-lit); color: var(--on-light); }
/* Deux barres = pause ; triangle = reprendre. */
.tg-wheel-toggle .ic {
  width: 9px; height: 11px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 3px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 3px 100% no-repeat;
}
.tg-wheel-toggle.is-paused .ic {
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---- Repli : cartes empilées, aucune rotation -------------------- */
.tg-wheel.is-static {
  --taille: auto;
  width: 100%; display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tg-wheel.is-static .tg-wheel-disc { display: none; }
.tg-wheel.is-static .tg-wheel-center {
  grid-area: auto; grid-column: 1 / -1;
  width: 100%; display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tg-wheel.is-static .tg-itin {
  grid-area: auto; text-align: left;
  opacity: 1 !important; visibility: visible !important; will-change: auto;
  border: 1px solid var(--line-dark); border-radius: var(--radius-m);
  background: var(--surface); padding: var(--space-m); overflow: hidden;
}
.tg-wheel.is-static .tg-itin-thumb {
  display: block; margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) var(--space-m);
  height: 190px;
}
.tg-wheel.is-static .tg-itin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-wheel.is-static .tg-itin-desc { margin-inline: 0; }
.tg-wheel.is-static .tg-itin-foot { align-items: flex-start; }
.tg-wheel.is-static ' .tg-wheel-controls { display: none; }

/* ---- Les grands tableaux : ruban de tags sur les cartes exp ------ */
.tg .exp .tg-badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark); background: rgba(46,111,77,.75);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: .35em 1em; border-radius: var(--radius-pill);
  position: absolute; top: 1.2rem; left: 1.2rem; z-index: 2;
}
.tg .exp .tg-when {
  display: block; margin-top: .8em; font-size: var(--step--1);
  color: var(--on-dark-soft); letter-spacing: .06em;
}

/* ---- Saisons : quatre fenêtres sur l'année ----------------------- */
.tg-seasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
@media (max-width: 980px) { .tg-seasons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tg-seasons { grid-template-columns: 1fr; } }
.tg-season {
  border: 1px solid var(--line-dark); border-radius: var(--radius-m);
  background: var(--surface); padding: 1.6rem;
  display: flex; flex-direction: column; gap: .7rem;
  transition: border-color .45s var(--ease-out), transform .45s var(--ease-out);
}
.tg-season:hover { border-color: var(--thread); transform: translateY(-4px); }
.tg-season .months {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--thread);
}
.tg-season h3 { font-size: var(--step-1); font-weight: 400; color: var(--ink); }
.tg-season p { color: var(--on-light-soft); font-size: var(--step--1); line-height: 1.7; }
.tg-season .gauge { display: flex; gap: .28rem; margin-top: auto; padding-top: 1rem; }
.tg-season .gauge i {
  flex: 1; height: 3px; border-radius: 3px; background: var(--line-dark);
}
.tg-season .gauge i.on { background: var(--thread); }
.tg-season .gauge-label {
  font-size: var(--step--1); color: var(--on-light-soft);
  letter-spacing: .1em; text-transform: uppercase;
}

/* ---- Ambiances de saison ----------------------------------------
   Chaque tuile porte l'atmosphère décrite par son texte : la brume sèche de
   l'harmattan, la pluie fine, la lumière tamisée, la chaleur des récoltes.
   Tout est en dégradés CSS animés en transform — aucune image à charger, et
   des animations que le compositeur gère seul.
   Les couleurs sont passées en triplets RVB pour pouvoir moduler l'alpha. */
.tg-season { position: relative; isolation: isolate; overflow: hidden; }
.tg-amb {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; border-radius: inherit; overflow: hidden;
}
.tg-amb i { position: absolute; display: block; }
/* Sur fond sombre les lavis doivent être un peu plus francs pour exister. */
:root[data-theme="dark"] .tg-amb { opacity: 1.35; }

/* 1 · Saison sèche — soleil haut et brume d'harmattan qui dérive */
.tg-season--seche { --amb: 202 139 61; }                 /* ocre */
.tg-season--seche .tg-amb {
  background: radial-gradient(120% 78% at 88% -12%, rgb(var(--amb) / .22), transparent 62%);
}
.tg-season--seche .amb-a,
.tg-season--seche .amb-b {
  left: -40%; width: 180%; height: 30%;
  background: linear-gradient(90deg, transparent, rgb(var(--amb) / .17), transparent);
  animation: amb-brume 26s ease-in-out infinite alternate;
}
.tg-season--seche .amb-a { top: 26%; }
.tg-season--seche .amb-b { top: 56%; animation-duration: 38s; animation-delay: -9s; animation-direction: alternate-reverse; }
.tg-season--seche .amb-drift { display: none; }
@keyframes amb-brume { from { transform: translate3d(-18%, 0, 0); } to { transform: translate3d(18%, 0, 0); } }

/* 2 · Grandes pluies — averse fine et oblique.
   La trame est verticale et le calque porte une rotation fixe : la boucle se
   fait alors sur exactement une période (14 px), donc sans saut visible. */
.tg-season--pluies { --amb: 46 111 77; }                 /* vert forêt */
.tg-season--pluies .tg-amb {
  background: linear-gradient(180deg, rgb(var(--amb) / .15), transparent 60%);
}
.tg-season--pluies .amb-a, .tg-season--pluies .amb-b { display: none; }
.tg-season--pluies .amb-drift {
  inset: -70% -35%;
  /* Une goutte étirée par cellule : l'ellipse permet de régler largeur ET
     longueur, ce qu'un dégradé linéaire ne sait pas faire (il occuperait
     toute la largeur de la tuile et donnerait des tirets horizontaux). */
  background-image: radial-gradient(ellipse .7px 6px at 50% 40%,
    rgb(var(--amb) / .42) 0 60%, transparent 72%);
  background-size: 17px 15px;
  animation: amb-pluie 1.05s linear infinite;
}
@keyframes amb-pluie {
  from { transform: rotate(15deg) translate3d(0, 0, 0); }
  to   { transform: rotate(15deg) translate3d(0, 15px, 0); }
}

/* 3 · Petite saison sèche — lumière tamisée, taches douces qui respirent */
.tg-season--douce { --amb: 108 154 130; }                /* vert clair */
.tg-season--douce .tg-amb {
  background: linear-gradient(158deg, rgb(var(--amb) / .16), transparent 58%);
}
.tg-season--douce .amb-a,
.tg-season--douce .amb-b {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--amb) / .26), transparent 70%);
  animation: amb-souffle 19s ease-in-out infinite alternate;
}
.tg-season--douce .amb-a { top: -14%; left: -10%; }
.tg-season--douce .amb-b { bottom: -18%; right: -12%; animation-duration: 27s; animation-delay: -7s; animation-direction: alternate-reverse; }
.tg-season--douce .amb-drift { display: none; }
@keyframes amb-souffle {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12%, 9%, 0) scale(1.14); }
}

/* 4 · Récoltes — chaleur basse et poussière qui descend sur les claies.
   Dérive d'exactement une cellule de trame : la boucle est invisible. */
.tg-season--recoltes { --amb: 167 78 43; }               /* sienne */
.tg-season--recoltes .tg-amb {
  background: radial-gradient(112% 70% at 14% 108%, rgb(var(--amb) / .20), transparent 64%);
}
.tg-season--recoltes .amb-a, .tg-season--recoltes .amb-b { display: none; }
.tg-season--recoltes .amb-drift {
  inset: -60% -25%;
  background-image: radial-gradient(rgb(var(--amb) / .34) 1.1px, transparent 1.4px);
  background-size: 26px 26px;
  animation: amb-poussiere 16s linear infinite;
}
@keyframes amb-poussiere {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-26px, 26px, 0); }
}

/* Hors champ, plus rien ne tourne (classe posée par js/tourisme.js). */
.tg-seasons:not(.is-live) .tg-amb i { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .tg-amb i { animation: none !important; }
}

/* ---- Calendrier des fêtes --------------------------------------- */
.tg-fetes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: var(--space-l); }
@media (max-width: 860px) { .tg-fetes { grid-template-columns: 1fr; } }
.tg-fete { border-top: 1px solid var(--line-dark); padding-top: 1.1rem; }
.tg-fete b { display: block; font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; color: var(--ink); }
.tg-fete i { font-style: normal; font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--thread); }
.tg-fete p { color: var(--on-light-soft); font-size: var(--step--1); margin-top: .5em; line-height: 1.7; }

/* ---- Savoir-faire : bande sombre, mosaïque ----------------------- */
.tg-craft { background: var(--bark); color: var(--on-dark); padding-block: var(--space-2xl); position: relative; overflow: hidden; }
.tg-craft h2, .tg-craft h3 { color: var(--on-dark); }
.tg-craft .eyebrow { color: var(--sand); }
.tg-craft .lede { color: var(--on-dark-soft); }
.tg-craft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: var(--space-l); }
@media (max-width: 860px) { .tg-craft-grid { grid-template-columns: 1fr; } }
.tg-craft-item { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.tg-craft-item h3 { font-size: var(--step-1); font-weight: 400; margin-bottom: .4em; }
.tg-craft-item p { color: var(--on-dark-soft); font-size: var(--step--1); line-height: 1.75; }
.tg-craft-item .k {
  font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
  color: var(--foliage-lit); display: block; margin-bottom: .6em;
}

/* ---- Aller plus loin : le Togo au-delà des Plateaux -------------- */
.tg-far-list { display: flex; flex-direction: column; gap: var(--space-m); }
.tg-far-item {
  display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: var(--gutter);
  align-items: center; border-bottom: 1px solid var(--line-dark); padding-bottom: var(--space-m);
}
.tg-far-item:last-child { border-bottom: 0; padding-bottom: 0; }
.tg-far-item .media { border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 16 / 10; }
.tg-far-item .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease-out); }
.tg-far-item:hover .media img { transform: scale(1.06); }
.tg-far-item h3 { font-size: var(--step-2); font-weight: 400; color: var(--ink); }
.tg-far-item .k { font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--thread); }
.tg-far-item p { color: var(--on-light-soft); margin-top: .7em; max-width: 62ch; }
.tg-far-item .far { margin-top: 1em; font-size: var(--step--1); color: var(--on-light-soft); letter-spacing: .06em; }
.tg-far-item .far em { font-style: normal; font-weight: 600; color: var(--thread); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .tg-far-item { grid-template-columns: 1fr; } }

/* ---- Conciergerie ------------------------------------------------ */
.tg-service { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 860px) { .tg-service { grid-template-columns: 1fr; } }
.tg-service-item { border-top: 2px solid var(--thread); padding-top: 1.2rem; }
.tg-service-item h3 { font-size: var(--step-1); font-weight: 400; color: var(--ink); margin-bottom: .4em; }
.tg-service-item p { color: var(--on-light-soft); font-size: var(--step--1); line-height: 1.75; }

/* ---- Itinéraires : la carte forfait, teintée vert --------------- */
.tg-itineraries .package:hover { border-color: var(--thread); }
.tg-itineraries .package-body .duration { color: var(--thread); }
.tg-itineraries .package-includes li::before { color: var(--thread); }
.tg-itineraries .pkg-nav:hover { border-color: var(--thread); background: var(--thread); }
.tg-itineraries .pkg-dots button.active { background: var(--thread); }

/* ---- Menu plein écran : délais pour les entrées 7 à 10 ----------- */
.nav-overlay li:nth-child(7) a { transition-delay: .61s; }
.nav-overlay li:nth-child(8) a { transition-delay: .67s; }
.nav-overlay li:nth-child(9) a { transition-delay: .73s; }
.nav-overlay li:nth-child(10) a { transition-delay: .79s; }

@media (prefers-reduced-motion: reduce) {
  .tg-season, .tg-row, .tg-compass-visual img, .tg-far-item .media img { transition: none; }
  .tg-season:hover { transform: none; }
  .tg-row:hover, .tg-row.is-active { padding-inline-start: .4rem; }
}

/* ---- « Découvrir le Togo » : garde-fous de contraste -------------- */
/* Le fil vert ne vaut que sur fond clair ; sur photo sombre on garde
   l'ocre éclairci (--sand), déjà utilisé partout ailleurs sur le site. */
.tg .page-hero .eyebrow,
.tg .cta-band .eyebrow,
.tg .exp .eyebrow { color: var(--sand); }

.tg-itineraries .package-price { align-items: center; }
.tg-itineraries .package-price small {
  text-transform: none; letter-spacing: .01em; line-height: 1.4;
  font-size: var(--step--1); max-width: 60%;
}

/* ============================================================
   NAVIGATION — bascule vers le menu plein écran
   Le burger et l'overlay existaient (et sont câblés dans main.js)
   mais aucune règle ne les activait : sous 1080px le menu inline
   débordait. On passe la main au menu plein écran.
   ============================================================ */
/* Les regroupements « Expériences » et « Activités » ramènent la barre de
   10 à 8 entrées : elle tient de nouveau jusqu'à 1060px. En dessous, le
   menu plein écran prend la main.
   Entre 1060 et 1280px, la version précédente basculait déjà en burger —
   d'où l'impression de responsivité « bizarre » sur les portables 13"
   (1280×800 et 1366×768 en zoom) : un site large affichait un menu de
   téléphone. On récupère ces résolutions. */
@media (max-width: 1060px) {
  .nav-menu { display: none; }
  .nav-burger { display: block; }
}
/* Neuf entrées depuis l’ajout de « Offres ». Mesuré au navigateur : la
   barre débordait de 1366px jusqu’à 1061px — 73px au pire, à 1280px. Le
   palier va donc jusqu’à 1439px et resserre davantage, plutôt que de
   renvoyer un portable 13" vers un menu de téléphone. */
@media (min-width: 1061px) and (max-width: 1439px) {
  .nav { padding-inline: clamp(.8rem, 1.8vw, 1.6rem); }
  .nav-menu { gap: clamp(.5rem, 1.05vw, 1rem); }
  .nav-menu > a, .nav-group-btn { font-size: calc(var(--step--1) * .9); letter-spacing: 0; }
  .nav-logo-img { height: 34px; }
  .nav.scrolled .nav-logo-img { height: 31px; }
  .nav-actions .btn { padding-inline: 1em; font-size: calc(var(--step--1) * .92); }
}
/* Sous 1200px, le bouton « Réserver » cède sa place : c’est lui qui coûte
   le plus de largeur, et le menu plein écran le reprend. */
@media (min-width: 1061px) and (max-width: 1199px) {
  .nav-actions .btn { display: none; }
}
@media (max-width: 600px) {
  .nav-actions .btn { display: none; }
}

/* Ouverture au survol sur les pointeurs fins ; au clavier et au tactile
   c'est main.js qui pose la classe `.open` (voir navGroups()). */
@media (hover: hover) and (pointer: fine) {
  .nav-group:hover .nav-sub {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-group:hover .nav-caret { transform: rotate(180deg); }
}
/* Le dernier groupe est proche du bord droit : on le raccroche à droite
   pour qu'il ne passe jamais sous le bouton « Réserver ». */
.nav-menu > .nav-group:last-of-type .nav-sub { left: auto; right: -.5rem; transform: translateY(-8px); }
.nav-menu > .nav-group:last-of-type .nav-sub::before { left: auto; right: 2.6rem; transform: rotate(45deg); }
.nav-menu > .nav-group:last-of-type.open .nav-sub { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .nav-menu > .nav-group:last-of-type:hover .nav-sub { transform: translateY(0); }
}

/* Le fil vert sur les italiques de titre, dans les sections claires */
.tg .section h2 em { color: var(--thread); }

/* Carte pleine largeur — dernier « tableau » esseulé d'une grille impaire */
.exp-full { grid-column: 1 / -1; min-height: 420px; }
@media (max-width: 860px) { .exp-full { min-height: 320px; } }

/* ============================================================
   RÉSERVATION — FINITION PREMIUM
   Le formulaire de suite.html : carte élevée, champs calmes,
   et une « note de séjour » qui se lit comme un document d'hôtel.
   Additif : ces règles arrivent après le bloc historique et le
   surchargent, sans le modifier.
   ============================================================ */
.booking-widget {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3.4vw, 2.8rem);
  background: linear-gradient(168deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-soft);
}
/* filet de l'essence en tête de carte */
.booking-widget::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--suite-accent, var(--heartwood)), transparent 78%);
}

/* ---- champs ------------------------------------------------- */
.booking-widget .form-row { gap: 1.4rem; margin-bottom: 1.4rem; }
.booking-widget .field label {
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-light-soft);
}
.booking-widget .field input,
.booking-widget .field select {
  padding: .95em 1.05em;
  border-radius: var(--radius-m);
  background: var(--bg);
  border: 1px solid var(--line-dark);
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out),
              background .4s var(--ease-out);
}
.booking-widget .field input:hover,
.booking-widget .field select:hover { border-color: var(--on-light-soft); }
.booking-widget .field input:focus,
.booking-widget .field select:focus {
  outline: none;
  border-color: var(--suite-accent, var(--heartwood));
  box-shadow: 0 0 0 3px rgba(167, 78, 43, .16);   /* repli si color-mix absent */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--suite-accent, var(--heartwood)) 18%, transparent);
}
.booking-widget .field input::placeholder { color: var(--on-light-soft); opacity: .65; }

/* chevron maison sur les listes déroulantes */
.booking-widget .field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.6em; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2355666C' stroke-width='1.8'><path d='M2 4.2 6 8l4-3.8'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.05em center;
}
:root[data-theme="dark"] .booking-widget .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23A2B5BD' stroke-width='1.8'><path d='M2 4.2 6 8l4-3.8'/></svg>");
}

.booking-widget input[type="checkbox"] {
  width: 1.15em; height: 1.15em; border-radius: 4px;
  accent-color: var(--suite-accent, var(--heartwood));
  cursor: pointer;
}

/* ---- note de séjour ----------------------------------------- */
.booking-quote { margin-block: .2rem 1.5rem; min-height: 0; font-weight: 400; }
.booking-quote .quote-card {
  display: grid; gap: .6rem;
  padding: 1.15rem 1.35rem 1.05rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-m);
  background: var(--bg);
  animation: quoteIn .55s var(--ease-out) both;
}
.booking-quote .q-head {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--on-light-soft);
  margin-bottom: .15rem;
}
.booking-quote .quote-card .q-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.4rem; padding: 0; font-weight: 400;
}
.booking-quote .q-label { color: var(--on-light-soft); line-height: 1.45; }
.booking-quote .q-label b { font-weight: 600; color: var(--ink); }
.booking-quote .q-mult { opacity: .5; padding-inline: .1em; }
.booking-quote .q-season { font-style: normal; opacity: .7; }
.booking-quote .q-amount {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  font-weight: 600; color: var(--ink);
}
.booking-quote .q-discount .q-label,
.booking-quote .q-discount .q-amount { color: var(--foliage); }
:root[data-theme="dark"] .booking-quote .q-discount .q-label,
:root[data-theme="dark"] .booking-quote .q-discount .q-amount { color: var(--foliage-lit); }

.booking-quote .quote-card .q-total {
  margin-top: .35rem; padding-top: .7rem;
  border-top: 1px solid var(--line-dark);
  align-items: baseline;
}
.booking-quote .q-total .q-label {
  color: var(--ink); font-weight: 600; letter-spacing: .02em;
}
.booking-quote .q-total .q-amount {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--step-2); letter-spacing: -.01em;
}
.booking-quote .q-foot {
  margin-top: .5rem; padding-top: .7rem;
  border-top: 1px solid var(--line-dark);
  font-size: var(--step--1); line-height: 1.5; color: var(--on-light-soft);
}
.booking-quote .q-foot b { color: var(--ink); font-weight: 600; }
.booking-quote .q-msg { font-size: var(--step--1); color: var(--on-light-soft); }
.booking-quote.is-error .q-msg { color: var(--danger, #A7302B); font-weight: 500; }

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

/* attente du tarif : trois lignes qui respirent */
.booking-quote .q-skeleton {
  display: block; height: 1em; border-radius: 4px;
  background: var(--line-dark);                    /* repli si color-mix absent */
  background: linear-gradient(90deg, var(--line-dark), color-mix(in srgb, var(--line-dark) 35%, transparent), var(--line-dark));
  background-size: 200% 100%;
  animation: quoteShimmer 1.4s linear infinite;
}
.booking-quote .q-skeleton:nth-child(2) { width: 62%; }
.booking-quote .q-skeleton-total { width: 40%; height: 1.7em; margin-top: .5rem; }
@keyframes quoteShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .booking-quote .quote-card { animation: none; }
  .booking-quote .q-skeleton { animation: none; }
}

/* ---- pied de formulaire ------------------------------------- */
.booking-widget button[type="submit"] { width: 100%; justify-content: center; }
.booking-trust {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-dark);
  font-size: var(--step--1); color: var(--on-light-soft);
}
.booking-trust span { display: inline-flex; align-items: center; gap: .5em; }
.booking-trust svg { width: 14px; height: 14px; flex: none; color: var(--suite-accent, var(--heartwood)); }

/* ============================================================
   DURCISSEMENT RESPONSIVE — passe transversale
   Ce bloc arrive en dernier : il surcharge sans rien réécrire.
   Il ne traite que ce que les règles par page ne couvraient pas —
   débordements horizontaux, cibles tactiles, écrans courts,
   et les quelques grilles restées figées.
   ============================================================ */

/* ---- 1. Débordement horizontal ------------------------------
   `body { overflow-x: hidden }` masquait le symptôme sans traiter
   la cause : un enfant de grille/flex a une largeur minimale
   automatique égale à son contenu, donc un mot long, une URL ou
   un nombre à chiffres tabulaires pousse la piste au-delà de
   l'écran. `min-width: 0` rend la piste réellement compressible. */
.grid > *, .exp-grid > *, .spaces-grid > *, .reviews > *,
.tour-grid > *, .tg-fetes > *, .tg-craft-grid > *, .tg-service > *,
.tg-seasons > *, .footer-top > *, .two-col > *, .contact-grid > *,
.form-row > *, .detail-facts > *, .booking-bar > * { min-width: 0; }

/* les mots insécables (adresses, e-mails, noms d'essences) cassent
   plutôt que de déborder */
body { overflow-wrap: break-word; }
.footer-col a, .footer-col address, .nav-overlay-foot span,
.booking-trust span, .tg-row .who { overflow-wrap: anywhere; }

/* ---- 2. Ancres sous la nav fixe -----------------------------
   La nav est `position: fixed` : sans marge de défilement, tout
   saut d'ancre déposait la cible SOUS la barre. */
html { scroll-padding-top: clamp(5rem, 12vh, 7.5rem); }

/* ---- 3. iOS : plus de zoom au focus -------------------------
   Safari iOS agrandit la page quand un champ fait moins de 16px,
   et n'en revient jamais tout à fait. Les champs de `.field`
   n'ont pas de taille propre : ils héritent de `--step-0`, qui
   descend à .95rem (15,2px) — donc tous les formulaires du site
   déclenchaient ce zoom.
   La règle reste volontairement GÉNÉRIQUE (0,0,1) : les champs de
   `.booking-bar`, eux, sont posés par `.booking-field input`
   (0,1,1) en `--step-1`, soit 18,9px au minimum. Ils gardent donc
   leur police d'affichage et n'ont jamais eu de risque de zoom. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
}

/* ---- 4. Cibles tactiles -------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .btn { padding: 1.1em 1.9em; }
  .pkg-toggle button { min-height: 44px; }
  .lightbox-close { min-width: 48px; min-height: 48px; display: grid; place-items: center; }
  .lightbox-nav { padding: 1.2rem .9rem; }
}

/* ---- 5. Barre de réservation --------------------------------
   Elle passait de 4 colonnes à 2 puis s'arrêtait là : sous '500px
   deux champs en police d'affichage ne tenaient plus côte à côte. */
@media (max-width: 520px) {
  .booking-bar { grid-template-columns: 1fr; }
  .booking-field { border-right: 0; border-bottom: 1px solid var(--line-dark); padding: 1.05rem 1.25rem; }
  .booking-field:nth-child(even) { border-right: 0; }
}

/* ---- 6. Galerie de détail : hauteur fluide -------------------
   560px figés puis 380px d'un coup sous 620px ; entre les deux la
   vignette de droite s'écrasait. Une hauteur proportionnelle suit
   la largeur réelle. */
.detail-gallery { height: clamp(18.75rem, 46vw, 35rem); }
@media (max-width: 620px) {
  .detail-gallery { height: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  .detail-gallery img { aspect-ratio: 4/3; height: auto; }
  .detail-gallery img:first-child { grid-row: auto; aspect-ratio: 16/10; }
}

/* ---- 7. Visionneuse : unités dynamiques ---------------------
   `vh` ignore la barre d'adresse mobile : l'image dépassait sous
   le bord de l'écran. `dvh` suit la hauteur réellement visible. */
.lightbox img { max-height: 84dvh; max-width: 92vw; }

/* ---- 8. Écrans courts et paysage téléphone ------------------
   Un hero en `100svh` sur un téléphone couché ne laisse pas la
   place au titre : on le laisse prendre la hauteur de son contenu. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero, .page-hero {
    min-height: auto;
    padding-top: calc(var(--space-2xl) + 2rem);
    padding-bottom: var(--space-l);
  }
  .hero h1, .page-hero h1 { font-size: var(--step-3); }
  .scroll-cue { display: none; }
  .hero-stats {
    position: static; margin-top: var(--space-m); text-align: left;
    padding-inline: var(--gutter); flex-wrap: wrap; gap: var(--space-s) var(--space-m);
  }
  .page-hero.page-hero-compact { min-height: auto; }
}
/* le repère de défilement chevauchait le texte sur les écrans courts */
@media (max-height: 680px) { .scroll-cue { display: none; } }

/* ---- 8 bis. Étiquettes (eyebrow) sur écran étroit -----------
   « DEPUIS 1970 · KPALIMÉ, TOGO » fait 27 caractères capitalisés à
   .34em d'interlettrage, précédés d'un filet de 2.4em : sous ~560px
   l'ensemble ne tient plus sur une ligne et se coupait n'importe où.
   On resserre l'interlettrage plus tôt et on retire le filet — il est
   décoratif, le texte ne l'est pas. */
@media (max-width: 560px) {
  .eyebrow { letter-spacing: .2em; gap: .6em; }
  .hero .eyebrow::before,
  .page-hero .eyebrow::before { display: none; }
}

/* ---- 9. Réglages fins des très petits écrans (≤ 380px) ------ */
@media (max-width: 380px) {
  .essence-meta { flex-wrap: wrap; gap: .4rem 1rem; }
  .amenities { grid-template-columns: 1fr; }
  .detail-facts { gap: var(--space-s); }
  .eyebrow { letter-spacing: .22em; }
  .footer-bottom { justify-content: flex-start; }
}

/* ---- 10. Impression / ceinture de sécurité ------------------ */
.marquee { max-width: 100%; }
.wrap, .wrap-narrow { min-width: 0; }

/* ============================================================
   LA CARTE PAR CHAPITRES
   ------------------------------------------------------------
   56 plats en 11 catégories empilés faisaient ~6 écrans. On garde
   TOUT le contenu dans le DOM et on n'affiche qu'un chapitre :
   un sommaire à gauche, le chapitre à droite.

   Le balisage interne (.menu-cat, .menu-item, .name, .price,
   .desc) est INCHANGÉ à dessein : `js/prefs.js` convertit les
   devises via un sélecteur qui contient `.price`, et le bloc
   @media print s'appuie sur `.menu-cat`. Renommer ces classes
   casserait les deux, silencieusement.
   ============================================================ */
.carte-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* ---- le sommaire ----
   Il se lit comme la table des matières d'une carte imprimée :
   nom en romain, nombre de plats en chiffres tabulaires. */
.carte-index {
  position: sticky;
  top: clamp(6rem, 14vh, 8.5rem);
  display: flex;
  flex-direction: column;
}
.carte-index-title {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-light-soft);
  padding-bottom: .8rem; border-bottom: 1px solid var(--line-dark);
}
.carte-chap {
  display: flex; align-items: baseline; gap: .8rem; width: 100%;
  padding: .72rem 0; border: 0; border-bottom: 1px solid var(--line-dark);
  background: none; cursor: pointer; text-align: left;
  color: var(--on-light-soft);
  font-family: var(--font-display); font-size: var(--step-0);
  transition: color .35s var(--ease-out);
}
.carte-chap::before {
  content: ""; width: 0; height: 1px; flex: none;
  background: var(--accent-lit);
  transition: width .4s var(--ease-out);
}
.carte-chap .n {
  margin-left: auto; font-family: var(--font-body);
  font-size: var(--step--1); font-variant-numeric: tabular-nums;
  color: var(--on-light-soft); opacity: .7; letter-spacing: .04em;
}
.carte-chap:hover { color: var(--ink); }
.carte-chap[aria-selected="true"] { color: var(--ink); }
.carte-chap[aria-selected="true"]::before { width: 16px; }
.carte-chap[aria-selected="true"] .n { color: var(--accent-lit); opacity: 1; }

/* ---- le chapitre affiché ---- */
.carte-panel[hidden] { display: none; }
.carte-panel { animation: chapIn .45s var(--ease-out) both; }
@keyframes chapIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .carte-panel { animation: none; }
  .carte-chap, .carte-chap::before { transition: none; }
}
/* dans un chapitre, la catégorie est seule : sa marge de fin ne sert plus */
.carte-panel .menu-cat { margin-bottom: 0; }

/* ---- mobile : le sommaire devient une bande de pastilles ---- */
@media (max-width: 860px) {
  .carte-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-s); }
  .carte-index {
    top: clamp(4.5rem, 11vh, 6rem); z-index: 3;
    flex-direction: row; gap: .45rem;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-block: .7rem;
    /* la bande file d'un bord à l'autre, sous la gouttière du .wrap */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line-dark);
  }
  .carte-index::-webkit-scrollbar { display: none; }
  .carte-index-title { display: none; }
  .carte-chap {
    width: auto; flex: none; scroll-snap-align: start; white-space: nowrap;
    padding: .5em 1em; min-height: 44px; align-items: center;
    border: 1px solid var(--line-dark); border-radius: var(--radius-pill);
  }
  .carte-chap::before { display: none; }
  .carte-chap .n { margin-left: .5rem; }
  .carte-chap[aria-selected="true"] {
    background: var(--heartwood); border-color: var(--heartwood); color: var(--linen);
  }
  .carte-chap[aria-selected="true"] .n { color: var(--linen); opacity: .72; }
}

/* ---- impression de la page ----
   Ctrl+P doit donner la carte ENTIÈRE, pas le seul chapitre ouvert.
   Ce bloc arrive après le @media print historique et le complète. */
@media print {
  .carte-index { display: none !important; }
  .carte-layout { display: block !important; }
  .carte-panel[hidden] { display: block !important; }
  .carte-panel { animation: none !important; }
  .carte-panel .menu-cat { margin-bottom: 1.6rem; }
}

/* ============================================================
   CARTE — LARGEUR ET AMBIANCE DE CHAPITRE
   ------------------------------------------------------------
   1. Le conteneur passe de wrap-narrow (820px) à 1180px : avec
      un sommaire de 250px, le panneau ne disposait que de ~530px
      pour un nom de plat ET son prix.
   2. Chaque chapitre reçoit un FIL coloré tiré de la charte et une
      VIGNETTE gravée, dans la même main que l'îlot de cocotiers de
      la couverture du PDF — la carte imprimée et la carte en ligne
      parlent ainsi la même langue.
   ============================================================ */
.wrap-carte { max-width: var(--maxw-carte); }

/* ---- les fils ----
   Valeurs littérales et non var(--foret) etc. : la palette brute de
   tokens.css n'est PAS surchargée en sombre, seuls les rôles le sont.
   Un fil pris sur la palette brute deviendrait illisible la nuit. */
:root {
  --fil-foret:       #2E6F4D;
  --fil-foret-lit:   #4F8468;
  --fil-sienne:      #A74E2B;
  --fil-sienne-deep: #7C3B1E;
  --fil-ocre:        #B87A2E;
  --fil-atlantide:   #00618F;
}
:root[data-theme="dark"] {
  --fil-foret:       #7FC09B;
  --fil-foret-lit:   #8FBBA1;
  --fil-sienne:      #D08A63;
  --fil-sienne-deep: #C98059;
  --fil-ocre:        #E0A85E;
  --fil-atlantide:   #56A8CB;
}
[data-fil="foret"]       { --fil: var(--fil-foret); }
[data-fil="foret-lit"]   { --fil: var(--fil-foret-lit); }
[data-fil="sienne"]      { --fil: var(--fil-sienne); }
[data-fil="sienne-deep"] { --fil: var(--fil-sienne-deep); }
[data-fil="ocre"]        { --fil: var(--fil-ocre); }
[data-fil="atlantide"]   { --fil: var(--fil-atlantide); }

/* le sommaire prend la couleur du chapitre qu'il ouvre */
.carte-chap[aria-selected="true"]::before { background: var(--fil, var(--accent-lit)); }
.carte-chap[aria-selected="true"] .n { color: var(--fil, var(--accent-lit)); }

/* ---- la vignette ----
   Elle occupe le blanc à droite du titre de chapitre, sans jamais
   passer sous le texte : le titre est limité à 62% de la largeur. */
.carte-panel { position: relative; }
.carte-vignette {
  position: absolute; top: -.4rem; right: 0;
  width: clamp(74px, 9vw, 118px); aspect-ratio: 1;
  color: var(--fil, var(--accent-lit));
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: .3; pointer-events: none;
}
.carte-panel .menu-cat h3 { max-width: 62%; }

/* le titre de chapitre est souligné de son fil */
.carte-panel .menu-cat h3::after {
  content: ""; display: block; width: 42px; height: 2px;
  margin-top: .38em; background: var(--fil, var(--accent-lit));
  border-radius: 2px;
}
/* la note du chapitre suit aussi le fil, en plus discret */
.carte-panel .carte-note { border-top-color: var(--fil, var(--line-dark)); }

/* ---- respirations gagnées avec la largeur ---- */
.carte-layout { grid-template-columns: 250px minmax(0, 1fr); }
.carte-panel .menu-item { padding-block: 1.35rem; }

@media (max-width: 860px) {
  .carte-layout { grid-template-columns: minmax(0, 1fr); }
  .carte-vignette { width: 62px; top: -.2rem; opacity: .26; }
  .carte-panel .menu-cat h3 { max-width: calc(100% - 76px); }
  .carte-panel .menu-item { padding-block: 1.15rem; }
}

@media print {
  .carte-vignette { display: none !important; }
  .carte-panel .menu-cat h3 { max-width: none; }
  .carte-panel .menu-cat h3::after { display: none; }
}

/* ============================================================
   PAGES LÉGALES — CGU & politique de confidentialité
   ------------------------------------------------------------
   Deux pages de texte long, sans photo de héros : la lisibilité
   y remplace l'image. Colonne étroite (--maxw-narrow), sommaire
   ancré à gauche sur grand écran, replié au-dessus du texte en
   dessous de 960px.
   ============================================================ */

.legal-head { padding-block: var(--space-2xl) var(--space-l); }
.legal-head .breadcrumb { color: var(--on-light-soft); }
.legal-head .breadcrumb a:hover { color: var(--heartwood-deep); }
.legal-head h1 { font-size: var(--step-4); font-weight: 300; margin-top: .1em; }
.legal-head .lede {
  font-size: var(--step-1); color: var(--on-light-soft);
  max-width: 46ch; margin-top: .7em; line-height: 1.5;
}
.legal-head .maj { margin-top: var(--space-s); font-size: var(--step--1); color: var(--on-light-soft); }

.legal-layout {
  display: grid; grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--space-xl); align-items: start;
}
@media (max-width: 960px) { .legal-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); } }

.legal-toc { position: sticky; top: calc(var(--space-l) + 3rem); font-size: var(--step--1); }
.legal-toc h2 {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-light-soft);
  margin-bottom: .9em;
}
.legal-toc ol { display: flex; flex-direction: column; gap: .1em; counter-reset: toc; }
.legal-toc a {
  display: block; padding: .5em .2em; color: var(--on-light-soft);
  border-left: 2px solid var(--line-dark); padding-left: .9em;
  line-height: 1.35; transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.legal-toc a:hover { color: var(--on-light); border-left-color: var(--heartwood); }
@media (max-width: 960px) {
  .legal-toc { position: static; border-bottom: 1px solid var(--line-dark); padding-bottom: var(--space-s); }
  .legal-toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 var(--space-s); }
}

/* Le corps du texte : c'est ici que la page se lit ou ne se lit pas. */
.legal-body { max-width: var(--maxw-narrow); font-size: var(--step-0); line-height: 1.7; }
.legal-body > section { padding-top: var(--space-l); }
/* Décalage d'ancre : sans lui, un clic du sommaire colle le titre sous la nav. */
.legal-body > section > h2 { scroll-margin-top: 5.5rem; }
.legal-body h2 {
  font-size: var(--step-2); font-weight: 400; margin-bottom: .5em;
  padding-top: .3em; border-top: 1px solid var(--line-dark);
}
.legal-body > section:first-child h2 { border-top: 0; padding-top: 0; }
.legal-body h3 { font-size: var(--step-1); margin: 1.4em 0 .4em; }
.legal-body p { margin-bottom: 1em; color: var(--on-light); }
.legal-body p.note { color: var(--on-light-soft); font-size: var(--step--1); }
.legal-body a:not(.btn) { color: var(--heartwood-deep); text-decoration: underline; text-underline-offset: .2em; }
.legal-body a:not(.btn):hover { color: var(--accent-lit); }
.legal-body strong { font-weight: 700; }

.legal-body ul, .legal-body ol { margin: 0 0 1.2em; display: flex; flex-direction: column; gap: .5em; }
.legal-body ul li { padding-left: 1.3em; position: relative; }
.legal-body ul li::before {
  content: ""; position: absolute; left: .2em; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--heartwood-lit);
}
.legal-body ol { counter-reset: legal; }
.legal-body ol li { padding-left: 1.9em; position: relative; counter-increment: legal; }
.legal-body ol li::before {
  content: counter(legal) "."; position: absolute; left: 0; top: 0;
  color: var(--heartwood-deep); font-weight: 600; font-size: .92em;
}

/* Le tableau des traitements : c'est la pièce maîtresse de la page RGPD,
   il doit rester lisible sur un téléphone — d'où le défilement horizontal
   plutôt qu'un empilement qui casserait la lecture en colonnes. */
.legal-table-wrap { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--step--1); }
.legal-table th, .legal-table td {
  text-align: left; padding: .85em .9em; border-bottom: 1px solid var(--line-dark);
  vertical-align: top; line-height: 1.5;
}
.legal-table thead th {
  font-family: var(--font-body); font-weight: 700; font-size: .82em;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-light-soft);
  border-bottom-width: 2px;
}
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { font-weight: 600; }

.legal-card {
  background: var(--bg-alt); border-radius: var(--radius-m);
  padding: var(--space-s); margin: 0 0 1.4em;
}
.legal-card h3 { margin-top: 0; font-size: var(--step-0); }
.legal-card p:last-child, .legal-card ul:last-child { margin-bottom: 0; }
.legal-card address { font-style: normal; line-height: 1.7; }

/* Champ que seul l'exploitant peut renseigner (raison sociale, numéro
   d'immatriculation, délais d'annulation…). Volontairement voyant : une
   mention légale fausse coûte plus cher qu'une mention visiblement absente. */
.legal-todo {
  display: inline-block; padding: .1em .6em; border-radius: var(--radius-s);
  background: rgba(167, 78, 43, .12); color: var(--heartwood-deep);
  border: 1px dashed var(--heartwood); font-size: .92em; font-weight: 600;
}

.legal-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-s); }

/* ============================================================
   COMPLÉTEZ VOTRE SÉJOUR — prestations en plus (suite.html)
   ------------------------------------------------------------
   Placé entre la note de séjour et les coordonnées : après que
   le prix soit connu, avant que le client ne remplisse ses
   informations. C'est le seul endroit du parcours où il a le
   montant sous les yeux et la carte à la main.

   Volontairement sobre : une liste à cocher, pas une vitrine.
   Une page de vente additionnelle qui crie fait fuir ; une ligne
   « + Transfert depuis Lomé · 35 000 F » se coche sans y penser.
   ============================================================ */
.booking-extras { margin-block: var(--space-s); }
.booking-extras[hidden] { display: none; }

.bx-head { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; margin-bottom: .7rem; }
.bx-head h3 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; margin: 0; }
.bx-head p { margin: 0; font-size: var(--step--1); color: var(--on-light-soft); }

.bx-groupe + .bx-groupe { margin-top: .9rem; }
.bx-groupe > h4 {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-light-soft);
  margin: 0 0 .4rem;
}

.bx-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: .3rem .8rem;
  align-items: start;
  padding: .7rem .85rem;
  border: 1px solid var(--line-dark); border-radius: var(--radius-m);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.bx-item + .bx-item { margin-top: .4rem; }
.bx-item:hover { border-color: var(--heartwood-lit); }
.bx-item:has(input:checked) { border-color: var(--heartwood); background: var(--bg-alt); }
.bx-item:has(input:focus-visible) { outline: 2px solid var(--atlantide); outline-offset: 2px; }

.bx-item input[type="checkbox"] { width: 20px; height: 20px; margin: .15em 0 0; accent-color: var(--heartwood); cursor: pointer; }
.bx-nom { font-weight: 600; font-size: var(--step-0); line-height: 1.3; }
.bx-desc { grid-column: 2; font-size: var(--step--1); color: var(--on-light-soft); line-height: 1.5; margin: .15em 0 0; }
.bx-prix { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.bx-prix small { display: block; font-weight: 400; font-size: .78em; color: var(--on-light-soft); }

/* Sélecteur de quantité : n'apparaît que pour ce qui se commande en plusieurs
   exemplaires — un départ tardif ne se prend pas trois fois. */
.bx-qte { grid-column: 3; display: none; align-items: center; gap: .4em; margin-top: .4rem; justify-self: end; }
.bx-item:has(input:checked) .bx-qte { display: flex; }
.bx-qte button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-dark);
  background: var(--surface); color: var(--on-light); font-size: 1rem; line-height: 1; cursor: pointer;
}
.bx-qte button:hover { border-color: var(--heartwood); }
.bx-qte b { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }

/* Les prestations dans la note de séjour : un filet les sépare du séjour
   lui-même, pour qu'on voie ce qui relève de quoi. */
.quote-card .q-row.q-extra { color: var(--on-light-soft); font-size: var(--step--1); }
.quote-card .q-row.q-extras-head {
  border-top: 1px solid var(--line-dark); margin-top: .5em; padding-top: .5em;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-light-soft);
}

@media (max-width: 560px) {
  .bx-item { grid-template-columns: auto 1fr; }
  .bx-prix { grid-column: 2; text-align: left; margin-top: .2em; }
  .bx-qte { grid-column: 2; justify-self: start; }
}

/* ---- Recevoir le devis par e-mail (suite.html) ------------------------
   Discret par construction : c'est une porte de sortie honorable pour qui
   n'est pas prêt à payer aujourd'hui, pas un second appel à l'action qui
   concurrencerait « Réserver ». */
.devis-mail { margin-block: -.4rem var(--space-s); }
.devis-mail[hidden] { display: none; }

.devis-ouvrir {
  background: none; border: 0; padding: .2em 0;
  font: inherit; font-size: var(--step--1); font-weight: 600;
  color: var(--heartwood-deep);
  text-decoration: underline; text-underline-offset: .25em;
  cursor: pointer;
}
.devis-ouvrir:hover { color: var(--accent-lit); }

.devis-champ { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.devis-champ[hidden] { display: none; }
.devis-champ input {
  flex: 1 1 14rem; min-width: 0; min-height: 44px;
  border: 1px solid var(--line-dark); border-radius: var(--radius-m);
  padding: .55em .8em; background: var(--surface); color: var(--on-light);
  font: inherit; font-size: var(--step--1);
}
.devis-champ input:focus-visible { outline: 2px solid var(--atlantide); outline-offset: 1px; }
.devis-champ .btn { flex: none; }

.devis-retour { margin: .5em 0 0; font-size: var(--step--1); color: var(--on-light-soft); }
.devis-retour:empty { display: none; }


/* ============================================================
   NOS OFFRES (offres.html)
   ------------------------------------------------------------
   Trois familles, trois traitements — parce qu'elles ne
   promettent pas la même chose :

     .offre-carte    une formule éditoriale, avec sa photo et son
                     prix ferme. C'est ce qui se regarde.
     .forfait-carte  un forfait réservable, sans photo : ce qui
                     compte est ce qu'il ajoute et comment il se
                     tarifie. Numéroté, comme les cartes du pôle
                     équestre — la numérotation dit « voici la
                     liste complète », pas « voici un classement ».
     .promo-carte    une remise, avec sa date de fin. Compacte :
                     une promotion se lit en deux secondes ou pas.
   ============================================================ */

.offres-grid {
  display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
.offre-carte {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-dark);
  border-radius: var(--radius-m); overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.offre-carte:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.offre-carte .media { aspect-ratio: 16 / 10; overflow: hidden; }
.offre-carte .media img { width: 100%; height: 100%; object-fit: cover; }
.offre-corps { padding: var(--space-s); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.offre-corps .duration {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-lit);
}
.offre-corps h3 { font-size: var(--step-1); margin: 0; }

.offre-inclus { display: flex; flex-direction: column; gap: .3em; margin: 0; }
.offre-inclus li {
  position: relative; padding-left: 1.2em;
  font-size: var(--step--1); color: var(--on-light-soft); line-height: 1.5;
}
.offre-inclus li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--heartwood-lit);
}

.forfaits-grid {
  display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}
.forfait-carte {
  position: relative;
  display: flex; flex-direction: column; gap: .6rem;
  padding: var(--space-m) var(--space-s) var(--space-s);
  background: var(--surface); border: 1px solid var(--line-dark); border-radius: var(--radius-m);
}
.forfait-carte .badge {
  position: absolute; top: var(--space-s); right: var(--space-s);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 300;
  color: var(--line-dark); line-height: 1;
}
.forfait-carte h3 { font-size: var(--step-1); margin: 0; padding-right: 2.5rem; }
.forfait-carte p { margin: 0; font-size: var(--step--1); color: var(--on-light-soft); line-height: 1.55; }
.forfait-duree { font-weight: 600; color: var(--on-light) !important; }
.forfait-tarif {
  margin-top: auto !important; padding-top: .6rem;
  border-top: 1px solid var(--line-dark);
  font-weight: 700; color: var(--heartwood-deep) !important;
}
.forfait-carte .link-underline { align-self: flex-start; font-size: var(--step--1); }

.promos-grid {
  display: grid; gap: var(--space-s);
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
.promo-carte {
  display: flex; flex-direction: column; gap: .45rem;
  padding: var(--space-s);
  background: var(--surface);
  border: 1px solid var(--heartwood-lit); border-radius: var(--radius-m);
}
.promo-remise {
  align-self: flex-start;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 400;
  line-height: 1; color: var(--heartwood-deep);
}
.promo-carte h3 { font-size: var(--step-0); margin: 0; }
.promo-carte p { margin: 0; font-size: var(--step--1); color: var(--on-light-soft); }
.promo-fin { font-weight: 600; }
.promo-code {
  align-self: flex-start; margin-top: .2rem !important;
  padding: .25em .7em; border-radius: var(--radius-s);
  background: var(--bg-alt); border: 1px dashed var(--heartwood);
  color: var(--on-light) !important;
}
.promo-code b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }
.promo-carte .link-underline { align-self: flex-start; margin-top: .3rem; font-size: var(--step--1); }

/* ============================================================
   ACTIVITÉS DE LOISIRS (activites/index.html)
   ------------------------------------------------------------
   Même grammaire que la page du pôle équestre : des sections
   éditoriales alternées, et des cartes qui laissent la photo
   parler. Une activité dotée d'une page à elle devient cliquable
   sur toute sa surface — sur un écran tactile, viser un lien de
   trois mots est une épreuve.
   ============================================================ */

.loisirs-grid {
  display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}

.loisir-carte {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-dark);
  border-radius: var(--radius-m); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s var(--ease-out);
}
.loisir-carte .media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.loisir-carte .media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.loisir-corps { padding: var(--space-s); display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.loisir-corps h3 { font-size: var(--step-1); margin: 0; }
.loisir-corps p { margin: 0; font-size: var(--step--1); color: var(--on-light-soft); line-height: 1.55; }
.loisir-corps .link-underline { margin-top: auto; padding-top: .5rem; font-size: var(--step--1); }

.loisir-tag {
  align-self: flex-start;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--linen); background: var(--heartwood);
  padding: .25em .7em; border-radius: var(--radius-pill);
}

/* Seules les cartes qui mènent quelque part réagissent : une carte inerte qui
   se soulève au survol promet un clic qui n'existe pas. */
.loisir-carte-lien:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--heartwood-lit); }
.loisir-carte-lien:hover .media img { transform: scale(1.05); }
.loisir-carte-lien:focus-visible { outline: 2px solid var(--atlantide); outline-offset: 3px; }

.pratique-grid {
  display: grid; gap: var(--space-s);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.pratique-carte {
  padding: var(--space-s);
  border-left: 2px solid var(--heartwood-lit);
  background: var(--surface);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}
.pratique-carte h3 { font-size: var(--step-0); margin: 0 0 .4em; }
.pratique-carte p { margin: 0; font-size: var(--step--1); color: var(--on-light-soft); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .loisir-carte, .loisir-carte .media img { transition: none; }
  .loisir-carte-lien:hover { transform: none; }
  .loisir-carte-lien:hover .media img { transform: none; }
}

/* Une activité sans photo dans l'admin produisait une carte au tiers vide :
   la grille aligne les hauteurs sur la carte la plus haute, et le texte
   flottait en haut d'un grand rectangle blanc. On centre son contenu — la
   carte reste de même hauteur que ses voisines, sans donner l'impression
   qu'il manque quelque chose. */
.loisir-carte:not(:has(.media)) .loisir-corps { justify-content: center; }
.loisir-carte:not(:has(.media)) .loisir-corps h3 { font-size: var(--step-2); }