:root{--nuit:#1b1e4b;--indigo:#3a45a0;--fond:#f3f4fb;--trait:#dfe2f3;--doux:#5b6090;--orange:#ffa100;
--ciel:#039be5;--vert:#43a047;--ambre:#fb8c00;--violet:#8e24aa;--corail:#f0524f}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--nuit);font:1.0625rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--indigo)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:6px}
.in{max-width:68rem;margin:0 auto;padding:0 20px}

.bar{background:var(--indigo);color:#fff;position:sticky;top:0;z-index:5}
.bar .in{display:flex;align-items:center;gap:22px;min-height:60px;flex-wrap:wrap}
.bar a{color:#fff;text-decoration:none;font-weight:600}
.bar a:hover{text-decoration:underline}
.bar .marque{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;margin-right:auto}
.bar .marque img{width:30px;height:30px}

.hero{background:var(--indigo);color:#fff;padding:44px 0 0;position:relative;z-index:1}
html,body{overflow-x:clip}
.hero+section{padding-top:96px}
.hero .in{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:end}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.06;letter-spacing:-.025em;font-weight:850;margin:0 0 18px}
.hero p{font-size:1.15rem;max-width:34rem;margin:0 0 26px;color:#e3e6ff}
.hero .texte{padding-bottom:90px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:800;padding:15px 24px;border-radius:999px;font-size:1.02rem;line-height:1.2}
.btn.play{background:var(--orange);color:#2a1800;box-shadow:0 3px 0 #b97300}
.btn.play:hover{background:#ffb327}
.btn.sec{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn.sec:hover{background:rgba(255,255,255,.24)}
.btn.nuit{background:var(--nuit);color:#fff}
.btn.nuit:hover{background:#2a2e6e}

.tel{border:7px solid var(--nuit);border-radius:34px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(27,30,75,.28)}
.tel img{width:100%;height:auto}
.scene{position:relative;height:clamp(300px,42vw,470px)}
.scene .tel{position:absolute;width:clamp(150px,22vw,235px)}
.scene .a{left:6%;bottom:-6px;transform:rotate(-4deg)}
.scene .b{right:2%;bottom:-40px;transform:rotate(3deg)}

section{padding:56px 0}
h2{font-size:clamp(1.55rem,3.6vw,2.2rem);line-height:1.15;letter-spacing:-.015em;font-weight:800;margin:0 0 12px}
.lead{max-width:40rem;color:var(--doux);margin:0 0 26px}

.niveaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.niv{border-radius:22px;padding:20px 18px;color:#fff;font-weight:800;font-size:1.25rem;text-decoration:none;display:block;box-shadow:0 6px 16px rgba(27,30,75,.12)}
.niv small{display:block;font-weight:600;font-size:.88rem;opacity:.92;margin-top:2px}
a.niv:hover{filter:brightness(1.07)}
.n6{background:var(--ciel)}.n5{background:var(--vert)}.n4{background:var(--ambre)}.n3{background:var(--violet)}.nb{background:var(--corail)}

.rang{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:30px 0}
.rang.inv .tel-col{order:-1}
.rang .tel{max-width:250px;margin:0 auto}
.rang h3{font-size:1.45rem;margin:0 0 8px;font-weight:800;line-height:1.2}
.rang ul{padding-left:1.2rem;margin:12px 0 0}
.rang li{margin:6px 0}

.bande{background:#fff;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--indigo)}
details[open] summary::after{content:"\2212"}
.faq details p{margin:10px 0 0;color:var(--doux);max-width:46rem}

.final{background:var(--indigo);color:#fff;text-align:center}
.final h2{color:#fff}
.final p{color:#e3e6ff;margin:0 auto 22px;max-width:34rem}

footer{background:var(--nuit);color:#c9cdf5;padding:34px 0;font-size:.95rem}
footer a{color:#fff}
footer .liens{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px}

.doc{max-width:48rem;margin:0 auto;padding:36px 20px 60px}
.doc h1{font-size:clamp(1.7rem,4vw,2.3rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 6px}
.doc h2{font-size:1.25rem;margin:30px 0 8px}
.doc p,.doc li{max-width:44rem}
.doc .date{color:var(--doux)}
.doc ul{padding-left:1.3rem}

@media(max-width:820px){
 .hero .in{grid-template-columns:1fr;gap:10px}
 .hero .texte{padding-bottom:10px}
 .scene{height:340px}
 .scene .tel{width:150px}
 .scene .a{left:calc(50% - 158px);right:auto}
 .scene .b{left:calc(50% + 8px);right:auto}
 .bar .in{gap:16px}
 .rang{grid-template-columns:1fr;gap:22px}
 .rang.inv .tel-col{order:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.mat{background:#fff;border-radius:16px;padding:16px 18px;font-weight:800;border-left:8px solid var(--indigo);box-shadow:0 2px 8px rgba(27,30,75,.08)}
.mat small{display:block;font-weight:500;color:var(--doux);font-size:.9rem;margin-top:2px}
.mat.n6{border-color:var(--ciel)}.mat.n5{border-color:var(--vert)}.mat.n4{border-color:var(--ambre)}.mat.n3{border-color:var(--violet)}.mat.nb{border-color:var(--corail)}
@media(max-width:460px){.bar .in a:last-child{display:none}}
@media(max-width:560px){.niveaux .nb{grid-column:1/-1}}
@media(max-width:460px){.bar .in .marque{font-size:0;gap:0}.bar .in{gap:14px}.bar .in a{font-size:.95rem}}