/* =========================================================
   ACCUEIL — version animée (GSAP + Lenis)
   Surcouche : réutilise les variables & le header/footer de style.css
   ========================================================= */

html{ scroll-behavior:auto; }            /* Lenis pilote le scroll */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

/* ---------- LOADER ---------- */
.loader{ position:fixed; inset:0; z-index:9000; background:var(--espresso); display:grid; place-items:center;
  animation:loaderOut 1.1s cubic-bezier(.7,0,.2,1) 1.15s forwards; }
.loader-inner{ overflow:hidden; }
.loader-name{ font-family:var(--serif); font-size:clamp(30px,5vw,58px); color:var(--creme); letter-spacing:.01em;
  transform:translateY(105%); animation:loaderName .95s cubic-bezier(.2,.7,.3,1) .15s forwards; }
.loader-sub{ display:block; text-align:center; margin-top:10px; font-family:var(--sans); font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ocre-clair); opacity:0;
  animation:loaderSub .8s ease .55s forwards; }
@keyframes loaderName{ to{ transform:none; } }
@keyframes loaderSub{ to{ opacity:1; } }
@keyframes loaderOut{ to{ transform:translateY(-101%); } }
.loader-done .loader{ display:none; }

/* ---------- CURSEUR PERSONNALISÉ ---------- */
.cursor, .cursor-dot{ display:none; }
@media (hover:hover) and (pointer:fine){
  body.has-cursor{ cursor:none; }
  body.has-cursor a, body.has-cursor button{ cursor:none; }
  .cursor{ display:block; position:fixed; top:0; left:0; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
    border:1.5px solid rgba(201,148,90,.8); z-index:9500; pointer-events:none; transition:width .3s, height .3s, margin .3s, background .3s, border-color .3s; will-change:transform; }
  .cursor-dot{ display:block; position:fixed; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
    background:var(--ocre); z-index:9501; pointer-events:none; will-change:transform; }
  .cursor.grow{ width:78px; height:78px; margin:-39px 0 0 -39px; background:rgba(201,148,90,.14); border-color:transparent; }
}

/* ---------- HERO PLEIN ÉCRAN ---------- */
.home-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:var(--creme); }
.hh-bg{ position:absolute; inset:-5% 0; z-index:0; will-change:transform; }
.hh-bg img{ width:100%; height:100%; object-fit:cover; object-position:45% 30%; filter:brightness(1.08) saturate(0.95); }
.hh-overlay{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(180deg, rgba(28,20,14,.28) 0%, rgba(28,20,14,.05) 32%, rgba(28,20,14,.36) 72%, rgba(28,20,14,.62) 100%),
  linear-gradient(96deg, rgba(28,20,14,.24), transparent 58%); }
.hh-grain{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.42; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hh-inner{ position:relative; z-index:3; width:100%; max-width:var(--container); margin:0 auto;
  padding:0 var(--pad-x) clamp(130px,18vh,200px); }
.hh-eyebrow{ display:inline-flex; align-items:center; gap:13px; font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ocre-clair); margin-bottom:clamp(22px,3vh,34px); }
.hh-eyebrow::before{ content:""; width:42px; height:1px; background:var(--ocre); }
.hh-title{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,4.2vw,68px); line-height:1.02; letter-spacing:-.018em; max-width:18ch; }
.hh-title em{ font-style:italic; color:var(--ocre-clair); }
.hh-line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hh-line > span{ display:block; will-change:transform; }
.hh-sub{ margin-top:clamp(16px,2vh,26px); max-width:48ch; font-size:clamp(15px,1.3vw,18px); line-height:1.68; color:rgba(251,247,240,.84); }
.hh-cta{ margin-top:clamp(22px,2.8vh,34px); display:flex; flex-wrap:wrap; gap:14px; }

.btn-glass{ background:rgba(251,247,240,.1); color:var(--creme); border:1.5px solid rgba(251,247,240,.5); backdrop-filter:blur(6px); }
.btn-glass:hover{ background:var(--creme); color:var(--espresso); border-color:var(--creme); transform:translateY(-3px); }

