/* ==========================================================================
   ATELIER LATRESNE — style.css
   --------------------------------------------------------------------------
   ECHELLE FLUIDE / HOMOTHETIQUE
   Le design Figma de reference fait 1481px de large (= 16px de base = 1rem).
   Toutes les tailles du site (police, marges, images) sont exprimees en rem,
   donc TOUT grandit/retrecit ensemble, dans les memes proportions, au lieu
   d'avoir des breakpoints qui cassent la mise en page.

   La formule ci-dessous (root font-size) est une droite qui passe par (0,0):
     taille-racine = 16px * (largeur-ecran / 1481)
   -> en vw : (1600/1481) vw = 1.0803vw

   - En dessous de 768px (format iPad) : la taille racine est figee a la
     valeur qu'elle a a 768px (8.3px). Le site ne retrecit plus en dessous.
     (Un breakpoint mobile dedie sera ajoute plus tard avec la maquette Figma
     mobile.)
   - Au dessus de 1920px : la taille racine est figee a la valeur qu'elle a
     a 1920px (20.74px). Le site ne grandit plus au-dela.
   ========================================================================== */

:root {
  --color-black: #000000;
  --color-white: #ffffff;

  --font-sans: "Helvetica Now Display", Helvetica, Arial, sans-serif;
  --font-serif-display: "Helvetica Now Display", Helvetica, Arial, sans-serif;

  /* espacements de mise en page (issus du design Figma, en rem) */
  --top-padding: 1.25rem;        /* 20px — marge resserree du bloc nav + image principale */
  --nav-to-tagline-gap: 1.125rem; /* 18px — espace entre logo/liens et la baseline */
  --tagline-to-hero-gap: 6.25rem; /* 100px — espace entre la baseline et l'image principale */
  --main-padding: 4.375rem;      /* 70px — marge generale du reste du site */
  --gap-between-sections: 5rem;  /* 80px */
  --gap-in-section: 3.75rem;     /* 60px */
}

html {
  /* --- coeur du systeme de redimensionnement homothetique --- */
  font-size: clamp(8.3px, 1.0803vw, 20.74px);
  box-sizing: border-box;
  scroll-behavior: smooth;
  background: var(--color-white); /* couleur visible sur le rebond de scroll EN HAUT */
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.3;
}

/* Ancien calque de rebond de scroll (rubber-band) pour compenser un footer
   noir : plus necessaire depuis que le footer est blanc partout (cf
   .site-footer plus bas). */

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

h1, h2, h3, h4, h5, h6 {
  font-weight: 400; /* les navigateurs mettent les titres en gras par defaut : on annule ca ici */
}

a {
  color: inherit;
  text-decoration: none;
}

/* Effet "racing underline" global : sur tous les liens texte du site (hors
   logo, qui contient une image), un trait se deploie de gauche a droite au
   survol au lieu d'un simple soulignement statique. */
a:not(.site-nav__logo):not(.site-nav__cta):not(.nav2__logo):not(.stage__image-link) {
  position: relative;
  display: inline-block;
}

a:not(.site-nav__logo):not(.site-nav__cta):not(.nav2__logo):not(.stage__image-link)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

a:not(.site-nav__logo):not(.site-nav__cta):not(.nav2__logo):not(.stage__image-link):hover::after {
  transform: scaleX(1);
}

/* Effet "rolling text" (inspire de motion.dev/ui/components/rolling-text-button) :
   reserve aux CTA de reservation (RESERVER, Réserver un séjour/massage/consultation,
   Composer un séjour). Deux exemplaires du libelle sont empiles dans un conteneur
   masque en hauteur (1 ligne) ; le survol/focus fait remonter la pile d'exactement
   une ligne, si bien que la copie dupliquee remplace l'originale sans jamais changer
   les dimensions du bouton/lien. */
.roll-cta::after {
  display: none; /* pas de soulignement global : le roulement du texte suffit */
}

/* Exception : "Composer un séjour" (bas de page SEJOUR) garde le soulignement
   classique au survol (regle globale a::after) en plus du roulement du texte. */
