[hidden]{display:none!important}
:root{
  --bg:#0E0A1C; --panel:#171129; --panel2:#1F1836; --line:#2E2650;
  --txt:#F3F0FA; --mut:#A49CBF; --pink:#FF2E9A; --pink-d:#D1127A; --cyan:#19D3F2; --ok:#3BE08B; --warn:#FFB020; --err:#FF5C7A;
  --r:16px; --max:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
img,video{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* en-tête */
header.top{position:sticky;top:0;z-index:20;background:rgba(14,10,28,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt);font-weight:800;font-size:20px;letter-spacing:-.3px}
.brand:hover{text-decoration:none}
.brand b{color:var(--pink)}
nav.menu{display:flex;align-items:center;gap:22px;font-size:14px}
nav.menu a{color:var(--mut)}
nav.menu a:hover{color:var(--txt);text-decoration:none}
@media (max-width:720px){nav.menu .opt{display:none}}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:12px;padding:13px 20px;
  font:inherit;font-weight:700;font-size:15px;cursor:pointer;min-height:48px;text-decoration:none!important;transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(1px)}
.btn-twitch{background:#9146FF;color:#fff}
.btn-twitch:hover{box-shadow:0 8px 24px rgba(145,70,255,.35)}
.btn-kick{background:#53FC18;color:#0B0B0B}
.btn-kick:hover{box-shadow:0 8px 24px rgba(83,252,24,.25)}
.btn-main{background:var(--pink);color:#fff}
.btn-main:hover{box-shadow:0 8px 24px rgba(255,46,154,.35)}
.btn-ghost{background:none;color:var(--txt);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--mut)}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn svg{flex:none}

/* sections */
section{padding:72px 0}
.hero{padding:88px 0 64px}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.08;letter-spacing:-1.2px;margin:0 0 18px;max-width:820px}
.hero h1 em{font-style:normal;color:var(--pink)}
.hero p.lead{font-size:clamp(16px,2.2vw,19px);color:var(--mut);max-width:640px;margin:0 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta small{color:var(--mut);font-size:13px;width:100%;margin-top:4px}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.6px;padding:6px 12px;border-radius:999px;
  color:var(--cyan);border:1px solid rgba(25,211,242,.4);margin-bottom:20px}
h2{font-size:clamp(26px,4vw,38px);letter-spacing:-.6px;margin:0 0 12px}
.sub{color:var(--mut);margin:0 0 36px;max-width:640px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--mut);font-size:15px}
.step-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,46,154,.14);color:var(--pink);font-weight:800;margin-bottom:14px}
.ico{width:28px;height:28px;color:var(--cyan);margin-bottom:12px}

/* exemple de sous-titres */
.demo-st{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.demo-st span{font-weight:800;font-size:15px;padding:8px 12px;border-radius:10px;background:#0B0816;border:1px solid var(--line);letter-spacing:.3px}
.demo-st b{color:var(--pink)}

/* prix */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.prices{grid-template-columns:1fr}}
.price{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:14px;position:relative}
.price.top{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.price .tag{position:absolute;top:-12px;left:24px;background:var(--pink);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.price h3{margin:0;font-size:20px}
.price .amount{font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1}
.price .amount small{font-size:15px;font-weight:600;color:var(--mut);letter-spacing:0}
.price .launch{font-size:14px;color:var(--ok);font-weight:600}
.price ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--mut)}
.price li::before{content:"✓";color:var(--cyan);font-weight:800;margin-right:8px}
.price .btn{margin-top:auto}
.note{color:var(--mut);font-size:14px;margin-top:20px}

/* FAQ */
details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}
details p{color:var(--mut);margin:10px 0 0}

/* pied de page */
footer.bottom{border-top:1px solid var(--line);padding:36px 0;color:var(--mut);font-size:14px}
footer.bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer.bottom nav{display:flex;flex-wrap:wrap;gap:18px}
footer.bottom a{color:var(--mut)}

