/* ==========================================================
   Wellness Rituals by Jules - page d'accueil
   Structure inspirée d'un template éditorial immobilier,
   charte terracotta de Julie, Italiana + Belleza
   ========================================================== */

:root {
  --ink: #211510;
  --cream-text: #F6EEE0;
  --page: #F4F0E8;
  --card: #FFFDF8;
  --sand: #E4DCCE;
  --terracotta: #8F3C12;
  --terracotta-deep: #571B05;
  --terracotta-soft: #D59E7D;
  --gold: #F49C42;

  --font-display: "Marcellus", serif;
  --font-body: "Manrope", sans-serif;

  --radius: 22px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-gap: clamp(6rem, 11vw, 9.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.06; }

.label {
  display: inline-block;
  font-size: .82rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1.3rem;
}
.on-dark .label { color: var(--gold); }

p { max-width: 62ch; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Apparitions au scroll ---------- */

.fadein {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s ease;
}
.fadein.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fadein { opacity: 1; transform: none; transition: none; }
}

/* ---------- Navigation ---------- */

.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-nav.scrolled {
  background: var(--page);
  box-shadow: 0 1px 0 var(--sand);
}
/* Logo sur trois lignes, comme sur la charte */
.brand { text-decoration: none; color: inherit; line-height: 1.05; display: inline-block; }
.brand .b1 {
  display: block;
  font-family: var(--font-body); font-weight: 400;
  font-size: .92rem; letter-spacing: .28em; text-transform: uppercase;
}
.brand .b2 {
  display: block;
  font-family: var(--font-display);
  font-size: 1.22rem; letter-spacing: .24em; text-transform: uppercase;
}
.brand .b3 {
  display: block; text-align: right;
  font-size: .6rem; font-weight: 600; letter-spacing: .2em;
  color: var(--gold);
}
.site-nav.scrolled .brand .b3, .site-nav.static-nav .brand .b3 { color: var(--terracotta); }
.nav-links { display: flex; align-items: center; gap: 2.2rem; }
.nav-links a {
  text-decoration: none;
  font-size: .92rem; letter-spacing: .14em; text-transform: uppercase;
}
.nav-links a:hover { color: var(--terracotta); }

.site-nav, .site-nav .brand { color: var(--cream-text); }
.site-nav.scrolled, .site-nav.scrolled .brand { color: var(--ink); }

.lang-switch {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1.5px solid currentColor; border-radius: 999px;
  padding: .28rem .7rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .1em;
}
.lang-switch .flag {
  width: 18px; height: 9px;
  display: block; border-radius: 1px;
  box-shadow: 0 0 0 .5px rgba(33, 15, 5, .25);
}

/* Bloc de droite sur mobile : la langue reste accessible sans ouvrir le menu */
.nav-right { display: none; align-items: center; gap: .6rem; }
@media (max-width: 900px) {
  .nav-right { display: flex; }
  .nav-links .lang-switch { display: none; }
}

.nav-toggle {
  display: none;
  background: none; border: 1.5px solid currentColor; border-radius: 999px;
  padding: .38rem .85rem; color: inherit;
  font: 600 .8rem var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    gap: 1.4rem; padding: 1.6rem var(--gutter) 2rem;
    background: var(--page); color: var(--ink);
    box-shadow: 0 1px 0 var(--sand);
  }
  .nav-links.open { display: flex; }
  .site-nav:not(.scrolled) .nav-links.open { color: var(--ink); }
}

/* ---------- Hero plein écran ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--cream-text);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33, 15, 5, .42) 0%, rgba(33, 15, 5, .18) 45%, rgba(33, 15, 5, .55) 100%);
}
.hero-center {
  text-align: center;
  padding: 0 var(--gutter);
  display: grid; justify-items: center;
}

/* Le H1 est le premier élément lu, et le plus gros */
.hero h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); }

.hero-sub {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  max-width: 46ch;
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center;
  margin-top: 2.4rem;
}
/* Sur la photo du hero, le bouton secondaire doit rester lisible */
.hero .btn-ghost { border-color: var(--cream-text); color: var(--cream-text); }
.hero .btn-ghost:hover { background: var(--cream-text); color: var(--ink); }