.roll-cta--keep-underline::after {
  display: block;
}

.roll-cta__viewport {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  height: 1.2em; /* repli pour les navigateurs sans support de l'unite lh */
  height: 1lh;
}

.roll-cta__inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}

.roll-cta:hover .roll-cta__inner,
.roll-cta:focus-visible .roll-cta__inner {
  transform: translateY(-50%);
}

.roll-cta__label {
  display: block;
}

/* Boutons pleins (fond noir) parmi les CTA roll-cta : le fond passe au gris
   au survol/focus, en plus du roulement du texte. Les liens roll-cta sans
   boite (simples liens texte : RESERVER sur la home, "Composer un séjour")
   ne sont pas concernes, ils n'ont pas de fond a assombrir. */
.roll-cta.site-nav__cta,
.roll-cta.sj-title__cta,
.roll-cta.offer-title__cta {
  transition: background-color 0.25s ease;
}

.roll-cta.site-nav__cta:hover,
.roll-cta.site-nav__cta:focus-visible,
.roll-cta.sj-title__cta:hover,
.roll-cta.sj-title__cta:focus-visible,
.roll-cta.offer-title__cta:hover,
.roll-cta.offer-title__cta:focus-visible {
  background: #1E4B1F;
}

@media (prefers-reduced-motion: reduce) {
  .roll-cta:hover .roll-cta__inner,
  .roll-cta:focus-visible .roll-cta__inner {
    transform: none; /* une seule copie reste en place, pas d'animation */
  }
  .roll-cta__inner {
    transition: none;
  }
}

ul {
  list-style: none;
}

/* ==========================================================================
   TOP — bloc nav + image principale (marge resserree : 20px)
   ========================================================================== */

