:root {
  --deep: #35093c;
  --pink: #fd4380;
  --purple: #380c40;
  --white: #FFFFFF;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:Georgia,serif; background:var(--deep); color:var(--white); overflow-x:hidden; }
.mobile_only{display:none;}

/* ── Particles ── */
#particles{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.particle{position:absolute; border-radius:50%;background:rgba(253,67,128,.2);animation:floatUp linear infinite;}
@keyframes floatUp{
  0%  { transform:translateY(100vh) scale(0); opacity:0; }
  10% { opacity:1; }
  90% { opacity:.5; }
  100%{ transform:translateY(-10vh) scale(1); opacity:0; }
}

/* ── NAVBAR ── */
nav{
  background:rgba(53,9,60,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(253,67,128,.3);
  padding:12px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ font-size:1.45rem; font-weight:900; letter-spacing:2px; color:var(--pink); flex-shrink:0; text-shadow:0 0 20px rgba(253,67,128,.6); text-decoration:none; }
.brand span{ color:var(--white); font-size:.78rem; display:block; letter-spacing:4px; font-weight:300; margin-top:-3px; }
.nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; flex:1; justify-content:center; }
.nav-links a{ color:rgba(255,255,255,.75); text-decoration:none; font-size:.82rem; padding:6px 11px; border-radius:8px; transition:all .25s; white-space:nowrap; }
.nav-links a:hover{ color:var(--pink); background:rgba(253,67,128,.1); }
.nav-cta{ background:linear-gradient(135deg,var(--pink),#c0185b); color:#fff; border:none; padding:9px 20px; border-radius:25px; font-size:.82rem; font-weight:700; cursor:pointer; transition:all .3s; text-decoration:none; flex-shrink:0; white-space:nowrap; }
.nav-cta:hover{ transform:scale(1.05); box-shadow:0 4px 20px rgba(253,67,128,.5); color:#fff; }

/* Hamburger */
.hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; padding:6px; border:none; background:transparent; }
.hamburger span{ display:block; width:24px; height:2px; background:var(--pink); border-radius:2px; transition:all .35s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu{
  display:none; 
}
.mobile-menu.open{ transform:translateY(0); opacity:1; }
.mobile-menu a{ display:block; color:rgba(255,255,255,.8); text-decoration:none; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.95rem; transition:color .2s; }
.mobile-menu a:last-of-type{ border-bottom:none; }
.mobile-menu a:hover{ color:var(--pink); }
.mobile-cta{ display:block; text-align:center; margin-top:18px; background:linear-gradient(135deg,var(--pink),#c0185b); color:#fff !important; border-radius:25px; padding:13px; font-weight:700; font-size:.95rem; }

@media(max-width:900px){
  .mobile_only{display:block;}
  .desktop_only{display:none;}

  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .mobile-menu{ 
    display:none; 
    z-index:199;
  background:rgba(28,3,34,.97);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(253,67,128,.2);
  padding:20px 24px 28px;
  transform:translateY(-8px); opacity:0;
  transition:all .35s;
  
  }
  nav{ padding:12px 20px; }
}

/* ── SECTION BASE ── */
section{ position:relative; z-index:1; }
.section-wrapper{ padding:90px 20px; }
.section-title{
  font-size:clamp(1.6rem,4vw,2.4rem); font-weight:900;
  background:linear-gradient(135deg,var(--white),var(--pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:14px; text-align:center;
}
.divider{ width:60px; height:3px; background:linear-gradient(90deg,var(--pink),transparent); margin:0 auto 40px; border-radius:4px; }

/* ── HERO ── */
#hero{
  min-height:100vh;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:30px 20px 80px;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image: url('/sites/yunmei/img/bg3.webp');
  background-size:cover; background-position:center;
}
.hero-bg::after{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(253,67,128,.22) 0%, transparent 70%),
    linear-gradient(180deg, rgba(53,9,60,.50) 0%, rgba(26,4,32,.96) 100%); 
}
.hero-content{ position:relative; z-index:1; max-width:620px; width:100%; }
.hero-badge{ display:inline-block; background:rgba(253,67,128,.85); border:1px solid rgba(253,67,128,.4); border-radius:30px; padding:6px 18px; font-size:.8rem; letter-spacing:3px; color:var(--white); margin-bottom:28px; animation:pulse 3s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.55} }
#hero h1{ font-size:clamp(2.2rem,6vw,4rem); font-weight:900; line-height:1.15; background:linear-gradient(135deg,var(--white) 40%,var(--pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:18px; }
#hero .subtitle{ font-size:clamp(1rem,2.5vw,1.2rem); color:rgba(255,255,255,.78); max-width:560px; margin:0 auto 40px; line-height:1.7;text-align: left; }

/* ── FORMS ── */
.magic-form{ background:rgba(255,255,255,.06); border:1px solid rgba(253,67,128,.25); border-radius:20px; padding:32px; backdrop-filter:blur(8px); }
.magic-form input,
.magic-form select{
  width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:12px 16px; color:var(--white); font-size:.95rem; margin-bottom:14px; outline:none; transition:border .3s; appearance:none;
}
.magic-form input::placeholder{ color:rgba(255,255,255,.42); }
.magic-form input:focus,
.magic-form select:focus{ border-color:var(--pink); box-shadow:0 0 12px rgba(253,67,128,.3); }
.magic-form select option{ background:#35093c; color:#fff; }
.dob-row{ display:flex; gap:10px; margin-bottom:14px; }
.dob-row select{ flex:1; margin-bottom:0; }
.btn-magic{ width:100%; background:linear-gradient(135deg,var(--pink) 0%,#c0185b 100%); color:#fff; border:none; border-radius:12px; padding:15px; font-size:1.05rem; font-weight:700; cursor:pointer; letter-spacing:1px; transition:all .3s; box-shadow:0 4px 24px rgba(253,67,128,.45); }
.btn-magic:hover{ transform:translateY(-2px); box-shadow:0 8px 32px rgba(253,67,128,.65); }
.trust-badges{ display:flex; gap:18px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.trust-badges span{ font-size:.82rem; color:rgba(255,255,255,.7); }
.trust-badges span::before{ content:'✔ '; color:var(--pink); }

/* ── BLOCAGES ── */
#blocages{ background:linear-gradient(180deg,#1a0420 0%,#35093c 100%); }
.blocage-item{ display:flex; align-items:center; gap:14px; padding:14px 20px; background:rgba(255,255,255,.05); border:1px solid rgba(253,67,128,.2); border-radius:12px; margin-bottom:12px; transition:all .3s; }
.blocage-item:hover{ background:rgba(253,67,128,.1); border-color:var(--pink); transform:translateX(6px); }
.blocage-item .ico{ font-size:1.3rem; }
.section-quote{ font-size:1rem; color:rgba(255,255,255,.7); font-style:italic; text-align:center; max-width:560px; margin:32px auto 36px; line-height:1.8; }

/* ── AUTORITÉ ── */
#autorite{ background:linear-gradient(180deg,#35093c,#380c40); }
.authority-card{ background:rgba(255,255,255,.05); border:1px solid rgba(253,67,128,.2); border-radius:24px; padding:40px; backdrop-filter:blur(8px); }
.avatar-ring{ width:210px; height:210px; border-radius:50%; margin:0 auto 24px; padding:4px; background:linear-gradient(135deg,var(--pink),#35093c); box-shadow:0 0 50px rgba(253,67,128,.45); }
.avatar-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:top; display:block; }
.authority-text{ font-size:1.05rem; line-height:1.85; color:rgba(255,255,255,.85); margin-bottom:28px; text-align:center; }
.stat-badge{ text-align:center; padding:18px; background:rgba(253,67,128,.1); border:1px solid rgba(253,67,128,.3); border-radius:16px; transition:all .3s; }
.stat-badge:hover{ background:rgba(253,67,128,.2); transform:translateY(-4px); }
.stat-num{ font-size:1.8rem; font-weight:900; color:var(--pink); display:block; }
.stat-label{ font-size:.76rem; color:rgba(255,255,255,.6); letter-spacing:1px; }

/* ── TÉMOIGNAGES ── */
#temoignages{ background:linear-gradient(180deg,#380c40,#1a0420); }
.temoignage-card{ background:rgba(255,255,255,.06); border:1px solid rgba(253,67,128,.2); border-radius:20px; padding:30px; position:relative; height:100%; transition:all .4s; }
.temoignage-card:hover{ border-color:var(--pink); transform:translateY(-6px); box-shadow:0 16px 48px rgba(253,67,128,.2); }
.stars{ color:var(--pink); font-size:1.1rem; margin-bottom:14px; letter-spacing:2px; }
.temoignage-text{ font-style:italic; line-height:1.7; color:rgba(255,255,255,.85); margin-bottom:20px; }
.temoignage-author{ display:flex; align-items:center; gap:12px; }
.author-av{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--pink),#35093c); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.author-name{ font-weight:700; color:var(--pink); }
.author-sub{ font-size:.76rem; color:rgba(255,255,255,.5); }
.q-mark{ position:absolute; top:18px; right:22px; font-size:4rem; color:rgba(253,67,128,.1); font-family:Georgia,serif; line-height:1; }

/* ── CURIOSITÉ ── */
#curiosite{ background:linear-gradient(180deg,#1a0420,#35093c); }
.reveal-item{ display:flex; align-items:flex-start; gap:16px; padding:18px 22px; background:rgba(255,255,255,.05); border-left:3px solid var(--pink); border-radius:0 14px 14px 0; margin-bottom:14px; transition:all .3s; }
.reveal-item:hover{ background:rgba(253,67,128,.1); transform:translateX(6px); }
.reveal-item .ri{ font-size:1.4rem; min-width:30px; }
.reveal-item p{ margin:0; font-size:.98rem; color:rgba(255,255,255,.85); line-height:1.5; }

/* ── RITUEL ── */
#rituel{ background:linear-gradient(180deg,#35093c,#380c40); }
.rituel-intro{ text-align:center; font-size:1.05rem; color:rgba(255,255,255,.75); margin-bottom:36px; line-height:1.8; }
.rituel-card{ background:rgba(255,255,255,.05); border:1px solid rgba(253,67,128,.2); border-radius:20px; padding:30px 24px; text-align:center; height:100%; transition:all .35s; }
.rituel-card:hover{ background:rgba(253,67,128,.12); transform:translateY(-6px); border-color:var(--pink); box-shadow:0 12px 36px rgba(253,67,128,.25); }
.rituel-icon{ font-size:2.8rem; margin-bottom:14px; }
.rituel-title{ font-size:1.05rem; font-weight:700; color:var(--pink); margin-bottom:8px; }
.rituel-desc{ font-size:.85rem; color:rgba(255,255,255,.65); line-height:1.6; }

/* ── CTA FINAL ── */
#cta-final{
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(253,67,128,.25) 0%, transparent 70%),
    linear-gradient(180deg,#380c40,#1a0420);
  padding:100px 20px; text-align:center;
}
#cta-final h2{ font-size:clamp(1.8rem,5vw,3rem); font-weight:900; margin-bottom:14px; }
#cta-final .sub{ color:rgba(255,255,255,.72); font-size:1.05rem; margin-bottom:48px; }
.final-form-wrap{ max-width:520px; margin:0 auto; }

/* ── BTN OUTLINE ── */
.btn-outline-magic{ display:inline-block; border:2px solid var(--pink); color:var(--pink); border-radius:30px; padding:12px 32px; font-size:.95rem; font-weight:700; cursor:pointer; background:transparent; text-decoration:none; transition:all .3s; letter-spacing:1px; }
.btn-outline-magic:hover{ background:var(--pink); color:#fff; box-shadow:0 6px 24px rgba(253,67,128,.5); transform:translateY(-2px); }

/* ── FOOTER ── */
footer{ background:#0f0114; border-top:1px solid rgba(253,67,128,.15); padding:48px 20px 28px; text-align:center; color:rgba(255,255,255,.4); font-size:.8rem; }
.footer-brand{ font-size:1.4rem; color:var(--pink); font-weight:900; margin-bottom:6px; }
.footer-tagline{ color:rgba(255,255,255,.45); margin-bottom:36px; }
.footer-section-title{ color:var(--pink); font-size:.75rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-bottom:28px; }
.footer-links a{ color:rgba(255,255,255,.55); text-decoration:none; font-size:.83rem; transition:color .2s; }
.footer-links a:hover{ color:var(--pink); }
.footer-sep{ width:80px; height:1px; background:rgba(253,67,128,.25); margin:28px auto; }
.footer-legal{ font-size:.72rem; opacity:.45; margin-top:8px; }

.fade-in{ opacity:0; transform:translateY(28px); transition:opacity .7s,transform .7s; }
.fade-in.visible{ opacity:1; transform:translateY(0); }

@media(max-width:768px){
  .magic-form{ padding:24px 16px; }
  .authority-card{ padding:24px; }  
  .dob-row select{ margin-bottom:14px; }
}
.product-link {
    background-color: var(--pink); 
    border-color: var(--white) !important; 
    color: var(--white); 
    border-radius: 5px; 
    border:solid; 
    border-width: 1px;
    padding:10px 20px;
    font-weight: bold;
}