/* ============================================================
   CENTRE HINATEA — CSS complet
   Basé sur les screenshots du vrai site (aperçu Wix 02/09/2026)
   ============================================================ */

/* Les polices sont chargées par <link rel="stylesheet"> dans le <head> de chaque page :
   un @import ici les téléchargerait une seconde fois et bloquerait le rendu. */

:root {
  --brun:       #5a3020;
  --brun-titre: #3d2010;
  --or:         #D1A03A;
  --or-clair:   #f0d688;
  --or-fonce:   #a97f28;
  --or-pied:    #D1A03A;
  --taupe:      #c9b4a3;
  --blanc:      #ffffff;
  --noir:       #0d0b08;
  --texte:      #2a1a10;
  --texte-2:    #5a4030;
  --ivoire:     #f4ede0;
  --ivoire-2:   rgba(244,237,224,.82);
  --T: 'Playfair Display', Georgia, serif;
  --R: 'Mulish', Arial, sans-serif;
  --titre: 'Playfair Display', Georgia, serif;  /* alias employé par d'anciennes règles */
  --nav-h: 110px;
  --max:    1280px;
  --larg:   1280px;                              /* alias employé par d'anciennes pages */
  --r:      14px;
  --or-degrade: linear-gradient(135deg, #f0d688 0%, #D1A03A 45%, #a97f28 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--R); font-size: 16px; line-height: 1.75; overflow-x: hidden; }
img  { max-width: 100%; display: block; }
a    { text-decoration: none; }
ul   { list-style: none; }
button { cursor: pointer; }

/* ── Accessibilité : lien d'évitement + focus clavier visible ── */
.skip-lien {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 2000; padding: .8rem 1.8rem; border-radius: 0 0 var(--r) var(--r);
  background: var(--noir); color: var(--or); font-family: var(--R);
  font-size: .9rem; font-weight: 700; transition: top .2s;
}
.skip-lien:focus { top: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 3px;
}
body.page-dark :where(a, button):focus-visible { outline-color: var(--or-clair); }

/* Respect du réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body.page-light, body.page-home {
  background-color: var(--taupe);
  color: var(--texte);
}




/* ── Pages sombres : fond noir + motif maori gris léger ── */
body.page-dark {
  background-color: #000000;
  background-image: url('../assets/bg-centre-dark.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 1900px auto;
  background-attachment: scroll;
  color: #f4ede0;
}
main { position: relative; z-index: 1; }

/* Header */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 1000;
  background-color: #f9f4ec;
  background-image: url('../assets/bg-header-frise.png');
  background-repeat: repeat-x;
  background-position: center center;
  background-size: auto 110%;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.header-inner { position: relative; z-index: 1; }
.header-inner { max-width: var(--max); margin: 0 auto; padding: 0 0.6rem 0 0.1rem; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }



.logo { display: flex; align-items: center; flex-shrink: 0; position: relative; z-index: 1001; }
.logo img { height: 150px; width: 150px; object-fit: contain; border-radius: 50%; position: relative; top: 38px; box-shadow: 0 8px 24px rgba(0,0,0,.25); filter: brightness(1.12) saturate(1.25); }
.logo-txt { font-family: var(--T); font-style: italic; font-size: 1.6rem; color: var(--or); }

#nav { flex: 1; display: flex; justify-content: center; }
#nav > ul { display: flex; align-items: center; }
#nav > ul > li { position: relative; }
#nav > ul > li > a { display: block; padding: .5rem .85rem; font-family: var(--R); font-size: .92rem; font-weight: 800; color: var(--texte); transition: color .2s; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
#nav > ul > li > a:hover, #nav > ul > li > a.actif { color: var(--brun); }
#nav > ul > li > a::after { content: ''; position: absolute; bottom: 0; left: .8rem; right: .8rem; height: 1px; background: var(--brun); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
#nav > ul > li > a:hover::after, #nav > ul > li > a.actif::after { transform: scaleX(1); }

.submenu-wrap { position: relative; }
.submenu { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 215px; background: rgba(14,10,6,.97); border-top: 2px solid var(--or); padding: .5rem 0; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
.submenu-wrap:hover .submenu, .submenu-wrap:focus-within .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.submenu a { display: block; padding: .5rem 1.25rem; font-size: .8rem; color: rgba(255,255,255,.7); transition: color .2s, padding-left .2s; }
.submenu a:hover { color: var(--or); padding-left: 1.75rem; }
.submenu a.submenu-titre { color: var(--or); font-family: var(--T); font-style: italic; font-size: .88rem; padding-bottom: .6rem; margin-bottom: .3rem; border-bottom: 1px solid rgba(209,160,58,.3); }
.submenu a.submenu-titre:hover { padding-left: 1.25rem; }

.btn-nav { display: inline-flex; align-items: center; padding: .65rem 1.9rem; background: linear-gradient(135deg, #f0d688 0%, #D1A03A 45%, #a97f28 100%); color: #2a1c05; border-radius: 50px; font-family: var(--T); font-size: .95rem; font-weight: 700; letter-spacing: .08em; flex-shrink: 0; transition: box-shadow .2s, transform .2s; box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.btn-nav:hover { box-shadow: 0 5px 18px rgba(209,160,58,.5); transform: translateY(-1px); color: #2a1c05; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.burger span { display: block; width: 24px; height: 1.5px; background: var(--texte); transition: transform .25s, opacity .25s; }
.burger.ouvert span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#menu-mobile { position: fixed; top: var(--nav-h); left: 0; right: 0; background: #0d0b08; z-index: 999; padding: 1.5rem 2rem 2rem; transform: translateY(-110%); opacity: 0; transition: transform .3s, opacity .3s; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
#menu-mobile.ouvert { transform: translateY(0); opacity: 1; }
#menu-mobile ul { display: flex; flex-direction: column; }
#menu-mobile a { display: block; padding: .7rem 0; font-size: .95rem; color: #f4ede0; border-bottom: 1px solid rgba(255,255,255,.05); }
#menu-mobile a:hover { color: var(--or); }
.mob-sub { padding-left: 1.25rem; border-left: 2px solid var(--or); margin: .3rem 0 .3rem .5rem; }
.mob-sub a { font-size: .82rem !important; color: rgba(255,255,255,.6) !important; padding: .35rem 0 !important; border: none !important; }
#menu-mobile .btn-mob-brochure { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.5rem; padding: .75rem 1.5rem; border: 1px solid rgba(209,160,58,.7); border-radius: 50px; background: rgba(209,160,58,.08); color: var(--or-clair); font-family: var(--T); font-style: italic; font-size: 1rem; letter-spacing: .02em; }
#menu-mobile .btn-mob-brochure:hover { background: rgba(209,160,58,.16); color: var(--or-clair); }
.btn-mob-brochure svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; flex-shrink: 0; }
/* « #menu-mobile a » (display block, padding latéral nul) écrasait le bouton : texte collé à gauche */
#menu-mobile .btn-mob { display: flex; align-items: center; justify-content: center; text-align: center; padding: .8rem 1.5rem; border-bottom: none; }
/* Les deux boutons en tête du menu mobile : accessibles sans faire défiler */
.mob-actions { display: flex; flex-direction: column; gap: .7rem; padding-bottom: 1.1rem; margin-bottom: .4rem; border-bottom: 1px solid rgba(209,160,58,.25); }
#menu-mobile .mob-actions .btn-mob, #menu-mobile .mob-actions .btn-mob-brochure { margin: 0; width: 100%; }
/* Même écriture pour les deux boutons : l'italique de « Carte des soins & tarifs » */
#menu-mobile .mob-actions .btn-mob, #menu-mobile .mob-actions .btn-mob-brochure { font-family: var(--T); font-style: italic; font-weight: 600; font-size: 1rem; letter-spacing: .02em; padding: .75rem 1.5rem; }
.btn-mob { display: inline-flex; margin-top: 1.5rem; padding: .7rem 2.5rem; background: linear-gradient(135deg, #f0d688 0%, #D1A03A 45%, #a97f28 100%); color: #2a1c05; border-radius: 50px; font-family: var(--T); font-weight: 700; font-size: .9rem; letter-spacing: .08em; box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.btn-planity { display: inline-flex; align-items: center; justify-content: center; padding: .85rem 2.8rem; background: linear-gradient(135deg, #f0d688 0%, #D1A03A 45%, #a97f28 100%); color: #2a1c05; border-radius: 50px; font-family: var(--T); font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: box-shadow .2s, transform .2s; }
.btn-planity:hover { box-shadow: 0 6px 20px rgba(209,160,58,.5); transform: translateY(-1px); color: #2a1c05; }

/* Hero */
.hero { display: flex; margin-top: var(--nav-h); height: calc(100vh - var(--nav-h)); min-height: 560px; }
.hero-g { flex: 1; overflow: hidden; position: relative; }
.hero-g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero-d { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-d img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-d::after { content: ''; position: absolute; inset: 0; background: rgba(20,12,4,.35); z-index: 1; }
.hero-txt { position: relative; z-index: 2; text-align: center; padding: 2.5rem; color: #fff; max-width: 580px; }
.hero-txt h1 { font-family: var(--T); font-size: clamp(3.2rem,6vw,6.4rem); font-weight: 700; color: #fff; line-height: 1.05; margin-bottom: .6rem; }
.hero-txt .slogan { font-family: var(--T); font-style: italic; font-size: clamp(1rem,2vw,1.5rem); color: rgba(255,255,255,.9); margin-bottom: 1.75rem; letter-spacing: .04em; }
.hero-txt .accroche { font-size: clamp(.88rem,1.3vw,1rem); line-height: 1.85; color: rgba(255,255,255,.85); margin-bottom: 2.5rem; }
/* ── Hero plein écran (page d'accueil) ──
   Ce bloc vivait auparavant dans une balise <style> à l'intérieur de index.html,
   qui écrasait silencieusement une version périmée présente ici. Tout est
   désormais réuni dans cette feuille, comme le reste du site. */
.hero-plein {
  position: relative;
  width: 100%;
  margin-top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  min-height: 560px;
  overflow: hidden;
}
.hero-plein-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  z-index: 0;
}
/* Le visage, à gauche, reste net et pleinement éclairé. En allant vers la droite,
   la photo se voile progressivement puis se floute, pour que le texte se détache
   sans qu'aucune démarcation ne soit visible. Deux calques superposés : d'abord le
   flou (::before), puis l'assombrissement (::after), tous deux étalés sur toute la
   largeur pour que la transition soit lente. */
.hero-plein::before,
.hero-plein::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-plein::before {
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, transparent 34%,
    rgba(0,0,0,.22) 46%, rgba(0,0,0,.65) 58%, #000 72%);
  mask-image: linear-gradient(to right,
    transparent 0%, transparent 34%,
    rgba(0,0,0,.22) 46%, rgba(0,0,0,.65) 58%, #000 72%);
}
.hero-plein::after {
  background: linear-gradient(to right,
    rgba(18,10,4,0)    0%,
    rgba(18,10,4,0.04) 26%,
    rgba(18,10,4,0.26) 42%,
    rgba(18,10,4,0.52) 56%,
    rgba(18,10,4,0.70) 70%,
    rgba(18,10,4,0.80) 100%);
}
.hero-plein-txt {
  position: absolute;
  top: 0; right: 0;
  width: 48%; height: 100%;
  z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2.5rem;
  text-align: center;
  color: #fff;
  /* L'assombrissement est porté par .hero-plein::after, sur toute la largeur :
     ce bloc-ci n'ajoute plus de voile, qui créerait une arête nette à 48 %. */
  background: none;
}
.hero-plein-txt h1 {
  font-family: var(--T); font-weight: 500;
  font-size: clamp(3rem, 5.5vw, 7rem);
  color: #fff; line-height: 1.05; margin-bottom: .6rem;
  text-shadow: 0 3px 25px rgba(0,0,0,.6), 0 1px 8px rgba(0,0,0,.5);
}
.hero-plein-txt .slogan {
  font-family: var(--T); font-style: italic; font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  color: rgba(255,255,255,.96);
  margin-bottom: 1.5rem; letter-spacing: .04em;
  text-shadow: 0 2px 15px rgba(0,0,0,.5);
}
.hero-plein-txt .accroche {
  font-family: var(--R); font-weight: 500;
  font-size: clamp(.92rem, 1.3vw, 1.05rem);
  line-height: 1.9;
  color: rgba(255,255,255,.95);
  margin-bottom: 2rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.btn-hero { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: .65rem 1.9rem; background: var(--or-degrade); color: #2a1c05; border-radius: 50px; font-family: var(--T); font-weight: 700; font-size: .95rem; letter-spacing: .08em; box-shadow: 0 3px 12px rgba(0,0,0,.3); transition: box-shadow .2s, transform .2s; }
.btn-hero:hover { box-shadow: 0 5px 18px rgba(209,160,58,.5); transform: translateY(-1px); color: #2a1c05; }
.hero-vague-bas { position: absolute; bottom: -1px; left: 0; right: 0; }
.hero-vague-bas svg { width: 100%; display: block; }

@media (max-width: 768px) {
  /* La photo fait 1920×900 (très panoramique) et le visage est à gauche.
     Dans un écran de téléphone (très vertical), un recadrage centré ne montrait
     que le plateau en bois. On réduit la hauteur — donc le grossissement — et
     on cale le cadrage sur le visage. */
  .hero-plein { height: 76vh; min-height: 470px; max-height: 620px; }
  .hero-plein-img { object-position: left center; }
  /* Sur mobile le texte passe sous la photo : le dégradé est vertical,
     les calques horizontaux n'ont plus lieu d'être. */
  .hero-plein::before, .hero-plein::after { display: none; }
  .hero-plein-txt {
    position: absolute;
    width: 100%;
    padding: 0 1.6rem 2.2rem;
    justify-content: flex-end;
    background: linear-gradient(to top,
      rgba(12,7,3,0.88) 0%,
      rgba(12,7,3,0.72) 38%,
      rgba(12,7,3,0.30) 68%,
      transparent 100%);
  }
  .hero-plein-txt h1 { font-size: clamp(2.1rem, 10vw, 3rem); margin-bottom: .3rem; }
  .hero-plein-txt .slogan { font-size: 1.02rem; margin-bottom: .9rem; }
  .hero-plein-txt .accroche { font-size: .86rem; line-height: 1.72; margin-bottom: 1.4rem; }
}


/* Section Les univers */
.s-univers {
  padding: 80px 2rem 70px;
  text-align: center;
  background-color: transparent;
  background-image: url('../assets/bg-hero-crop-sable.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 1550px auto;
  position: relative;
}
.s-univers > * { position: relative; z-index: 1; }
.s-univers .titre { font-family: var(--T); font-size: clamp(2.3rem,5vw,3.6rem); font-weight: 700; color: var(--brun-titre); margin-bottom: .6rem; }
.s-univers .filet { width: 110px; height: 2px; background: var(--brun-titre); margin: 0 auto 1.5rem; }
.s-univers .sous { font-family: var(--T); font-style: italic; font-size: clamp(1rem,2vw,1.3rem); color: var(--texte); max-width: 750px; margin: 0 auto 3rem; line-height: 1.7; }

.grille-6 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }

.carte-u { background: #fff; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s, box-shadow .35s; text-decoration: none; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.carte-u:hover { transform: translateY(-4px); box-shadow: 0 10px 35px rgba(0,0,0,.15); }
.carte-u img.photo { width: 100%; height: 220px; object-fit: cover; display: block; flex-shrink: 0; }
.carte-u .corps { padding: 1.25rem 1.1rem 1.75rem; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; }
.carte-u .corps h3 { font-family: var(--T); font-size: 1.25rem; font-weight: 500; color: var(--brun-titre); margin-bottom: .7rem; }
.carte-u .corps p { font-size: .85rem; line-height: 1.7; color: var(--texte-2); margin-bottom: 1.25rem; flex: 1; }
.btn-dec { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1.6rem; background: var(--brun); color: #fff; border-radius: 50px; font-family: var(--R); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: background .2s; }
.btn-dec:hover { background: #3d1e0e; }

/* Section Pourquoi choisir */
.s-pourquoi { padding: 80px 2rem; background: #ffffff; text-align: center; }
.s-pourquoi .titre2 { font-family: var(--T); font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 700; color: var(--texte); margin-bottom: .75rem; }
.filet-or { width: 110px; height: 2px; background: var(--or); margin: 0 auto 3rem; }
.grille-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; max-width: var(--max); margin: 0 auto; text-align: center; }
.why-item svg { width: 46px; height: 46px; stroke: var(--or); fill: none; stroke-width: 1.5; display: block; margin: 0 auto 1rem; }
.why-item h3 { font-family: var(--R); font-size: .88rem; font-weight: 700; color: var(--texte); margin-bottom: .75rem; }
.why-item p { font-size: .83rem; line-height: 1.7; color: var(--texte-2); }

/* Section 3 cartes sombres */
.s-sombres { padding: 60px 2rem 70px; background: rgba(190,168,150,.25); }
.grille-3-c { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.cs { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 2rem; background: #1c1208; text-decoration: none; box-shadow: 0 4px 25px rgba(0,0,0,.35); transition: transform .3s; }
.cs:hover { transform: translateY(-4px); }
.cs > img.fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.cs-in { position: relative; z-index: 2; width: 100%; }

/* Carrousel 3D */
.s-carousel {
  padding: 70px 2rem;
  text-align: center;
  overflow: hidden;
  background-color: transparent;
  background-image: url('../assets/bg-hero-crop-sable.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 1550px auto;
  position: relative;
}
.s-carousel > * { position: relative; z-index: 1; }
.s-carousel .titre { font-family: var(--T); font-size: clamp(2.1rem,4vw,3.1rem); font-weight: 700; color: var(--brun-titre); margin-bottom: .6rem; }
.c3d-scene { perspective: 1000px; max-width: 960px; margin: 2rem auto 0; position: relative; height: 360px; }
.c3d { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.c3d-card { position: absolute; width: 300px; height: 340px; top: 50%; left: 50%; overflow: hidden; border-radius: var(--r); box-shadow: none; border: none; transition: transform .8s cubic-bezier(.34,1.56,.64,1), opacity .6s; }
.c3d-card img { width: 100%; height: 100%; object-fit: cover; }
.c3d-vide { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#241808,#3a2410); color: rgba(255,255,255,.35); font-family: var(--T); font-style: italic; font-size: 1.1rem; text-align: center; padding: 1rem; }
.c3d-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(209,160,58,.25); border: none; outline: none; color: var(--or); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background .2s; }
.c3d-btn:hover { background: rgba(209,160,58,.4); }
.c3d-prev { left: 0; } .c3d-next { right: 0; }
.c3d-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.c3d-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(209,160,58,.3); border: 1px solid var(--or); transition: background .3s; }
.c3d-dot.on { background: var(--or); }

/* Footer */
footer { background: var(--noir) !important; color: #f4ede0; padding: 60px 2rem 40px; text-align: center; }
.pied { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2.5rem; max-width: 1280px; margin: 0 auto; text-align: center; }
.pied-logo { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pied-logo img { width: 160px; height: 160px; object-fit: contain; border-radius: 50%; background: var(--noir); overflow: hidden; }
.pied-tagline { font-family: var(--T); font-style: italic; font-size: 1.5rem; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.4; }
.pied-desc { font-size: .85rem; color: rgba(255,255,255,.6); line-height: 1.7; }
.pied-social { display: flex; gap: .6rem; justify-content: center; margin-top: .5rem; }
.pied-social a { width: 46px; height: 46px; border-radius: 50%; background: var(--or); display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.pied-social a:hover { background: #d4b86a; transform: translateY(-2px); }
.pied-social svg { width: 18px; height: 18px; fill: #000; }
.pied-titre { display: block; font-family: var(--T); font-style: italic; font-size: 1.35rem; color: var(--or-pied); margin-bottom: 1.5rem; }
.pied-liens { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.pied-liens a { color: rgba(255,255,255,.75); font-size: .9rem; transition: color .2s; }
.pied-liens a:hover { color: var(--or-pied); }
.section-mince {
  max-width: 1300px; margin: 0 auto; padding: 15px 2rem 90px;
  position: relative;
}
body.page-light main::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/bg-hero-crop-sable-pages.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 1100px auto;
  pointer-events: none;
  z-index: 0;
}
main > * { position: relative; z-index: 1; }
/* Colonne "Les Univers du Centre" : titre en haut, liste centrée dans l'espace restant */
.pied > div:nth-child(2) { display: flex; flex-direction: column; }
.pied > div:nth-child(2) .pied-liens { margin-top: auto; margin-bottom: auto; transform: translateY(-1cm); }
.pied-info { color: rgba(255,255,255,.75); font-size: .9rem; margin-bottom: .6rem; line-height: 1.6; }
.pied-info a { color: rgba(255,255,255,.75); transition: color .2s; }
.pied-info a:hover { color: var(--or-pied); }
.pied-map { width: 100%; height: 135px; border: 1px solid rgba(209,160,58,.25); margin-top: 2rem; overflow: hidden; }
.pied-map iframe { width: 100%; height: 100%; border: none; }
.pied-jour { font-size: .9rem; color: #f4ede0; }
.pied-heure { font-family: var(--T); font-style: italic; font-size: .95rem; color: var(--or-pied); }
.pied-h { margin-bottom: .5rem; text-align: center; }
.pied-legal { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-top: 1.5rem; }
.pied-legal a { font-size: .8rem; color: rgba(255,255,255,.6); transition: color .2s; }
.pied-legal a:hover { color: var(--or-pied); }
.pied-bas { max-width: 1280px; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); text-align: center; font-size: .73rem; color: rgba(255,255,255,.2); }

/* Pages secondaires */
.page-haut { padding-top: calc(var(--nav-h) + 55px); padding-bottom: 45px; padding-left: 2rem; padding-right: 2rem; text-align: center; background: transparent; }
.page-haut h1 { font-family: var(--T); font-size: clamp(2.4rem,5vw,3.8rem); font-weight: 700; margin-bottom: 1rem; }
body.page-light .page-haut h1 { color: var(--brun-titre); }
body.page-dark  .page-haut h1 { color: var(--or); font-style: italic; text-shadow: 0 0 18px rgba(209,160,58,.45); }
.div-or { width: 100px; height: 2px; background: var(--or); margin: 0 auto 3rem; }
.div-brun { width: 100px; height: 2px; background: var(--brun-titre); margin: 0 auto 3rem; }
.s { padding: 0 2rem 70px; background: transparent; }
.grille-soins { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 2.5rem; column-gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.grille-soins > .carte-soin { flex: 0 1 calc(33.333% - 1rem); min-width: 280px; }
.grille-soins-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; max-width: 900px; margin: 1.5rem auto 0; }
.cta-soins { text-align: center; margin-top: 3rem; }
.btn-retour {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #1a1a1a;
  font-family: var(--R);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.btn-retour:hover { border-bottom-color: #1a1a1a; }

/* ── Vignettes "univers" (massages, etc.) avec titre incrusté + info-bulle au survol ── */
.carte-soin {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  transition: transform .35s, box-shadow .35s;
}
.carte-soin:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.carte-soin-carre { max-width: 290px; }
.grille-soins-aeree { row-gap: 2.5rem; column-gap: 2.2rem; margin-bottom: 2.5rem; }
.carte-soin-img-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; position: relative; }
.carte-soin-carre .carte-soin-img-wrap { aspect-ratio: 1/1; }
.carte-soin-img-wrap img, .carte-soin-img-wrap .ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.carte-soin:hover .carte-soin-img-wrap img { transform: scale(1.06); }

/* Titre toujours incrusté en bas de la photo, sur dégradé (plus de bandeau blanc) */
.carte-soin-titre-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1rem .9rem;
  background: linear-gradient(180deg, transparent 0%, rgba(15,10,6,.85) 100%);
  z-index: 2;
}
.carte-soin-titre-overlay h3 {
  font-family: var(--titre);
  font-size: clamp(.82rem, 2.6vw, 1.05rem);
  color: #fff;
  text-align: center;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.carte-soin-prix {
  text-align: center;
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  margin: .25rem 0 0;
}
.grille-soins-3col { grid-template-columns: repeat(3,1fr); max-width: 1200px; }
@media (max-width: 900px) { .grille-soins-3col { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .grille-soins-3col { grid-template-columns: 1fr; } }

/* Info-bulle : cachée par défaut, apparaît uniquement au survol (pas au clic) */
.carte-soin-tip {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,8,.15) 0%, rgba(20,14,8,.94) 100%);
  color: #f7f1e7;
  display: flex;
  align-items: flex-end;
  padding: 1.2rem 1.1rem;
  font-family: var(--R);
  font-size: .84rem;
  line-height: 1.55;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 3;
}
.carte-soin:hover .carte-soin-tip { opacity: 1; }
.carte-s { display: flex; flex-direction: column; text-decoration: none; }
.carte-s-img { overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.carte-s-img img, .carte-s-img .ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .4s; }
.carte-s:hover .carte-s-img img { transform: scale(1.04); }
.ph { object-fit: unset; }
.ph-californie{background:linear-gradient(135deg,#9a6a20,#d4a050)}.ph-bali{background:linear-gradient(135deg,#1a4020,#3a7040)}.ph-hawai{background:linear-gradient(135deg,#1a3858,#2878b8)}.ph-maroc{background:linear-gradient(135deg,#6a2810,#d86040)}.ph-japon{background:linear-gradient(135deg,#6a1840,#d04878)}.ph-suede{background:linear-gradient(135deg,#283848,#588090)}.ph-inde{background:linear-gradient(135deg,#6a3808,#e09048)}.ph-tibet{background:linear-gradient(135deg,#3a0c28,#8a2860)}.ph-chine{background:linear-gradient(135deg,#4a0808,#b02020)}.ph-4mains{background:linear-gradient(135deg,#2a1808,#3a2010)}.ph-pierres{background:linear-gradient(135deg,#1a0a08,#501a12)}.ph-bougie{background:linear-gradient(135deg,#2a1a08,#7a4820)}.ph-bambous{background:linear-gradient(135deg,#102010,#285028)}.ph-coquillages{background:linear-gradient(135deg,#0e1e2c,#286878)}.ph-trigger{background:linear-gradient(135deg,#200808,#601818)}.ph-5cont{background:linear-gradient(135deg,#1a1408,#503e20)}.ph-signature{background:linear-gradient(135deg,#201408,#6a3a18)}.ph-cocooning{background:linear-gradient(135deg,#1a1020,#200a30)}.ph-duo{background:linear-gradient(135deg,#201810,#604028)}.ph-hub{background:linear-gradient(135deg,#302010,#402818)}.ph-rituel{background:linear-gradient(135deg,#2a1c08,#3a2010)}.ph-silh{background:linear-gradient(135deg,#181818,#202020)}.ph-r-relax{background:linear-gradient(135deg,#1a2820,#2c4a3a)}.ph-r-duo{background:linear-gradient(135deg,#20281c,#3a5030)}.ph-r-harmonie{background:linear-gradient(135deg,#28180c,#5a3a18)}.ph-r-vip{background:linear-gradient(135deg,#241408,#6a4818)}.ph-p3{background:linear-gradient(135deg,#181c28,#30405a)}.ph-p5{background:linear-gradient(135deg,#1c1408,#5a4218)}
.carte-s .corps { text-align: center; padding: .8rem .75rem 1.25rem; background: #fff; border-radius: 0 0 var(--r) var(--r); }
.carte-s .corps h3 { font-family: var(--T); font-size: 1.1rem; color: var(--brun-titre); margin-bottom: .15rem; }
.carte-s .corps .ital { font-family: var(--T); font-style: italic; font-size: .95rem; color: var(--texte-2); }
.carte-s .corps .prix { font-size: .82rem; color: var(--texte-2); margin-top: .15rem; }
body.page-dark .carte-s .corps { background: rgba(255,255,255,.08); }
body.page-dark .carte-s .corps h3 { color: #f4ede0; }
.cta-s { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem; }
.btn-ret { display: inline-flex; align-items: center; padding: .8rem 2rem; border: 1.5px solid var(--brun); color: var(--brun); border-radius: 50px; font-family: var(--R); font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s; }
.btn-ret:hover { background: var(--brun); color: #fff; }
.btn-plan { display: inline-flex; align-items: center; padding: .8rem 2.5rem; background: var(--brun); color: #fff; border-radius: 50px; font-family: var(--R); font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: background .2s; }
.btn-plan:hover { background: #3d1e0e; }

/* Le Centre */
.s-dark { padding: 0 2rem 70px; background: transparent; max-width: var(--max); margin: 0 auto; }
.g-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.g-2.inv { direction: rtl; } .g-2.inv > * { direction: ltr; }
.t-texte h2 { font-family: var(--T); font-style: italic; font-size: clamp(1.8rem,3.5vw,2.6rem); color: var(--or); margin-bottom: 1.5rem; }
.t-texte p { color: rgba(244,237,224,.8); line-height: 1.88; margin-bottom: 1.2rem; font-size: .95rem; }
.g-3p { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; max-width: var(--max); margin: 3rem auto 0; }
.g-3p img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r); }
.ph-centre { width: 100%; aspect-ratio: 3/2; background: linear-gradient(160deg,#2a1808,#402818); border-radius: var(--r); display: flex; align-items: center; justify-content: center; }
.ph-centre span { font-family: var(--T); font-style: italic; color: rgba(255,255,255,.3); font-size: 1rem; text-align: center; padding: 1rem; }

/* Responsive */
@media (max-width: 1100px) {
  .pied { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .grille-6 { grid-template-columns: repeat(2,1fr); }
  /* .grille-soins est en flex : on agit sur la base des éléments, pas sur des colonnes */
  .grille-soins > .carte-soin { flex-basis: calc(50% - 1.1rem); }
  .grille-3-c { grid-template-columns: repeat(2,1fr); }
  .grille-4 { grid-template-columns: repeat(2,1fr); }
  .g-2 { grid-template-columns: 1fr; gap: 2.5rem; }
  .g-3p { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  :root { --nav-h: 75px; }
  #nav, .btn-nav { display: none; }
  .burger { display: flex; }
  .pied { grid-template-columns: 1fr; }
  .grille-6, .grille-soins-2 { grid-template-columns: 1fr; }
  .grille-soins > .carte-soin { flex-basis: 100%; min-width: 0; }
  .carte-soin-carre { max-width: 340px; margin-inline: auto; }
  .grille-3-c { grid-template-columns: 1fr; }
  .grille-4 { grid-template-columns: 1fr 1fr; }
  .g-3p { grid-template-columns: 1fr; }
  .hero { flex-direction: column; height: auto; }
  .hero-g { height: 50vw; min-height: 220px; }
  .hero-d { min-height: 380px; }
  /* Sur écran tactile il n'y a pas de survol : l'info-bulle serait invisible.
     On la remplace par un texte toujours lisible sous le titre. */
  .carte-soin-tip {
    position: static; inset: auto; opacity: 1; background: rgba(20,14,8,.92);
    padding: .9rem 1rem; font-size: .8rem;
  }
  .carte-soin-img-wrap { aspect-ratio: auto; }
  .carte-soin-carre .carte-soin-img-wrap { aspect-ratio: auto; }
  .carte-soin-img-wrap img, .carte-soin-img-wrap .ph { aspect-ratio: 1/1; height: auto; }
  .carte-soin-titre-overlay { position: static; background: rgba(15,10,6,.95); padding: .9rem 1rem .2rem; }
}


/* ============================================================
   COMPOSANTS PARTAGÉS — ajoutés lors de la refonte pro / SEO
   Tous les styles ci-dessous sont globaux : ils s'adaptent seuls
   au thème de la page (body.page-light ou body.page-dark).
   ============================================================ */

/* ── Chapeau d'introduction en haut des pages ───────────────── */
.bloc-intro {
  max-width: 780px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.bloc-intro p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--texte-2);
}
.bloc-intro p + p { margin-top: 1.1rem; }
body.page-dark .bloc-intro p { color: var(--ivoire-2); }
.bloc-intro .exergue {
  font-family: var(--T);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--brun-titre);
  line-height: 1.65;
  margin-bottom: 1.2rem;
}
body.page-dark .bloc-intro .exergue { color: var(--or); }

/* ── Titre de section interne ───────────────────────────────── */
.titre-section {
  font-family: var(--T);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  color: var(--brun-titre);
  text-align: center;
  margin-bottom: .6rem;
}
body.page-dark .titre-section { color: var(--or); font-style: italic; }
.sous-titre-section {
  font-family: var(--T);
  font-style: italic;
  font-size: clamp(.98rem, 1.8vw, 1.2rem);
  color: var(--texte-2);
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}
body.page-dark .sous-titre-section { color: var(--ivoire-2); }

/* ── Liste de prestations (nom + durée + tarif) ─────────────── */
.liste-presta {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.presta {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .95rem .4rem;
  border-bottom: 1px solid rgba(90,64,48,.16);
}
body.page-dark .presta { border-bottom-color: rgba(209,160,58,.18); }
.presta:last-child { border-bottom: none; }
.presta-nom {
  font-family: var(--T);
  font-size: 1.05rem;
  color: var(--brun-titre);
  flex-shrink: 0;
}
body.page-dark .presta-nom { color: var(--ivoire); }
.presta-desc {
  font-size: .85rem;
  color: var(--texte-2);
  line-height: 1.6;
  flex: 1;
}
body.page-dark .presta-desc { color: var(--ivoire-2); }
.presta-pointille {
  flex: 1;
  border-bottom: 1px dotted rgba(90,64,48,.4);
  transform: translateY(-4px);
  min-width: 1.5rem;
}
body.page-dark .presta-pointille { border-bottom-color: rgba(209,160,58,.35); }
.presta-prix {
  font-family: var(--T);
  font-size: 1rem;
  font-weight: 600;
  color: var(--or);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .presta { flex-wrap: wrap; row-gap: .2rem; }
  .presta-pointille { display: none; }
  .presta-nom { flex: 1 1 auto; }
  .presta-desc { flex: 1 1 100%; order: 3; }
}

/* ── FAQ dépliante (balise <details>, sans JavaScript) ──────── */
.s-faq {
  max-width: 860px;
  margin: 0 auto;
  padding: 70px 2rem 20px;
}
.faq-item {
  border-bottom: 1px solid rgba(90,64,48,.18);
}
body.page-dark .faq-item, body.page-home .faq-item { border-bottom-color: rgba(90,64,48,.18); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem .5rem 1.25rem 0;
  font-family: var(--T);
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: var(--brun-titre);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color .2s;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--or); }
.faq-item > summary::after {
  content: '+';
  font-family: var(--R);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--or);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .25s;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-reponse {
  padding: 0 2.5rem 1.4rem 0;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--texte-2);
}
.faq-reponse a { color: var(--or); border-bottom: 1px solid rgba(209,160,58,.4); }
body.page-dark .faq-item > summary { color: var(--ivoire); }
body.page-dark .faq-reponse { color: var(--ivoire-2); }

/* ── Bandeau « Ils nous font confiance » ────────────────────── */
.s-avis {
  padding: 70px 2rem;
  background: #ffffff;
  text-align: center;
}
.avis-note {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--T);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--brun-titre);
  line-height: 1;
}
.avis-etoiles { display: inline-flex; gap: .18rem; }
.avis-etoiles svg { width: 22px; height: 22px; fill: var(--or); }
.avis-legende {
  font-family: var(--R);
  font-size: .92rem;
  color: var(--texte-2);
  margin-top: .9rem;
}
.avis-legende a { color: var(--or); font-weight: 700; }
.avis-legende a:hover { border-bottom: 1px solid var(--or); }

/* ── Bloc « Nous trouver » (adresse, horaires, contact) ─────── */
.s-acces {
  padding: 70px 2rem;
  background: rgba(190,168,150,.25);
}
.acces-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}
.acces-bloc h3 {
  font-family: var(--T);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--brun-titre);
  margin-bottom: 1rem;
}
.acces-bloc p, .acces-bloc li {
  font-size: .92rem;
  line-height: 1.8;
  color: var(--texte-2);
}
.acces-bloc a { color: var(--texte-2); border-bottom: 1px solid rgba(209,160,58,.45); }
.acces-bloc a:hover { color: var(--or); }
.acces-bloc svg {
  width: 34px; height: 34px;
  stroke: var(--or); fill: none; stroke-width: 1.5;
  margin: 0 auto .8rem; display: block;
}
@media (max-width: 900px) { .acces-grille { grid-template-columns: 1fr; gap: 2rem; } }

/* ── Appel à l'action de fin de page ────────────────────────── */
.cta-final {
  text-align: center;
  padding: 60px 2rem 20px;
  max-width: 760px;
  margin: 0 auto;
}
.cta-final h2 {
  font-family: var(--T);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: var(--brun-titre);
  margin-bottom: .8rem;
}
body.page-dark .cta-final h2 { color: var(--or); font-style: italic; }
.cta-final p {
  font-size: .95rem;
  line-height: 1.85;
  color: var(--texte-2);
  margin-bottom: 2rem;
}
body.page-dark .cta-final p { color: var(--ivoire-2); }
.cta-boutons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.btn-secondaire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .82rem 2.4rem;
  border: 1.5px solid var(--brun);
  color: var(--brun);
  border-radius: 50px;
  font-family: var(--R);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}
.btn-secondaire:hover { background: var(--brun); color: #fff; }
body.page-dark .btn-secondaire { border-color: var(--or); color: var(--or); }
body.page-dark .btn-secondaire:hover { background: var(--or); color: #2a1c05; }

/* ── Fil d'Ariane (aide au référencement et à la navigation) ── */
.fil-ariane {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 2rem;
  font-size: .78rem;
  color: var(--texte-2);
  text-align: center;
}
.fil-ariane ol { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.fil-ariane li { display: inline-flex; align-items: center; gap: .45rem; }
.fil-ariane li + li::before { content: '›'; color: var(--or); }
.fil-ariane a { color: var(--texte-2); transition: color .2s; }
.fil-ariane a:hover { color: var(--or); }
.fil-ariane [aria-current="page"] { color: var(--or); }
body.page-dark .fil-ariane, body.page-dark .fil-ariane a { color: rgba(244,237,224,.6); }

/* Le fil d'Ariane se glisse juste sous le header, avant le titre de page */
.page-haut.avec-ariane { padding-top: calc(var(--nav-h) + 30px); }
.fil-ariane.sous-header { padding-top: calc(var(--nav-h) + 26px); }
.fil-ariane.sous-header + .page-haut { padding-top: 18px; }

/* ── Placeholders des pages en attente de photo ─────────────── */
.ph-beaute-visage{background:linear-gradient(135deg,#3a2416,#7a5334)}
.ph-beaute-gommage{background:linear-gradient(135deg,#4a3320,#8f6b44)}
.ph-beaute-epil{background:linear-gradient(135deg,#2e2018,#63483a)}
.ph-beaute-mains{background:linear-gradient(135deg,#3d2a1c,#8a6240)}
.ph-detente-jacuzzi{background:linear-gradient(135deg,#0e1e2c,#2a5f78)}
.ph-detente-sauna{background:linear-gradient(135deg,#2a1808,#7a4820)}
.ph-detente-duo{background:linear-gradient(135deg,#1c2430,#46647a)}
.ph-bebe-spa{background:linear-gradient(135deg,#1d2c34,#4d8496)}
.ph-bebe-massage{background:linear-gradient(135deg,#33261a,#8a6b4a)}
.ph-bebe-enfant{background:linear-gradient(135deg,#2b2418,#7a6640)}
.ph-atelier-formation{background:linear-gradient(135deg,#2a1c08,#6a4a18)}
.ph-atelier-groupe{background:linear-gradient(135deg,#221a2c,#544070)}
.ph-atelier-parent{background:linear-gradient(135deg,#2c2018,#755440)}

/* ── Impression : on allège pour un devis ou une fiche soin ─── */
@media print {
  #site-header, #menu-mobile, .burger, .btn-nav, .btn-hero, .btn-planity,
  .pied-map, .skip-lien, .s-sombres { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  main { margin-top: 0 !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .7em; }
}

/* ── Variantes de grille selon le nombre de vignettes ───────── */
.grille-soins-2x2 { max-width: 680px; }
.grille-soins-2x2 > .carte-soin { flex: 0 1 calc(50% - 1.1rem); }
.grille-soins-3x1 { max-width: 1000px; }

/* ── Page 404 ───────────────────────────────────────────────── */
.err-404 { text-align: center; padding: calc(var(--nav-h) + 90px) 2rem 90px; max-width: 720px; margin: 0 auto; }
.err-404 .err-code { font-family: var(--T); font-size: clamp(4rem, 12vw, 7rem); font-weight: 700; color: var(--or); line-height: 1; }
.err-404 h1 { font-family: var(--T); font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--brun-titre); margin: .8rem 0 1.2rem; }
.err-404 p { color: var(--texte-2); line-height: 1.85; margin-bottom: 2.2rem; }

/* ── Écrans intermédiaires (petits portables, tablettes en paysage) ──
   Le menu comporte 7 entrées : sans resserrement il passe sur deux lignes
   et déborde du bandeau. On réduit progressivement plutôt que de tout casser. */
@media (min-width: 769px) and (max-width: 1200px) {
  #nav > ul > li > a { padding: .5rem .55rem; font-size: .82rem; }
  .btn-nav { padding: .6rem 1.35rem; font-size: .88rem; }
  .logo img { height: 118px; width: 118px; top: 26px; }
  .header-inner { gap: .4rem; }
}
@media (min-width: 769px) and (max-width: 1000px) {
  #nav > ul > li > a { padding: .5rem .38rem; font-size: .76rem; }
  .btn-nav { padding: .55rem 1.1rem; font-size: .8rem; letter-spacing: .04em; }
  .logo img { height: 100px; width: 100px; top: 20px; }
}

/* ── Affinages mobile ────────────────────────────────────────
   Le logo rond déborde volontairement sous le bandeau. À 150 px il
   recouvrait le fil d'Ariane sur téléphone : on le met à l'échelle. */
@media (max-width: 768px) {
  .logo img { height: 88px; width: 88px; top: 18px; box-shadow: 0 5px 16px rgba(0,0,0,.25); }
  .header-inner { padding: 0 1rem; }

  .page-haut h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .page-haut { padding-left: 1.25rem; padding-right: 1.25rem; }
  .section-mince { padding: 15px 1.25rem 70px; }

  /* Le fil d'Ariane passe sous le débord du logo. */
  .fil-ariane.sous-header { padding-top: calc(var(--nav-h) + 42px); }
  .fil-ariane { font-size: .75rem; }

  .bloc-intro { margin-bottom: 2.5rem; }
  .bloc-intro p { font-size: .94rem; }
  .s-faq { padding: 45px 1.25rem 10px; }
  .faq-item > summary { padding-right: .25rem; }
  .faq-reponse { padding-right: .5rem; }
  .s-avis, .s-acces { padding: 45px 1.25rem; }
  .cta-final { padding: 45px 1.25rem 10px; }
  .cta-boutons { flex-direction: column; }
  .cta-boutons > a { width: 100%; max-width: 320px; }
  footer { padding: 45px 1.25rem 30px; }
}

@media (max-width: 400px) {
  .logo img { height: 76px; width: 76px; top: 15px; }
  .page-haut h1 { font-size: 1.6rem; }
}

/* Ces surcharges doivent rester en dernier : les variantes .grille-soins-2x2 et
   .grille-soins-3x1 sont déclarées plus haut et l'emporteraient sinon sur mobile,
   où chaque vignette doit occuper toute la largeur. */
@media (max-width: 768px) {
  .grille-soins-2x2,
  .grille-soins-3x1 { max-width: 100%; }
  .grille-soins-2x2 > .carte-soin,
  .grille-soins-3x1 > .carte-soin,
  .grille-soins > .carte-soin { flex: 1 1 100%; min-width: 0; max-width: 380px; }
  .grille-soins { column-gap: 0; }
}

/* ── Grille « quinconce » de la page Massages ────────────────
   La classe était employée dans massages.html sans aucune règle : la mise en
   page reposait donc sur le comportement par défaut (3 vignettes, puis 2
   centrées). On fige cette disposition, validée, pour qu'elle ne dépende plus
   d'un effet de bord. */
.grille-soins-quinconce { max-width: 1080px; }
.grille-soins-quinconce > .carte-soin { flex: 0 1 calc(33.333% - 1rem); max-width: 330px; }
@media (max-width: 1100px) {
  .grille-soins-quinconce > .carte-soin { flex-basis: calc(50% - 1.1rem); }
}
@media (max-width: 768px) {
  .grille-soins-quinconce { max-width: 100%; }
  .grille-soins-quinconce > .carte-soin { flex: 1 1 100%; max-width: 380px; }
}

/* Le fond sable translucide de la section « Nous trouver » abaissait le contraste
   du texte à 4,18 : sous le seuil WCAG AA (4,5). On assombrit le texte. */
.acces-bloc p, .acces-bloc li, .acces-bloc a { color: var(--texte); }
.acces-bloc a:hover { color: var(--brun); }


/* ============================================================
   CORRECTIONS DEMANDÉES PAR SABRINA
   ============================================================ */

/* ── Titre lu par Google mais invisible à l'écran ────────────
   Remplace les titres H2 jugés redondants : la structure du document
   reste correcte pour le référencement, sans double titre visible. */
.titre-masque {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Le doré est illisible sur le fond sable ─────────────────
   Sur les fonds clairs, tout ce qui est interactif ou informatif passe
   en brun foncé. Le doré est conservé uniquement sur les fonds sombres,
   où il ressort. */
.faq-item > summary { color: var(--brun-titre); }
.faq-item > summary:hover,
.faq-item > summary:focus-visible {
  color: var(--brun);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.faq-item > summary::after { color: var(--brun); }
.faq-item[open] > summary { color: var(--brun-titre); }
.faq-reponse a { color: var(--brun); border-bottom-color: var(--brun); font-weight: 600; }
.faq-reponse a:hover { color: var(--brun-titre); }

/* Icônes « Adresse / Horaires / Contact » : le doré disparaissait sur le sable. */
.acces-bloc svg { stroke: var(--brun-titre); stroke-width: 1.7; }
.acces-bloc a { border-bottom-color: rgba(90,48,32,.45); }

/* Sur fond sombre en revanche, le doré reste le bon choix. */
body.page-dark .faq-item > summary { color: var(--ivoire); }
body.page-dark .faq-item > summary:hover { color: var(--or); }
body.page-dark .faq-item > summary::after { color: var(--or); }
body.page-dark .faq-reponse a { color: var(--or); border-bottom-color: var(--or); }

/* ── Pied de page : les liens collaient au titre de colonne ──
   Un décalage de -1 cm remontait la liste « Les Univers du Centre »
   jusqu'à la coller à son titre. On le supprime. */
.pied > div:nth-child(2) .pied-liens {
  margin-top: 0;
  margin-bottom: auto;
  transform: none;
  padding-top: .25rem;
}
.pied-titre { margin-bottom: 1.35rem; }

/* Intitulé de la carte, affiché uniquement sur téléphone. */
.pied-titre-carte { display: none; }

/* ── Vignettes : titre doré, prix discret ────────────────────
   Le titre et le prix étaient tous deux en blanc, dans deux polices
   différentes : illisible et peu élégant. Le titre passe en doré clair
   (parfaitement lisible sur le voile sombre), le prix en petites capitales. */
.carte-soin-titre-overlay h3 {
  color: var(--or-clair);
  font-family: var(--T);
  font-weight: 600;
  letter-spacing: .01em;
}
.carte-soin-prix {
  color: rgba(255,255,255,.72);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-top: .3rem;
}
/* Cartes dont la photo porte déjà le titre : on ne l'écrit pas une 2e fois. */
.carte-soin-titre-overlay.titre-dans-image h3 {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.carte-soin-titre-overlay.titre-dans-image { padding-top: 1.6rem; }

/* ── Vignettes sur téléphone ─────────────────────────────────
   Sans survol possible, la description s'affiche en permanence. Elle
   apparaissait AVANT le titre et collée à la photo. On rétablit l'ordre
   photo → titre → description et on aère. */
@media (max-width: 768px) {
  .carte-soin-img-wrap { display: flex; flex-direction: column; }
  .carte-soin-img-wrap img,
  .carte-soin-img-wrap .ph { order: 1; }
  .carte-soin-titre-overlay { order: 2; }
  .carte-soin-tip { order: 3; }

  .carte-soin-titre-overlay {
    background: #241610;
    padding: 1.05rem 1.1rem .9rem;
  }
  .carte-soin-titre-overlay h3 {
    white-space: normal;            /* les titres longs ne sont plus tronqués */
    font-size: 1.06rem;
    line-height: 1.3;
  }
  .carte-soin-titre-overlay.titre-dans-image { padding: 1.05rem 1.1rem .9rem; }

  .carte-soin-tip {
    background: #241610;
    color: rgba(244,237,224,.74);
    font-size: .83rem;
    line-height: 1.65;
    padding: .85rem 1.1rem 1.15rem;
    border-top: 1px solid rgba(209,160,58,.22);
    margin: 0 1.1rem;               /* le filet ne touche pas les bords */
    padding-left: 0; padding-right: 0;
  }
}

/* ── Pied de page sur téléphone ──────────────────────────────
   Demandé : le plan tout en bas sous un intitulé, puis les mentions
   légales en tout dernier. On « éclate » la colonne Horaires pour pouvoir
   déplacer ses mentions légales indépendamment. */
@media (max-width: 768px) {
  .pied { display: flex; flex-direction: column; gap: 0; }
  .pied > div { margin-bottom: 2.4rem; }

  .pied > div:nth-child(1) { order: 1; }   /* logo et réseaux */
  .pied > div:nth-child(2) { order: 2; }   /* les univers */

  /* La colonne Horaires devient transparente pour la mise en page. */
  .pied > div:nth-child(4) { display: contents; }
  .pied > div:nth-child(4) > .pied-titre,
  .pied > div:nth-child(4) > .pied-h { order: 3; }
  .pied > div:nth-child(4) > .pied-titre { margin-top: 0; }

  .pied > div:nth-child(3) { order: 4; }   /* contacts, avec le plan */

  .pied-legal { order: 9; margin-top: 2.2rem; }

  /* Le plan quitte le bloc Contacts pour venir tout en bas. */
  .pied > div:nth-child(3) { display: contents; }
  .pied > div:nth-child(3) > .pied-titre,
  .pied > div:nth-child(3) > .pied-info { order: 4; }
  .pied-titre-carte { display: block; order: 7; margin: 2.4rem 0 1rem; }
  .pied-map { order: 8; margin-top: 0; height: 190px; }
}

/* ── Bandeau d'accueil sur téléphone ─────────────────────────
   La photo est panoramique (1920×900) et le haut du crâne y est déjà
   coupé à la source. Superposée en plein écran vertical, elle donnait
   soit le plateau en bois, soit un gros plan d'œil. On la présente donc
   en bandeau, à un format proche du sien, et le texte passe dessous. */
@media (max-width: 768px) {
  .hero-plein {
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    background: #17100a;
  }
  .hero-plein-img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: left center;   /* le visage est à gauche de la photo */
  }
  .hero-plein-txt {
    position: static;
    width: 100%;
    height: auto;
    background: #17100a;
    padding: 1.9rem 1.4rem 2.6rem;
    justify-content: flex-start;
  }
  .hero-plein-txt h1 { font-size: clamp(2rem, 9vw, 2.7rem); }
}

/* Correctif : la description était en retrait du bandeau de prix (marge
   latérale au lieu d'un remplissage), ce qui créait un décrochement visible. */
@media (max-width: 768px) {
  .carte-soin-tip {
    margin: 0;
    padding: .9rem 1.1rem 1.2rem;
  }
}

/* ── Boutons sur les trois vignettes sombres de l'accueil ────
   Les images portent déjà leur titre : le bouton se place en bas, sur un
   voile dégradé qui garantit sa lisibilité sans masquer la composition. */
.cs { justify-content: flex-end; padding: 0 1.4rem 1.5rem; }
.cs::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(10,6,3,.86) 0%, rgba(10,6,3,.45) 55%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.cs-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .68rem 1.9rem;
  background: var(--or-degrade);
  color: #2a1c05;
  border-radius: 50px;
  font-family: var(--T);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .07em;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  transition: box-shadow .25s, transform .25s;
}
.cs:hover .cs-action {
  box-shadow: 0 6px 20px rgba(209,160,58,.55);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .cs { padding: 0 1.2rem 1.3rem; }
  .cs-action { padding: .62rem 1.5rem; font-size: .86rem; }
}

/* ── Listes de tarifs ────────────────────────────────────────
   Employées là où le nombre de prestations rend la vignette
   impraticable : épilations, ongles, cures. */
.titre-liste {
  font-family: var(--T);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--brun-titre);
  margin: 2.4rem 0 .5rem;
  text-align: center;
}
body.page-dark .titre-liste { color: var(--or); }
.liste-presta + .titre-liste { margin-top: 2.8rem; }

.note-legale {
  max-width: 780px;
  margin: 2.5rem auto 0;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--texte-2);
  text-align: center;
  font-style: italic;
}
body.page-dark .note-legale { color: var(--ivoire-2); }

/* Mention réglementaire encadrée, réutilisable. */
.encadre-legal {
  max-width: 780px;
  margin: 2.5rem auto 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(90,48,32,.35);
  border-left: 4px solid var(--brun);
  border-radius: 0 var(--r) var(--r) 0;
  background: rgba(255,255,255,.45);
}
.encadre-legal p {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--texte);
  margin: 0;
}
.encadre-legal p + p { margin-top: .6rem; }
.encadre-legal strong { font-weight: 800; }
body.page-dark .encadre-legal {
  background: rgba(255,255,255,.06);
  border-color: rgba(209,160,58,.35);
  border-left-color: var(--or);
}
body.page-dark .encadre-legal p { color: var(--ivoire-2); }

/* Encart « selon disponibilité » pour les prestations ponctuelles. */
.encart-dispo {
  max-width: 780px;
  margin: 2rem auto 0;
  padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--or);
  background: rgba(209,160,58,.09);
  border-radius: 0 var(--r) var(--r) 0;
}
.encart-dispo p { font-size: .89rem; line-height: 1.7; color: var(--texte-2); margin: 0; }
body.page-dark .encart-dispo p { color: var(--ivoire-2); }

/* Les tarifs étaient en doré clair, illisible sur le fond sable.
   Sur fond clair on passe à un doré profond ; le doré vif est conservé
   sur les fonds sombres, où il ressort. */
.presta-prix { color: #63400D; }
body.page-dark .presta-prix { color: var(--or); }


/* ============================================================
   LIVRET — carte des soins, feuilleté en double page
   Chaque feuillet porte un recto à droite et un verso qui se
   découvre à gauche une fois la page tournée, comme un livre relié.
   ============================================================ */

.lv-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 auto;
}

/* ── Le livre ── */
.lv-livre {
  position: relative;
  width: min(820px, 100%);
  height: 640px;
  perspective: 2800px;
  perspective-origin: 50% 42%;
  flex-shrink: 1;
}
/* Tranche et fond du livre, visibles sous les pages */
.lv-livre::before {
  content: '';
  position: absolute;
  inset: 0 50% 0 0;
  background: linear-gradient(100deg, #0B0705 0%, #17100A 70%, #241811 100%);
  border-radius: var(--r) 2px 2px var(--r);
  box-shadow: inset -14px 0 28px rgba(0,0,0,.55);
}

/* ── Les feuillets ── */
.lv-feuillet {
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.42, .04, .26, 1);
}
.lv-feuillet.tournee { transform: rotateY(-179.8deg); }

.lv-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2.3rem 1.9rem 2.5rem;
  color: #EFE4D2;
  background:
    radial-gradient(130% 80% at 50% -10%, rgba(209,160,58,.13), transparent 55%),
    linear-gradient(165deg, #2E1F14 0%, #1D1309 55%, #130C06 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(209,160,58,.4) transparent;
}
.lv-face::-webkit-scrollbar { width: 5px; }
.lv-face::-webkit-scrollbar-thumb { background: rgba(209,160,58,.4); border-radius: 3px; }

/* Le motif maori, en filigrane sur chaque page */
.lv-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/bg-centre-dark.png') no-repeat center / cover;
  opacity: .16;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Filet doré intérieur */
.lv-face::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(209,160,58,.22);
  pointer-events: none;
}
.lv-face > * { position: relative; z-index: 1; }

.lv-recto {
  border-radius: 2px var(--r) var(--r) 2px;
  box-shadow: 14px 6px 34px rgba(0,0,0,.42), inset 10px 0 22px rgba(0,0,0,.45);
}
.lv-verso {
  transform: rotateY(180deg);
  border-radius: var(--r) 2px 2px var(--r);
  box-shadow: -14px 6px 34px rgba(0,0,0,.42), inset -10px 0 22px rgba(0,0,0,.45);
}
.lv-vierge { background: linear-gradient(165deg, #241811, #130C06); }
.lv-vierge::before, .lv-vierge::after { display: none; }

/* ── Flèches, de part et d'autre du livret ── */
.lv-fleche {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border: 1.5px solid rgba(90,48,32,.45);
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  color: var(--brun-titre);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, opacity .25s, transform .2s;
}
.lv-fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lv-fleche:hover:not(:disabled) { background: var(--brun); color: #fff; border-color: var(--brun); transform: scale(1.06); }
.lv-fleche:disabled { opacity: .22; cursor: default; }

.lv-compteur {
  text-align: center;
  margin: 1.2rem 0 0;
  font-family: var(--T);
  font-size: 1rem;
  color: var(--brun-titre);
  font-variant-numeric: tabular-nums;
}
.lv-compteur .lv-sep { color: var(--or); margin: 0 .45rem; }

/* ── Typographie des pages ── */
.lv-titre {
  font-family: var(--T); font-weight: 600; font-style: italic;
  font-size: 1.45rem; line-height: 1.2;
  color: var(--or-clair); text-align: center;
  margin: 0; text-wrap: balance;
}
.lv-titre-suite {
  display: block; font-style: normal; font-family: var(--R);
  font-size: .63rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(239,228,210,.5); margin-top: .5rem;
}
.lv-filet {
  width: 58px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  margin: .9rem auto 1.3rem;
}

.lv-groupe {
  font-family: var(--R); font-size: .6rem; font-weight: 800;
  letter-spacing: .19em; text-transform: uppercase;
  color: rgba(209,160,58,.9); margin: 1.5rem 0 .5rem;
  text-align: center;
}
.lv-groupe:first-of-type { margin-top: 0; }

.lv-liste { list-style: none; margin: 0; padding: 0; }
.lv-liste li {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid rgba(239,228,210,.08);
}
.lv-liste li:last-child { border-bottom: none; }
.lv-nom { flex: 1; font-size: .83rem; line-height: 1.4; }
.lv-prec { color: rgba(239,228,210,.5); font-size: .78em; }
.lv-duree {
  font-size: .73rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(209,160,58,.72); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lv-prix {
  font-family: var(--T); font-weight: 600; font-size: .95rem;
  color: var(--or-clair); white-space: nowrap;
  font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right;
}
.lv-note {
  margin: 1.2rem 0 0; font-size: .7rem; font-style: italic;
  line-height: 1.6; color: rgba(239,228,210,.45); text-align: center;
}
.lv-orn { text-align: center; color: rgba(209,160,58,.6); font-size: .85rem; margin: 1.1rem 0; }

/* ── Couverture ── */
.lv-couverture {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding-bottom: 3.5rem;
}
.lv-blason {
  width: 168px; height: 168px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 1.6rem;
  background: radial-gradient(circle at 38% 32%, rgba(240,214,136,.32), rgba(209,160,58,.06) 62%, transparent 72%);
  box-shadow:
    0 0 0 1px rgba(209,160,58,.45),
    0 0 34px rgba(209,160,58,.30),
    inset 0 2px 20px rgba(240,214,136,.16);
}
.lv-logo {
  width: 138px; height: 138px; border-radius: 50%;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)) brightness(1.1) saturate(1.15);
}
.lv-couv-petit {
  font-family: var(--R); font-size: .66rem; font-weight: 800;
  letter-spacing: .42em; text-transform: uppercase;
  color: rgba(239,228,210,.6); margin: 0 0 .1rem; padding-left: .42em;
}
.lv-titre-couv {
  font-family: var(--T); font-weight: 700; font-size: 3.1rem;
  line-height: 1; margin: 0;
  background: linear-gradient(168deg, #FBEBBB 0%, #D8A94A 40%, #A87A24 72%, #F2DCA0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--or-clair);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.lv-slogan {
  font-family: var(--T); font-style: italic; font-size: 1rem;
  line-height: 1.55; color: rgba(239,228,210,.82); margin: 0 0 1.8rem;
}
.lv-sous-couv {
  font-family: var(--R); font-size: .64rem; font-weight: 800;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(209,160,58,.85); margin: 0; padding-left: .26em;
}

/* ── Sommaire ── */
.lv-sommaire { list-style: none; margin: 0; padding: 0; }
.lv-sommaire li { border-bottom: 1px solid rgba(239,228,210,.08); }
.lv-sommaire li:last-child { border-bottom: none; }
.lv-aller {
  display: flex; align-items: baseline; gap: .6rem;
  width: 100%; background: none; border: none;
  padding: .58rem .1rem; color: inherit; text-align: left;
  transition: color .2s;
}
.lv-aller:hover .lv-som-t { color: var(--or-clair); }
.lv-som-t { font-family: var(--T); font-size: .98rem; color: #EFE4D2; transition: color .2s; }
.lv-som-pt { flex: 1; border-bottom: 1px dotted rgba(209,160,58,.35); transform: translateY(-3px); }
.lv-som-p {
  font-family: var(--T); font-size: .92rem; color: var(--or);
  font-variant-numeric: tabular-nums; min-width: 1.4rem; text-align: right;
}

/* ── Page pratique ── */
.lv-pratique { text-align: center; }
.lv-hina {
  position: absolute;
  right: -18px; bottom: 0;
  width: 190px; height: auto;
  opacity: .3;
  pointer-events: none;
  z-index: 0;
}
.lv-pratique-texte { position: relative; z-index: 1; }
.lv-adresse { font-family: var(--T); font-size: 1.1rem; line-height: 1.5; margin: 0 0 .7rem; }
.lv-chapo { font-size: .82rem; line-height: 1.7; color: rgba(239,228,210,.7); margin: 0; font-style: italic; }
.lv-horaires {
  display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem;
  text-align: left; font-size: .8rem; margin: 0 auto; max-width: 280px;
}
.lv-horaires span:nth-child(even) { color: var(--or-clair); text-align: right; white-space: nowrap; }
.lv-horaires span:nth-child(odd) { color: rgba(239,228,210,.72); }
.lv-contact { margin: 0 0 1.3rem; font-size: .88rem; line-height: 1.8; }
.lv-contact a { color: var(--or-clair); }
.lv-contact a:hover { text-decoration: underline; }
.lv-reserver {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 2rem; background: var(--or-degrade); color: #2a1c05;
  border-radius: 50px; font-family: var(--T); font-weight: 700;
  font-size: .9rem; letter-spacing: .05em;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.lv-reserver:hover { color: #2a1c05; box-shadow: 0 6px 20px rgba(209,160,58,.5); }

/* ── Mode déroulant : téléphones et petites tablettes ── */
@media (max-width: 900px) {
  .lv-scene { display: block; }
  .lv-fleche, .lv-compteur { display: none; }
  .lv-livre { width: 100%; height: auto; perspective: none; display: flex; flex-direction: column; gap: 1.2rem; }
  .lv-livre::before { display: none; }
  .lv-feuillet { position: static; width: 100%; height: auto; transform: none !important; display: contents; }
  /* position: relative garde le motif et le filet doré dans chaque page
     (en static, ils s'étalaient sur tout le livret en taches floues). */
  .lv-face {
    position: relative; overflow: hidden; backface-visibility: visible;
    transform: none !important; border-radius: var(--r);
    padding: 2.4rem 1.6rem 2.6rem;
    box-shadow: 0 12px 32px rgba(40,24,10,.28), 0 2px 6px rgba(40,24,10,.18);
    background:
      radial-gradient(130% 380px at 50% 0, rgba(209,160,58,.17), transparent 70%),
      radial-gradient(130% 320px at 50% 100%, rgba(0,0,0,.32), transparent 70%),
      linear-gradient(180deg, #2C1D12 0%, #1B1108 100%);
  }
  .lv-face::before {
    background: url('../assets/bg-motif-blanc.png') repeat center top / 320px auto;
    opacity: .05;
    mix-blend-mode: normal;
  }
  .lv-face::after { inset: 10px; border-radius: calc(var(--r) - 4px); border-color: rgba(209,160,58,.3); }
  .lv-vierge { display: none; }
  .lv-couverture { min-height: 62vh; }
  .lv-hina { width: 130px; opacity: .22; }
}

/* ── Impression ── */
@media print {
  .lv-fleche, .lv-compteur, .cta-final, .page-haut .div-or { display: none !important; }
  .lv-scene, .lv-livre { display: block !important; height: auto !important; perspective: none !important; width: 100% !important; }
  .lv-livre::before { display: none; }
  .lv-feuillet { position: static !important; width: 100% !important; height: auto !important; transform: none !important; display: block; }
  .lv-face {
    position: static !important; transform: none !important; overflow: visible !important;
    page-break-after: always; break-after: page;
    box-shadow: none; border-radius: 0; padding: 1.4cm 1.2cm;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .lv-vierge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-feuillet { transition: none !important; }
}

/* ── Questions fréquentes : bande claire sur toutes les pages ──
   Seules les sections qui contiennent vraiment des questions sont
   concernées (les listes de tarifs utilisent aussi .s-faq). Le fond
   blanc déborde sur toute la largeur de l'écran grâce à l'ombre et au
   découpage, même quand la section est dans un conteneur étroit ;
   le contenu, lui, garde sa largeur de lecture. */
.s-faq:has(.faq-item) {
  background: #ffffff;
  box-shadow: 0 0 0 100vmax #ffffff;
  clip-path: inset(0 -100vmax);
  padding-top: 70px;
  padding-bottom: 60px;
  margin-top: 40px;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .s-faq:has(.faq-item) { padding-top: 45px; padding-bottom: 35px; }
}

/* ── Pages à fond noir : pied de page du même noir que la page ── */
body.page-dark footer { background: #000 !important; }

/* ── Vignette agrandie au clic ──────────────────────────────── */
.vignette-zoom {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 6, 3, .78);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}
.vignette-zoom[hidden] { display: none; }   /* sinon le calque invisible bloque survol et clics */
.vignette-zoom.visible { opacity: 1; }
body.vignette-zoom-ouverte { overflow: hidden; }
.vignette-zoom-boite {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 3rem); overflow-y: auto;
  background: #fffaf2;
  border-radius: var(--r, 14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transform: var(--vz-depart, scale(.92));
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.vignette-zoom.visible .vignette-zoom-boite { transform: none; }
.vignette-zoom-visuel img,
.vignette-zoom-visuel .ph {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--r, 14px) var(--r, 14px) 0 0;
}
.vignette-zoom-texte { padding: 1.6rem 1.8rem 2rem; text-align: center; }
.vignette-zoom-texte h3 {
  font-family: var(--T); font-size: 1.6rem; font-weight: 600;
  color: #3a2616; margin-bottom: .3rem;
}
.vignette-zoom-prix {
  font-family: var(--R); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: .85rem; color: #63400D; margin-bottom: 1rem;
}
.vignette-zoom-desc { font-size: .95rem; line-height: 1.75; color: #4a3a2c; margin-bottom: 1.5rem; }
.vignette-zoom-desc:empty { display: none; }
.vignette-zoom-reserver { display: inline-flex; }
.vignette-zoom-fermer {
  position: absolute; top: .6rem; right: .6rem; z-index: 1;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #3a2616;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
@media (prefers-reduced-motion: reduce) {
  .vignette-zoom, .vignette-zoom-boite { transition: none; }
}

/* ── Page provisoire « en cours de création » ─────────────── */
.en-creation {
  max-width: 640px;
  margin: 10px auto 0;
  padding: 2.5rem 2rem;
  text-align: center;
  background: #ffffff;
  border-radius: var(--r, 14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.en-creation-badge {
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: .45rem 1.3rem;
  border: 1px solid #63400D;
  border-radius: 50px;
  font-family: var(--T); font-style: italic; font-size: 1.05rem;
  color: #63400D;
}
.en-creation p:not(.en-creation-badge) { line-height: 1.85; color: #4a3a2c; }
@media (max-width: 768px) { .en-creation { margin: 0 1.25rem; padding: 2rem 1.4rem; } }

/* ── « Prendre rendez-vous » : hauteur resserrée et centrée ────
   Les marges de la section du dessus (bas de la bande FAQ, bas des
   grilles de vignettes) s'ajoutaient à celles de ce bloc : on les
   neutralise juste avant lui, et le bloc a le même espace en haut
   et en bas. */
.s-faq:has(.faq-item):has(+ .cta-final) { margin-bottom: 0; }
.section-mince:has(+ .cta-final),
.section-mince:has(> .cta-final) { padding-bottom: 0; }
.cta-final { padding: 56px 2rem 64px; }
.cta-final p { margin-bottom: 1.6rem; }
.cta-final p a { color: var(--brun-titre); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
body.page-dark .cta-final p a { color: var(--or); }
@media (max-width: 768px) { .cta-final { padding: 40px 1.25rem 48px; } }
.grille-soins:has(+ .cta-final),
.note-legale:has(+ .cta-final) { margin-bottom: 0; }
.cta-final:has(+ .cta-soins) { padding-bottom: 28px; }
.cta-final + .cta-soins { margin-top: 0; padding-bottom: 56px; }

/* ── « Prendre rendez-vous » en bande claire ────────────────────
   Quand la section du dessus est sur le fond taupe, le bloc passe
   sur une bande blanche pleine largeur pour que les fonds alternent.
   (Après une bande FAQ déjà blanche, il reste sur le taupe.) */
body.page-light .cta-final:not(.s-faq:has(.faq-item) + .cta-final):not(.en-creation + .cta-final) {
  background: #ffffff;
  box-shadow: 0 0 0 100vmax #ffffff;
  clip-path: inset(0 -100vmax);
  margin-top: 50px;
  padding-top: 48px;
  padding-bottom: 52px;
}
body.page-light .cta-final:not(.s-faq:has(.faq-item) + .cta-final):not(.en-creation + .cta-final) h2 { margin-bottom: .6rem; }
body.page-light .cta-final:not(.s-faq:has(.faq-item) + .cta-final):not(.en-creation + .cta-final) .cta-boutons { margin-bottom: 0; }

/* ── Alternance des fonds dans les pages ─────────────────────────
   Chaque bloc (tarifs, questions fréquentes, prendre rendez-vous)
   porte la classe bande-claire ou bande-taupe, attribuée en
   alternance à partir du contenu du dessus. Ces règles priment sur
   les réglages précédents. Le bouton « Retour » prend le fond du
   bloc rendez-vous et forme avec lui un seul bloc centré. */
.bande-claire, .bande-taupe {
  margin-top: 50px !important;
  margin-bottom: 0 !important;
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
.bande-claire {
  background: #ffffff !important;
  box-shadow: 0 0 0 100vmax #ffffff !important;
  clip-path: inset(0 -100vmax) !important;
}
.bande-taupe {
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}
.bande-claire + .bande-taupe, .bande-taupe + .bande-claire { margin-top: 0 !important; }
.section-mince:has(> .bande-claire:last-child, > .bande-taupe:last-child) { padding-bottom: 0; }
.section-mince:has(> .bande-claire:last-child) + .bande-taupe,
.section-mince:has(> .bande-taupe:last-child) + .bande-claire { margin-top: 0 !important; }
.cta-final.bande-claire:has(+ .cta-soins), .cta-final.bande-taupe:has(+ .cta-soins) { padding-bottom: 24px !important; }
.cta-soins.bande-claire, .cta-soins.bande-taupe {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 50px !important;
  text-align: center;
  display: flex; justify-content: center;
}
@media (max-width: 768px) {
  .bande-claire, .bande-taupe { margin-top: 36px !important; padding-top: 38px !important; padding-bottom: 38px !important; }
  .cta-soins.bande-claire, .cta-soins.bande-taupe { padding-bottom: 38px !important; }
}

/* ── Accueil : Adresse / Contact / Horaires centrés en hauteur ── */
body.page-home .acces-grille-large { align-items: center; }
body.page-home .acces-bloc p:last-child { margin-bottom: 0; }

/* ── Menu ordinateur sur une seule ligne ─────────────────────
   Chaque entrée reste sur une ligne ; le bandeau s'élargit, le logo
   glisse vers la gauche et le bouton « Réserver » vers la droite. */
#nav > ul > li > a { white-space: nowrap; }
.header-inner { max-width: 1520px; padding: 0 1.4rem 0 .9rem; }
@media (min-width: 1201px) {
  #nav > ul > li > a { padding: .5rem .75rem; font-size: .9rem; }
}
/* En dessous de 1100 px, huit entrées ne tiennent plus joliment sur une ligne :
   on passe au menu « burger », comme sur téléphone. */
@media (min-width: 769px) and (max-width: 1100px) {
  #nav, .btn-nav { display: none; }
  .burger { display: flex; }
}