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

/* ============================================================
   PAGE PACKS SIGNATURES — surcouche sur le système de l'accueil
   Le header et le footer sont repris à l'identique de la page
   d'accueil validée. Seules les règles ci-dessous s'ajoutent.
   ============================================================ */

/* --- NAVBAR page interne : crème rosé fixe, jamais transparente --- */
.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;
  }
}
/* lien de la page courante : souligné doré permanent */
.nav-links a.is-active{color:var(--or); background-size:100% 1px; font-weight:500}


/* ============================================================
   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-1540555700478-4be289fbecef?auto=format&fit=crop&w=1920&q=80");
  background-size:cover; background-position:center 58%;
  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:58ch}
/* badge prix + CTA alignés sur une seule ligne, même hauteur (52px) */
.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 .price-badge{margin-top:0; height:52px; padding:0 26px; align-self:center}
.hero-int .hero-row .btn{height:52px; padding:0 8px 0 26px}

/* ============================================================
   3 — INTRO MÉTHODE
   ============================================================ */
.formule{background:var(--mauve-pale); text-align:center; overflow:hidden; padding:104px 0}
.formule .blob-1{width:480px; height:480px; top:-24%; right:-8%; background:rgba(232,180,200,.48)}
.formule .blob-2{width:400px; height:400px; bottom:-26%; left:-6%; background:rgba(201,164,90,.3)}
.formule .lotus-wm{width:min(50vw,560px); left:50%; top:52%; transform:translate(-50%,-50%); opacity:.08}
.formule h2{max-width:750px; margin:0 auto}
.formule .lead{margin:26px auto 0; text-align:center; max-width:64ch}
.incl-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px}
.incl-item{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:28px 18px; border-radius:20px;
  background:rgba(251,246,243,.6); border:1px solid rgba(201,164,90,.3);
  backdrop-filter:blur(8px);
  transition:transform .5s cubic-bezier(.2,.9,.25,1), border-color .5s ease, background .5s ease;
}
.incl-item:hover{transform:translateY(-6px); border-color:rgba(201,164,90,.7); background:rgba(251,246,243,.9)}
.incl-item svg{width:30px; height:30px; color:var(--mauve)}
.incl-item span{font-size:15px; font-weight:500; color:var(--encre); line-height:1.35}

/* ============================================================
   4 — DÉTAIL DES 5 PACKS : sélecteur interactif (100 % CSS)
   Moteur : 5 <input type="radio"> masqués + sélecteur ~ :checked.
   Aucune ligne de JS. Équivalent Webflow : composant Tabs natif.
   ============================================================ */
.packs{background:var(--creme); overflow:hidden}
.packs .lotus-wm{width:min(38vw,440px); right:-7%; top:26%; opacity:.09}

.packtabs{position:relative; z-index:2}
/* radios : accessibles au clavier, invisibles à l'écran */
.pt-r{position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none}

/* --- la rangée de chips --- */
.pt-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0 0 62px}
.pt-nav label{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
  font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mauve-deep); background:rgba(196,168,212,.18);
  border:1px solid rgba(196,168,212,.5); padding:12px 22px; border-radius:100px;
  transition:background .4s ease, color .4s ease, border-color .4s ease, transform .4s cubic-bezier(.2,.9,.25,1), box-shadow .4s ease;
}
.pt-nav label:hover{transform:translateY(-3px); border-color:rgba(201,164,90,.7); color:var(--or)}
/* puce lune qui s'allume sur l'onglet actif */
.pt-nav label .dotm{width:9px; height:9px; flex:none; opacity:.4; transition:opacity .4s ease, transform .5s ease}
.pt-nav label .dotm svg{width:100%; height:100%; display:block}

/* état actif : doré plein */
#pk-1:checked ~ .pt-nav label[for="pk-1"],
#pk-2:checked ~ .pt-nav label[for="pk-2"],
#pk-3:checked ~ .pt-nav label[for="pk-3"],
#pk-4:checked ~ .pt-nav label[for="pk-4"],
#pk-5:checked ~ .pt-nav label[for="pk-5"]{
  background:var(--or); color:var(--creme); border-color:var(--or);
  box-shadow:0 14px 30px -16px rgba(201,164,90,.9); transform:translateY(-2px);
}
#pk-1:checked ~ .pt-nav label[for="pk-1"] .dotm,
#pk-2:checked ~ .pt-nav label[for="pk-2"] .dotm,
#pk-3:checked ~ .pt-nav label[for="pk-3"] .dotm,
#pk-4:checked ~ .pt-nav label[for="pk-4"] .dotm,
#pk-5:checked ~ .pt-nav label[for="pk-5"] .dotm{opacity:1; transform:rotate(-18deg)}