.top-block {
  padding: 0 var(--top-padding) var(--top-padding) var(--top-padding);
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   NAVIGATION — sticky sur TOUTE la hauteur de la page (hors de .top-block
   expres, pour que son "conteneur de positionnement" soit la page entiere
   et pas juste le bloc du haut : sinon elle se decollerait des qu'on
   scrolle plus bas que l'image principale).
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  padding: var(--top-padding) var(--top-padding) 0 var(--top-padding);
  /* pas de margin-bottom ici : l'espacement avec ce qui suit la nav
     (baseline sur sejour.html, spacer sur les autres pages) est gere par
     l'element suivant, pas par la nav elle-meme. Ca permet de reutiliser
     .site-nav telle quelle sur toutes les pages. */
}

/* Version "repliee" de la nav (logo reduit, sans baseline) utilisee en
   permanence sur les pages secondaires (A propos, etc.) : c'est exactement
   le meme rendu que l'etat .is-scrolled de sejour.html, applique en dur. */
.site-nav--collapsed .site-nav__logo img {
  width: 11rem;
}

.site-nav__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.site-nav__logo img {
  width: 23rem;   /* logo reduit */
  height: auto;
  transition: width 0.25s ease;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 1.8125rem;   /* 29px */
}

.site-nav__links a {
  font-weight: 400;
  font-size: 1rem;  /* 16px */
  white-space: nowrap;
}

.site-nav__cta {
  /* soulignement au survol gere par la regle globale a::after */
}

/* Etat "scrolled" ajoute en JS : le logo retrecit (barre toujours transparente, sans separation) */
.site-nav.is-scrolled .site-nav__logo img {
  width: 11rem;
}

/* ==========================================================================
   TAGLINE (defile normalement, pas sticky)
   ========================================================================== */

.tagline {
  font-size: 1.5rem; /* 24px */
  text-transform: uppercase;
  max-width: 19.125rem; /* 306px */
  margin-top: var(--nav-to-tagline-gap);
  margin-bottom: var(--tagline-to-hero-gap);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero img,
.hero video {
  width: 100%;
  aspect-ratio: 1378 / 641;
  object-fit: cover;
}

/* ==========================================================================
   MAIN — reste du site (marge generale, plus large : 70px)
   ========================================================================== */

.main-block {
  padding: var(--main-padding);
}

/* ==========================================================================
   INTRO
   ========================================================================== */

.intro {
  display: flex;
  align-items: flex-start; /* les deux colonnes ferrees en haut */
  gap: 9.0625rem; /* 145px */
  margin-bottom: var(--gap-between-sections);
}

.intro__left,
.intro__right {
  flex: 1 1 0;
  min-width: 0;
}

.intro__title {
  font-size: 3.25rem;    /* 52px */
  line-height: 3.5rem;   /* 56px */
}

.intro__right p {
  font-size: 1.1rem; /* 24px */
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

.intro__right p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SECTIONS GENERIQUES (Espace / Cuisine / Plan / Services)
   ========================================================================== */

.section {
  margin-bottom: var(--gap-between-sections);
}

.section__title {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* espace titre / texte, resserre */
  max-width: 30.1875rem; /* 483px */
  margin-bottom: var(--gap-in-section);
}

.section__title h2,
.section__title-solo {
  font-family: "Helvetica Now Display Medium", "Helvetica Now Display", Helvetica, Arial, sans-serif;
  font-weight: 500; /* medium, pas gras */
  font-size: 3.25rem;   /* 52px */
  line-height: 3.5rem;  /* 56px */
  text-transform: uppercase;
}

.section__title-solo {
  margin-bottom: var(--gap-in-section);
}

.section__title p {
  font-size: 1rem;      /* 16px */
  line-height: 1.25rem; /* 20px */
}

/* --- Espace --- */

.espace-row-1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--gap-in-section);
}

.espace-img-a {
  width: 33.0625rem;  /* 529px */
}

.espace-img-b {
  width: 18.5625rem;  /* 297px */
}

.espace-row-2 {
  display: flex;
  justify-content: flex-end;
  padding-right: 7.5rem; /* 120px */
}

.espace-img-c {
  width: 24.6875rem; /* 395px */
}

/* --- Cuisine --- */

.cuisine-row-1 {
  margin-bottom: var(--gap-in-section);
}

.cuisine-row-1 img {
  width: 29.9375rem; /* 479px */
}

.cuisine-row-2 {
  display: flex;
  gap: 13.9375rem; /* 223px */
  align-items: flex-end;
}

.cuisine-row-2__left {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.cuisine-row-2__left img {
  width: 17.75rem; /* 284px */
}

.cuisine-row-2__right {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
}

.cuisine-row-2__right img {
  width: 23.8125rem; /* 381px */
}

/* --- Plan --- */

.plan-image {
  display: flex;
  justify-content: center;
}

.plan-image img {
  width: 66.6875rem; /* 1067px */
}

/* --- Services --- */

.services-list li {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-black);
  font-size: 1.375rem; /* 22px, resserre */
}

.services-list li:last-child {
  border-bottom: 1px solid var(--color-black);
}

/* --- Book link --- */

.book-link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.5rem 0;
}

.book-link a {
  font-size: 3.5rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
}

/* ==========================================================================
   PAGE "A PROPOS" (et pages secondaires similaires : nav repliee + TITLE +
   CONTENT). Marge laterale propre a cette page : 60px (different des 70px
   de sejour.html, tel que specifie dans la maquette Figma).
   ========================================================================== */

.about-main {
  /* pas de marge laterale par defaut sur cette structure de page interieure :
     seuls TITLE/SUBTITLE ont leur propre padding, CONTENT (photo incluse)
     va jusqu'au bord. */
}

.about-title {
  margin-top: var(--gap-between-sections); /* 80px, spacer apres la nav */
  padding: 0 3rem; /* 48px, meme marge que la home (margin-container) */
  font-family: Helvetica, Arial, sans-serif; /* Helvetica classique, comme sur emiliemarcheval.com/apropos */
  font-weight: 400;
  font-size: 6.875rem; /* 110px */
  line-height: 1;
  text-transform: uppercase;
}

