/* ============================================================
   PAGE MASSAGES — surcouche sur le système de l'accueil validé
   Le menu et le footer sont repris à l'identique de l'accueil.
   Seules les règles ci-dessous s'ajoutent.
   ============================================================ */

/* --- NAVBAR page interne : crème rosé fixe, jamais transparente.
       Dimensions identiques à l'accueil. --- */
.nav{
  background:rgba(245,237,232,.94);
  backdrop-filter:blur(14px) saturate(1.05);
  color:var(--encre);
  border-bottom:1px solid rgba(201,164,90,.55);
  animation:none;
}
@supports (animation-timeline: scroll()){
  .nav{
    background:rgba(245,237,232,.94); color:var(--encre);
    border-bottom-color:rgba(201,164,90,.55); animation:none;
  }
}
.nav-links a.is-active{color:var(--or); background-size:100% 1px; font-weight:500}

/* chips recentrées dans les blocs en colonne centrée */
.hero-int .chip,.reflexo .chip,.sec-head--center .chip{align-self:center}

/* ============================================================
   2 — HERO PAGE INTERNE
   ============================================================ */
.hero-int{
  min-height:0; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:146px 0 68px;
  background:linear-gradient(150deg,#7c6a86,#5f5069 55%,#463b50);
}
.hero-int .bg{
  position:absolute; inset:0; z-index:0;
  background-image:url("https://images.unsplash.com/photo-1600334089648-b0d9d3028eb2?auto=format&fit=crop&w=1920&q=80");
  background-size:cover; background-position:center 55%;
  transform:scale(1.05); animation:heroDrift 30s ease-in-out infinite alternate;
}
/* overlay mauve profond 50 % + dégradé de lisibilité */
.hero-int .veil{position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(70,59,80,.5),rgba(107,91,123,.5) 45%,rgba(88,74,102,.72)),
    linear-gradient(0deg,rgba(107,91,123,.5),rgba(107,91,123,.5));
}
.hero-int .grid-p{position:absolute; inset:0; z-index:1; opacity:.45;
  background-image:linear-gradient(rgba(245,237,232,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(245,237,232,.12) 1px,transparent 1px);
  background-size:92px 92px;
  -webkit-mask-image:radial-gradient(ellipse 70% 66% at 50% 46%,#000 18%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 66% at 50% 46%,#000 18%,transparent 78%);
}
.hero-int .blob-1{width:560px; height:560px; top:-26%; left:-10%; background:rgba(196,168,212,.5); z-index:1}
.hero-int .blob-2{width:470px; height:470px; bottom:-28%; right:-6%; background:rgba(201,164,90,.4); z-index:1}
.hero-int .moon-wm{position:absolute; z-index:1; width:min(40vw,430px); height:min(40vw,430px);
  top:-10%; right:-3%; color:var(--or-clair); opacity:.13;
  animation:moonFloat 20s ease-in-out infinite alternate}
.hero-int .inner{position:relative; z-index:3; color:var(--creme); display:flex; flex-direction:column; align-items:center}
.hero-int h1{
  color:var(--creme); font-style:italic; font-weight:600;
  font-size:clamp(29px,4.5vw,54px); letter-spacing:-.03em; line-height:1.05; margin-top:6px;
  text-shadow:0 2px 40px rgba(63,50,47,.3);
}
.hero-int h1 .hl{color:var(--or-clair)}
.hero-int .lead{color:rgba(245,237,232,.84); text-align:center; margin:18px auto 0; max-width:60ch}
.hero-int .hero-row{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:30px; align-self:center}
.hero-int .hero-row .btn{height:52px; padding:0 8px 0 26px}

/* ============================================================
   3-5-7 — MODULE SOIN (split alterné)
   Un seul composant, 4 déclinaisons par modificateur :
   .soin--rev (photo à gauche) / .soin--card (texte dans une card)
   / .soin--dark (fond mauve profond, texte crème)
   ============================================================ */
.soin{overflow:hidden; padding:104px 0}
.soin-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center}
.soin--rev .soin-media{order:2}
.soin--rev .soin-body{order:1}
.soin-media{position:relative; z-index:1}
.soin-photo{
  position:relative; z-index:2; aspect-ratio:4/3; width:100%;
  background-size:cover; background-position:center;
  border-radius:24px 150px 24px 150px;
  box-shadow:0 38px 76px -46px rgba(74,55,40,.8);
}
.soin--rev .soin-photo{border-radius:150px 24px 150px 24px}
.soin-body{position:relative; z-index:3}
/* déclinaison card : le texte est posé sur une card blanc rosé */
.soin--card .soin-body{
  background:var(--creme-hi); border:1px solid rgba(201,164,90,.4);
  border-radius:24px; padding:44px 42px 40px;
  box-shadow:0 30px 64px -40px rgba(107,91,123,.55);
}
.soin--card .soin-grid{gap:56px}
.soin h2{font-size:clamp(28px,3.4vw,42px); font-style:italic; letter-spacing:-.025em}
.soin-sub{margin-top:12px; font-size:clamp(17px,1.8vw,20px); font-style:italic; color:rgba(74,55,40,.62); line-height:1.4}
.soin-txt{margin-top:22px; font-size:17px; line-height:1.78; color:var(--encre-doux); max-width:56ch}
.bene{display:flex; flex-direction:column; gap:11px; margin:28px 0 0}
.bene li{display:flex; align-items:flex-start; gap:12px; font-size:16.5px; line-height:1.5; color:var(--encre-doux)}
.bene svg{width:18px; height:18px; color:var(--mauve); flex:none; margin-top:4px}
.soin-foot{display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:34px}
.tarif{
  font-family:"Fraunces",serif; font-style:italic; font-weight:400;
  font-size:clamp(28px,3vw,36px); color:var(--or); letter-spacing:-.03em; line-height:1;
}
/* déclinaison dark : Shiro Kobido */
.soin--dark{background:var(--mauve-deep); color:var(--creme)}
.soin--dark .blob-1{width:540px; height:540px; top:-22%; left:-14%; background:rgba(196,168,212,.5)}
.soin--dark .blob-2{width:420px; height:420px; bottom:-24%; right:18%; background:rgba(201,164,90,.32)}
.soin--dark h2{color:var(--creme)}
.soin--dark .soin-sub{color:rgba(245,237,232,.72)}
.soin--dark .soin-txt{color:rgba(245,237,232,.8)}
.soin--dark .bene li{color:rgba(245,237,232,.86)}
.soin--dark .bene svg{color:var(--or-clair)}
.soin--dark .tarif{color:var(--or-clair)}
.soin-moon{position:absolute; left:-40px; bottom:24px; z-index:4; width:104px; height:104px; color:var(--or-clair); opacity:.45}
/* badge exclusif */
.chip-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.chip-row .chip,.chip-row .badge-excl{margin-bottom:0; height:38px}
.badge-excl{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  background:var(--or); color:var(--creme); border-radius:100px; padding:9px 20px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  box-shadow:0 14px 30px -16px rgba(201,164,90,.9);
}
.badge-excl .moon{width:13px; height:13px; flex:none; color:var(--creme); opacity:.9}

/* fonds propres à chaque soin */
.soin-abhyanga{background:var(--creme)}
.soin-abhyanga .lotus-wm{width:min(34vw,400px); left:-6%; bottom:-14%; opacity:.09}
.soin-ayur{background:var(--rose)}
.soin-ayur .lotus-wm{width:min(30vw,360px); right:-5%; top:-10%; color:var(--creme); opacity:.32}
.soin-drainage{background:var(--rose)}
.soin-drainage .lotus-wm{width:min(30vw,360px); left:-5%; bottom:-12%; color:var(--creme); opacity:.32}

/* ============================================================
   6 — OPTION RÉFLEXOLOGIE
   ============================================================ */
.reflexo{background:var(--mauve-pale); text-align:center; overflow:hidden; padding:84px 0}
.reflexo .blob-1{width:440px; height:440px; top:-26%; right:-8%; background:rgba(232,180,200,.48)}
.reflexo .blob-2{width:380px; height:380px; bottom:-28%; left:-6%; background:rgba(201,164,90,.3)}
.reflexo .lotus-wm{width:min(44vw,500px); left:50%; top:52%; transform:translate(-50%,-50%); opacity:.08}
.reflexo-ico{width:52px; height:52px; margin:0 auto 24px; color:var(--mauve)}
.reflexo h2{max-width:22ch; margin:0 auto; font-size:clamp(26px,3vw,36px)}
.reflexo .lead{margin:20px auto 0; text-align:center; max-width:650px}
.badge-opt{
  display:inline-flex; align-items:center; gap:14px; margin-top:30px;
  background:var(--or); color:var(--creme); border-radius:100px; padding:14px 30px;
  font-size:15px; font-weight:500; letter-spacing:.01em;
  box-shadow:0 18px 38px -20px rgba(201,164,90,.95);
}
.badge-opt b{font-family:"Fraunces",serif; font-style:italic; font-weight:400; font-size:22px; letter-spacing:-.02em}
.badge-opt .sepdot{width:4px; height:4px; border-radius:50%; background:rgba(245,237,232,.6); flex:none}

/* ============================================================
   9 — FAQ (accordéon natif <details>, zéro JS)
   ============================================================ */
.faq{background:var(--mauve-pale); overflow:hidden; padding:110px 0}
.faq .blob-1{width:480px; height:480px; top:-24%; right:-10%; background:rgba(196,168,212,.55)}
.faq-grid{display:grid; grid-template-columns:.78fr 1.22fr; gap:72px; align-items:start}
.faq-aside{position:sticky; top:118px}
.faq-aside .lead{margin-top:18px}
.faq-aside .btn{margin-top:30px}
.faq-list{display:flex; flex-direction:column}
.faq-item{border-top:1px solid rgba(201,164,90,.45)}
.faq-item:last-child{border-bottom:1px solid rgba(201,164,90,.45)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:26px 46px 26px 0; position:relative;
  font-size:clamp(17px,1.7vw,20px); font-weight:500; color:var(--encre); line-height:1.4;
  transition:color .35s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--or)}