.hero-wordmark {
  position: absolute; left: 0; right: 0; bottom: 2.2vw;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8.5vw, 5.2rem);
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sur ordinateur, le mot s'étire en largeur plutôt que de grossir.
   Taille et interlettrage restent proportionnels à la largeur de l'écran :
   le mot occupe toujours la même part de la page, sans jamais déborder. */
@media (min-width: 900px) {
  .hero-wordmark {
    font-size: min(5.8vw, 5.2rem);
    letter-spacing: .38em;
    text-indent: .38em;   /* compense l'espace ajouté après la dernière lettre */
  }
}

/* ---------- Révélation cercle au scroll ---------- */

.circle-reveal { height: 220vh; position: relative; }
.circle-stage {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}
.circle-media {
  position: relative;
  width: min(46vw, 330px);
  aspect-ratio: 3 / 4.4;
  border-radius: 20px;
  overflow: hidden;
  transform: scale(var(--reveal, 1));
  will-change: transform;
}
.circle-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(calc(1.35 - .35 * var(--reveal-p, 0)));
}
/* fondu sombre progressif : lisibilité maximale du texte en fin de zoom */
.circle-media::after {
  content: "";
  position: absolute; inset: 0;
  background: rgb(28, 12, 4);
  opacity: calc(.6 * var(--reveal-p, 0));
}
.circle-caption {
  position: absolute; z-index: 2;
  text-align: center;
  color: var(--cream-text);
  opacity: var(--reveal-p, 0);
  transition: opacity .2s linear;
  padding: 0 var(--gutter);
}
.circle-caption .label { color: var(--cream-text); }
.circle-caption h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); max-width: 18ch; text-shadow: 0 1px 22px rgba(33, 15, 5, .45); }
.tagline-sub {
  margin: 1.3rem auto 0;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  max-width: 42ch;
  text-shadow: 0 1px 18px rgba(33, 15, 5, .55);
}

@media (prefers-reduced-motion: reduce) {
  .circle-reveal { height: auto; }
  .circle-stage { position: static; height: 72svh; }
  .circle-media { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; transform: none; }
  .circle-media::after { opacity: .6; }
  .circle-caption { opacity: 1; }
}

/* ---------- Le soin : bénéfices ---------- */

.soin { padding-bottom: var(--section-gap); }
.soin-title {
  color: var(--terracotta);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  margin-bottom: .6rem;
}
.soin-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.2;
  max-width: 24ch;
}
.soin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
@media (max-width: 860px) { .soin-grid { grid-template-columns: 1fr; } }
.soin-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 2.2rem 2.1rem;
  box-shadow: 0 1px 1px rgba(20, 10, 4, .06);
}
.soin-label {
  display: block;
  font-size: .82rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1.3rem;
}
.benefits { display: grid; gap: .85rem; }
.benefits li { position: relative; padding-left: 1.7rem; font-size: 1.15rem; }
.benefits li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--terracotta);
}
.soin-card p { max-width: 44ch; font-size: 1.1rem; }
.soin-card-solo { max-width: 640px; }
.soin-body { margin-top: 2.2rem; max-width: 60ch; font-size: 1.15rem; }

/* ---------- Éventail d'images + intro About ---------- */

.fan-section { padding: var(--section-gap) 0; overflow: hidden; }
.fan {
  position: relative;
  height: min(56vh, 500px);
  max-width: 1100px;
  margin: 0 auto;
}
.fan-item {
  position: absolute; left: 50%; top: 0;
  width: min(40vw, 290px);
  aspect-ratio: 3 / 4.3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 44px rgba(33, 15, 5, .16);
  transform:
    translateX(-50%)
    translateX(calc(var(--tx) * var(--fan-p, 0)))
    rotate(calc(var(--rot) * var(--fan-p, 0)));
  will-change: transform;
}
.fan-item img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .fan-item { transform: translateX(-50%) translateX(var(--tx)) rotate(var(--rot)); }
}

.pill {
  display: inline-block;
  background: var(--sand);
  border-radius: 10px;
  padding: .55rem 1.2rem;
  font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
}

.about-intro {
  text-align: center;
  padding: var(--section-gap) 0;
  display: grid; justify-items: center; gap: 1.7rem;
}
.about-statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  max-width: 28ch;
}

/* Les deux fragments qui portent la crédibilité ressortent en terracotta */
.about-statement .accent { color: var(--terracotta); }

