[hidden]{display:none!important}
img{max-width:100%}
/* Layout : comme nemaliaskincare.com — grande photo plein cadre avec voile, puis sections claires et aérées ;
   le formulaire reprend les cartes arrondies et les étiquettes roses du site.
   CHARTE — valeurs relevées sur nemaliaskincare.com (titres : Mirage sur le site, Fraunces ici). */
:root{
  --bg:#FFFAFC;         /* fond du site */
  --white:#FFFFFF;
  --blush:#FCE4EC;      /* rose clair des cartes */
  --border:#F7C2D8;     /* filets roses */
  --rose:#C95F8C;       /* rose de marque */
  --hot:#E5408C;        /* étiquettes */
  --cta-a:#F4A9C6; --cta-b:#EF8FB5;  /* dégradé du bouton principal */
  --ink:#2A2233;        /* texte */
  --muted:#8A8290;      /* texte secondaire */
  --wa:#25A35A;         /* vert WhatsApp */
  --alert:#B3263E;
  --font-display:"Fraunces","Mirage",Georgia,"Times New Roman",serif;
  --font-body:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;font-variation-settings:"opsz" 96}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.gut{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--hot)}

/* En-tête */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;transition:background .3s,box-shadow .3s}
.top .in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}
.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:300;font-size:25px;letter-spacing:.01em;color:var(--ink);text-decoration:none;line-height:1}
.wordmark img{width:30px;height:30px;border-radius:8px}
.top .tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.top.on-hero{position:absolute;left:0;right:0}
.top.on-hero .wordmark,.top.on-hero .tag{color:var(--white)}
.top.solid{background:rgba(255,250,252,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--blush)}