.hh-badge{ position:absolute; right:var(--pad-x); bottom:clamp(130px,18vh,200px); z-index:3; display:flex; align-items:center; gap:13px;
  background:rgba(251,247,240,.1); border:1px solid rgba(226,193,154,.4); backdrop-filter:blur(10px); border-radius:100px; padding:11px 20px 11px 13px; }
.hh-badge .sd{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--ocre); color:var(--espresso); font-family:var(--serif); font-size:19px; font-weight:600; }
.hh-badge .bt{ font-size:13px; line-height:1.25; color:var(--creme); }
.hh-badge .bt b{ font-weight:600; }
.hh-scroll{ position:absolute; left:var(--pad-x); bottom:16px; z-index:3; display:flex; align-items:center; gap:12px;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(251,247,240,.7); }
.hh-scroll .ln{ width:54px; height:1px; background:rgba(251,247,240,.4); position:relative; overflow:hidden; }
.hh-scroll .ln::after{ content:""; position:absolute; inset:0; background:var(--ocre-clair); animation:hhslide 2.4s ease-in-out infinite; }
@keyframes hhslide{ 0%{ transform:translateX(-100%);} 60%,100%{ transform:translateX(100%);} }

/* ---------- BANDEAU DÉFILANT ---------- */
.marquee{ background:linear-gradient(180deg, #6E4A3C 0%, var(--brun) 36%, var(--brun) 58%, #D9B7A0 100%); color:var(--creme); padding:24px 0; overflow:hidden; }
.marquee-track{ display:flex; align-items:center; width:max-content; will-change:transform; }
.marquee-item{ display:inline-flex; align-items:center; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(24px,3.1vw,44px); padding:0 28px; white-space:nowrap; }
.marquee-item .dot{ width:9px; height:9px; border-radius:50%; background:var(--ocre-clair); margin:0 0 0 56px; }

/* ---------- MANIFESTE ---------- */
.manifesto{ background:linear-gradient(180deg, #D9B7A0 0%, var(--lin) 16%, var(--lin) 100%); padding:clamp(110px,17vh,210px) 0; }
.mf-eyebrow{ display:block; margin-bottom:34px; }
.mf-text{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,4.3vw,62px); line-height:1.26; letter-spacing:-.005em;
  max-width:21ch; color:var(--anthracite); }
.mf-text .word{ display:inline; }
.mf-text .em{ font-style:italic; color:var(--brun); }
.mf-foot{ margin-top:44px; display:flex; align-items:center; gap:16px; color:var(--texte-doux); font-size:15px; }
.mf-foot .ln{ width:46px; height:1px; background:var(--ocre); }

/* ---------- LES SOINS : GALERIE HORIZONTALE ---------- */
.soins{ background:linear-gradient(180deg, var(--espresso) 0%, var(--espresso) 85%, #D9BBA8 100%); color:var(--creme); position:relative; overflow:hidden; }
.soins-pin{ height:100svh; display:flex; align-items:center; }
.soins-track{ display:flex; align-items:center; gap:clamp(20px,2.4vw,34px); padding:0 var(--pad-x); will-change:transform; }
.soin-intro{ flex:0 0 auto; width:min(82vw,440px); padding-right:clamp(10px,3vw,40px); }
.soin-intro .eyebrow{ color:var(--ocre-clair); display:block; margin-bottom:18px; }
.soin-intro h2{ font-size:clamp(38px,5vw,64px); color:var(--creme); line-height:1.04; }
.soin-intro p{ color:rgba(250,250,247,.66); margin-top:20px; font-size:17px; max-width:34ch; }
.soin-intro .swipe{ margin-top:30px; display:inline-flex; align-items:center; gap:12px; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ocre-clair); }
.soin-intro .swipe svg{ width:30px; height:14px; stroke:var(--ocre-clair); fill:none; stroke-width:1.6; }
.soin-card{ position:relative; flex:0 0 auto; width:min(80vw,400px); height:min(72svh,580px); border-radius:22px; overflow:hidden; box-shadow:var(--ombre-l); }
.soin-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform .8s cubic-bezier(.2,.7,.3,1); filter:brightness(1.2) saturate(0.88); }
.soin-card:hover img{ transform:scale(1.13); }
.soin-card .ov{ position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(26,18,12,.55)); }
.soin-card .body{ position:absolute; left:0; right:0; bottom:0; padding:30px 28px 28px; z-index:2; }
.soin-card .num{ font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ocre-clair); }
.soin-card h3{ font-size:clamp(25px,2.6vw,32px); color:var(--creme); margin:6px 0 14px; line-height:1.1; }
.soin-card .meta{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding-top:15px; border-top:1px solid rgba(251,247,240,.22); }
.soin-card .dur{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:rgba(251,247,240,.72); white-space:nowrap; }
.soin-card .prix{ font-family:var(--serif); font-size:30px; font-weight:600; color:var(--creme); white-space:nowrap; }
.soin-card .prix small{ font-size:16px; }
.soin-card--featured{ box-shadow:0 0 0 2px var(--ocre), var(--ombre-l); }
.soin-flag{ position:absolute; top:18px; left:18px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  background:var(--ocre); color:var(--espresso); font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; padding:7px 13px; border-radius:100px; box-shadow:var(--ombre-s); }
.soin-flag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--espresso); }
.soin-end{ flex:0 0 auto; width:min(72vw,330px); display:flex; flex-direction:column; justify-content:center; gap:22px; padding:0 10px; }
.soin-end p{ font-family:var(--serif); font-size:clamp(26px,3vw,38px); color:var(--creme); line-height:1.2; }