/* Le texte s'écrit au fil du scroll, mot après mot */
.about-statement .w {
  opacity: .14;
  transition: opacity .45s ease;
}
.about-statement .w.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .about-statement .w { opacity: 1; transition: none; }
}
/* Le second temps du manifeste : la réponse au problème posé au-dessus */
.about-answer {
  font-size: clamp(1.08rem, 1.9vw, 1.35rem);
  line-height: 1.6;
  max-width: 54ch;
}

.avatars { display: flex; margin-top: .4rem; }
.avatars img {
  width: 58px; height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--page);
}
.avatars img + img { margin-left: -16px; }
.avatars-note {
  font-size: .88rem; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: .68rem 1.5rem;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }

/* Un cran au-dessus sur ordinateur : la taille mobile y paraît trop menue */
@media (min-width: 900px) {
  .btn { font-size: .86rem; padding: .82rem 1.9rem; }
}
.btn-primary { background: var(--terracotta); color: var(--cream-text); }
.btn-primary:hover { background: var(--terracotta-deep); }
.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream-text); }
/* Terracotta plutôt que doré, y compris sur les fonds sombres */
.on-dark .btn-primary { background: var(--terracotta); color: var(--cream-text); }
.on-dark .btn-primary:hover { background: var(--cream-text); color: var(--terracotta-deep); }
.on-dark .btn-ghost { border-color: var(--cream-text); color: var(--cream-text); }
.on-dark .btn-ghost:hover { background: var(--cream-text); color: var(--terracotta-deep); }

.arrow-link {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none;
  font-size: .95rem; letter-spacing: .2em; text-transform: uppercase;
}
.arrow-link::after { content: "→"; font-family: var(--font-body); transition: transform .15s ease; }
.arrow-link:hover::after { transform: translateX(6px); }
.arrow-link:hover { color: var(--terracotta); }

/* ---------- Duo de cartes CTA ---------- */

.duo { padding-bottom: var(--section-gap); }
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
/* Une seule carte : elle se centre au lieu de laisser une colonne vide */
.duo-grid:has(> .duo-card:only-child) { grid-template-columns: minmax(0, 720px); justify-content: center; }
@media (max-width: 860px) { .duo-grid { grid-template-columns: 1fr; } }

.duo-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex; flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(20, 10, 4, .06);
}
.duo-top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--sand);
  margin-bottom: 1.5rem;
  font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
}
.duo-top .duo-arrow {
  font-size: 1.5rem; line-height: 1;
  transition: transform .2s ease;
}
.duo-card:hover .duo-arrow { transform: translate(4px, -4px); }
.duo-card h3 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin-bottom: .8rem; max-width: 18ch; }
.duo-card p { max-width: 48ch; margin-bottom: 1.6rem; }
.duo-media {
  margin-top: auto;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 4.2;
}
.duo-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.duo-card:hover .duo-media img { transform: scale(1.04); }
.kenburns img { animation: kenburns 16s ease-in-out infinite alternate; }
.duo-card:hover .kenburns img { transform: none; }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.14) translate(-2%, 2%); }
}
@media (prefers-reduced-motion: reduce) { .kenburns img { animation: none; } }

/* ---------- Rituels (listing) ---------- */

.rituals { padding-bottom: var(--section-gap); }
.section-head { max-width: 52ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.section-head p { margin-top: 1rem; }

.ritual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 980px) { .ritual-grid { grid-template-columns: 1fr; } }

.ritual-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(20, 10, 4, .06);
  display: flex; flex-direction: column;
}
.ritual-media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.ritual-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ritual-card:hover .ritual-media img { transform: scale(1.05); }
.ritual-price {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--page); color: var(--ink);
  border-radius: 999px;
  padding: .4rem 1.1rem;
  font-size: 1rem; letter-spacing: .06em;
}
.ritual-body { padding: 1.6rem 1.7rem 1.9rem; display: flex; flex-direction: column; gap: .55rem; }
.ritual-body h3 { font-size: 1.75rem; }
.ritual-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.3rem;
  font-size: .88rem; letter-spacing: .16em; text-transform: uppercase;
  border-top: 1.5px solid var(--sand);
  padding-top: .9rem; margin-top: .7rem;
}
/* Le bouton se cale en bas, les trois cartes restent alignées */
.ritual-card .btn { margin-top: 1.3rem; align-self: flex-start; }
.ritual-body { flex: 1; }