.faq-item summary:focus-visible{outline:2px solid var(--or); outline-offset:4px; border-radius:6px}
.faq-item summary::after,.faq-item summary::before{
  content:""; position:absolute; right:6px; top:50%; background:var(--or);
  transition:transform .45s cubic-bezier(.2,.9,.25,1), opacity .35s ease;
}
.faq-item summary::before{width:17px; height:1.5px; transform:translateY(-50%)}
.faq-item summary::after{width:1.5px; height:17px; right:13.75px; transform:translateY(-50%)}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(90deg); opacity:0}
.faq-item[open] summary{color:var(--or)}
.faq-answer{padding:0 46px 28px 0; font-size:16.5px; line-height:1.75; color:var(--encre-doux); max-width:62ch}
@media (prefers-reduced-motion: no-preference){
  .faq-item[open] .faq-answer{animation:faqIn .45s cubic-bezier(.2,.9,.25,1) both}
  @keyframes faqIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
}

/* ============================================================
   RESPONSIVE — page Massages
   ============================================================ */
@media (max-width:1080px){
  .soin-grid{gap:44px}
  .soin--card .soin-body{padding:36px 32px 34px}
  .faq-grid{gap:44px}
}

@media (max-width:768px){
  .hero-int{padding:118px 0 60px}
  .hero-int h1{font-size:clamp(27px,7.4vw,36px); max-width:20ch}
  .hero-int .hero-row{flex-direction:column; gap:14px; width:100%; margin-top:26px}
  .hero-int .hero-row .btn{width:100%; justify-content:space-between}

  .soin{padding:64px 0}
  .soin-grid{grid-template-columns:1fr; gap:0}
  .soin--rev .soin-media{order:1}
  .soin--rev .soin-body{order:2}
  .soin-photo,.soin--rev .soin-photo{border-radius:20px 90px 20px 90px; aspect-ratio:3/2}
  .soin-body{margin-top:32px}
  .soin--card .soin-body{margin:-30px 12px 0; padding:32px 26px 30px}
  .soin-txt{font-size:16px}
  .bene li{font-size:15.5px}
  .soin-foot{gap:18px; margin-top:28px}
  .soin-foot .btn{width:100%; justify-content:space-between}
  .soin-moon{left:auto; right:16px; bottom:auto; top:-30px; width:64px; height:64px}
  .chip-row{gap:9px; margin-bottom:20px}
  .chip-row .chip,.chip-row .badge-excl{height:34px; font-size:10.5px; padding:0 15px; letter-spacing:.11em}

  .reflexo{padding:62px 0}
  .badge-opt{padding:12px 20px; gap:10px; font-size:13.5px; flex-wrap:wrap; justify-content:center}
  .badge-opt b{font-size:19px}

  .faq{padding:70px 0}
  .faq-grid{grid-template-columns:1fr; gap:34px}
  .faq-aside{position:static}
  .faq-aside .btn{width:100%; justify-content:space-between}
  .faq-item summary{font-size:17px; padding:22px 40px 22px 0}
  .faq-answer{padding-right:0}
}

/* ------------------------------------------------------------
   LA LIGNE DE TARIF SUR TÉLÉPHONE, 15 octobre.
   ------------------------------------------------------------
   « 20, 30 ou 40 min • 1 € la minute » passait sur deux lignes à 320, 360
   et 390 px en laissant « minute » seul en bas. La taille descend de 28 à
   24 px sous 430, et text-wrap:balance répartit la coupe au lieu de la
   subir. La ligne peut rester sur deux lignes aux largeurs les plus
   étroites ; elle n'y laisse plus de mot orphelin.

   Cette règle est ici et non dans adaptations.css, où elle avait d'abord
   été écrite : ce fichier est chargé après, et « .tarif » y a la même
   spécificité. La règle posée là-bas était écrasée sans effet.
   ------------------------------------------------------------ */
@media (max-width:430px){
  .tarif{ font-size:24px; text-wrap:balance; }
}