.about-subtitle {
  margin-top: 1.125rem; /* 18px */
  padding: 0 3rem; /* 48px, meme marge que la home (margin-container) */
  max-width: 25.5625rem; /* 409px */
  font-size: 0.78rem; /* 15px */
  line-height: 1.3;
  text-transform: uppercase;
}

.about-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 36rem; /* grand espace entre photo et texte, memes proportions que emiliemarcheval.com/apropos */
  margin-top: 1.5rem; /* reduit depuis 80px (--gap-between-sections) : remonte la ligne image/texte */
  margin-bottom: var(--gap-between-sections);
  padding-left: 0;                 /* image ferree contre le bord gauche */
  padding-right: var(--main-padding); /* meme marge a droite que sejour.html (70px) */
}

.about-content__image {
  flex: 0 0 auto;
  width: 26.625rem; /* 426px (+10px) */
}

.about-content__image img,
.about-content__image video {
  width: 100%;
  aspect-ratio: 434 / 686; /* portrait plus etire, cf reference */
  object-fit: cover;
}

.about-content__text {
  flex: 0 0 auto;
  max-width: 26rem; /* meme largeur que la colonne image, cf reference */
}

.about-content__text p {
  font-size: 1rem;      /* 16px */
  line-height: 1.25rem; /* 20px */
  margin-bottom: 1.25rem;
}

.about-content__text p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   PAGES OFFRE (Massage bien-être / Consultation de naturopathie)
   Meme structure que "A propos" (nav repliee + CONTENT + FOOTER, cf
   .about-content plus haut), avec un bloc TITLE different : titre + sous-
   titre + bouton de reservation noir, repris de .sj-title (sejour.css,
   maquette Figma node 307-2186 / 307-2339).
   ========================================================================== */

.offer-title {
  padding: var(--gap-between-sections) 3rem 1.5rem; /* 80px haut (aligne sur .about-title), 24px bas : remonte le CONTENT juste en dessous, comme sur about.html */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.offer-title__h1 {
  font-family: Helvetica, Arial, sans-serif; /* meme famille que .about-title */
  font-weight: 400;
  font-size: 6.875rem; /* 110px */
  line-height: 1;
  text-transform: uppercase;
  align-self: flex-start;
}

.offer-title__break {
  display: inline; /* desktop : "Massage bien-être" sur une ligne (span inline standard,
     plus fiable qu'un <br> cache en CSS pour la gestion de l'espace) */
}

.offer-title__subtitle {
  font-size: 0.8rem; /* 11px, cf maquette */
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 1.5rem;
  max-width: 30%; /* desktop : retour a la ligne automatique, reinitialise en mobile plus bas */
}

.offer-title__cta {
  background: var(--color-black);
  color: var(--color-white) !important;
  font-size: 0.875rem; /* 14px */
  padding: 0.4375rem 0.75rem;
  border-radius: 0.25rem;
}

.offer-title__cta::after {
  display: none; /* pas de soulignement au survol sur ce bouton */
}

/* CTA en 2 exemplaires (haut du bloc TITLE + sous le texte descriptif) :
   sur desktop on affiche seulement celui du bas (aligne sur le PDF copywriting,
   le bouton suit le texte) ; sur mobile on garde celui du haut (layout mobile
   inchange, cf media query plus bas). */
.offer-title__cta--top {
  display: none !important; /* la regle generique "a:not(...)" plus bas dans
     la cascade a une specificite plus forte (0,2,1 vs 0,1,0) et repassait le
     bouton en inline-block malgre ce display:none : on force avec !important. */
}

.offer-title__cta--bottom {
  margin-top: 0.5rem;
}

/* Photo plus large que .about-content__image (proportions issues de la
   maquette Figma des pages massage/naturo : 578x771 au lieu de 434x686) */
.offer-content__image img,
.offer-content__image video {
  aspect-ratio: 578 / 771;
}

/* Le rapprochement du CONTENT est deja assure par le padding-bottom reduit
   de .offer-title ci-dessus : on annule le margin-top herite de
   .about-content (1.5rem) pour ne pas cumuler les deux espacements. */
.offer-content {
  margin-top: 0;
}

/* HERO + texte d'intro generique, reserve au mobile (cf maquette Figma
   node 322-2676 / 322-2752) : remplace le bloc bio + photo (.offer-content)
   qui reste la version desktop. Cache par defaut, affiche uniquement
   sous 768px (cf media query plus bas). */
.offer-mobile-intro {
  display: none;
}

/* ==========================================================================
   PAGES LEGALES (Mentions legales, CGU, CGV, Politique de confidentialite...)
   Template commun : nav repliee (reutilise .site-nav--collapsed), lien
   "Retour", puis un titre H1-Legal + une colonne de texte volontairement
   etroite (marges de 222px, bien plus larges que le reste du site) pour
   eviter les paragraphes trop larges a lire.
   ========================================================================== */

.legal-back {
  margin-top: var(--gap-between-sections); /* 80px, spacer apres la nav */
  padding: 0 3.75rem; /* 60px */
  font-size: 0.9375rem; /* 15px */
  text-transform: uppercase;
}

.legal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.875rem; /* 62px */
  padding: 0 13.875rem; /* 222px, colonne volontairement etroite */
  margin-top: var(--gap-between-sections); /* 80px, spacer apres le lien Retour */
  margin-bottom: var(--gap-between-sections);
}

