/* =========================================================================
   L'Instant Marie — massage bien-être & soins du visage · Sigolsheim (68)
   Création Solia — DA née de l'identité cliente (rose poudré + line-art brun)
   ========================================================================= */

:root{
  /* palette du brief Marie : #3E2313 / #FFF3F4 / #E4CBCE */
  --rose:#E4CBCE;          /* rose poudré (brief) */
  --rose-pale:#F6E6E8;     /* rose très clair, fonds */
  --rose-deep:#B0828A;     /* rose mauve, accent (dérivé) */
  --cream:#FFF3F4;         /* fond principal (brief) */
  --cream-2:#F9E9EB;       /* cartes */
  --ink:#3E2313;           /* brun profond (brief), texte + sections sombres */
  --ink-soft:#7d6457;      /* brun adouci */
  --bordeaux:#3E2313;      /* sections sombres = brun du logo */
  --line:rgba(62,35,19,.16);
  --line-soft:rgba(62,35,19,.09);
  --shadow:0 24px 60px -32px rgba(62,35,19,.45);
  --shadow-soft:0 18px 44px -30px rgba(62,35,19,.4);
  --r:18px;
  --maxw:1180px;
  /* Quincy → Fraunces · Handsome → Sacramento (script, accents) · texte : Mulish */
  --serif:"Fraunces",Georgia,serif;
  --script:"Sacramento",cursive;
  --sans:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;overscroll-behavior-x:none;scroll-padding-top:96px;background:var(--cream)}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  overscroll-behavior-x:none;       /* ne bloque que l'axe horizontal : le tirer-pour-rafraîchir reste actif */
  width:100%;
  max-width:100%;
  position:relative;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:var(--sans);
  font-size:.78rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--rose-deep);
  display:inline-block;margin-bottom:1.1rem;
}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;color:var(--ink);text-wrap:balance}
h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:.002em}
h2 em{font-style:italic;color:var(--rose-deep)}
.lead{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem);font-style:italic;color:var(--ink-soft);line-height:1.5}

/* ---- boutons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1rem 1.9rem;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease;
}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--bordeaux);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.btn-call{color:#fff;letter-spacing:.06em;box-shadow:0 7px 18px -9px rgba(59,42,44,.55)}
.btn-call svg{flex-shrink:0;opacity:.92}
.nav-links a.btn-call{color:#fff;font-size:.8rem;font-weight:800}
.nav-links a.btn-call:hover{color:#fff}

/* ---- bandeau promo (éditable) ---- */
.promo{
  background:var(--bordeaux);color:#F4E4DF;
  font-size:.84rem;letter-spacing:.04em;text-align:center;
  padding:.7rem 2.6rem .7rem 1rem;position:relative;
}
.promo strong{color:#fff;font-weight:700}
.promo a{text-decoration:underline;text-underline-offset:3px}
.promo .close{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#F4E4DF;font-size:1.1rem;cursor:pointer;opacity:.8;line-height:1}
.promo .close:hover{opacity:1}

/* ---- header : barre flottante liquid glass (fixe, le contenu glisse dessous) ---- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:70;padding:calc(14px + env(safe-area-inset-top)) 20px 14px;background:transparent;pointer-events:none;transition:padding .3s ease}
.nav{
  pointer-events:auto;position:relative;
  display:flex;align-items:center;gap:1rem;
  max-width:1080px;margin:0 auto;
  padding:.55rem .6rem .55rem 1.1rem;
  background:transparent;
  transition:padding .32s ease;
}
/* le verre est sur un enfant ::before ABSOLU — Safari 26 ne l'échantillonne pas pour teinter la barre */
.nav::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:999px;pointer-events:none;
  /* Option 1 — vraie tuile de verre : corps translucide dégradé + arêtes biseautées + ombre de flottement (100% CSS, Safari-safe) */
  background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,246,247,.40) 46%,rgba(247,231,233,.56));
  -webkit-backdrop-filter:saturate(185%) blur(22px);backdrop-filter:saturate(185%) blur(22px);
  border:1px solid transparent;
  box-shadow:
    0 16px 40px -18px rgba(62,35,19,.38),
    0 3px 8px -4px rgba(62,35,19,.18),
    inset 0 1.2px 0.5px rgba(255,255,255,.92),
    inset 0 -1.2px 1px rgba(176,130,138,.30),
    inset 1px 0 1px rgba(255,255,255,.40),
    inset -1px 0 1px rgba(176,130,138,.18);
  transition:background .25s ease;
}
/* reflet spéculaire : la lumière qui "accroche" sur le verre (coin haut-gauche) */
.nav::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.5),rgba(255,255,255,0) 30%);
  opacity:.85;
}
/* === Configurateur : variantes de verre du header (défaut = frosté ci-dessus) === */
/* Clair — liquid glass "Apple" poussé : verre clair, blur+lumière, glow interne (SANS contour blanc périmétrique) */
body.hdr-airy .nav::before{
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.10) 55%,rgba(255,255,255,.20));
  -webkit-backdrop-filter:blur(30px) saturate(180%) brightness(1.07);backdrop-filter:blur(30px) saturate(180%) brightness(1.07);
  border:0;
  box-shadow:
    0 18px 46px -18px rgba(62,35,19,.34),
    inset 0 1.5px 1px rgba(255,255,255,.7),
    inset 0 10px 20px -12px rgba(255,255,255,.5),
    inset 0 -12px 22px -14px rgba(176,130,138,.22);
}
/* reflet spéculaire renforcé : coin lumineux + voile haut */
body.hdr-airy .nav::after{
  background:
    linear-gradient(125deg,rgba(255,255,255,.72),rgba(255,255,255,0) 26%),
    radial-gradient(120% 85% at 50% -25%,rgba(255,255,255,.38),rgba(255,255,255,0) 60%);
  opacity:.92;
}
/* Voile — PAS de pilule : dégradé qui descend du haut.
   Défaut (sur contenu clair) = voile CLAIR + texte foncé.
   Sur le hero (head-light) = ça s'inverse → voile FONCÉ + texte clair (texte géré par les règles head-light). */
