/* ============================================================
   DOLCINITY FUNNEL — styles.min.css
   Premium Warm UI • Mobile-First • 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

/* --- VARIABLES --- */
:root {
  --bg:        #FAF7F2;      /* warm white */
  --surface:   #F0EBE0;      /* cartes / inputs */
  --surface-2: #E8E0D5;      /* hover / secondaire */
  --border:    rgba(26,20,16,.12);
  --border-2:  rgba(26,20,16,.25);
  --text:      #1A1410;      /* typographie principale */
  --muted:     #6B5E54;
  --muted-2:   #A09080;
  --gold:      #B5614A;      /* terracotta = accent principal */
  --gold-lt:   #8B4F3A;      /* clay = accent foncé */
  --gold-bg:   rgba(181,97,74,.07);
  --gold-brd:  rgba(181,97,74,.22);
  --success:   #16a34a;
  --danger:    #dc2626;
  --font:      'Outfit', sans-serif;
  --font-serif:'Cormorant Garamond', serif;
  --r:         12px;
  --r-sm:      8px;
  --ease:      cubic-bezier(.4,0,.2,1);
  --tr:        .28s var(--ease);
  --max:       660px;
}

/* --- RESET --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer}

/* --- LAYOUT --- */
.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
}
.section{padding:52px 0}
@media(max-width:480px){.section{padding:36px 0}}

/* --- BADGE --- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--gold-bg);
  border:1px solid var(--gold-brd);
  color:var(--gold);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 14px;
  border-radius:100px;
}
.badge::before{
  content:'';
  width:6px;height:6px;
  background:var(--gold);
  border-radius:50%;
  animation:dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.75)}
}

/* --- TYPOGRAPHY --- */
h1{
  font-family:var(--font-serif);
  font-size:clamp(1.9rem,5.5vw,2.8rem);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.02em;
}
h2{
  font-family:var(--font-serif);
  font-size:clamp(1.3rem,4vw,1.8rem);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.01em;
}
.accent{color:var(--gold)}
.text-muted{color:var(--muted);font-size:.88rem}
.text-center{text-align:center}
.small{font-size:.8rem;color:var(--muted)}

/* --- BUTTONS --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 28px;
  border-radius:var(--r);
  font-size:.97rem;
  font-weight:700;
  cursor:pointer;
  border:none;
  transition:var(--tr);
  width:100%;
  position:relative;
  overflow:hidden;
  outline:none;
  line-height:1;
}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(53,29,20,.3)}

/* Primary / Terracotta */
.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-lt));
  color:#FAF7F2;
}
.btn-primary:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(53,29,20,.35);
}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn-primary:disabled{
  background:var(--border);
  color:var(--muted-2);
  cursor:not-allowed;
  opacity:.55;
  pointer-events:none;
}
.btn-primary.just-unlocked{
  animation:unlock-pop .55s var(--ease) forwards;
  pointer-events:auto;
}
@keyframes unlock-pop{
  0%{transform:scale(1)}
  40%{transform:scale(1.05);box-shadow:0 0 48px rgba(53,29,20,.4)}
  100%{transform:scale(1);box-shadow:0 10px 32px rgba(53,29,20,.28)}
}

/* WhatsApp */
.btn-wa{
  background:#25d366;
  color:#fff;
  font-size:1rem;
}
.btn-wa:hover{
  background:#1ebe5d;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(37,211,102,.35);
}

/* Instagram */
.btn-ig{
  background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
  color:#fff;
}
.btn-ig:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(253,29,29,.28);
}

/* Ghost */
.btn-ghost{
  background:transparent;
  border:1.5px solid var(--border);
  color:var(--muted);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* --- VIDEO --- */
.video-wrap{
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  position:relative;
}
.video-wrap video{
  width:100%;
  display:block;
  max-height:440px;
  object-fit:cover;
  background:#000;
}
/* Fake progress track under video */
.vsl-bar{
  height:3px;
  background:var(--border);
}
.vsl-bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  transition:width .25s linear;
  will-change:width;
}

/* CTA hint below video */
.cta-hint{
  text-align:center;
  font-size:.8rem;
  color:var(--muted);
  margin-top:10px;
  min-height:1.3rem;
  transition:color var(--tr);
}
.cta-hint.done{color:var(--gold)}

/* --- TOAST --- */
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(90px);
  background:var(--surface-2);
  border:1px solid var(--gold-brd);
  color:var(--text);
  padding:13px 22px;
  border-radius:var(--r);
  font-size:.88rem;
  font-weight:500;
  z-index:9999;
  transition:transform .38s var(--ease),opacity .38s;
  opacity:0;
  white-space:nowrap;
  max-width:90vw;
  text-align:center;
  pointer-events:none;
}
.toast.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

/* --- QUIZ PROGRESS --- */
.quiz-prog{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:36px;
}
.prog-bar{
  flex:1;
  height:4px;
  background:var(--border);
  border-radius:100px;
  overflow:hidden;
}
.prog-fill{
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  border-radius:100px;
  transition:width .5s var(--ease);
  will-change:width;
}
.prog-label{
  font-size:.75rem;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
  min-width:36px;
  text-align:right;
}

/* --- QUIZ SLIDES --- */
.q-slide{display:none}
.q-slide.active{
  display:block;
  animation:slide-in .38s var(--ease) forwards;
}
@keyframes slide-in{
  from{opacity:0;transform:translateX(28px)}
  to{opacity:1;transform:translateX(0)}
}