.deposit-note {
  margin-top: 2rem;
  font-size: 1rem;
  max-width: none;
}

/* ---------- Blocs valeur alternés ---------- */

.values { padding-bottom: var(--section-gap); }
.value-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.value-row:nth-child(even) .value-media { order: 2; }
@media (max-width: 860px) {
  .value-row { grid-template-columns: 1fr; }
  .value-row:nth-child(even) .value-media { order: 0; }
}
.value-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 4.6;
}
.value-media img { width: 100%; height: 100%; object-fit: cover; }
.value-copy h3 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 1rem; max-width: 18ch; }
.value-copy ul { margin: 1.4rem 0 1.8rem; display: grid; gap: .75rem; max-width: 54ch; }
.value-copy li {
  padding-left: 1.6rem;
  position: relative;
}
.value-copy li::before {
  content: "";
  position: absolute; left: 0; top: .58em;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--terracotta);
}

/* ---------- Témoignages marquee ---------- */

.testimonials {
  background: var(--sand);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  overflow: hidden;
}
.testimonials .label { display: block; text-align: center; margin-bottom: 2.2rem; }
.marquee { display: flex; gap: 1.5rem; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
.t-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.9rem 2rem;
  width: min(400px, 84vw);
  box-shadow: 0 1px 1px rgba(20, 10, 4, .06);
}
.t-card blockquote {
  font-family: var(--font-display);
  font-size: 1.35rem; line-height: 1.35;
  margin-bottom: 1.1rem;
}
.t-card cite {
  font-style: normal;
  font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- Personas : cartes empilées au scroll ---------- */

.personas { padding: var(--section-gap) 0; }
.stack { display: grid; gap: 1.6rem; }
.stack-card {
  position: sticky;
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0 clamp(1.6rem, 3.5vw, 3rem);
  align-items: center;
}
.stack-card:nth-child(1) { top: 5.5rem; }
.stack-card:nth-child(2) { top: 8rem; }
.stack-card:nth-child(3) { top: 10.5rem; }
.stack-card:nth-child(4) { top: 13rem; }
@media (max-width: 860px) {
  .stack-card { grid-template-columns: 1fr; align-items: start; }
  .stack-card .s-media { order: 1; }
  .stack-card .s-body { order: 2; }
}
.stack-card .s-label {
  grid-column: 1 / -1;
  display: block;
  font-size: .82rem; letter-spacing: .26em; text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.stack-card .s-media {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
@media (max-width: 860px) { .stack-card .s-media { aspect-ratio: 16 / 8; margin-bottom: .4rem; } }
.stack-card .s-media img { width: 100%; height: 100%; object-fit: cover; }
.stack-card h3 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1rem; max-width: 18ch; }
.stack-card p { margin-bottom: 1.9rem; max-width: 52ch; }
.stack-card .btn { display: block; text-align: center; }

.sc-deep { background: var(--terracotta-deep); color: var(--cream-text); }
.sc-mid { background: var(--terracotta); color: var(--cream-text); }
.sc-sand { background: var(--sand); color: var(--ink); }
.sc-light { background: var(--card); color: var(--ink); box-shadow: 0 1px 1px rgba(20, 10, 4, .06); }
.sc-deep .btn, .sc-mid .btn { background: var(--gold); color: var(--ink); }
.sc-deep .btn:hover, .sc-mid .btn:hover { background: var(--cream-text); }
.sc-sand .btn, .sc-light .btn { background: var(--terracotta); color: var(--cream-text); }
.sc-sand .btn:hover, .sc-light .btn:hover { background: var(--terracotta-deep); }

/* ---------- Julie (équipe) ---------- */

.meet { padding-bottom: var(--section-gap); }
.meet-grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) { .meet-grid { grid-template-columns: 1fr; } }
.meet-media {
  border-radius: 999px 999px var(--radius) var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.meet-media img { width: 100%; height: 100%; object-fit: cover; }
.meet blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  margin: 1.6rem 0;
  max-width: 26ch;
}
.meet .role {
  display: block;
  font-size: .85rem; letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: .4rem;
}
.meet .name { font-family: var(--font-display); font-size: 2.1rem; }

/* ---------- Cartes assurance à icônes ---------- */

.assure { padding-bottom: var(--section-gap); }
.assure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 980px) { .assure-grid { grid-template-columns: 1fr; } }
.assure-card {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 2.1rem 2rem;
}
.assure-card svg {
  width: 42px; height: 42px;
  margin-bottom: 1.4rem;
  stroke: var(--ink);
}
.assure-card .lead {
  font-family: var(--font-display);
  font-size: 1.45rem;
}