.legal-title {
  width: 100%;
  font-family: "Helvetica Now Display", Helvetica, Arial, sans-serif;
  font-size: 3.25rem;   /* 52px, style H1-Legal */
  line-height: 3.5rem;  /* 56px */
  text-transform: uppercase;
}

.legal-heading {
  width: 100%;
  font-family: "Helvetica Now Display", Helvetica, Arial, sans-serif;
  font-size: 2.125rem;  /* 34px, style H2-Legal */
  line-height: 2.25rem; /* 36px */
}

.legal-body {
  width: 100%;
}

.legal-body p {
  font-size: 1rem;      /* 16px */
  line-height: 1.25rem; /* 20px */
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   RESERVATION — hero plein ecran (photo de la home en fond attenue, cf
   maquette Figma node 236:40) + widget Lodgify.
   ========================================================================== */

.rsv-hero {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
  background: var(--color-white);
}

/* Ces overrides ne concernent que le desktop : sur mobile on garde le meme
   comportement de nav que les autres pages "collapsed" (cf @media plus bas). */
@media (min-width: 769px) {
  /* Sur cette page, le logo colle trop au bord avec le padding standard
     (--top-padding, 20px, partage avec toutes les pages "collapsed") — on
     elargit juste ici plutot que de toucher au reglage global. */
  .rsv-nav.site-nav {
    position: static; /* pas de sticky sur cette page : la nav defile normalement avec le contenu */
    padding-left: var(--main-padding); /* 70px */
    padding-right: var(--main-padding);
    padding-bottom: var(--top-padding); /* le logo collait au bord bas de la barre (site-nav a padding-bottom: 0 par defaut) */
  }

  .rsv-nav.site-nav .site-nav__logo img {
    width: 8rem; /* logo diminue sur cette page (etait 11rem, cf .site-nav--collapsed) */
    transition: none; /* logo fixe dans la barre blanche : pas de retrecissement au scroll (is-scrolled) sur cette page */
  }
}

.rsv-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3; /* cf maquette : photo tres attenuee, sert de fond discret */
  pointer-events: none;
}

.rsv-hero__back {
  position: relative;
  z-index: 1;
  margin-top: var(--gap-between-sections); /* 80px, spacer apres la nav */
  padding: 0 3.75rem; /* 60px */
  font-size: 0.9375rem; /* 15px */
  text-transform: uppercase;
}

.rsv-hero__title {
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
  padding: 0 3.75rem; /* 60px */
  font-family: "Helvetica Now Display", Helvetica, Arial, sans-serif;
  font-size: 5.5rem; /* 88px, agrandi (etait 55px) */
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}