/* Options list */
.options{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-top:22px;
}
.opt{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 18px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r);
  cursor:pointer;
  transition:var(--tr);
  font-size:.95rem;
  color:var(--text);
  text-align:left;
  width:100%;
  line-height:1.45;
}
.opt:hover{
  border-color:var(--gold);
  background:var(--gold-bg);
  transform:translateX(4px);
}
.opt:active{transform:translateX(2px) scale(.99)}
.opt.chosen{
  border-color:var(--gold);
  background:var(--gold-bg);
}
.opt-ltr{
  width:32px;
  height:32px;
  min-width:32px;
  border-radius:8px;
  background:rgba(201,169,110,.1);
  border:1px solid var(--gold-brd);
  color:var(--gold);
  font-size:.78rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--tr);
  letter-spacing:.02em;
}
.opt:hover .opt-ltr,
.opt.chosen .opt-ltr{
  background:var(--gold);
  color:#E5E1DA;
  border-color:var(--gold);
}

/* --- EXIT SCREEN --- */
.exit-wrap{display:none}
.exit-wrap.active{
  display:block;
  animation:fade-up .45s var(--ease) forwards;
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
.exit-icon{
  width:68px;height:68px;
  border-radius:50%;
  background:var(--gold-bg);
  border:1.5px solid var(--gold-brd);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 24px;
  font-size:1.8rem;
}
.exit-content{
  text-align:center;
  padding:40px 0;
}
.exit-content h2{margin-bottom:14px}
.exit-content p{
  color:var(--muted);
  max-width:420px;
  margin:0 auto;
  font-size:.95rem;
  line-height:1.7;
}
.exit-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:300px;
  margin:28px auto 0;
}

/* --- FORM --- */
.form-group{margin-bottom:18px}
.form-label{
  display:block;
  font-size:.83rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
  letter-spacing:.02em;
}
.form-label .req{color:var(--gold)}
.form-input{
  width:100%;
  padding:13px 15px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font);
  font-size:.95rem;
  color:var(--text);
  transition:var(--tr);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.form-input:focus{
  border-color:var(--gold);
  background:rgba(83,40,23,.04);
  box-shadow:0 0 0 3px rgba(83,40,23,.1);
}
.form-input::placeholder{color:var(--muted-2)}
.form-input.err{border-color:var(--danger)}
.form-input.err:focus{box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.form-err{
  font-size:.77rem;
  color:var(--danger);
  margin-top:5px;
  display:none;
  font-weight:500;
}
.form-err.show{display:block}
textarea.form-input{resize:vertical;min-height:90px}

/* Checkbox */
.chk-wrap{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:15px 16px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:var(--tr);
  user-select:none;
}
.chk-wrap:hover{border-color:rgba(83,40,23,.4)}
.chk-wrap.on{
  border-color:var(--gold);
  background:var(--gold-bg);
}
.chk-wrap.err-chk{border-color:var(--danger)}
.chk-box{
  width:20px;height:20px;min-width:20px;
  border-radius:5px;
  border:2px solid var(--border-2);
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  transition:var(--tr);
  margin-top:2px;
}
.chk-wrap.on .chk-box{
  background:var(--gold);
  border-color:var(--gold);
}
.chk-box svg{
  opacity:0;
  transition:opacity .18s;
}
.chk-wrap.on .chk-box svg{opacity:1}
.chk-txt{
  font-size:.87rem;
  color:var(--muted);
  line-height:1.55;
}

/* --- RECAP CARD --- */
.recap-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:22px;
  margin:24px 0;
}
.recap-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.recap-row:last-child{border-bottom:none}
.r-key{
  font-size:.8rem;
  color:var(--muted);
  font-weight:500;
  min-width:110px;
  line-height:1.5;
}
.r-val{
  font-size:.87rem;
  color:var(--text);
  font-weight:700;
  text-align:right;
  line-height:1.5;
}

/* --- SUCCESS ICON --- */
.success-ring{
  width:76px;height:76px;
  border-radius:50%;
  background:rgba(34,197,94,.1);
  border:2px solid rgba(34,197,94,.4);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 24px;
  font-size:2.1rem;
  animation:pop-in .6s var(--ease) forwards;
}
@keyframes pop-in{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.12)}
  100%{transform:scale(1);opacity:1}
}

/* --- DIVIDER --- */
.divider{
  height:1px;
  background:var(--border);
  margin:30px 0;
}

/* --- TRUST BAR --- */
.trust{
  padding-top:28px;
  border-top:1px solid var(--surface-2);
  margin-top:40px;
  text-align:center;
  color:var(--muted);
  font-size:.8rem;
  line-height:2;
}

/* --- SPACING HELPERS --- */
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.mt-6{margin-top:24px}
.mt-8{margin-top:32px}
.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}

/* --- PAGE HEADER --- */
.page-hd{
  text-align:center;
  padding:28px 0 36px;
}
.page-hd p{
  color:var(--muted);
  margin-top:10px;
  font-size:.9rem;
}

/* --- SUBMIT LOADING STATE --- */
.btn-primary.loading{
  pointer-events:none;
  opacity:.75;
}
.btn-primary.loading::after{
  content:'';
  width:16px;height:16px;
  border:2px solid rgba(250,247,242,.3);
  border-top-color:#FAF7F2;
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin-left:8px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- MOBILE TWEAKS --- */
@media(max-width:480px){
  h1{letter-spacing:-.02em}
  .opt{padding:13px 15px;font-size:.92rem}
  .recap-card{padding:18px}
  .r-key{min-width:90px;font-size:.77rem}
  .r-val{font-size:.83rem}
  .btn{font-size:.93rem;padding:14px 22px}
}