/* ---------- Mini CTA sous la FAQ ---------- */

.faq-cta {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 2.1rem 2rem;
  margin-top: 2.4rem;
  display: grid; justify-items: start; gap: .6rem;
}
.faq-cta h3 { font-size: 1.9rem; }
.faq-cta .btn { margin-top: 1rem; }

/* ---------- Grand CTA photo ---------- */

.big-cta {
  position: relative;
  min-height: 88svh;
  display: grid; place-items: center;
  text-align: center;
  color: var(--cream-text);
  overflow: hidden;
  border-radius: var(--radius);
  margin: 0 clamp(.6rem, 2vw, 1.5rem) var(--section-gap);
}
.big-cta > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
}
.big-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(33, 15, 5, .5);
}
.big-cta > div { position: relative; z-index: 1; padding: 4rem var(--gutter); }
.big-cta h2 { font-size: clamp(2.3rem, 5vw, 4rem); max-width: 18ch; margin: 0 auto 1.2rem; }
.big-cta p { margin: 0 auto 2.2rem; max-width: 52ch; }
.big-cta .label { color: var(--cream-text); }

/* ---------- FAQ ---------- */

.faq { padding-bottom: var(--section-gap); }
.faq-grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
.faq details {
  border-bottom: 1.5px solid var(--sand);
  padding: 1.1rem 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: .8rem 0 .4rem; max-width: 56ch; }

/* ---------- Pages document (conditions, mentions légales) ---------- */

.site-nav.static-nav { background: var(--page); box-shadow: 0 1px 0 var(--sand); }
.site-nav.static-nav, .site-nav.static-nav .brand { color: var(--ink); }

.doc-main { padding: 9.5rem 0 var(--section-gap); }
.doc-main h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin-bottom: .8rem; max-width: 20ch; }
.doc-sub {
  font-size: .85rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.doc { max-width: 74ch; }
.doc h2 {
  font-size: 1.85rem;
  margin: 2.6rem 0 .9rem;
  padding-top: 1.6rem;
  border-top: 1.5px solid var(--sand);
}
.doc p { margin-bottom: .9rem; max-width: 74ch; }
.doc ul { list-style: disc; padding-left: 1.4rem; margin-bottom: .9rem; }
.doc li { margin-bottom: .4rem; }
.doc .placeholder { background: var(--sand); border-radius: 6px; padding: 0 .45rem; }
.doc-sign {
  margin-top: 3.2rem;
  padding-top: 1.6rem;
  border-top: 1.5px solid var(--sand);
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.doc-sign .small {
  display: block;
  font-family: var(--font-body);
  font-size: .9rem; letter-spacing: .18em; text-transform: uppercase;
  margin-top: .5rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--terracotta);
  color: var(--cream-text);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
}
.site-footer a { color: var(--cream-text); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }

.footer-top {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr; } }
.footer-label {
  display: block;
  font-size: .82rem; letter-spacing: .26em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-top h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); max-width: 18ch; margin-bottom: 1rem; }
.footer-contact { display: grid; gap: .7rem; align-content: start; }
.footer-contact a { font-size: 1.15rem; }

.footer-links {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(246, 238, 224, .35);
}
.footer-links a { font-size: .92rem; letter-spacing: .16em; text-transform: uppercase; }

.footer-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 4.8rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  padding: 2.5rem 0 1.5rem;
}
/* Déclaré après la règle de base, sinon celle-ci l'emporterait */
@media (min-width: 900px) {
  .footer-wordmark {
    font-size: min(5.4vw, 4.8rem);
    letter-spacing: .36em;
    text-indent: .36em;
  }
}
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  border-top: 1px solid rgba(246, 238, 224, .35);
  padding-top: 1.4rem;
  font-size: .95rem;
}

