/* === VitalVie Acné — CSS extrait de la référence vitalvie-acne.html === */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --sage:#B5C4B1;--sage-l:#E8EFE7;--sage-d:#6E8C69;
  --blush:#D4B8B0;--blush-l:#F2E8E5;--blush-d:#8C5E55;
  --sky:#A8BFD4;--sky-l:#E2EDF5;--sky-d:#4A7299;
  --sand:#CFC4A8;--sand-l:#F0EBE0;--sand-d:#7A6E57;
  --lilac:#C4B8D4;--lilac-l:#EDE8F5;--lilac-d:#6B5A8C;
  --tx:#3A3530;--mu:#7A746E;--hi:#AEA89E;
  --bg:#FAFAF8;--white:#FFFFFF
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--tx);background:var(--bg);max-width:480px;margin:0 auto;overflow-x:hidden}

/* NAV */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;position:sticky;top:0;background:rgba(250,250,248,0.92);backdrop-filter:blur(12px);z-index:100;border-bottom:0.5px solid rgba(0,0,0,0.06)}
.nav-brand{font-size:15px;font-weight:500;color:var(--tx);display:flex;align-items:center;gap:7px;text-decoration:none}
.nav-mark{width:9px;height:9px;border-radius:50%;background:var(--sage-d)}
.nav-right{display:flex;align-items:center;gap:10px}
.lang-switch{display:flex;background:rgba(0,0,0,0.05);border-radius:10px;padding:2px}
.lang-btn{font-size:11px;font-weight:500;padding:5px 10px;border-radius:8px;border:none;background:transparent;color:var(--mu);cursor:pointer;transition:all 0.2s;font-family:'DM Sans',sans-serif}
.lang-btn.active{background:var(--white);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.free-badge{font-size:11px;color:#8C4A5A;background:#F2E8EC;padding:5px 12px;border-radius:12px;border:0.5px solid #D4A8B0;font-weight:500}

/* HERO */
.hero{padding:36px 24px 0;background:#1E2E42}
.hero-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:rgba(245,240,238,0.65);border:0.5px solid rgba(245,240,238,0.2);border-radius:20px;padding:6px 14px;margin-bottom:22px;animation:fadeUp 0.6s ease both}
.ey-dot{width:5px;height:5px;border-radius:50%;background:#D4A8B0;flex-shrink:0}
.hero-h1{font-family:'DM Sans',sans-serif;font-size:54px;font-weight:900;line-height:1.05;color:#FFFFFF;margin-bottom:16px;letter-spacing:-0.03em;animation:fadeUp 0.6s 0.1s ease both}
.hero-h1 .accent{color:#E8A0B0;font-style:normal;font-weight:900}
.hero-sub{font-size:15px;color:rgba(255,255,255,0.72);line-height:1.7;margin-bottom:26px;max-width:360px;font-weight:300;animation:fadeUp 0.6s 0.2s ease both}
.hero-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;animation:fadeUp 0.6s 0.3s ease both}
.btn-primary{background:#D4A8B0;color:#fff;border:none;padding:16px 24px;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity 0.2s;letter-spacing:-0.01em;text-decoration:none;display:block;text-align:center}
.btn-primary:hover{opacity:0.88}
.btn-secondary{background:transparent;color:rgba(245,240,238,0.85);border:0.5px solid rgba(245,240,238,0.3);padding:15px 24px;border-radius:14px;font-size:15px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.2s;text-decoration:none;display:block;text-align:center}
.btn-secondary:hover{background:rgba(0,0,0,0.03)}

/* HERO VISUAL */
.hero-visual{background:var(--sand-l);border-radius:18px 18px 0 0;padding:22px 22px 0;display:flex;gap:14px;align-items:flex-end;animation:fadeUp 0.7s 0.35s ease both}
.phone-mock{background:var(--white);border-radius:16px 16px 0 0;flex:1;padding:16px;border:0.5px solid rgba(0,0,0,0.08);border-bottom:none}
.pm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pm-label{font-size:11px;font-weight:500;color:var(--tx)}
.pm-gea{font-size:10px;background:var(--sage-l);color:var(--sage-d);padding:3px 9px;border-radius:8px;border:0.5px solid var(--sage);font-weight:500}
.pm-chart{height:60px;display:flex;align-items:flex-end;gap:5px;margin-bottom:12px}
.bar{border-radius:4px 4px 0 0;flex:1;transition:height 0.3s}
.pm-entry{display:flex;align-items:center;gap:8px;padding:8px 9px;background:var(--bg);border-radius:9px;margin-bottom:6px}
.pe-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pe-text{font-size:10px;color:var(--tx);flex:1}
.pe-gea{font-size:9px;color:var(--mu);font-weight:500}
.data-stack{display:flex;flex-direction:column;gap:10px;width:108px;padding-bottom:18px}
.dc{background:var(--white);border-radius:12px;padding:11px 12px;border:0.5px solid rgba(0,0,0,0.08)}
.dc-val{font-size:20px;font-weight:600;color:var(--tx)}
.dc-label{font-size:10px;color:var(--mu);margin-top:2px;line-height:1.35}
.dc-trend{font-size:10px;color:var(--sage-d);margin-top:4px;font-weight:500}

/* STRIP */
.strip{display:flex;border-top:0.5px solid rgba(0,0,0,0.07);border-bottom:0.5px solid rgba(0,0,0,0.07);background:var(--white)}
.si{flex:1;padding:14px 8px;text-align:center;border-right:0.5px solid rgba(0,0,0,0.07)}
.si:last-child{border-right:none}
.si-val{font-size:17px;font-weight:600;color:var(--tx)}
.si-label{font-size:10px;color:var(--mu);margin-top:3px;line-height:1.4}

/* SECTIONS */
.section{padding:32px 24px}
.s-eyebrow{font-size:10px;letter-spacing:0.1em;color:var(--hi);margin-bottom:10px;font-weight:500}
.s-title{font-family:'DM Sans',sans-serif;font-weight:600;font-size:24px;color:var(--tx);line-height:1.25;margin-bottom:20px}

/* MODULE LIST */
.mod-list{display:flex;flex-direction:column;gap:1px;background:rgba(0,0,0,0.06);border-radius:18px;overflow:hidden}
.mod-row{background:var(--white);padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:background 0.15s;text-decoration:none}
.mod-row:hover{background:var(--bg)}
.mod-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mod-body{flex:1}
.mod-title{font-size:14px;font-weight:500;color:var(--tx);margin-bottom:3px}
.mod-sub{font-size:13px;color:var(--mu);line-height:1.5}
.mod-arrow{font-size:14px;color:var(--hi)}

/* QUOTES */
.quotes{display:flex;flex-direction:column;gap:12px}
.q-card{border-radius:18px;padding:18px}
.q1{background:var(--sage-l);border:0.5px solid var(--sage)}
.q2{background:var(--sky-l);border:0.5px solid var(--sky)}
.q3{background:var(--blush-l);border:0.5px solid var(--blush)}
.q-text{font-size:14px;line-height:1.7;margin-bottom:12px;font-weight:300;font-style:italic}
.q1 .q-text{color:var(--sage-d)}
.q2 .q-text{color:var(--sky-d)}
.q3 .q-text{color:var(--blush-d)}
.q-author{font-size:11px;color:var(--mu);display:flex;align-items:center;gap:7px}
.q-dot{width:4px;height:4px;border-radius:50%}

/* STEPS */
.steps{display:flex;flex-direction:column;gap:18px}
.step-row{display:flex;gap:16px;align-items:flex-start}
.step-n{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;margin-top:2px}
.sn1{background:var(--sky-l);color:var(--sky-d);border:0.5px solid var(--sky)}
.sn2{background:var(--sage-l);color:var(--sage-d);border:0.5px solid var(--sage)}
.sn3{background:var(--blush-l);color:var(--blush-d);border:0.5px solid var(--blush)}
.sn4{background:var(--lilac-l);color:var(--lilac-d);border:0.5px solid var(--lilac)}
.step-t{font-size:14px;font-weight:500;color:var(--tx);margin-bottom:4px}
.step-s{font-size:12px;color:var(--mu);line-height:1.6}

/* CTA */
.cta-zone{margin:0 24px 32px;background:#1E2E42;border-radius:22px;padding:28px 24px;text-align:center}
.cta-title{font-family:'DM Sans',sans-serif;font-weight:600;font-size:22px;color:#F0EBE0;line-height:1.3;margin-bottom:10px}
.cta-sub{font-size:13px;color:var(--hi);margin-bottom:22px;line-height:1.6;font-weight:300}
.btn-cta{width:100%;background:#D4A8B0;color:#fff;border:none;padding:16px;border-radius:13px;font-size:15px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;margin-bottom:12px;transition:opacity 0.2s;text-decoration:none;display:block;text-align:center}
.btn-cta:hover{opacity:0.9}
.cta-note{font-size:11px;color:var(--hi)}

/* FOOTER */
.footer{padding:24px;border-top:0.5px solid rgba(0,0,0,0.07)}
.footer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.footer-brand{font-size:13px;font-weight:500;color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:6px}
.footer-langs{display:flex;gap:7px}
.fl-tag{font-size:11px;color:var(--mu);background:rgba(0,0,0,0.05);padding:4px 10px;border-radius:9px;cursor:pointer;border:0.5px solid transparent;transition:all 0.2s;text-decoration:none}
.fl-tag.active{color:var(--sage-d);background:var(--sage-l);border-color:var(--sage)}
.flags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.flag{font-size:10px;color:var(--mu);background:rgba(0,0,0,0.04);padding:4px 10px;border-radius:9px}
.footer-note{font-size:10px;color:var(--hi);line-height:1.7}

/* ONBOARDING OVERLAY */
.overlay{display:none;position:fixed;inset:0;background:rgba(30,26,22,0.55);z-index:200;align-items:flex-end;justify-content:center}
.overlay.open{display:flex}
.ob-sheet{background:var(--white);border-radius:24px 24px 0 0;padding:28px 24px 40px;width:100%;max-width:480px;animation:slideUp 0.35s ease}
.ob-handle{width:36px;height:4px;background:rgba(0,0,0,0.12);border-radius:2px;margin:0 auto 24px}
.ob-steps{display:flex;gap:4px;margin-bottom:24px}
.ob-dot{flex:1;height:3px;border-radius:2px;background:rgba(0,0,0,0.1);transition:background 0.3s}
.ob-dot.done{background:#A8BFD4}
.ob-dot.active{background:#4A7299}
.ob-step{display:none}
.ob-step.active{display:block}
.ob-eyebrow{font-size:11px;color:var(--mu);letter-spacing:0.06em;margin-bottom:8px;font-weight:600}
.ob-title{font-family:'DM Sans',sans-serif;font-weight:600;font-size:22px;color:var(--tx);margin-bottom:8px;line-height:1.3}
.ob-sub{font-size:13px;color:var(--tx);line-height:1.65;margin-bottom:22px;font-weight:400}
.free-big{display:inline-flex;align-items:center;gap:6px;background:var(--sage-l);border:0.5px solid var(--sage);border-radius:14px;padding:6px 14px;font-size:13px;color:var(--sage-d);font-weight:500;margin-bottom:22px}
.free-dot{width:6px;height:6px;border-radius:50%;background:#D4849A}
.trust-list{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.trust-item{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--bg);border-radius:12px}
.ti-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ti-text{font-size:12px;color:var(--tx);line-height:1.4}
.ti-sub{font-size:11px;color:var(--mu);margin-top:1px}
.field-lbl{font-size:12px;color:var(--tx);margin-bottom:6px;font-weight:600;letter-spacing:0.04em}
.field-inp{width:100%;padding:13px 14px;border:0.5px solid rgba(0,0,0,0.12);border-radius:12px;font-size:15px;color:var(--tx);background:var(--white);font-family:'DM Sans',sans-serif;outline:none;margin-bottom:14px;transition:border-color 0.2s}
.field-inp:focus{border-color:var(--sage-d)}
.age-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.chip{padding:9px 16px;border-radius:12px;border:0.5px solid rgba(0,0,0,0.15);font-size:13px;color:var(--tx);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s;background:transparent}
.chip.sel{background:var(--sky-l);border-color:var(--sky-d);color:var(--sky-d);font-weight:500}
.gea-stack{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.gea-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:13px;border:0.5px solid rgba(0,0,0,0.08);cursor:pointer;background:var(--white);transition:all 0.15s}
.gea-row.sel{background:var(--blush-l);border-color:var(--blush-d)}
.gr-num{font-size:12px;font-weight:500;color:var(--hi);width:44px;flex-shrink:0}
.gea-row.sel .gr-num{color:var(--blush-d)}
.gr-desc{font-size:13px;color:var(--tx);flex:1;line-height:1.4}
.gea-row.sel .gr-desc{color:var(--blush-d)}
.gr-sev{font-size:10px;padding:3px 8px;border-radius:8px;white-space:nowrap;font-weight:500}
.sev-ok{background:var(--sage-l);color:var(--sage-d)}
.sev-mid{background:var(--blush-l);color:var(--blush-d)}
.sev-hi{background:#FCEBEB;color:#791F1F}
.goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
.goal-card{padding:14px 12px;border-radius:14px;border:0.5px solid rgba(0,0,0,0.08);cursor:pointer;text-align:center;background:var(--white);transition:all 0.15s}
.goal-card.sel{border-width:2px}
.g1.sel{border-color:var(--sky-d);background:var(--sky-l)}
.g2.sel{border-color:var(--sage-d);background:var(--sage-l)}
.g3.sel{border-color:var(--blush-d);background:var(--blush-l)}
.g4.sel{border-color:var(--lilac-d);background:var(--lilac-l)}
.goal-icon{width:34px;height:34px;border-radius:10px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.goal-label{font-size:12px;color:var(--tx);font-weight:500;line-height:1.3}
.welcome-card{background:#E2EDF5;border:0.5px solid #A8BFD4;border-radius:16px;padding:16px;margin-bottom:14px}
.wc-title{font-size:14px;font-weight:500;color:#4A7299;margin-bottom:6px}
.wc-text{font-size:12px;color:#4A7299;line-height:1.6;font-weight:300}
.next-steps{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.ns-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:var(--bg);cursor:pointer;transition:background 0.15s;text-decoration:none}
.ns-item:hover{background:rgba(0,0,0,0.04)}
.ns-n{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}
.ns-title{font-size:13px;font-weight:500;color:var(--tx)}
.ns-sub{font-size:11px;color:var(--mu)}
.ns-arr{margin-left:auto;color:var(--hi);font-size:13px}
.ob-btn-main{width:100%;background:#1E2E42;border:none;color:#fff;padding:15px;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;margin-bottom:8px;transition:opacity 0.2s}
.ob-btn-main:hover{opacity:0.88}
.ob-btn-ghost{width:100%;background:transparent;border:0.5px solid rgba(0,0,0,0.12);color:var(--mu);padding:13px;border-radius:14px;font-size:14px;cursor:pointer;font-family:'DM Sans',sans-serif}
.ob-skip{background:none;border:none;color:var(--hi);font-size:12px;cursor:pointer;padding:10px;display:block;margin:4px auto 0;text-decoration:underline;font-family:'DM Sans',sans-serif}
.privacy-note{font-size:12px;color:var(--mu);text-align:center;line-height:1.6;margin-bottom:14px}
.privacy-note span{color:var(--sage-d)}
.disc{font-size:11px;color:var(--hi);text-align:center;margin-top:14px;line-height:1.5}

/* MOD CARDS BIG */
.mod-cards-big{display:flex;flex-direction:column;gap:12px}
.mod-card-big{border-radius:20px;padding:22px 20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:opacity 0.15s;text-decoration:none}
.mod-card-big:hover{opacity:0.88}
.mcb-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mcb-body{flex:1}
.mcb-title{font-size:22px;font-weight:700;color:var(--tx);margin-bottom:5px;letter-spacing:-0.01em}
.mcb-sub{font-size:13px;color:var(--mu);line-height:1.5}
.mcb-arrow{font-size:22px;font-weight:300;flex-shrink:0}

/* EXPAND BTN */
.expand-btn{width:100%;background:transparent;border:0.5px solid rgba(0,0,0,0.15);color:var(--tx);padding:12px;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.2s}
.expand-btn:hover{background:rgba(0,0,0,0.03)}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

@media(max-width:400px){
  .hero-h1{font-size:46px}
  .hero-visual{padding:18px 16px 0}
}