.reservation-widget {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 75rem; /* 1200px — le widget Lodgify est une barre large (dates +
     invites + bouton sur une ligne), pas un formulaire etroit : une largeur
     trop resserree lui faisait perdre sa mise en page (bloc "invites" mal
     encadre). */
  margin: 3.875rem auto 0;
  padding: 0 3.75rem;
}

@media (min-width: 769px) {
  .reservation-widget {
    margin-top: 6rem; /* moteur descendu, un peu plus d'air sous le titre */
  }
}

@media (max-width: 768px) {
  .rsv-hero__back,
  .rsv-hero__title,
  .reservation-widget {
    padding: 0 1.625rem;
  }

  .rsv-hero__title {
    font-size: 3.5rem; /* agrandi (etait 2.5rem) */
  }
}

.legal-body p:last-child {
  margin-bottom: 0;
}

.legal-body ul {
  list-style: disc;
  margin: 0 0 1.25rem 1.25rem;
}

.legal-body li {
  font-size: 1rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-white);
  color: var(--color-black);
  padding: 3.75rem; /* 60px, tous cotes */
}

/* Filet de separation en haut du footer : marge de 48px (comme
   margin-container ailleurs sur le site), donc etire de 12px de chaque
   cote par rapport au padding du footer (60px) via des marges negatives. */
.site-footer::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--color-black);
  margin: 0 -0.75rem 3.75rem;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 3.75rem; /* 60px */
}

.site-footer__talk {
  display: none; /* essai : "Let's talk" masque, desktop + mobile (cf demande) */
  font-size: 3.25rem; /* 52px */
  text-transform: uppercase;
  text-align: left;
}

.site-footer__row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.site-footer__col p {
  font-size: 2.125rem; /* 34px */
  margin-bottom: 0.25rem;
}

/* Liens du footer : restent blancs en toutes circonstances (herite de
   color:white sur .site-footer + la regle globale a{color:inherit}).
   Le racing underline est deja gere par la regle globale plus haut. */

.site-footer__col--small p {
  font-size: 1rem;      /* 16px */
  line-height: 1.25rem; /* 20px */
  margin-bottom: 0;
}

/* ==========================================================================
   RESPONSIVE (< 768px) — mise en pile simple en attendant la maquette mobile
   ========================================================================== */