body.hdr-transp .nav::before,body.hdr-transp .nav::after{display:none}
body.hdr-transp .site-head{
  background:linear-gradient(180deg,rgba(255,243,244,.94) 0%,rgba(255,243,244,.58) 52%,rgba(255,243,244,0) 100%);
}
body.hdr-transp .site-head.scrolled{
  background:linear-gradient(180deg,rgba(255,243,244,.96) 0%,rgba(255,243,244,.6) 60%,rgba(255,243,244,0) 100%);
}
body.hdr-transp.head-light .site-head,body.hdr-transp.head-light .site-head.scrolled{
  background:linear-gradient(180deg,rgba(42,22,12,.6) 0%,rgba(42,22,12,.24) 55%,rgba(42,22,12,0) 100%);
}
/* Pur — full transparent : aucun fond, aucun dégradé (lisibilité assurée par la couleur de texte adaptative) */
body.hdr-clear .nav::before,body.hdr-clear .nav::after{display:none}

/* texte du header en clair quand le contenu sous la barre est foncé (modes transparents) */
body.head-light .brand .wm{color:#fff}
body.head-light .nav-links a{color:rgba(255,255,255,.92)}
body.head-light .nav-links a:hover{color:#fff}
body.head-light .nav-burger span{background:#fff}
body.head-light .brand .wm,body.head-light .nav-links a{text-shadow:0 1px 10px rgba(0,0,0,.4)}
/* adaptatif aussi en mode items (sinon l'override items force le foncé) */
body.nav-items.head-light .nav-links a{color:rgba(255,255,255,.92)}
/* menu mobile OUVERT : le panneau est clair → wordmark révélé + texte/croix en foncé (prioritaire sur head-light) */
body.menu-open .brand .wm{color:var(--ink);text-shadow:none}
body.menu-open .nav-links a{color:var(--ink-soft);text-shadow:none}
body.menu-open .nav-burger span{background:var(--ink)}
@media(max-width:600px){body.nav-menuonly.menu-open .brand{display:flex}body.nav-menuonly.menu-open .nav{justify-content:space-between}}
/* menu ouvert : le sheet monte jusqu'en haut → on masque le bandeau cadeau et on recale le header tout en haut */
body.menu-open .topgift{display:none}
body.menu-open .site-head:not(.scrolled){padding-top:calc(env(safe-area-inset-top) + 14px)}

.nav>*{position:relative;z-index:1}
.brand{display:flex;flex-direction:row;align-items:center;gap:.6rem;flex:none}
.brand img{height:42px;width:auto;transition:height .3s ease}
.brand .wm{font-family:var(--serif);font-size:1.06rem;font-weight:500;color:var(--ink);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:font-size .3s ease}
/* option Marque = Logo (le badge du footer, détouré sur transparent) */
.brand .b-logo{display:none;height:50px;width:auto;flex:none;transition:height .3s ease}
body.brand-logo .brand .b-logo{display:block}
.site-head.scrolled .brand .b-logo{height:42px}
/* sur fond foncé (hero / head-light) : logo brun → éclairci en clair */
body.head-light .brand .b-logo{filter:brightness(0) invert(1)}
body.menu-open .brand .b-logo{filter:none}
.nav-links{flex:1;display:flex;justify-content:center;align-items:center;gap:1.7rem}
.nav-links a{font-size:.82rem;letter-spacing:.05em;color:var(--ink);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-rdv{flex:none;padding:.62rem 1.25rem;font-size:.76rem}
/* masqué (scroll vers le bas) : display:none impératif → Safari ne l'échantillonne plus, le haut passe transparent */
.site-head.hidden{display:none}
/* arrivée : le header descend tranquillement depuis le haut (hors-écran) à chaque réaffichage.
   La disparition reste instantanée (display:none) — impératif pour garder le haut transparent. */
.site-head:not(.hidden){animation:headIn .55s cubic-bezier(.22,.61,.36,1) both}
@keyframes headIn{from{transform:translateY(-100%)}to{transform:none}}
/* compact au scroll : la pilule se resserre, l'ombre se densifie */
.site-head.scrolled{padding:calc(9px + env(safe-area-inset-top)) 20px 9px}
.site-head.scrolled .nav{padding:.4rem .5rem .4rem 1rem}
/* (le verre ne change plus au scroll : il reste IDENTIQUE au bouton RDV) */
.site-head.scrolled .brand img{height:36px}
.site-head.scrolled .brand .wm{font-size:.98rem}
/* burger (mobile) */
.nav-burger{display:none;background:none;border:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;width:42px;height:42px;border-radius:50%;flex:none;transition:background .2s}
.nav-burger span{width:20px;height:2px;background:var(--ink);display:block;border-radius:2px;transition:transform .3s,opacity .25s;margin:0 auto}
.nav-burger.on span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-burger.on span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---- menu mobile (glass) ---- */
.mobile-menu{position:fixed;inset:0;z-index:60;display:none;background:rgba(62,35,19,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.mobile-menu.open{display:block}
.mm-panel{position:absolute;top:0;left:0;right:0;
  background:rgba(255,243,244,.96);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border:0;border-bottom:1px solid rgba(255,255,255,.6);border-radius:0 0 28px 28px;
  box-shadow:0 34px 70px -26px rgba(62,35,19,.55);
  padding:calc(env(safe-area-inset-top) + 66px) 24px 30px;display:flex;flex-direction:column;
  transform:translateY(-12px);opacity:0;transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .3s}
.mobile-menu.open .mm-panel{transform:none;opacity:1}
.mm-panel a:not(.btn){font-family:var(--serif);font-size:1.4rem;color:var(--ink);padding:.75rem .2rem;border-bottom:1px solid var(--line-soft)}
.mm-panel a:not(.btn):last-of-type{border-bottom:none}
.mm-rdv{justify-content:center;margin-top:1.3rem;width:100%}

/* ---- hero ---- */
.hero{position:relative;padding:clamp(6.5rem,11vw,12rem) 0 clamp(4.5rem,7.5vw,7.5rem);overflow:hidden;background:
  radial-gradient(120% 90% at 88% 8%,var(--rose-pale) 0%,var(--cream) 55%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.1rem);font-weight:500;letter-spacing:.002em}
.hero h1 em{font-family:var(--script);font-style:normal;font-size:1.22em;line-height:.6;color:#9a5d66}
.hero p.sub{font-size:1.06rem;color:var(--ink-soft);max-width:30rem;margin:1.5rem 0 2.2rem}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-meta{display:flex;gap:1.8rem;margin-top:2.4rem;flex-wrap:wrap}
.hero-meta div{font-size:.8rem;color:var(--ink-soft);letter-spacing:.02em}
.hero-meta b{display:block;font-family:var(--serif);font-size:1.5rem;font-style:italic;color:var(--ink);font-weight:500}
.hero-visual{position:relative}
.hero-visual .ph{
  border-radius:50% 50% 18px 18px / 38% 38% 4% 4%;overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:4/5;background:var(--rose-pale);
}
.hero-visual .ph img,.hero-visual .ph video{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.hero-badge{
  position:absolute;left:-22px;bottom:30px;background:var(--cream);border-radius:16px;
  padding:.9rem 1.1rem;box-shadow:var(--shadow-soft);display:flex;align-items:center;gap:.7rem;
  border:1px solid var(--line-soft);
}
.hero-badge .stars{color:#D9A441;font-size:.95rem;letter-spacing:1px}
.hero-badge b{font-family:var(--serif);font-size:1.25rem;font-style:italic;display:block;line-height:1}
.hero-badge small{font-size:.7rem;color:var(--ink-soft);letter-spacing:.04em}

/* botanique décor */
.botanic{position:absolute;opacity:.3;pointer-events:none}
.botanic.b1{top:6%;left:-44px;width:250px;transform:rotate(-8deg)}
.botanic.b2{bottom:-30px;right:-30px;width:180px;transform:rotate(160deg);opacity:.35}

/* ---- animation d'entrée hero ---- */
@keyframes heroRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroFade{from{opacity:0;transform:translateY(30px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero .eyebrow,.hero h1,.hero p.sub,.hero-cta,.hero-meta{opacity:0;animation:heroRise .85s cubic-bezier(.22,.61,.36,1) both}
.hero h1{animation-delay:.12s}
.hero p.sub{animation-delay:.26s}
.hero-cta{animation-delay:.4s}
.hero-meta{animation-delay:.52s}
.hero-visual{opacity:0;animation:heroFade 1.1s cubic-bezier(.22,.61,.36,1) .22s both}
.hero-visual .ph img{animation:slowZoom 16s ease-out 1s both}
@media(prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero p.sub,.hero-cta,.hero-meta,.hero-visual{animation:none;opacity:1}
  .hero-visual .ph img{animation:none}
}

/* ---- bande citation ---- */
.quoteband{background:var(--cream-2);text-align:center;padding:clamp(3rem,6vw,5rem) 0}
.quoteband p{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.4rem);
  line-height:1.32;max-width:36ch;margin:0 auto;color:var(--ink)}
.quoteband .sig{font-family:var(--sans);font-style:normal;font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rose-deep);margin-top:1.6rem;font-weight:700}

/* ---- section générique ---- */
.section{padding:clamp(3.6rem,7vw,6.5rem) 0}
.section-head{max-width:42rem;margin-bottom:3rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{color:var(--ink-soft);margin-top:1rem;font-size:1.02rem}

/* ---- soins / prestations : carrousel horizontal, cartes hautes (photo portrait) ---- */
.soins{
  display:flex;gap:1.6rem;
  overflow-x:auto;overflow-y:visible;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scroll-padding-left:.5rem;
  padding:.5rem .5rem 1.5rem;margin:0 -.5rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.soins::-webkit-scrollbar{display:none}
.soin{
  flex:0 0 clamp(300px,52%,470px);scroll-snap-align:start;
  background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;
}
.soin:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
.soin .ph{aspect-ratio:1/1;overflow:hidden;background:var(--rose-pale)}
.soin .ph img{width:100%;height:100%;object-fit:cover;object-position:center 38%;transition:transform .6s ease}
.soin:hover .ph img{transform:scale(1.05)}
.soin .body{padding:1.7rem 1.7rem 1.9rem}
.soin h3{font-size:1.7rem;margin-bottom:.2rem}
.soin .tag{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);font-weight:700}
.soin p{font-size:.95rem;color:var(--ink-soft);margin:.7rem 0 1.1rem}
.soin .meta{display:flex;align-items:center;justify-content:space-between;gap:.8rem;border-top:1px solid var(--line-soft);padding-top:.6rem}
.soin .price{display:flex;flex-direction:column;gap:.1rem;font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--ink);line-height:1.35}
.soin .dur{font-size:.78rem;color:var(--ink-soft);letter-spacing:.04em}
/* "Réserver →" : vraie cible tactile (≥44px) au lieu d'un lien de 22px */
.soin-book{display:inline-flex;align-items:center;gap:.3rem;flex:none;min-height:44px;padding:.4rem .15rem;color:var(--rose-deep);font-weight:700;font-size:.9rem;white-space:nowrap}
.soin-book:hover{color:var(--ink)}
/* ---- carrousel soins : navigation desktop (flèches + barre de progression) ---- */
.soins-carousel{position:relative}
.soin-nav{
  position:absolute;top:calc(50% - .75rem);transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-soft);
  background:rgba(255,253,251,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--rose-deep);
  box-shadow:var(--shadow-soft);transition:opacity .25s ease,background .25s ease,color .25s ease,transform .2s ease}
.soin-nav svg{width:20px;height:20px}
.soin-nav:hover{background:var(--rose-deep);color:#fff;transform:translateY(-50%) scale(1.06)}
.soin-nav:active{transform:translateY(-50%) scale(.96)}
.soin-nav.prev{left:6px}
.soin-nav.next{right:6px}
.soin-nav[disabled]{opacity:0;pointer-events:none}
.soins-progress{height:3px;background:var(--line-soft);border-radius:99px;margin-top:1.3rem;overflow:hidden;display:none}
.soins-progress span{display:block;height:100%;width:30%;background:var(--rose-deep);border-radius:99px;transition:width .18s ease,transform .12s ease;transform-origin:left;will-change:transform}
@media(hover:hover) and (min-width:760px){
  .soin-nav{display:inline-flex}
  .soins-progress{display:block}
  .soins{scroll-padding-left:0}
}

/* ---- à propos ---- */
.about{background:
  radial-gradient(90% 120% at 10% 0%,var(--rose-pale) 0%,var(--cream) 50%);overflow:hidden}
.about .grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about .portrait{position:relative}
.about .portrait>img:not(.leaf){border-radius:50%;aspect-ratio:1;object-fit:cover;width:100%;
  box-shadow:var(--shadow);border:6px solid var(--cream)}
/* feuilles de ginkgo : line-art seul, ni cercle ni liseré, plus grandes */
.about .portrait .leaf{position:absolute;width:165px;height:auto;aspect-ratio:auto;opacity:.55;border:0;border-radius:0;box-shadow:none;z-index:2;pointer-events:none}
/* les deux pointent vers le haut ; celle du bas-droite est l'image miroir */
.about .portrait .leaf.l1{top:-36px;left:-44px;transform:rotate(-12deg)}
.about .portrait .leaf.l2{bottom:-46px;right:-44px;transform:scaleX(-1) rotate(-90deg)}
.about h2{margin-bottom:1.3rem}
.about p{color:var(--ink);font-size:1.05rem;margin-bottom:1.1rem;max-width:40rem}
.about p.intro{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--rose-deep);line-height:1.45}
.about .credentials{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem 1.6rem;margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.about .credentials div{display:flex;flex-direction:column;gap:.2rem}
.about .credentials div b{font-family:var(--serif);font-style:italic;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.about .credentials div small{color:var(--ink-soft);font-size:.85rem}
@media(min-width:901px){.about .credentials div+div{padding-left:1.6rem;border-left:1px solid var(--line-soft)}}
@media(max-width:900px){
  .about .credentials{grid-template-columns:1fr;gap:0}
  .about .credentials div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line-soft)}
  .about .credentials div:last-child{border-bottom:none}
  .about .credentials div small{text-align:right}
}

.values{display:flex;gap:.7rem .9rem;flex-wrap:wrap;justify-content:center;margin:1.6rem 0 .2rem}
.values span{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--rose-deep);
  border:1px solid var(--rose);border-radius:999px;padding:.35rem 1.1rem;background:var(--cream)}

/* ---- partenariats pros ---- */
.pros{background:var(--cream-2)}
.pros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.6rem}
.pro{background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r);padding:1.9rem 1.7rem;text-align:center}
.pro b{font-family:var(--serif);font-size:1.35rem;font-weight:500;display:block;margin-bottom:.5rem;line-height:1.2}
.pro p{font-size:.93rem;color:var(--ink-soft)}
.pros .cta-line{margin-top:2.2rem;text-align:center}
/* Références partenaires — "Ils me font confiance" */
.pro-refs{margin-top:3rem;text-align:center;user-select:none;-webkit-user-select:none}
.pro-refs-label{display:block;font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);opacity:.85;margin-bottom:1.7rem}
.pro-refs-logos{display:flex;align-items:center;justify-content:center;gap:clamp(2.6rem,7vw,5.5rem);flex-wrap:wrap}
.pro-refs-logos a{display:inline-flex;align-items:center;cursor:pointer;opacity:.85;filter:grayscale(1);transition:opacity .35s ease,filter .35s ease,transform .35s ease}
.pro-refs-logos a:hover{opacity:1;filter:grayscale(0);transform:translateY(-4px)}
.pro-refs-logos img{width:auto;object-fit:contain;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
.pro-ref-ecrins{height:clamp(86px,8.5vw,120px)}
.pro-ref-truite{height:clamp(58px,5.6vw,80px)}
@media(max-width:860px){.pros-grid{grid-template-columns:1fr}
  .pro-refs-logos{gap:2.6rem}}

/* ---- cabine / ambiance (rose poudré) ---- */
.ambiance{background:var(--rose);color:var(--ink);position:relative;overflow:hidden}
.ambiance .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.ambiance .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 60px -30px rgba(62,35,19,.4)}
.ambiance .ph img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.ambiance .eyebrow{color:var(--rose-deep)}
.ambiance h2{color:var(--ink)}
.ambiance h2 em{color:var(--rose-deep)}
.ambiance p{color:var(--ink-soft);font-size:1.05rem;margin-top:1.2rem;max-width:34rem}
.ambiance .detail{display:flex;align-items:center;gap:.6rem;margin-top:1.8rem;font-size:.92rem;color:var(--ink-soft);font-style:italic;font-family:var(--serif)}
.ambiance .detail span{color:var(--rose-deep);font-style:normal;flex:none}

/* ---- avis ---- */
.reviews{text-align:center;background:var(--cream-2)}
.reviews .big{font-family:var(--serif);font-size:clamp(3.4rem,8vw,5.2rem);font-style:italic;line-height:1;color:var(--ink)}
.reviews .stars{color:#D9A441;font-size:1.4rem;letter-spacing:3px;margin:.6rem 0}
.reviews .count{color:var(--ink-soft);font-size:.92rem;letter-spacing:.06em}
/* ticker horizontal défilant (moteur JS façon menu Rebert : drag + swipe) */
.reviews-track{overflow:hidden;margin:2.8rem 0 2.6rem;cursor:grab;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.reviews-track.dragging{cursor:grabbing}
.reviews-marquee{display:flex;width:max-content;padding:.4rem 0;will-change:transform;user-select:none}
.reviews .rev{flex:0 0 340px;margin-right:1.4rem;text-align:left;background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r);padding:1.6rem 1.7rem}
.reviews .rev p{pointer-events:none}
.rev .stars{font-size:.95rem;margin:0 0 .7rem}
@media(max-width:560px){.reviews .rev{flex-basis:80vw}}
.rev p{font-style:italic;font-family:var(--serif);font-size:1.12rem;color:var(--ink);line-height:1.45}
.rev .who{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rose-deep);font-weight:700;margin-top:1rem}

/* ---- cartes cadeaux ---- */
.gift{background:linear-gradient(120deg,var(--rose) 0%,var(--rose-pale) 100%)}
.gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.gift-ph{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transform:rotate(-2deg)}
.gift-ph img{width:100%;display:block}
.gift h2{margin-bottom:1rem}
.gift p{color:var(--ink);max-width:42ch;margin:0 0 2rem;font-size:1.05rem}
@media(max-width:900px){.gift-grid{grid-template-columns:1fr}.gift-ph{max-width:440px;margin:0 auto}}

.gift .form{margin-top:0}
.radio-row{display:flex;gap:1.4rem;flex-wrap:wrap}
.radio-row label{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--ink);
  text-transform:none;letter-spacing:0;font-weight:600;margin:0;cursor:pointer}
.radio-row input{width:auto;accent-color:var(--rose-deep)}

/* ---- le cadre (bien-être, respect, hygiène) ---- */
.cadre{background:var(--cream-2);padding:clamp(2.6rem,5vw,4rem) 0;border-top:1px solid var(--line-soft)}
.cadre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.cadre b{font-family:var(--serif);font-style:italic;font-size:1.2rem;font-weight:600;display:block;margin-bottom:.4rem;color:var(--ink)}
.cadre p{font-size:.88rem;color:var(--ink-soft);line-height:1.6;max-width:30rem}
@media(max-width:760px){.cadre-grid{grid-template-columns:1fr;gap:1.4rem}}

/* ---- contact ---- */
.contact .rdv-wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.contact .rdv-main h2{margin-bottom:.2rem}
.rdv-intro{color:var(--ink-soft);margin:1rem 0 1.7rem;max-width:42ch;font-size:1.03rem;line-height:1.6}
.rdv-intro b{color:var(--ink)}
.rdv-actions{display:flex;flex-direction:column;gap:.8rem;max-width:25rem}
/* infos compactes (adresse / horaires / insta) */
.rdv-facts{list-style:none;margin:0 0 1.5rem;padding:0}
.rdv-facts li{padding:.85rem 0;border-bottom:1px solid var(--line-soft)}
.rdv-facts li:last-child{border-bottom:0}
.rdv-facts .row{display:flex;gap:.85rem;align-items:center;text-decoration:none;color:inherit}
.rdv-facts .fi{width:38px;height:38px;border-radius:50%;background:var(--rose-pale);color:var(--rose-deep);display:grid;place-items:center;flex:none}
.rdv-facts .ft{display:flex;flex-direction:column;min-width:0}
.rdv-facts b{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:.12rem}
.rdv-facts .fv{font-size:1.01rem;color:var(--ink)}
.rdv-facts a.row .fv{color:var(--rose-deep);font-weight:600}
.rdv-facts a.row .go{margin-left:auto;color:var(--rose-deep);display:grid;place-items:center;flex:none;transition:transform .2s ease}
.rdv-facts a.row:hover .go{transform:translateX(3px)}
.about .credentials div b svg{color:var(--rose-deep);vertical-align:-2px}
.form{background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r);padding:2rem;box-shadow:var(--shadow-soft)}
.form label{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin:0 0 .45rem}
.form .field{margin-bottom:1.2rem}
.form input,.form textarea{
  width:100%;font-family:var(--sans);font-size:.98rem;color:var(--ink);
  background:var(--cream-2);border:1px solid transparent;border-radius:12px;padding:.85rem 1rem;transition:border .2s,background .2s;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--rose-deep);background:#fff}
.form textarea{resize:vertical;min-height:120px}
.form .btn{width:100%;justify-content:center;margin-top:.3rem}

.btn-big{width:100%;justify-content:center;padding:1.1rem 1.4rem;font-size:1rem}
.rdv-note{font-size:.92rem;color:var(--ink-soft);font-style:italic;font-family:var(--serif);line-height:1.6;margin:1.5rem 0 0;max-width:42ch}
.rdv-note b{font-style:normal;color:var(--ink);font-weight:700}

#map{height:240px;border-radius:var(--r);border:1px solid var(--line-soft);z-index:0}
@media(max-width:760px){
  .contact .rdv-wrap{grid-template-columns:1fr;gap:1.7rem}
  .rdv-actions{max-width:none}
  #map{height:210px}
}
.leaflet-pane{z-index:1}
.marker-pin{width:30px;height:30px;border-radius:50% 50% 50% 0;background:var(--rose-deep);transform:rotate(-45deg);
  border:2px solid var(--cream);box-shadow:0 6px 14px -4px rgba(59,42,44,.5);display:grid;place-items:center}
.marker-pin span{transform:rotate(45deg);color:#fff;font-family:var(--serif);font-style:italic;font-size:1rem;font-weight:600}

/* ---- footer ---- */
.site-foot{background:var(--bordeaux);color:#E4CFC9;padding:3.4rem 0 2.2rem}
.site-foot .grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2rem}
.site-foot .brand b{color:#FBF1ED}
.site-foot .brand span{color:var(--rose)}
.site-foot a{color:#E4CFC9}.site-foot a:hover{color:#fff}
.site-foot .cols{display:flex;gap:3.5rem;flex-wrap:wrap;justify-content:center;text-align:center}
.site-foot h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin-bottom:.9rem;font-weight:700}
.site-foot ul{list-style:none;font-size:.9rem;line-height:2}
.foot-base{border-top:1px solid rgba(241,226,221,.16);margin-top:2.6rem;padding-top:1.5rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;font-size:.78rem;color:#C9B2AC}
.foot-base a{text-decoration:underline;text-underline-offset:2px}

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

/* ---- responsive ---- */
@media(max-width:900px){
  /* header mobile : pilule = logo + burger, menu déployé dans le panneau glass */
  .nav-links,.nav-rdv{display:none}
  .nav-burger{display:flex}
  .nav{justify-content:space-between}
  .brand .wm{font-size:.94rem}
  .hero .wrap,.about .grid,.ambiance .grid,.contact .grid{grid-template-columns:1fr}
  .hero-visual{order:-1;max-width:420px;margin:0 auto}
  .reviews .cards{grid-template-columns:1fr}
  .soins{gap:1.1rem;margin:0 -28px;padding:.5rem 28px 1.5rem;scroll-padding-left:28px}
  .soin{flex-basis:80vw}
  .soin .ph{aspect-ratio:1/1}
  .soin .body{padding:1.4rem 1.4rem 1.6rem}
  .about .portrait{max-width:330px;margin:0 auto}
  .site-foot .grid{flex-direction:column}
}
/* Option 3a (body.nav-items) — header mobile : items directs, zone cliquable agrandie */
@media(max-width:600px){
  body.nav-items .nav-burger{display:none}
  body.nav-items .brand{display:none}
  body.nav-items .nav-rdv{display:none}
  body.nav-items .nav{justify-content:center;gap:.2rem;padding:.15rem .4rem}
  body.nav-items .nav-links{display:flex;flex:1;justify-content:space-between;align-items:stretch;gap:.15rem}
  body.nav-items .nav-links a{display:flex;align-items:center;justify-content:center;flex:1;
    min-height:46px;padding:.5rem .35rem;border-radius:999px;
    font-family:var(--sans);font-size:.76rem;letter-spacing:.01em;text-transform:none;font-weight:600;color:var(--ink);white-space:nowrap}
  body.nav-items .nav-links a:active{background:rgba(176,130,138,.16)}
}
/* "Menu seul" (body.nav-menuonly) — uniquement le hamburger, sans "L'Instant Marie" */
@media(max-width:600px){
  body.nav-menuonly .brand{display:none}
  body.nav-menuonly .nav{justify-content:flex-end}
}
@media(max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .promo{font-size:.74rem;line-height:1.5;padding:.6rem 2.3rem .65rem .9rem}
  .promo .close{top:.45rem;transform:none}
  .promo-dates{white-space:nowrap}
}

/* ---- hero bannière immersive (téléphone) ---- */
@media(max-width:600px){
  .hero{padding:0;min-height:100svh;display:flex;align-items:stretch;background:#2a160c}
  .hero .botanic{display:none}
  .hero .wrap{position:relative;width:100%;max-width:none;padding:0;display:flex;align-items:flex-end;min-height:100svh}
  .hero-visual{position:absolute;inset:0;order:0;max-width:none;margin:0;opacity:1;animation:none;z-index:0}
  .hero-visual .ph{border-radius:0;aspect-ratio:auto;height:100%;width:100%;box-shadow:none;background:#2a160c}
  .hero-visual .ph video{height:100%;width:100%;object-fit:cover}
  /* voile : sombre et remonté pour garder le texte lisible sur la vidéo claire */
  .hero-visual .ph video{filter:brightness(.86) saturate(1.02)}
  /* photo hero descendue légèrement sur mobile (zoom ancré en haut → le sujet glisse vers le bas) */
  .hero-visual .ph img{transform:scale(1.08);transform-origin:top center}
  .hero-visual::after{content:"";position:absolute;inset:0;z-index:1;
    background:
      linear-gradient(to top,rgba(42,22,12,.92) 6%,rgba(42,22,12,.66) 34%,rgba(42,22,12,.28) 60%,rgba(42,22,12,0) 80%),
      linear-gradient(to bottom,#2a160c 0,rgba(42,22,12,.62) 7%,rgba(42,22,12,0) 17%)}
  .hero-badge{display:none}
  .hero-text{position:relative;z-index:2;width:100%;padding:0 24px calc(5.5rem + env(safe-area-inset-bottom));color:#fff;text-shadow:0 1px 16px rgba(42,22,12,.45)}
  .hero-text .eyebrow{color:#F3D9DC;margin-bottom:.7rem;text-shadow:0 1px 10px rgba(42,22,12,.5)}
  .hero h1{color:#fff}
  .hero h1 em{color:#F0C9CE}
  .hero p.sub{display:none}
  .hero-cta{display:none}
  .hero-meta{margin-top:1.7rem;gap:1.3rem}
  .hero-meta div{color:rgba(255,243,244,.82)}
  .hero-meta b{color:var(--cream);font-size:1.3rem}
}

/* ---- carte & tarifs ---- */
.tarifs{margin-top:3.4rem;background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r);padding:clamp(1.6rem,3.2vw,2.8rem);box-shadow:var(--shadow-soft)}
.tarifs-head{text-align:center;margin-bottom:2rem}
.tarifs-head h3{font-size:clamp(1.7rem,3vw,2.2rem)}
.tarifs-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem 3.4rem}
.tcol h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-deep);font-weight:700;margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.titem{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;padding:.7rem 0;border-bottom:1px dashed var(--line-soft)}
.titem:last-child{border-bottom:none}
.titem .tn{font-family:var(--serif);font-size:1.2rem;color:var(--ink);line-height:1.25}
.titem .tn small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--ink-soft);margin-top:.12rem}
.titem .tn{flex:1 1 auto}
.titem .tp{display:flex;flex-direction:column;gap:.18rem;flex:0 0 auto;min-width:9.5rem}
.titem .tp span{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem}
.titem .tp i{font-family:var(--sans);font-style:normal;font-size:.78rem;color:var(--ink-soft);letter-spacing:.03em}
.titem .tp b{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--rose-deep);font-size:1.02rem;white-space:nowrap}
.tarifs .foot{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-soft);font-style:italic;text-align:center}
@media(max-width:760px){.tarifs-grid{grid-template-columns:1fr;gap:2rem}}

/* ---- FAQ ---- */
.faq-list{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:.9rem}
.faq-list details{background:var(--cream);border:1px solid var(--line-soft);border-radius:14px;padding:1.05rem 1.4rem;transition:border-color .25s}
.faq-list details[open]{border-color:var(--line)}
.faq-list summary{font-family:var(--serif);font-size:1.1rem;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--rose-deep);font-size:1.5rem;font-weight:600;line-height:1;transition:transform .25s;flex:none}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{color:var(--ink-soft);line-height:1.65;margin-top:.85rem;font-size:.96rem}
.faq-list a{color:var(--rose-deep);text-decoration:underline}

/* ============================================================
   AJOUTS V3 — liquid glass : FAB RDV, modale tarifs, résumé carte
   ============================================================ */

/* ---- bouton RDV flottant (liquid glass) ---- */
.fab-rdv{
  position:fixed;z-index:55;right:24px;bottom:24px;
  display:none;                       /* masqué = display:none (comme le header) → Safari ne l'échantillonne plus, le bas reste transparent */
  align-items:center;gap:.6rem;
  padding:.95rem 1.55rem;border-radius:999px;
  font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);
}
/* desktop & tablette : le header réaffiche son bouton "Prendre rendez-vous" → on retire le flottant (fini le doublon ×3) */
@media(min-width:901px){.fab-rdv{display:none!important}}
/* mobile : masqué quand la section contact (avec ses gros CTA) est visible → ne recouvre plus les boutons */
.fab-rdv.fab-hide{display:none!important}
/* verre sur ::before (pseudo-élément ignoré par Safari 26 → ne teinte pas la barre du bas) */
.fab-rdv::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:999px;pointer-events:none;
  background:rgba(255,243,244,.55);
  -webkit-backdrop-filter:saturate(200%) blur(16px);backdrop-filter:saturate(200%) blur(16px);
  border:1px solid rgba(255,255,255,.6);
  /* ombre portée (1) retirée ; reflets internes du verre (2) + (3) conservés */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -10px 18px -12px rgba(176,130,138,.5);
  transition:background .25s ease;
}
.fab-rdv.show{display:inline-flex;animation:fabIn .35s cubic-bezier(.22,.61,.36,1) both}
@keyframes fabIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.fab-rdv:hover{transform:translateY(-2px)}
.fab-rdv:hover::before{background:rgba(255,243,244,.72)}
.fab-rdv svg{color:var(--rose-deep);flex:none}
.fab-rdv svg,.fab-rdv span{position:relative;z-index:1}
/* repli en rond (icône seule, plus grosse) au scroll vers le bas */
.fab-rdv{transition:width .3s ease,border-radius .3s ease,padding .3s ease,transform .25s ease}
.fab-rdv.mini{left:auto;right:16px;width:58px;height:58px;min-width:0;padding:0;justify-content:center;border-radius:50%}
.fab-rdv.mini span{display:none}
.fab-rdv.mini svg{width:26px;height:26px}
@media(max-width:600px){
  .fab-rdv{right:14px;left:14px;bottom:14px;justify-content:center;padding:1.02rem 1.4rem;font-size:.82rem}
}

/* ---- résumé carte (remplace la grande table) ---- */
.soins-all{margin-top:2.2rem;display:flex;justify-content:center}
@media(max-width:560px){.soins-all{margin-top:1.6rem}.soins-all .btn{width:100%;justify-content:center}}

/* ---- modale carte & tarifs (glass) ---- */
.tarifs-modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(62,35,19,.36);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tarifs-modal.open{display:flex}
.tm-sheet{position:relative;width:100%;max-width:880px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;
  background:rgba(255,243,244,.94);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border:1px solid rgba(255,255,255,.6);border-radius:26px;
  box-shadow:0 44px 84px -30px rgba(62,35,19,.62),inset 0 1px 0 rgba(255,255,255,.6);
  transform:translateY(18px) scale(.98);transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.tarifs-modal.open .tm-sheet{transform:none}
.tm-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.65);color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:2;transition:background .2s,transform .2s}
.tm-close:hover{background:#fff;transform:rotate(90deg)}
.tm-head{text-align:center;padding:2.1rem 2rem 1.2rem}
.tm-head h3{font-size:clamp(1.6rem,3vw,2.1rem)}
.tm-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 clamp(1.5rem,3.4vw,2.8rem) 1.4rem;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
/* pied collé en bas de la modale : reste visible pendant qu'on parcourt les soins */
.tm-actions{flex:none;display:flex;flex-direction:column;gap:.7rem;
  padding:1rem clamp(1.5rem,3.4vw,2.8rem) calc(1.1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:rgba(255,243,244,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tm-foot{margin:0;font-size:.82rem;color:var(--ink-soft);font-style:italic;text-align:center}
.tm-rdv{display:flex;width:100%;justify-content:center;margin:0}
@media(max-width:560px){
  .tarifs-modal{padding:0}
  .tm-sheet{max-width:none;max-height:100svh;height:100svh;border-radius:0}
  .tm-head{padding:2.6rem 1.4rem 1rem}
}

/* ---- carte RDV : phrase d'accroche ---- */
.rdv-lead{font-family:var(--serif);font-size:1.16rem;color:var(--ink);line-height:1.42;margin:.1rem 0 .5rem}
.rdv-lead em{font-style:italic;color:var(--rose-deep)}

/* ============================================================
   AJOUTS V3.1 — footer logo, cœur, carte cadeau, safe-areas
   ============================================================ */

/* ---- footer : logo en point focal ---- */
.site-foot .foot-brand{display:inline-flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:1.1rem}
.site-foot .foot-brand img{width:118px;height:auto;display:block}
.site-foot .fb-tag{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--rose)}
.site-foot .foot-intro p{font-size:.9rem;max-width:24rem;margin:0 auto;color:#D6BEB8}
.foot-base .heart{color:var(--rose);font-size:.9em;vertical-align:-.04em}

/* ---- carte cadeau (améliorée) ---- */
.gift-aside{display:flex;flex-direction:column;gap:2.6rem}
.gift-perks{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.gift-perks li{display:flex;align-items:flex-start;gap:.75rem;font-size:.97rem;line-height:1.45;color:var(--ink);font-family:var(--serif);font-style:italic}
.gift-perks li span{color:var(--rose-deep);font-style:normal;flex:none;line-height:1.45}
/* carte cadeau : deux moyens de contact (mail partout, WhatsApp mobile only) */
.gift-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}
.gift-actions .gift-cta{margin-top:0}
@media(min-width:601px){.gift-actions .wa-only{display:none}}
.gift-wa{display:block;text-align:center;margin-top:1rem;font-size:.86rem;color:var(--rose-deep);text-decoration:underline;text-underline-offset:3px;text-transform:none;letter-spacing:.01em}
.gift-wa:hover{color:var(--ink)}

/* ---- safe-areas iPhone (bouton flottant au-dessus de l'indicateur home) ---- */
.fab-rdv{bottom:calc(24px + env(safe-area-inset-bottom))}
@media(max-width:600px){.fab-rdv{bottom:calc(14px + env(safe-area-inset-bottom))}}

/* ============================================================
   V3-BROUILLON — comparateur, bandeau cadeau, 3 headers, 2 heros,
   footer V1, allègements pros & mobile. (bloc à nettoyer au lancement)
   ============================================================ */

/* ---- bandeau carte cadeau (en tête, façon V1) ---- */
.topgift{position:fixed;top:0;left:0;right:0;z-index:78;
  background:#3B2A2C;color:#F4E4DF;text-align:center;
  font-size:.84rem;letter-spacing:.02em;
  padding:calc(.55rem + env(safe-area-inset-top)) 1rem .55rem}
.topgift a{display:inline-flex;align-items:center;gap:.5rem;color:#F4E4DF;justify-content:center}
.topgift strong{color:#fff;font-weight:700}
.topgift .tg-ic{color:var(--rose)}
.topgift .arw{color:var(--rose);font-weight:700}
.topgift.hidden{display:none}
@media(max-width:560px){.topgift{font-size:.76rem;padding:calc(.5rem + env(safe-area-inset-top)) .8rem .5rem}}

/* header décalé sous le bandeau cadeau (uniquement en haut de page, avant .scrolled).
   --gift-h = hauteur réelle du bandeau, mesurée en JS ; +12px = écart de flottement de la pilule. */
.site-head:not(.scrolled){padding-top:calc(var(--gift-h, 44px) + 12px)}

/* ---- header : wordmark texte seul ---- */
/* ---- hero : photo ---- */
.hero-photo-img{display:block}

/* ---- à propos : crédentials à 2 items (diplôme retiré) ---- */
@media(min-width:901px){
  .about .credentials{grid-template-columns:repeat(2,auto);justify-content:start;gap:1.4rem 2.6rem}
}

/* ---- section pros : encarts plus petits (desktop + mobile) ---- */
.pros{padding-top:clamp(2.8rem,5vw,4.5rem);padding-bottom:clamp(2.8rem,5vw,4.5rem)}
.pros .section-head{margin-bottom:2rem}
.pros-grid{margin-top:1.8rem;gap:1.1rem}
.pro{padding:1.3rem 1.4rem}
.pro b{font-size:1.18rem;margin-bottom:.35rem}
.pro p{font-size:.9rem;line-height:1.55}
.pros .cta-line{margin-top:1.7rem}
/* mobile : 3 bulles raccourcies → seulement les titres */
@media(max-width:600px){
  .pro{padding:1rem 1.3rem}
  .pro b{margin-bottom:0}
  .pro p{display:none}
}

/* ---- footer : disposition EXACTE de la V1 (marque à gauche / 2 colonnes à droite),
   en rose pâle (façon Insta), texte brun. ---- */
.site-foot{background:var(--rose);color:var(--ink);padding:3.4rem 0 2.2rem}
.site-foot .grid{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;
  gap:2rem;flex-wrap:wrap;text-align:left}
.site-foot .foot-brand{display:inline-flex;flex-direction:row;align-items:center;gap:.75rem;margin-bottom:1rem}
/* logo détouré (sans médaillon rond) — le wordmark étant dans le logo, on masque le nom texte pour éviter le doublon */
.site-foot .foot-logo{border-radius:0;object-fit:contain;border:0}
.site-foot .foot-name{display:none}
.site-foot .foot-name b{font-family:var(--serif);font-size:1.4rem;font-weight:500;display:block;line-height:1;color:var(--ink)}
.site-foot .fb-tag{display:block;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--rose-deep);margin-top:.25rem}
.site-foot .foot-intro p{font-size:.9rem;max-width:24rem;margin:0;color:var(--ink-soft)}
.site-foot .cols{display:flex;gap:3.5rem;flex-wrap:wrap;justify-content:flex-start;text-align:left}
.site-foot h4{color:var(--rose-deep)}
.site-foot a{color:var(--ink)}.site-foot a:hover{color:var(--rose-deep)}
.foot-base{border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.5rem;
  flex-direction:row;justify-content:space-between;text-align:left;color:var(--ink-soft);gap:.6rem}
.foot-base .heart{color:var(--rose-deep)}
@media(max-width:760px){
  .site-foot .grid{flex-direction:column;align-items:flex-start}
  .foot-base{flex-direction:column;align-items:flex-start;text-align:left}
  /* "Mentions légales" sur sa propre ligne (sans le séparateur ·) */
  .foot-base .foot-sep{display:none}
  .foot-base .foot-ml{display:block;margin-top:.5rem}
}

/* ============================================================
   V3 — passe mobile : page nettement plus courte sur téléphone
   ============================================================ */
@media(max-width:600px){
  .section{padding:2.7rem 0}
  .section-head{margin-bottom:1.8rem}
  .ambiance{padding:2.8rem 0}
  .ambiance .ph{aspect-ratio:1/1;max-height:none}
  .ambiance .grid{gap:1.4rem}
  .gift{padding:2.9rem 0}
  .gift-grid{gap:1.6rem}
  .reviews{padding:2.7rem 0}
  .reviews-track{margin:1.9rem 0 1.7rem}
  .about .grid{gap:1.6rem}
  .pros{padding:2.4rem 0}
  .pros .pro{padding:1rem 1.15rem}
  .pro b{font-size:1.08rem}
  .pro p{font-size:.86rem}
  .pros-grid{gap:.8rem;margin-top:1.4rem}
  .cadre{padding:2.2rem 0}
  .cadre-grid{gap:1rem}
  .faq .section-head{margin-bottom:1.4rem}
}

/* ---- carte cadeau : CTA WhatsApp direct (remplace le formulaire) ---- */
.gift-cta{margin-top:.4rem}
/* .gift .gift-hint : spécificité > ".gift p" (sinon margin-top forcé à 0 → texte collé au bouton) */
.gift .gift-hint{font-size:.92rem;color:var(--ink-soft);font-style:italic;font-family:var(--serif);line-height:1.55;margin:1.8rem 0 0;max-width:34ch}
@media(max-width:560px){.gift-cta{width:100%;justify-content:center}.gift .gift-hint{margin-top:1.8rem}}

/* ---- configurateur header (brouillon uniquement) ---- */
.cfg{position:fixed;right:16px;bottom:16px;z-index:95;background:rgba(62,35,19,.93);color:#fff;
  border-radius:14px;padding:.6rem .75rem;font-family:var(--sans);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-width:min(92vw,360px)}
.cfg>summary{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.85;font-weight:700;cursor:pointer;list-style:none}
.cfg>summary::-webkit-details-marker{display:none}
.cfg .ds-rows{display:flex;flex-direction:column;gap:.5rem;margin-top:.55rem}
.cfg .ds-row{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.cfg .ds-row>span{width:46px;flex:none;opacity:.7;text-transform:uppercase;letter-spacing:.08em;font-size:.58rem}
.cfg button{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;border-radius:8px;
  padding:.3rem .55rem;cursor:pointer;font-size:.66rem;font-weight:700;white-space:nowrap;transition:background .2s,color .2s}
.cfg button:hover{background:rgba(255,255,255,.12)}
.cfg button.on{background:var(--rose);color:var(--ink);border-color:var(--rose)}
@media(max-width:700px){.cfg{right:0;bottom:auto;top:50%;transform:translateY(-50%);border-radius:12px 0 0 12px;padding:.5rem .55rem;max-width:48vw}}

/* mobile : header hamburger plus bas (pilule resserrée) */
@media(max-width:600px){
  .nav{padding:.42rem .5rem .42rem 1rem}
  .nav-burger{width:36px;height:36px}
  .brand .wm{font-size:.9rem}
  .site-head.scrolled .nav{padding:.34rem .5rem .34rem 1rem}
}