:root{
  --bg:#120c28;--bg2:#1c1440;--card:#221a4a;--line:#3a2f74;
  --fg:#f2eefe;--muted:#b4abd8;--gold:#ffc83d;--gold2:#e79b12;--blue:#4aa8ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg) radial-gradient(1200px 600px at 70% -10%,#3b2290 0%,transparent 60%) no-repeat;
  overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;
  background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 80px,#cfc6ff,transparent),
  radial-gradient(1.5px 1.5px at 200px 150px,#fff,transparent),radial-gradient(1px 1px at 300px 40px,#fff,transparent);
  background-size:340px 220px}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
[data-lang="fr"] [lang="en"],[data-lang="en"] [lang="fr"]{display:none}

/* Barre du haut */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:10px 16px;
  background:rgba(18,12,40,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-weight:900;letter-spacing:.04em}
.brand img{border-radius:9px}
.links{display:flex;gap:18px;margin-left:auto}
.links a{color:var(--muted);text-decoration:none;font-weight:600}
.links a:hover{color:var(--fg)}
.lang{border:2px solid var(--line);background:var(--card);color:var(--fg);font-weight:800;border-radius:10px;padding:5px 10px;cursor:pointer}

/* Hero */
.hero{max-width:1100px;margin:0 auto;padding:56px 16px 40px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero-icon{width:112px;border-radius:26px;box-shadow:0 10px 40px rgba(255,200,61,.25)}
h1{font-size:clamp(2.6rem,7vw,4.6rem);line-height:1;margin:18px 0 8px;font-weight:900;letter-spacing:.05em;
  color:var(--gold);text-shadow:0 4px 0 var(--gold2),0 8px 0 #6a3a00,0 14px 30px rgba(0,0,0,.6)}
.tag{font-size:1.4rem;font-weight:800;margin:14px 0 6px}
.sub{color:var(--muted);max-width:34em;margin:0 0 22px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-weight:900;letter-spacing:.06em;border-radius:14px;padding:14px 28px;font-size:1.05rem}
.btn.gold{color:#3a2100;background:linear-gradient(#ffe07a,var(--gold) 45%,var(--gold2));box-shadow:0 5px 0 #8a5200,0 10px 24px rgba(0,0,0,.4);
  border:2px solid #fff3c4}
.btn.gold:active{transform:translateY(3px);box-shadow:0 2px 0 #8a5200}
.btn.ghost{color:var(--fg);border:2px solid var(--line);background:var(--card)}
.btn.disabled{color:var(--muted);border:2px dashed var(--line);background:transparent}
.free{color:var(--muted);font-size:.9rem;margin-top:16px}
.hero-phone{justify-self:center;max-width:300px;border-radius:30px;padding:10px;background:#0b0818;border:3px solid var(--line);
  box-shadow:0 0 0 6px #0b0818,0 30px 60px rgba(0,0,0,.6);transform:rotate(3deg)}
.hero-phone img{border-radius:22px}

/* Sections */
section{scroll-margin-top:70px}
h2{text-align:center;font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 28px;font-weight:900}
.features,.races,.shots,.download{max-width:1100px;margin:0 auto;padding:48px 16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:2px solid var(--line);border-radius:18px;padding:20px}
.card h3{margin:8px 0 6px;font-size:1.1rem}
.card p{margin:0;color:var(--muted)}
.ico{font-size:2rem}
.races img{margin:0 auto;border-radius:18px;border:2px solid var(--line);max-width:820px;width:100%}

.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 16px}
.strip figure{margin:0;flex:0 0 220px;scroll-snap-align:start}
.strip img{border-radius:18px;border:2px solid var(--line)}
.strip figcaption{text-align:center;color:var(--muted);font-size:.9rem;margin-top:8px}

.download{text-align:center}
.download .cta{justify-content:center;margin:18px 0}
.muted{color:var(--muted);font-size:.9rem}

.foot{border-top:1px solid var(--line);text-align:center;padding:28px 16px 40px;color:var(--muted);font-size:.9rem}
.foot p{margin:4px 0}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:32px}
  .hero-icon{margin:0 auto}
  .sub{margin-left:auto;margin-right:auto}
  .cta{justify-content:center}
  .hero-phone{max-width:240px}
  .grid{grid-template-columns:1fr}
  .links{display:none}
  .lang{margin-left:auto}
  .strip figure{flex-basis:170px}
}
@media (min-width:821px) and (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}