:root { --bg:#0b0d12; --bg2:#10131c; --card:#151823; --line:#262a3a; --text:#eef0f7; --muted:#9aa0b8; --a:#7b6cff; --b:#ff5fa8; --ok:#5ee0a0; }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.55; overflow-x:hidden }
a { color:#b9b0ff }
img { max-width:100%; height:auto; display:block }
.wrap { max-width:1120px; margin:0 auto; padding:0 16px }
.grad { background:linear-gradient(135deg,var(--a),var(--b)); -webkit-background-clip:text; background-clip:text; color:transparent }

/* Barre du haut */
.top { position:sticky; top:0; z-index:10; background:rgba(11,13,18,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line) }
.top .wrap { display:flex; align-items:center; gap:18px; height:62px }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; font-size:18px; margin-inline-end:auto }
.brand img { width:34px; height:34px; border-radius:9px }
.top nav a { color:var(--muted); text-decoration:none; font-size:15px }
.top nav a:hover { color:var(--text) }
.top nav { display:flex; gap:18px }
select#lang { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:7px 10px; font:inherit; font-size:14px }
@media (max-width:720px) { .top nav { display:none } }

/* Boutons */
.btns { display:flex; flex-wrap:wrap; gap:12px }
.btn { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; text-decoration:none; font-weight:600; color:#fff; border:1px solid var(--line); background:var(--card) }
.btn svg { width:22px; height:22px; flex:none }
.btn.main { background:linear-gradient(135deg,var(--a),var(--b)); border-color:transparent }
.btn.off { opacity:.6; pointer-events:none }
.btn:hover { filter:brightness(1.1) }

/* Accueil */
.hero { padding:64px 0 32px; position:relative }
.hero::before { content:""; position:absolute; inset:-120px 0 auto; height:520px; background:radial-gradient(600px 300px at 20% 20%,rgba(123,108,255,.28),transparent 70%),radial-gradient(500px 260px at 85% 10%,rgba(255,95,168,.18),transparent 70%); z-index:-1 }
.hero .wrap { display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center }
.hero h1 { font-size:clamp(32px,5vw,52px); line-height:1.1; margin:0 0 16px; letter-spacing:-.02em }
.hero p.sub { color:var(--muted); font-size:18px; margin:0 0 26px }
.hero .tester { display:inline-block; margin-top:18px; font-size:15px }
.hero .note { color:var(--muted); font-size:13px; margin-top:16px; max-width:520px }
.shot-tv { border-radius:16px; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.5) }
@media (max-width:860px) { .hero .wrap { grid-template-columns:1fr } .hero { padding-top:36px } }

section { padding:56px 0 }
section h2 { font-size:clamp(24px,3.4vw,34px); margin:0 0 10px; letter-spacing:-.01em }
section .lead { color:var(--muted); margin:0 0 30px; max-width:640px }

/* Captures */
.gallery { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px }
.gallery img { scroll-snap-align:start; border-radius:14px; border:1px solid var(--line); height:340px; width:auto; flex:none }
.gallery img.tel { height:340px }
@media (max-width:600px) { .gallery img, .gallery img.tel { height:260px } }

/* Fonctions */
.feats { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px }
.feat { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px }
.feat .ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(123,108,255,.25),rgba(255,95,168,.2)); font-size:20px; margin-bottom:12px }
.feat h3 { margin:0 0 6px; font-size:17px }
.feat p { margin:0; color:var(--muted); font-size:15px }

/* Appareils */
.devices { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px }
.dev { display:flex; align-items:center; gap:12px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-weight:500 }
.dev span { font-size:22px }

/* Premium */
.plans { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
@media (max-width:960px) { .plans { grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px) { .plans { grid-template-columns:1fr } }
.plan { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; position:relative }
.plan.best { border-color:var(--a); box-shadow:0 0 0 1px var(--a) inset }
.plan .tag { position:absolute; top:-11px; inset-inline-start:18px; background:linear-gradient(135deg,var(--a),var(--b)); color:#fff; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px }
.plan h3 { margin:0 0 10px; font-size:16px; color:var(--muted); font-weight:600 }
.plan .price { font-size:32px; font-weight:800; letter-spacing:-.02em }
.plan .price small { font-size:14px; color:var(--muted); font-weight:500; margin-inline-start:4px }
.plan p { color:var(--muted); font-size:14px; margin:10px 0 0 }
.small { color:var(--muted); font-size:13px; margin-top:16px }

/* FAQ */
details { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:10px 0 }
summary { cursor:pointer; font-weight:600 }
details p { color:var(--muted); margin:10px 0 0; overflow-wrap:anywhere }

/* Téléchargement */
.dl-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:760px) { .dl-grid { grid-template-columns:1fr } }
.dl { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px }
.dl h2 { display:flex; align-items:center; gap:12px; font-size:24px }
.dl h2 svg { width:30px; height:30px }
.dl .req { color:var(--muted); margin:0 0 18px }
.dl .help { color:var(--muted); font-size:14px; margin:18px 0 0 }
.dl .meta { color:var(--muted); font-size:13px; margin-top:10px }

footer { border-top:1px solid var(--line); padding:28px 0 40px; color:var(--muted); font-size:14px }
footer .links { display:flex; flex-wrap:wrap; gap:18px; margin-bottom:10px }
footer a { color:var(--muted) }