/* Bouton de réservation dans la barre de navigation. Plus compact que les
   boutons de contenu, et il garde son contraste sur la photo du héros
   comme sur le fond crème une fois la barre passée en mode « scrolled ». */
.nav-cta {
  background: var(--terracotta);
  color: var(--cream-text) !important;
  border-radius: 999px;
  padding: .5rem 1.25rem;
  font-size: .82rem !important;
  letter-spacing: .14em;
}
.nav-cta:hover { background: var(--terracotta-deep); color: var(--cream-text) !important; }

/* Lien de gestion des cookies : un vrai bouton, pas un lien perdu dans la
   ligne du pied de page. Il suit la couleur du texte environnant. */
.cookie-btn {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.cookie-btn:hover { background: currentColor; }
.cookie-btn:hover span { color: var(--terracotta); }


/* ----------------------------------------------------------------------
   Bouton WhatsApp flottant. Terracotta de la charte plutôt que le vert de
   WhatsApp, avec un liseré crème : le bouton doit rester lisible aussi bien
   sur le fond crème des pages que sur le pied de page terracotta.

   Il n'apparaît qu'au premier défilement. En haut de page il masquerait le
   mot WELLNESS RITUALS du héros, très visible sur mobile, et il ferait
   doublon avec le bouton Réserver déjà présent sous le titre.
   ---------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  /* Le bandeau cookies occupe le même coin. Plutôt que de masquer le bouton,
     on le fait remonter juste au-dessus : il reste joignable en permanence,
     y compris pour un visiteur qui ignore le bandeau. La hauteur réelle du
     bandeau est mesurée par consent.js et posée dans --wr-consent-h. */
  bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + var(--wr-consent-h, 0px));
  z-index: 80;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #8F3C12;
  color: #F6EEE0;
  box-shadow: 0 0 0 2px rgba(246, 238, 224, .85), 0 10px 26px rgba(33, 21, 16, .22);

  /* État par défaut : absent tant qu'on n'a pas défilé. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;

  transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1),
              bottom .4s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}

/* Classe posée par wa-float.js dès le premier défilement. Légèrement
   transparent pour ne pas écraser la photo, opaque au survol. */
.wa-float.wa-on {
  opacity: .82;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.wa-float.wa-on:hover { opacity: 1; background: #571B05; transform: translateY(-3px); }
.wa-float:focus-visible { outline: 2px solid #F49C42; outline-offset: 4px; opacity: 1; }

.wa-float svg { width: 27px; height: 27px; fill: currentColor; display: block; }

/* Infobulle au survol, masquée au doigt */
.wa-float::after {
  content: attr(data-libelle);
  position: absolute; right: calc(100% + .7rem);
  white-space: nowrap;
  background: #211510; color: #F6EEE0;
  font: 500 .74rem/1 "Manrope", system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem .8rem; border-radius: 999px;
  opacity: 0; transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wa-float.wa-on:hover::after { opacity: 1; transform: none; }
@media (hover: none) { .wa-float::after { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float::after { transition: none; }
}

/* Tableau des cookies dans les mentions légales */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 1.6rem;
  font-size: .92rem;
}
.doc-table th, .doc-table td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--sand);
  vertical-align: top;
}
.doc-table th {
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.doc-table code { font-size: .88em; }
@media (max-width: 620px) {
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td { display: block; }
  .doc-table thead { display: none; }
  .doc-table tr { padding: .7rem 0; border-bottom: 1px solid var(--sand); }
  .doc-table td { border: 0; padding: .1rem 0; }
  .doc-table td:first-child { font-weight: 600; }
}

/* Avis Google : étoiles, source et mise en page de la carte.
   Les avis réels sont plus longs que des accroches, la police d'affichage
   passe donc en corps de texte pour rester lisible. */
.t-card blockquote {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.t-stars {
  display: block;
  color: var(--gold);
  font-size: .95rem;
  letter-spacing: .16em;
  margin-bottom: .8rem;
}
.t-src {
  display: block;
  margin-top: .25rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-style: normal;
}
.t-lien {
  display: block;
  text-align: center;
  margin-top: 2.4rem;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* Titre présent pour les moteurs et les lecteurs d'écran, invisible à l'œil :
   la section des avis se passe d'un titre affiché, la pastille suffit. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}