/* focus clavier visible sur le chip correspondant */
#pk-1:focus-visible ~ .pt-nav label[for="pk-1"],
#pk-2:focus-visible ~ .pt-nav label[for="pk-2"],
#pk-3:focus-visible ~ .pt-nav label[for="pk-3"],
#pk-4:focus-visible ~ .pt-nav label[for="pk-4"],
#pk-5:focus-visible ~ .pt-nav label[for="pk-5"]{outline:2px solid var(--mauve-deep); outline-offset:4px}

/* --- les panneaux --- */
.pt-panels{position:relative}
.pt-panel{display:none; grid-template-columns:1fr 1fr; align-items:center}
#pk-1:checked ~ .pt-panels .pt-p1,
#pk-2:checked ~ .pt-panels .pt-p2,
#pk-3:checked ~ .pt-panels .pt-p3,
#pk-4:checked ~ .pt-panels .pt-p4,
#pk-5:checked ~ .pt-panels .pt-p5{display:grid}

@media (prefers-reduced-motion: no-preference){
  #pk-1:checked ~ .pt-panels .pt-p1 .pt-media,
  #pk-2:checked ~ .pt-panels .pt-p2 .pt-media,
  #pk-3:checked ~ .pt-panels .pt-p3 .pt-media,
  #pk-4:checked ~ .pt-panels .pt-p4 .pt-media,
  #pk-5:checked ~ .pt-panels .pt-p5 .pt-media{animation:ptMedia .7s cubic-bezier(.2,.9,.25,1) both}
  #pk-1:checked ~ .pt-panels .pt-p1 .pt-card,
  #pk-2:checked ~ .pt-panels .pt-p2 .pt-card,
  #pk-3:checked ~ .pt-panels .pt-p3 .pt-card,
  #pk-4:checked ~ .pt-panels .pt-p4 .pt-card,
  #pk-5:checked ~ .pt-panels .pt-p5 .pt-card{animation:ptCard .6s cubic-bezier(.2,.9,.25,1) .08s both}
  @keyframes ptMedia{from{opacity:0; transform:scale(.97) translateX(-14px)} to{opacity:1; transform:none}}
  @keyframes ptCard{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
}

.pt-media{position:relative; z-index:1}
.pt-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);
}
.pt-card{
  position:relative; z-index:3; margin-left:-56px;
  background:var(--creme-hi); border:1px solid rgba(201,164,90,.42);
  border-radius:26px; padding:44px 42px 38px;
  box-shadow:0 30px 64px -40px rgba(107,91,123,.6);
  transition:box-shadow .5s ease;
}
.pt-card:hover{box-shadow:0 40px 76px -40px rgba(107,91,123,.68)}
.pt-card h3{font-size:clamp(24px,2.4vw,32px); font-style:italic; margin-bottom:22px; max-width:18ch}
.bene{display:flex; flex-direction:column; gap:11px; margin-bottom:28px}
.bene li{display:flex; align-items:flex-start; gap:12px; font-size:16.5px; line-height:1.55; color:var(--encre-doux)}
.bene svg{width:17px; height:17px; color:var(--or); flex:none; margin-top:5px}
.pt-price{display:flex; align-items:baseline; gap:14px; margin-bottom:26px}
.pt-price b{font-family:"Fraunces",serif; font-style:italic; font-weight:400;
  font-size:clamp(38px,4vw,50px); color:var(--or); line-height:1; letter-spacing:-.035em}