/* Accueil : photo plein cadre comme le site */
.hero{position:relative;min-height:min(92vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:#FF97C4}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:37% 50%;animation:zoom 14s var(--ease) both}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(42,34,51,.82) 0%,rgba(42,34,51,.45) 38%,rgba(42,34,51,.05) 70%),linear-gradient(to bottom,rgba(42,34,51,.35),transparent 22%)}
.hero .in{position:relative;z-index:1;width:100%;max-width:1080px;margin:0 auto;padding-block:120px 48px}
.hero .eyebrow{color:#FFD0E3}
.hero h1{color:var(--white);font-size:clamp(38px,8.4vw,64px);margin-top:14px;max-width:13ch}
.hero p{color:rgba(255,255,255,.88);max-width:42ch;margin:16px 0 0;font-size:15.5px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.fade{animation:up .9s var(--ease) both}
.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}.d4{animation-delay:.6s}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Boutons (ceux du site) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:15px 30px;font-family:var(--font-display);font-weight:500;font-size:17px;cursor:pointer;text-decoration:none;color:var(--white);background:linear-gradient(var(--cta-a),var(--cta-b));box-shadow:0 12px 28px -10px rgba(233,64,140,.55);transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(233,64,140,.65)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.btn:hover svg.arrow{transform:translateX(3px)}
.btn.glass{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(8px);box-shadow:none}
.btn.line{background:var(--white);color:var(--rose);border:1px solid var(--border);box-shadow:none}
.btn.line:hover{background:var(--blush)}
.btn.wa{background:var(--wa);box-shadow:0 12px 26px -12px rgba(37,163,90,.7)}
.btn.wide{width:100%}
.linkbtn{background:none;border:0;color:rgba(255,255,255,.85);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 2px}

/* Sections de l'accueil */
.sec{max-width:1080px;margin:0 auto;padding-block:64px 8px}
.sec h2{font-size:clamp(28px,5vw,36px);margin-top:10px}
.sec .sub{color:var(--muted);max-width:52ch;margin:12px 0 0}
.how{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.how{grid-template-columns:minmax(0,1fr)}}
.how li{background:var(--white);border:1px solid var(--blush);border-radius:24px;padding:24px 22px;transition:transform .4s var(--ease),box-shadow .4s}
.how li:hover{transform:translateY(-4px);box-shadow:0 18px 36px -24px rgba(201,95,140,.5)}
.how .n{font-family:var(--font-display);font-size:34px;font-weight:300;color:var(--rose);line-height:1}
.how h3{font-size:20px;margin-top:14px}
.how p{color:var(--muted);font-size:14px;margin:8px 0 0}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
@media (max-width:760px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}
.value{background:var(--blush);border-radius:20px;padding:18px 16px;display:flex;flex-direction:column;gap:10px}
.value svg{width:26px;height:26px;stroke:var(--rose);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.value b{font-family:var(--font-display);font-weight:500;font-size:16.5px;line-height:1.2}
.value span{font-size:12.5px;color:var(--muted);line-height:1.4}
.closing{max-width:1080px;margin:56px auto 0;padding-block:0 8px}
.closing .box{background:linear-gradient(160deg,var(--white),var(--blush));border:1px solid var(--blush);border-radius:28px;padding:36px 24px;text-align:center}
.closing h2{font-size:clamp(26px,5vw,34px)}
.closing p{color:var(--muted);margin:10px auto 22px;max-width:44ch}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Formulaire */
.app{max-width:640px;margin:0 auto;padding-block:8px 48px}
.prog{display:flex;align-items:center;gap:14px;margin:6px 0 26px}
.prog .bar{flex:1;height:3px;background:var(--blush);border-radius:3px;overflow:hidden}
.prog .bar span{display:block;height:100%;background:var(--rose);border-radius:3px;transition:width .6s var(--ease)}
.prog .count{font-family:var(--font-display);font-size:15px;color:var(--rose);font-variant-numeric:tabular-nums;white-space:nowrap}
.prog .count b{font-weight:500;color:var(--ink)}
.step-in{animation:stepIn .6s var(--ease) both}
.step-in.back{animation-name:stepBack}
@keyframes stepIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.shead h2{font-size:clamp(30px,6.6vw,40px);margin-top:10px}
.shead p{color:var(--muted);margin:10px 0 24px;max-width:48ch}
.card{background:var(--white);border:1px solid var(--blush);border-radius:28px;padding:26px clamp(18px,5vw,30px);box-shadow:0 24px 50px -40px rgba(201,95,140,.6)}
.fields{display:grid;gap:18px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:480px){.two{grid-template-columns:minmax(0,1fr)}}
.f{display:flex;flex-direction:column;gap:8px;min-width:0}
.f > label,.f > .l{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.req{color:var(--hot)}
input[type=text],input[type=tel],input[type=number],textarea{width:100%;border:1px solid var(--border);background:var(--bg);border-radius:16px;padding:14px 16px;font-size:16px;transition:border-color .25s,background .25s,box-shadow .25s}
input:focus,textarea:focus{outline:none;border-color:var(--rose);background:var(--white);box-shadow:0 0 0 4px rgba(201,95,140,.12)}
input::placeholder,textarea::placeholder{color:#B5A9B5}
textarea{min-height:130px;resize:vertical;line-height:1.55}
.invalid{border-color:var(--alert)!important;background:#FFF3F5!important}
.err{color:var(--alert);font-size:13.5px;font-weight:500;margin:14px 0 0}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:1px solid var(--border);background:var(--white);padding:10px 18px;border-radius:999px;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .25s,border-color .25s,color .25s}
.pill:hover{border-color:var(--rose)}
.pill[aria-checked="true"]{background:var(--rose);border-color:var(--rose);color:var(--white)}
.dot{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--border)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;border:1px solid var(--border);background:var(--white);border-radius:22px;padding:18px 16px 16px;cursor:pointer;min-width:0;transition:border-color .3s,background .3s,transform .4s var(--ease)}
.tile:hover{border-color:var(--rose);transform:translateY(-2px)}
.tile .ic{width:44px;height:44px;border-radius:14px;background:var(--blush);display:flex;align-items:center;justify-content:center;color:var(--rose);transition:background .3s,color .3s}
.tile svg{width:30px;height:30px}
.tile b{font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.2}
.tile small{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:-6px}
.tile::after{content:"";position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);transition:background .3s,border-color .3s,transform .4s var(--ease)}
.tile[aria-pressed="true"],.tile[aria-checked="true"]{border-color:var(--rose);background:#FFF5F9}
.tile[aria-pressed="true"] .ic,.tile[aria-checked="true"] .ic{background:var(--rose);color:var(--white)}
.tile[aria-pressed="true"]::after,.tile[aria-checked="true"]::after{background:var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--rose);animation:tick .45s var(--ease)}
@keyframes tick{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.group + .group{margin-top:22px}
.group h3{font-size:20px;margin-bottom:12px}
.prod{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:8px}
@media (max-width:480px){.prod{grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:14px}}
.prod label{font-size:14px}
.prod input{padding:11px 14px;font-size:15px;border-radius:14px}
.qa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--blush)}
.qa:last-of-type{border-bottom:0}
.qa .q{font-size:15px}
.yn{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:3px;background:var(--bg)}
.yn button{border:0;background:none;padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--muted);min-width:56px;transition:background .25s,color .25s}
.yn button[aria-checked="true"]{background:var(--rose);color:var(--white)}
.more{margin:4px 0 12px;animation:up .5s var(--ease) both}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.shot{border-radius:22px;background:var(--bg);border:1px solid var(--blush);padding:18px 12px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.shot .frame{width:72px;height:88px;border-radius:999px 999px 18px 18px;background:var(--blush);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;margin-bottom:6px}
.shot svg{width:58px;height:68px;stroke:var(--rose);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shot b{font-family:var(--font-display);font-weight:500;font-size:16px}
.shot small{font-size:12px;color:var(--muted);line-height:1.35}
.tips{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.tips li{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.tips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose);margin-top:9px;flex:none}
.nav{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:22px}
.nav .btn.line{padding-inline:24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Fin */
.done{text-align:center;padding-top:24px}
.done .mark{width:72px;height:72px;margin:0 auto 18px;border-radius:22px;overflow:hidden;box-shadow:0 18px 36px -18px rgba(233,64,140,.6);animation:up .8s var(--ease) both}
.done .mark img{width:100%;height:100%;display:block}
.done h2{font-size:clamp(34px,7.4vw,46px);margin-top:10px}
.done h2 em{font-style:italic;color:var(--rose)}
.howto{list-style:none;counter-reset:s;padding:0;margin:26px 0 22px;display:grid;gap:10px;text-align:left}
.howto li{counter-increment:s;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:baseline;background:var(--white);border:1px solid var(--blush);border-radius:20px;padding:14px 16px;font-size:14.5px}
.howto li::before{content:"0" counter(s);font-family:var(--font-display);font-weight:300;font-size:22px;color:var(--rose)}
.actions{display:grid;gap:10px}
.preview{margin-top:18px;text-align:left}
.preview summary{cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rose);padding:6px 0}
.msg{background:var(--white);border:1px solid var(--blush);border-radius:16px;padding:14px;white-space:pre-wrap;word-break:break-word;font-size:12.5px;line-height:1.5;max-height:240px;overflow:auto;margin-top:8px}
.fine{font-size:12.5px;color:var(--muted);margin-top:14px}
.back-link{background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:10px}
canvas#petals{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}

.foot{text-align:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-block:40px 30px}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--white);padding:11px 20px;border-radius:999px;font-size:13.5px;z-index:40;max-width:calc(100% - 32px);text-align:center;animation:up .4s var(--ease) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* Envoi des photos */
.shot{position:relative;cursor:pointer;transition:border-color .3s,transform .4s var(--ease)}
.shot:hover{border-color:var(--rose);transform:translateY(-2px)}
.shot input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.shot .frame img{width:100%;height:100%;object-fit:cover;display:block;animation:up .5s var(--ease) both}
.shot .act{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);margin-top:2px}
.shot.has{border-color:var(--rose);background:#FFF5F9}
.shot.has .act{color:var(--muted)}
.shot:focus-within{outline:2px solid var(--rose);outline-offset:3px}
.optional{font-size:13px;color:var(--muted);margin:16px 0 0}
.privacy{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:1px solid var(--blush);border-radius:20px;padding:16px 18px;margin:16px 0 0;text-align:left;font-size:13.5px;line-height:1.5;color:var(--muted)}
.privacy svg{flex:none;width:22px;height:22px;color:var(--rose);margin-top:1px}
.privacy p{margin:0}
.privacy b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Envoi en cours */
.sending{text-align:center;padding:60px 0 20px}
.sending h2{font-size:clamp(28px,6vw,38px);margin-top:22px}
.sending p{color:var(--muted);margin:10px auto 0;max-width:40ch}
.loader{width:64px;height:64px;margin:0 auto;border-radius:50%;border:3px solid var(--blush);border-top-color:var(--rose);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.upbar{max-width:320px;height:4px;border-radius:4px;background:var(--blush);margin:24px auto 0;overflow:hidden}
.upbar span{display:block;height:100%;width:0;background:var(--rose);transition:width .4s var(--ease)}
.errbox{background:#FFF3F5;border:1px solid #F5C2CC;color:var(--alert);border-radius:16px;padding:14px 16px;font-size:14px;margin-top:18px;text-align:left}