:root{
  --nuit:#0e1830;
  --nuit-2:#14233c;
  --nuit-3:#22345a;
  --ambre:#ffb21e;
  --texte:#fff;
  --doux:#d3dcea;
  --titres:'Arial Black','Segoe UI Black',Impact,sans-serif;
  --biais:12px; /* coupe en biais, la signature Paddock */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--nuit);color:var(--texte);font:18px/1.6 'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2{font-family:var(--titres);font-weight:900;line-height:1.08;margin:0;text-transform:uppercase}
h1{font-size:clamp(40px,8vw,92px)}
h2{font-size:clamp(28px,4vw,42px);margin-bottom:20px}
p{margin:0 0 16px}
:focus-visible{outline:3px solid var(--ambre);outline-offset:3px}

.nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,48px);background:rgba(14,24,48,.96);border-bottom:1px solid rgba(255,255,255,.1)}
.marque{display:flex;align-items:center;gap:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.marque svg{width:60px}
.nav nav{display:flex;gap:clamp(14px,3vw,32px)}
.nav nav a{text-decoration:none;color:var(--doux);font-size:16px;padding:6px 0}
.nav nav a:hover{color:var(--ambre)}

.surtitre{color:var(--ambre);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:15px;margin-bottom:12px}

.hero{text-align:center;padding:clamp(48px,8vw,96px) clamp(16px,4vw,48px) 0;background:radial-gradient(ellipse at 50% 20%,var(--nuit-3),var(--nuit) 70%)}
.accroche{font-size:clamp(20px,2.4vw,26px);color:var(--doux);max-width:760px;margin:24px auto 16px}
.statut{display:inline-flex;align-items:center;gap:10px;font-weight:600;margin-bottom:clamp(32px,5vw,56px)}
.statut span{width:10px;height:10px;background:var(--ambre);transform:skewX(-8deg)}

.ecran{margin:0;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.hero .ecran{max-width:1180px;margin-inline:auto}

.bloc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,112px) clamp(16px,4vw,48px)}
.texte p{color:var(--doux)}
.texte ul{list-style:none;margin:24px 0 0;padding:0}
.texte li{color:var(--doux);padding:14px 0 14px 20px;border-left:3px solid var(--ambre);margin-bottom:12px}
.texte li b{color:var(--texte)}
.inverse .texte{order:2}

.plan{background:var(--nuit-2);border:1px solid rgba(255,255,255,.14);padding:clamp(16px,3vw,28px)}
.plan-tete{display:flex;justify-content:space-between;font-weight:700;margin-bottom:18px}
.plan-tete span:last-child{color:var(--doux);font-weight:400;font-size:14px}
.plan-ligne{display:grid;grid-template-columns:76px repeat(6,1fr);gap:6px;align-items:center;margin-bottom:6px}
.plan-ligne span{font-size:15px;color:var(--doux)}
.plan-ligne i{display:block;aspect-ratio:1;background:rgba(255,255,255,.1)}
.plan-ligne i.a{background:var(--ambre)}

.soutien{text-align:center;background:var(--nuit-2);padding:clamp(56px,8vw,96px) clamp(16px,4vw,48px)}
.soutien p{color:var(--doux);max-width:620px;margin-inline:auto}
.boutons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:28px}
.bouton{display:inline-block;padding:15px 34px;background:var(--ambre);color:var(--nuit);font-weight:800;text-decoration:none;clip-path:polygon(var(--biais) 0,100% 0,calc(100% - var(--biais)) 100%,0 100%)}
.bouton:hover{background:#ffc247}
.bouton.second{background:#fff}
.bouton.second:hover{background:var(--doux)}

h3{font-family:var(--titres);font-weight:900;text-transform:uppercase;font-size:20px;margin:0 0 16px}
.centre{text-align:center;max-width:760px;margin:0 auto 40px}
.intro{color:var(--doux);font-size:clamp(18px,2vw,21px)}
.hero-boutons{margin:0 0 24px}

/* Bandeau des atouts, sous l'en-tête */
.atouts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;max-width:1240px;margin:clamp(48px,6vw,72px) auto 0;padding:0 clamp(16px,4vw,48px)}
.atouts div{background:var(--nuit-2);padding:20px 22px;border-top:3px solid var(--ambre)}
.atouts b{display:block;font-family:var(--titres);text-transform:uppercase;font-size:17px;margin-bottom:4px}
.atouts span{color:var(--doux);font-size:16px;line-height:1.45}

/* Avant / après pour les streamers */
.comparer{max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,112px) clamp(16px,4vw,48px)}
.colonnes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.colonne{padding:clamp(20px,3vw,32px);border:1px solid rgba(255,255,255,.14)}
.colonne ul{list-style:none;margin:0;padding:0}
.colonne li{padding:10px 0 10px 30px;position:relative;color:var(--doux);border-top:1px solid rgba(255,255,255,.08)}
.colonne li::before{position:absolute;left:0;top:10px;font-weight:900}
.avant{background:rgba(255,255,255,.03)}
.avant h3{color:var(--doux)}
.avant li::before{content:"\2013";color:#8a97ad}
.apres{background:var(--nuit-2);border-color:var(--ambre)}
.apres h3{color:var(--ambre)}
.apres li{color:var(--texte)}
.apres li::before{content:"\2713";color:var(--ambre)}

/* Trois étapes */
.etapes{background:var(--nuit-2);padding:clamp(56px,8vw,96px) clamp(16px,4vw,48px)}
.etapes ol{list-style:none;counter-reset:etape;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto;padding:0}
.etapes li{counter-increment:etape;background:var(--nuit);padding:28px 24px;border:1px solid rgba(255,255,255,.12)}
.etapes li::before{content:counter(etape,decimal-leading-zero);display:inline-block;font-family:var(--titres);font-size:22px;color:var(--nuit);background:var(--ambre);padding:2px 16px;margin-bottom:16px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.etapes b{display:block;font-family:var(--titres);text-transform:uppercase;font-size:20px;margin-bottom:6px}
.etapes span{color:var(--doux)}

/* Questions */
.faq{max-width:820px;margin:0 auto;padding:clamp(56px,8vw,112px) clamp(16px,4vw,48px)}
.faq h2{text-align:center;margin-bottom:32px}
.faq details{border-bottom:1px solid rgba(255,255,255,.12)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:26px;color:var(--ambre);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--ambre)}
.faq details p{color:var(--doux);padding-bottom:8px}

footer{text-align:center;padding:36px 16px;border-top:1px solid rgba(255,255,255,.1)}
footer a{color:var(--ambre)}
.petit{font-size:14px;color:var(--doux);margin:0}

@media (max-width:980px){
  .atouts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .bloc,.colonnes,.etapes ol{grid-template-columns:1fr}
  .inverse .texte{order:0}
  .nav{flex-wrap:wrap;row-gap:4px}
  .nav nav{width:100%;justify-content:space-between;gap:12px;overflow-x:auto}
  .nav nav a{font-size:15px;white-space:nowrap}
}
@media (max-width:480px){
  body{font-size:17px}
  .atouts{grid-template-columns:1fr}
  .marque svg{width:48px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}