/* ---------- À PROPOS ---------- */
.home-about{ background:linear-gradient(180deg, #D9BBA8 0%, var(--blanc) 18%, var(--blanc) 80%, #F4EDE5 100%); padding:var(--section-y) 0; overflow:hidden; }
.ha-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(40px,6vw,92px); align-items:center; }
.ha-media{ position:relative; aspect-ratio:4/5; border-radius:var(--arch) var(--arch) var(--radius-lg) var(--radius-lg); overflow:hidden; box-shadow:var(--ombre-l); }
.ha-media img{ width:100%; height:118%; object-fit:cover; will-change:transform; filter:brightness(1.25) saturate(0.9); }
.ha-tag{ position:absolute; right:clamp(-8px,-2vw,-24px); top:42px; background:var(--creme); padding:15px 20px; border-radius:14px; box-shadow:var(--ombre-m); font-size:14px; line-height:1.4; max-width:200px; z-index:3; }
.ha-tag b{ font-family:var(--serif); font-size:17px; color:var(--brun); display:block; }
.ha-text .eyebrow{ display:block; margin-bottom:18px; }
.ha-text h2{ font-size:clamp(34px,4.4vw,58px); color:var(--anthracite); margin-bottom:24px; line-height:1.06; }
.ha-text p{ color:var(--texte-doux); margin-bottom:18px; font-size:17px; }
.ha-sign{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.4vw,29px); color:var(--brun); margin-top:24px; line-height:1.4; }
.ha-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:42px; padding-top:36px; border-top:1px solid var(--ligne); }
.ha-stats .n{ font-family:var(--serif); font-size:clamp(40px,4.6vw,58px); font-weight:600; color:var(--brun); line-height:1; }
.ha-stats .l{ font-size:13.5px; color:var(--texte-doux); margin-top:10px; line-height:1.35; }
.ha-text .more{ margin-top:36px; }