/* espace connecté */
.app-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:36px 0 24px}
.who{display:flex;align-items:center;gap:12px}
.who img{width:44px;height:44px;border-radius:50%;background:var(--panel2)}
.who b{display:block}
.who small{color:var(--mut)}
.quota{min-width:260px}
.bar{height:10px;border-radius:999px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
.bar>div{height:100%;background:linear-gradient(90deg,var(--pink),var(--cyan));width:0;transition:width .4s}
.quota small{color:var(--mut);display:block;margin-top:6px}
form.new{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:6px}
@media (max-width:640px){form.new{grid-template-columns:1fr}}
label.t{display:block;font-size:14px;color:var(--mut);margin-bottom:8px;font-weight:600}
input[type=url],select{width:100%;background:#0B0816;border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:13px 14px;font:inherit;font-size:15px;min-height:48px}
input[type=url]:focus,select:focus{outline:2px solid var(--pink);outline-offset:1px}
.opts{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:12px;margin-top:14px}
@media (max-width:640px){.opts{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--txt)}
.check input{width:20px;height:20px;accent-color:var(--pink)}
.msg{margin-top:12px;font-size:14px}
.msg.err{color:var(--err)}
.msg.ok{color:var(--ok)}
.jobs{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.job{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.job-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center}
.job-head b{word-break:break-all}
.st{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.st.en_attente{background:rgba(255,176,32,.14);color:var(--warn)}
.st.en_cours{background:rgba(25,211,242,.14);color:var(--cyan)}
.st.termine{background:rgba(59,224,139,.14);color:var(--ok)}
.st.erreur,.st.annule{background:rgba(255,92,122,.14);color:var(--err)}
.job .bar{margin-top:12px}
.job small.etape{color:var(--mut);display:block;margin-top:6px}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:16px}
.clip{background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.clip video,.clip .ph{display:block;width:100%;aspect-ratio:9/16;background:#000;object-fit:cover}
.clip .ph{display:grid;place-items:center;color:var(--mut);font-size:13px;text-align:center;padding:10px;background:linear-gradient(160deg,#2A1E4A,#120D22)}
.clip .info{padding:10px 12px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.clip a.dl{font-weight:700}
.empty{color:var(--mut);text-align:center;padding:40px 20px;border:1px dashed var(--line);border-radius:var(--r)}
.demo-flag{background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.4);color:var(--warn);border-radius:12px;padding:12px 16px;font-size:14px;margin-top:20px}

/* pages légales */
.legal{max-width:780px;padding:56px 0}
.legal h1{font-size:34px;margin:0 0 6px}
.legal h2{font-size:21px;margin:34px 0 10px}
.legal p,.legal li{color:#D8D3E8}
.legal .maj{color:var(--mut);font-size:14px}
.todo{background:rgba(255,176,32,.16);color:var(--warn);padding:0 4px;border-radius:4px;font-weight:600}

/* envoi depuis le PC */
.tabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px;width:max-content;margin:0 0 14px}
.tabs button{background:none;border:0;color:var(--mut);font:600 14px Poppins,sans-serif;padding:8px 14px;border-radius:9px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--panel2);color:var(--txt)}
.drop{display:block;border:2px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--mut);cursor:pointer;transition:.15s}
.drop:hover,.drop.over{border-color:var(--pink);color:var(--txt);background:rgba(255,46,154,.06)}
.drop b{color:var(--txt)}
.drop input{display:none}
.envoi{margin-top:12px}
.envoi .bar{margin:6px 0}
.drop[hidden]{display:none}
form.new.fichier{grid-template-columns:1fr}
form.new.fichier .btn{justify-self:end}
.drop .ouvrir{margin-bottom:8px;pointer-events:none}

/* histoire */
.histoire{padding-top:24px}
.histoire-card{max-width:820px;margin:0 auto 28px;padding:34px}
.histoire-card h2{margin:12px 0 14px}
.histoire-card p{color:#D8D3E8;font-size:17px}
.signature{font-weight:700;color:var(--pink)!important}
.heros .card h3{margin:12px 0 8px}
.badge-cyan{background:rgba(25,211,242,.12);color:var(--cyan);border-color:rgba(25,211,242,.35)}

/* reste du quota + hooks */
.reste{margin:12px 0 0;color:var(--mut);font-size:14px}
.reste b{color:var(--txt)}
.hook-btn{width:100%;background:rgba(255,46,154,.1);border:0;border-top:1px solid var(--line);color:var(--pink);font:700 13px Poppins,sans-serif;padding:9px;cursor:pointer}
.hook-btn:hover{background:rgba(255,46,154,.2)}
.hooks-fond{position:fixed;inset:0;z-index:60;background:rgba(5,3,12,.72);display:grid;place-items:center;padding:18px}
.hooks-fond[hidden]{display:none}
.hooks-boite{position:relative;width:min(520px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px}
.hooks-boite h3{margin:0 0 4px}
.hooks-aide{margin:0 0 14px;color:var(--mut);font-size:14px}
.hook{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--txt);font:600 15px Poppins,sans-serif;padding:11px 14px;margin-bottom:8px;cursor:pointer}
.hook:hover{border-color:var(--pink)}
.hook.copie{border-color:var(--ok);color:var(--ok)}
.hooks-tags{margin:14px 0}
.hooks-tags b{display:block;font-size:13px;color:var(--mut);margin-bottom:6px}
.hooks-tags .hook{font-weight:400;font-size:14px;color:var(--cyan)}
.avis-fermer{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--mut);font-size:22px;cursor:pointer}

.heros{margin-top:4px}
.histoire-card b{color:var(--txt)}
.final-card{text-align:center;padding:44px 28px;background:linear-gradient(135deg,rgba(255,46,154,.16),rgba(25,211,242,.08)),var(--panel)}
.final-card h2{margin:0 0 10px}
.final-card p{color:var(--mut);max-width:560px;margin:0 auto 22px}
@media (max-width:900px){.heros.grid3{grid-template-columns:1fr}}
.histoire-card p{margin:0 0 14px}
@media (max-width:520px){
  .menu .opt{display:none}
  .top .brand span{font-size:17px}
  .top .menu .btn{padding:8px 11px!important;font-size:13px!important;min-height:36px!important;white-space:nowrap}
}

/* fenêtre de connexion */
.cx-fond{position:fixed;inset:0;z-index:70;background:rgba(5,3,12,.75);display:grid;place-items:center;padding:18px}
.cx-boite{position:relative;width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 24px 20px}
.cx-boite h3{margin:0 0 6px;font-size:22px}
.cx-aide{margin:0 0 18px;color:var(--mut);font-size:14px}
.cx-large{width:100%;margin-bottom:10px;justify-content:center}
.cx-ou{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:13px;margin:8px 0 12px}
.cx-ou:before,.cx-ou:after{content:"";flex:1;height:1px;background:var(--line)}
.cx-email input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--txt);font:15px Poppins,sans-serif;padding:12px 14px;margin-bottom:10px}
.cx-msg{font-size:14px;margin:4px 0 0;min-height:0}
.cx-msg.ok{color:var(--ok)} .cx-msg.err{color:var(--err)}
.cx-petit{font-size:12px;color:var(--mut);margin:12px 0 0}
.cx-fermer{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--mut);font-size:24px;cursor:pointer}

.cx-tabs{width:100%;margin:0 0 16px}
.cx-tabs button{flex:1}
.cx-mdp{position:relative}
.cx-mdp input{padding-right:46px}
.cx-voir{position:absolute;right:8px;top:6px;background:none;border:0;font-size:18px;cursor:pointer;opacity:.7}
.cx-lien{background:none;border:0;color:var(--cyan);font:14px Poppins,sans-serif;padding:0;cursor:pointer;margin-top:2px}