.pt-price s{font-size:17px; color:rgba(74,55,40,.45)}
.chip--pack{color:#7d6531; background:rgba(201,164,90,.16); border-color:rgba(201,164,90,.45); margin-bottom:20px}
.badge-soon{
  display:inline-flex; align-items:center; gap:8px; margin-left:10px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  color:var(--creme); background:var(--or); padding:6px 14px; border-radius:100px;
}
/* pack à venir : panneau mauve profond au lieu d'une photo */
.pt-panel-visual{
  position:relative; z-index:2; aspect-ratio:4/3; width:100%; overflow:hidden;
  background:linear-gradient(150deg,#7b6a8b,#6B5B7B 55%,#584A66);
  border-radius:24px 150px 24px 150px;
  box-shadow:0 38px 76px -46px rgba(74,55,40,.8);
  display:grid; place-items:center;
}
.pt-panel-visual .lotus-wm{position:absolute; width:74%; left:50%; top:52%; transform:translate(-50%,-50%);
  color:var(--rose); opacity:.28}
.pt-panel-visual .moon{position:relative; z-index:2; width:74px; height:74px; color:var(--or-clair); opacity:.85}

/* ============================================================
   5 — CE QUI EST INCLUS (4 étapes)
   ============================================================ */
.inclus{background:var(--mauve-pale); overflow:hidden; padding:104px 0}
.inclus .blob-1{width:460px; height:460px; top:-22%; left:-8%; background:rgba(232,180,200,.45)}
.inclus .blob-2{width:420px; height:420px; bottom:-24%; right:-8%; background:rgba(201,164,90,.28)}

/* ============================================================
   6 — RÉCAP TARIFAIRE
   ============================================================ */
.recap{background:var(--creme); overflow:hidden}
.recap .lotus-wm{width:min(44vw,500px); left:-8%; bottom:-12%; opacity:.09}
.recap-card{
  position:relative; z-index:3; max-width:660px; margin:0 auto; text-align:center;
  background:var(--creme-hi); border:1px solid rgba(201,164,90,.55); border-radius:24px;
  padding:56px 48px 46px; box-shadow:0 44px 88px -52px rgba(107,91,123,.7);
}
.recap-card .halo{inset:-18% -12%; z-index:-1}
.recap-badge{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:var(--or); color:var(--creme); border-radius:100px; padding:8px 22px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  box-shadow:0 14px 30px -16px rgba(201,164,90,.9); white-space:nowrap;
}
.recap-price{display:flex; align-items:baseline; justify-content:center; gap:16px; margin-top:10px}
.recap-price b{font-family:"Fraunces",serif; font-style:italic; font-weight:400;
  font-size:clamp(52px,7vw,76px); color:var(--or); line-height:.95; letter-spacing:-.045em}
.recap-price s{font-size:19px; color:rgba(74,55,40,.45)}
.recap-sub{margin-top:12px; font-size:16.5px; color:var(--encre-doux)}
.recap-checks{display:flex; flex-direction:column; gap:13px; margin:34px 0 32px; text-align:left}
.recap-checks li{display:flex; align-items:flex-start; gap:13px; font-size:16px; color:var(--encre)}
.recap-checks svg{width:18px; height:18px; color:var(--mauve); flex:none; margin-top:4px}
.recap-card .btn{width:100%; justify-content:space-between}
.recap-note{margin-top:20px; font-size:14px; font-style:italic; color:rgba(74,55,40,.55)}

/* ============================================================
   7 — TÉMOIGNAGES (fond rose poudré sur cette page)
   ============================================================ */
.testi--rose{background:var(--rose)}
.testi--rose .chip{background:rgba(245,237,232,.55); border-color:rgba(107,91,123,.25)}
.testi--rose .testi-ph{background:rgba(245,237,232,.45)}
.testi--rose .lotus-wm{width:min(32vw,380px); left:-5%; bottom:-12%; color:var(--creme); opacity:.3}

/* ============================================================
   8 — 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}
/* croix / plus doré */
.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 Packs
   ============================================================ */
@media (max-width:1080px){
  .incl-row{grid-template-columns:repeat(2,1fr)}
  .faq-grid{gap:44px}
  .pt-card{margin-left:-32px; padding:36px 32px 32px}
}

@media (max-width:768px){
  .hero-int{min-height:0; 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}

  .formule,.inclus,.faq{padding:70px 0}
  .incl-row{grid-template-columns:1fr; gap:12px; margin-top:38px}
  .incl-item{flex-direction:row; align-items:center; gap:16px; padding:18px 22px; text-align:left}
  .incl-item svg{width:24px; height:24px}

  .pt-nav{gap:8px; margin-bottom:36px}
  .pt-nav label{font-size:11px; padding:10px 16px; letter-spacing:.1em; gap:8px}
  .pt-panel{grid-template-columns:1fr}
  .pt-photo,.pt-panel-visual{border-radius:20px 90px 20px 90px; aspect-ratio:3/2}
  .pt-card{margin:-34px 14px 0; padding:32px 26px 28px}
  .pt-card h3{font-size:23px; max-width:none}
  .bene li{font-size:15.5px}


  .recap-card{padding:46px 24px 38px}
  .recap-checks li{font-size:15px}

  .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}
}