/* ---------- AVIS (fondu) ---------- */
.home-avis{ background:linear-gradient(180deg, #F4EDE5 0%, var(--lin) 14%, var(--lin) 72%, #E0C2AC 100%); text-align:center; padding:var(--section-y) 0; overflow:hidden; }
.av-eyebrow{ display:block; margin-bottom:18px; }
.av-stage{ display:grid; max-width:920px; margin:34px auto 0; }
.av-slide{ grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .5s ease; }
.av-slide.on{ opacity:1; visibility:visible; }
.av-stars{ color:var(--ocre); letter-spacing:4px; font-size:17px; margin-bottom:22px; }
.av-quote{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(24px,3.3vw,42px); line-height:1.4; color:var(--anthracite); }
.av-pers{ margin-top:30px; display:flex; align-items:center; justify-content:center; gap:14px; }
.av-av{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--brun); color:var(--creme); font-family:var(--serif); font-size:18px; font-weight:600; }
.av-nom{ font-weight:600; font-size:15.5px; }
.av-meta{ font-size:13px; color:var(--texte-doux); }
.av-dots{ display:flex; gap:9px; justify-content:center; margin-top:42px; }
.av-dot{ width:9px; height:9px; border-radius:50%; background:var(--lin-fonce); transition:background .3s ease, width .3s ease, border-radius .3s ease; cursor:pointer; }
.av-dot.on{ background:var(--brun); width:28px; border-radius:6px; }
.av-note{ margin-top:32px; font-size:14px; color:var(--texte-doux); }
.av-note a{ color:var(--brun); border-bottom:1px solid var(--ocre-clair); }

/* ---------- CTA MAGNÉTIQUE ---------- */
.home-cta{ background:linear-gradient(180deg, #E0C2AC 0%, var(--brun) 20%, var(--brun) 72%, var(--lin) 100%); color:var(--creme); text-align:center; padding:clamp(110px,15vh,180px) 0; position:relative; overflow:hidden; }
.home-cta::before{ content:""; position:absolute; width:60vw; height:60vw; max-width:720px; max-height:720px; left:50%; top:-30%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(230,205,180,.34), transparent 62%); pointer-events:none; }
.home-cta .container{ position:relative; }
.home-cta .eyebrow{ color:var(--ocre-clair); display:block; margin-bottom:18px; }
.home-cta h2{ font-size:clamp(38px,5.2vw,76px); color:var(--creme); margin-bottom:20px; line-height:1.04; }
.home-cta p{ color:rgba(251,247,240,.84); font-size:19px; max-width:46ch; margin:0 auto 40px; }
.cta-magnet{ display:inline-block; will-change:transform; }
.cta-magnet .btn{ font-size:16px; padding:18px 38px; }

/* filet de sécurité : si GSAP ne charge pas, tout est révélé */
html.no-gsap .hh-title{ visibility:visible !important; }
html.no-gsap .hh-eyebrow, html.no-gsap .hh-sub, html.no-gsap .hh-cta, html.no-gsap .hh-badge,
html.no-gsap .reveal-up{ opacity:1 !important; transform:none !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .soins-pin{ height:auto; padding:clamp(80px,12vh,120px) 0; }
  .soins-track{ width:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-bottom:18px; transform:none !important; }
  .soins-track::-webkit-scrollbar{ height:0; }
  .soin-intro{ width:min(86vw,420px); scroll-snap-align:start; }
  .soin-card{ width:min(74vw,330px); height:440px; scroll-snap-align:center; }
  .soin-end{ width:min(70vw,300px); }
  .ha-grid{ grid-template-columns:1fr; }
  .ha-media{ max-width:440px; margin:0 auto; }
}
@media (max-width:620px){
  .hh-badge{ display:none; }
  .hh-title{ font-size:clamp(38px,11vw,60px); }
  .ha-stats{ gap:18px; }
  .marquee-item{ font-size:26px; }
}
/* écrans peu hauts (laptops, fenêtres réduites) : le hero ne déborde pas sous le menu */
@media (max-height:680px){
  .hh-title{ font-size:clamp(34px,5.4vw,54px); }
  .hh-eyebrow{ margin-bottom:14px; }
  .hh-sub{ margin-top:16px; max-width:52ch; }
  .hh-cta{ margin-top:22px; }
  .hh-inner{ padding-bottom:clamp(36px,6vh,72px); }
}
@media (prefers-reduced-motion:reduce){
  .loader{ animation:none; display:none; }
  .loader-name{ animation:none; transform:none; }
  .loader-sub{ animation:none; opacity:1; }
  .hh-scroll .ln::after{ animation:none; }
  .soin-card img{ transition:none; }
}

/* ============ HEADER ADAPTATIF (accueil) ============ */
.header{ transition:padding .4s ease, box-shadow .4s ease; }
.logo-name,.logo-sub,.nav a,.burger span,.socials a,.header-right .btn-primary{
  transition:color .45s ease, background .45s ease, border-color .45s ease, box-shadow .45s ease; }
.header::after{ transition:opacity .45s ease, background .45s ease; }

/* Fond FONCÉ sous le menu → menu clair + léger scrim sombre */
.header.on-dark::after{ opacity:1; background:linear-gradient(180deg, rgba(26,18,12,.5), rgba(26,18,12,0));
  border-bottom:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.header.on-dark.scrolled::after{ background:linear-gradient(180deg, rgba(26,18,12,.82), rgba(26,18,12,.3)); }
.header.on-dark .logo-name{ color:var(--creme); }
.header.on-dark .logo-sub{ color:rgba(251,247,240,.7); }
.header.on-dark .nav a{ color:rgba(251,247,240,.9); }
.header.on-dark .nav a::after{ background:var(--ocre-clair); }
.header.on-dark .nav a:hover, .header.on-dark .nav a.active{ color:#fff; }
.header.on-dark .burger span{ background:var(--creme); }
.header.on-dark .socials a{ border-color:rgba(251,247,240,.38); color:rgba(251,247,240,.85); }
.header.on-dark .socials a:hover{ background:var(--creme); color:var(--espresso); border-color:var(--creme); }
.header.on-dark .header-right .btn-primary{ background:rgba(251,247,240,.12); color:var(--creme);
  border:1.5px solid rgba(251,247,240,.55); box-shadow:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.header.on-dark .header-right .btn-primary:hover{ background:var(--creme); color:var(--espresso); border-color:var(--creme); }
.nav a{ letter-spacing:.01em; }

/* ============ BARRE DE PROGRESSION DE LECTURE ============ */
.scroll-prog{ position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--ocre-clair), var(--ocre), var(--brun)); z-index:130; pointer-events:none; }

/* ============ PROGRESSION DE LA GALERIE HORIZONTALE ============ */
.soins-prog{ position:absolute; left:var(--pad-x); right:var(--pad-x); bottom:34px; z-index:6; }
.soins-prog .lbl{ display:flex; align-items:center; justify-content:space-between; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(251,247,240,.55); margin-bottom:11px; }
.soins-prog .rail{ position:relative; height:2px; background:rgba(251,247,240,.16); border-radius:2px; overflow:hidden; }
.soins-prog .bar{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--ocre-clair); }
@media (max-width:900px){ .soins-prog{ display:none; } }
@media (prefers-reduced-motion:reduce){ .scroll-prog{ display:none; } }

/* ============ CTA FLOTTANT — RÉSERVATION RAPIDE ============ */
.book-fab{ position:fixed; right:clamp(16px,2.4vw,30px); bottom:clamp(16px,2.4vw,30px); z-index:120;
  display:inline-flex; align-items:center; gap:11px; padding:14px 22px 14px 16px; border-radius:100px;
  background:var(--brun); color:var(--creme); font-family:var(--sans); font-weight:600; font-size:15px;
  box-shadow:0 12px 34px rgba(80,55,30,.30), 0 2px 8px rgba(80,55,30,.18);
  opacity:0; visibility:hidden; transform:translateY(22px) scale(.96); transform-origin:bottom right;
  transition:opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1), background .35s ease, box-shadow .35s ease; }
.book-fab.is-visible{ opacity:1; visibility:visible; transform:none; }
.book-fab:hover{ background:var(--brun-fonce); box-shadow:0 16px 40px rgba(80,55,30,.38), 0 3px 10px rgba(80,55,30,.22); transform:translateY(-3px); }
.book-fab__icon{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center;
  background:var(--ocre-clair); color:var(--brun-fonce); font-family:var(--serif); font-size:17px; }
.book-fab__arrow{ transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.book-fab:hover .book-fab__arrow{ transform:translateX(4px); }
@media (max-width:620px){
  .book-fab{ left:16px; right:16px; bottom:16px; justify-content:center; padding:15px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .book-fab{ transition:opacity .3s ease; transform:none; }
  .book-fab.is-visible{ transform:none; }
}

