: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:repeat(3,1fr);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}