@media (max-width: 768px) {
  /* NAV — cf maquette mobile (node 322-2593/2676/2752) : les 3 liens
     passent AU-DESSUS du logo (fond blanc, filet de separation), le logo
     (plus grand, cliquable vers la home) se retrouve en dessous. Meme
     principe que .nav2 sur la home (column-reverse) : on inverse juste
     l'ordre visuel en CSS, sans toucher au HTML. */
  /* Seuls les liens restent stickies (cf ci-dessous) : le conteneur .site-nav
     lui-meme redevient un bloc normal du flux, pour que le logo defile avec
     la page au lieu de rester fige en haut. */
  .site-nav {
    position: relative; /* plus "sticky" (le logo defile normalement), mais
       "relative" (pas "static") pour rester le repere de positionnement du
       bouton .site-nav__cta (sejour.html), positionne en absolute. */
    padding-top: 8.5rem; /* degage le bandeau liens fixed (~6rem) + un vrai
       espace visuel avant le logo, au lieu d'etre colle au filet gris. */
  }

  /* Pages "offre" (sejours/massage/naturopathie) : plus d'air au-dessus du
     logo, cf maquette mise a jour (le logo est nettement plus bas que sur
     about/mentions-legales). */
  .site-nav--offer {
    padding-top: 15rem;
    padding-left: 2.35rem; /* aligne le logo sur la marge du titre/contenu
       en dessous (1.75rem -> 2.35rem, +5px), au lieu de var(--top-padding) */
    padding-right: 2.35rem;
  }

  .site-nav__inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2.1875rem; /* ~35px, cf spacer entre le filet et le logo sur la maquette */
  }

  .site-nav__links {
    /* fixed (et non sticky) : "sticky" ne reste colle que dans les limites
       de son parent (.site-nav__inner), qui ne fait que la hauteur du
       logo+liens -> le filet se detachait donc au bout de quelques px de
       scroll. En "fixed", la barre reste ancree a l'ecran sur toute la
       hauteur de la page, quel que soit le parent. */
    position: fixed;
    top: calc(-1 * env(safe-area-inset-top, 0px)); /* remonte le fond blanc
       sous l'encoche/barre de statut : sans ca, certains navigateurs
       in-app (ex. WhatsApp) laissent voir la page en flou au-dessus de la
       barre au lieu d'un fond blanc plein. */
    left: 0;
    width: 100%;
    z-index: 100;
    background: var(--color-white);
    padding: calc(2.5rem + env(safe-area-inset-top, 0px)) var(--top-padding) 1rem; /* +env() compense le "top" negatif ci-dessus pour garder les liens a la meme hauteur visuelle */
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid #e2e2e2; /* petit filet gris, repris a l'identique du nav mobile scrolled de la home (.nav2--white.is-scrolled) */
    /* Cachee tant qu'on n'a pas scrolle (cf .is-scrolled plus bas) : fondu
       en opacite, pas de disparition nette. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .site-nav.is-scrolled .site-nav__links {
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav__links a {
    font-weight: 700; /* gras, repris de la home */
    font-size: 1.75rem; /* repris de la home (.nav2__links a mobile) */
    white-space: normal;
  }

  /* Logo plus grand qu'en desktop replie, en vw/px plutot qu'en rem (la
     base rem est figee a 8.3px sous 768px, cf home.css). On neutralise
     aussi l'etat is-scrolled (JS, script.js) qui retrecirait sinon le
     logo au premier scroll : sur mobile il reste a taille fixe. */
  .site-nav--collapsed .site-nav__logo img,
  .site-nav__logo img,
  .site-nav.is-scrolled .site-nav__logo img {
    width: min(45vw, 190px);
  }

  /* Pages "offre" : logo plus grand, cf maquette mise a jour (node
     322-2593/2676/2752 : logo 263.7px sur un cadre de 603px large). */
  .site-nav--offer .site-nav__logo img {
    width: min(52vw, 310px);
  }

  /* reservation.html : logo un peu trop gros et colle au bord bas de la
     barre blanche (juste au-dessus de la photo de fond), on reduit et on
     ajoute un peu d'air. */
  .rsv-nav .site-nav__logo img {
    width: min(38vw, 150px);
  }

  .rsv-nav.site-nav {
    padding-bottom: 1.5rem;
  }

  .intro {
    flex-direction: column;
    gap: 2rem;
  }

  .espace-row-1,
  .cuisine-row-2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .espace-row-2 {
    padding-right: 0;
    justify-content: center;
  }

  .cuisine-row-2__right {
    justify-content: flex-start;
  }

  .site-footer {
    padding-left: 2.35rem; /* alignee sur la marge gauche/droite du reste du site mobile (2.35rem) */
    padding-right: 2.35rem;
  }

  .site-footer__inner {
    gap: 7.25rem; /* 60px, cf maquette mobile */
  }

  .site-footer__row {
    flex-direction: column;
    gap: 3rem;
  }

  .site-footer__talk {
    font-size: 5.75rem;
    line-height: 1.15;
  }

  .site-footer__col p {
    font-size: 4rem;
    line-height: 1.3;
  }

  .site-footer__col--small p {
    font-size: 1.875rem; /* taille du texte courant des cartes (.stage__desc) */
    line-height: 1.3;
  }

  .book-link a {
    font-size: 3rem;
  }

  .about-content {
    flex-direction: column;
    gap: 2.5rem;
    padding: 0 2.35rem; /* symetrique gauche/droite (au lieu de 0/70px sur desktop) ; +5px, aligne sur les 3 pages offre */
  }

  .about-content__image,
  .about-content__text {
    width: 100%;
    max-width: 100%;
  }

  .about-content__text p {
    font-size: 1.875rem; /* alignee sur le corps de texte mobile du reste du site (offer-mobile-intro__words) */
    line-height: 1.3;
    margin-bottom: 1.5rem;
  }

  .about-title {
    margin-top: 7.23rem; /* logo->titre, aligne sur .offer-title (60px, cf 3 pages offre) */
    padding: 0 2.35rem; /* alignee sur .offer-title mobile (au lieu de 3rem desktop) ; +5px */
    font-size: 7.95rem; /* aligne sur .offer-title__h1 (3 pages offre) */
    line-height: 0.9;
  }

  .about-subtitle {
    padding: 0 2.35rem;
    max-width: none;
    font-size: 1.5rem; /* alignee sur .offer-title__subtitle mobile (au lieu de 0.78rem, illisible) */
    margin-top: 2.41rem; /* titre->sous-titre, aligne sur .offer-title (20px) */
  }

  .offer-title {
    padding: 7.23rem 2.35rem 4.82rem; /* 60px haut (logo->titre), 40px bas
       (bouton->image), cf maquette (node 322-2676/2752). Marge gauche/droite
       +5px vs le reste du site (1.75rem -> 2.35rem). */
    align-items: flex-start;
    gap: 0; /* les ecarts sont geres via les margin-bottom ci-dessous
       (asymetriques : 20px titre->sous-titre, 100px sous-titre->bouton) */
  }

  .offer-title__h1 {
    font-size: 5.5rem; /* 66px, cf maquette */
    line-height: 0.9; /* 59px, cf maquette (leading plus serre que le corps) */
    margin-bottom: 2.41rem; /* 20px, cf maquette */
  }

  .offer-title__break {
    display: block; /* retour a la ligne "Massage / bien-être" : le span
       passe en block, ce qui force le saut de ligne sans avoir besoin d'un
       <br> (et l'espace avant se collapse naturellement en fin de ligne) */
  }

  .offer-title__subtitle {
    font-size: 1.5rem; /* 19px sur la maquette mobile (603px de large) */
    max-width: none; /* annule le retour a la ligne desktop (1/5 de largeur) */
    margin-bottom: 12rem; /* 100px (60px padding-bottom du bloc titre +
       40px padding-top du bloc CTA sur la maquette), cf node 322-2752 */
  }

  .offer-title__cta {
    font-size: 1.875rem; /* 24px sur la maquette */
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
  }

  .offer-title__cta--top {
    display: inline-block !important; /* reaffiche celui du haut sur mobile
       (doit rester !important pour l'emporter sur le display:none !important
       du bloc desktop juste au-dessus) */
  }

  .offer-title__cta--bottom {
    display: none !important; /* meme souci de specificite que le bouton du
       haut sur desktop : la regle generique "a:not(...)" repasse sinon le
       bouton en inline-block. */
  }

  /* Sous 768px, le bloc bio + photo desktop (.offer-content) laisse la
     place au HERO + texte d'intro generique de la maquette mobile
     (.offer-mobile-intro), cf sections plus haut. */
  .offer-content {
    display: none;
  }

  .offer-mobile-intro {
    display: block;
  }

  .offer-mobile-intro__hero {
    padding: 0 2.35rem; /* marge gauche/droite, cf maquette (image plus jamais bord a bord) ; +5px vs le reste du site */
  }

  .offer-mobile-intro__hero img,
  .offer-mobile-intro__hero video {
    display: block;
    width: 100%;
    aspect-ratio: 507 / 790;
    object-fit: cover;
  }

  .offer-mobile-intro__words {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 3rem 2.35rem; /* +5px vs le reste du site (1.75rem -> 2.35rem) */
  }

  .offer-mobile-intro__words p {
    font-size: 1.875rem; /* 20px sur la maquette */
    line-height: 1.3;
  }

  .legal-content {
    padding: 0 1.625rem;
  }

  .legal-title {
    font-size: 3rem;
  }

  .legal-heading {
    font-size: 1.75rem;
  }
}