/* Funnel VSL /tirage-gratuit : 3 écrans, une action par écran.
   Base saine : la page défile normalement, aucune hauteur calculée, aucun script de clavier.
   iOS et Android gèrent eux-mêmes le champ de texte et le clavier. */
:root{--night:#101F32;--text:#f3ecdf;--ivory:#F0E5CA;--muted:#b9c2d3;--gold:#C4A15B;--gold-2:#d7b578;--ink:#172038;
  --gold-grad:linear-gradient(110deg,#ebc88f,#d2ad71 65%,#bd955a)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:radial-gradient(130% 70% at 50% 0%,#172a44 0%,#101F32 58%,#0c1828 100%) fixed,var(--night);
  color:var(--text);font:400 16px/1.5 Manrope,system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}
button,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

.top{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:560px;margin:0 auto;
  padding:calc(10px + env(safe-area-inset-top)) 16px 6px}
.logo{display:block;height:26px;width:auto}
.live{display:flex;align-items:center;gap:7px;height:30px;padding:2px 11px 2px 2px;border-radius:15px;border:1px solid rgba(215,181,120,.32);white-space:nowrap}
.live img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.live b{display:block;font-size:11.5px;font-weight:600;color:var(--ivory);line-height:1.1}
.live small{display:block;font-size:10.5px;color:#8fdcb0;line-height:1.1}

.scr{max-width:560px;margin:0 auto;padding:8px 16px calc(24px + env(safe-area-inset-bottom))}
.title{margin:8px 0 14px;text-align:center;font:600 26px/1.15 "Cormorant Garamond",Georgia,serif;color:var(--ivory)}

.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin-top:18px;padding:12px 18px;
  border:0;border-radius:14px;background:var(--gold-grad);color:var(--ink);font:700 18px/1.2 Manrope,system-ui,sans-serif;
  text-decoration:none;cursor:pointer;box-shadow:0 6px 22px rgba(213,174,112,.25);touch-action:manipulation}
.cta:active{transform:scale(.985)}
.cta svg{width:22px;height:22px}
.cta[aria-disabled="true"]{opacity:.42;box-shadow:none}
.cta:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.micro{margin:8px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.sans-wa{margin-top:14px}.sans-wa a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* Écran 1 : vidéo, au format 9/16, jamais plus haute que 60 % de l'écran */
.vbox{width:min(100%,calc(60vh * 9 / 16));aspect-ratio:9/16;margin:0 auto;border-radius:16px;overflow:hidden;background:#05090f;
  box-shadow:0 0 0 1px rgba(215,181,120,.35),0 18px 50px rgba(0,0,0,.5)}
.vbox video{display:block;width:100%;height:100%;object-fit:cover}

/* Écran 3 : question */
.picked{display:flex;justify-content:center;gap:12px;height:56px;margin-bottom:14px}
.picked span{height:100%;aspect-ratio:300/456;border-radius:4px;background:url(/assets/tarot-back-sm.webp) center/100% 100% no-repeat;box-shadow:0 4px 12px rgba(0,0,0,.45)}
.field label{display:block;font:600 22px/1.2 "Cormorant Garamond",Georgia,serif;color:var(--gold-2);margin-bottom:8px}
.field textarea{display:block;width:100%;min-height:140px;resize:vertical;padding:14px;border-radius:14px;border:1px solid rgba(215,181,120,.55);
  background:rgba(13,26,44,.72);color:var(--text);font-size:17px;line-height:1.5;outline:0}
.field textarea:focus{border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(215,181,120,.18)}
.field textarea::placeholder{color:#8f9ab0}
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:13px;line-height:1.35;color:var(--muted);cursor:pointer}
.consent input{flex:0 0 24px;width:24px;height:24px;margin:0;accent-color:var(--gold)}
.consent a{color:var(--gold-2)}
.consent.invalid span{color:#ffd9a0}

.noscript{margin:16px;text-align:center}.noscript a{color:var(--gold-2)}
@media (prefers-reduced-motion:reduce){.cta:active{transform:none}}