@font-face{font-family:"Fredoka";font-weight:600;src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Fredoka";font-weight:700;src:url(fonts/fredoka-latin-700-normal.woff2) format("woff2");font-display:swap}
:root{--bg:#070b1a;--ink:#eef2ff;--mut:#9aa8cc;--line:rgba(255,255,255,.1);--glass:rgba(255,255,255,.055);--gold:#f5b942;--gold2:#ffd77a;--w:1180px;--g:clamp(16px,4vw,32px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 620px at 12% -8%,rgba(47,111,224,.36),transparent 62%),
  radial-gradient(820px 620px at 96% 4%,rgba(139,92,246,.28),transparent 62%),
  radial-gradient(760px 520px at 50% 112%,rgba(236,72,153,.15),transparent 62%),var(--bg)}
h1,h2,h3,.logo,.btn,.chip b,.filtre,.chiffres b,.cpt{font-family:Fredoka,system-ui,sans-serif;font-weight:700}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--gold2);outline-offset:3px;border-radius:10px}
img{display:block;max-width:100%}

/* ----- en-tête ----- */
.haut{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:12px var(--g);background:rgba(7,11,26,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:.06em}
.logo svg{width:34px;height:34px;filter:drop-shadow(0 4px 10px rgba(245,185,66,.35))}
.logo b{color:var(--gold)}
.haut nav{display:flex;gap:6px;margin-left:12px}
.haut nav a{padding:8px 14px;border-radius:999px;color:var(--mut);font-weight:600;font-size:15px;transition:.2s}
.haut nav a:hover{color:var(--ink);background:var(--glass)}
.compteurs{margin-left:auto;display:flex;gap:8px}
.compteurs[hidden]{display:none}
.cpt{padding:6px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:15px}
.cpt b{color:var(--gold2)}
.cpt.feu b{color:#ff9a62}

main{max-width:var(--w);margin:0 auto;padding:0 var(--g)}
.etiquette{font:700 13px/1 Fredoka,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lead{color:#c4cfee;font-size:clamp(16px,2.2vw,19px);line-height:1.55}
.petit{color:var(--mut);font-size:14px}

/* ----- boutons ----- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:16px;font-size:17px;letter-spacing:.01em;transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.gold{background:linear-gradient(180deg,#ffd77a,#f0a928);color:#2b1c03;box-shadow:0 10px 28px rgba(245,185,66,.32),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.gold:hover{box-shadow:0 14px 34px rgba(245,185,66,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{background:var(--glass);border:1px solid rgba(255,255,255,.18)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}

/* ----- héros ----- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding:clamp(34px,7vw,84px) 0 28px}
.hero h1{font-size:clamp(40px,7vw,78px);line-height:1.02;margin:14px 0 18px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#ffd77a,#ff9fb6 55%,#9db8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{max-width:34em}
.hero-actes{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.chiffres{display:flex;gap:clamp(18px,4vw,40px);list-style:none;padding:0;margin:34px 0 0}
.chiffres li{display:flex;flex-direction:column}
.chiffres b{font-size:clamp(28px,4vw,40px);line-height:1;color:var(--gold2)}
.chiffres span{color:var(--mut);font-size:14px;margin-top:4px}
.phones{position:relative;height:clamp(340px,52vw,560px);display:flex;justify-content:center;align-items:center}
.tel{--tw:clamp(112px,17vw,178px);margin:0 calc(var(--tw) * -.12);width:var(--tw);aspect-ratio:9/16;border-radius:24px;overflow:hidden;border:5px solid #1b2548;background:#000;
  box-shadow:0 34px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.1),0 0 60px rgba(120,140,255,.14);transform:translateY(var(--y)) rotate(var(--r));animation:flotte 6.5s ease-in-out infinite;animation-delay:var(--d)}
.tel img{width:100%;height:100%;object-fit:cover}
@keyframes flotte{0%,100%{transform:translateY(var(--y)) rotate(var(--r))}50%{transform:translateY(calc(var(--y) - 14px)) rotate(var(--r))}}

/* ----- blocs ----- */
.bloc{padding:clamp(28px,5vw,56px) 0}
.bloc-tete{margin-bottom:22px;max-width:46em}
.bloc-tete h2{font-size:clamp(28px,4.4vw,42px);line-height:1.1;margin-bottom:8px}
.bloc-tete p{color:var(--mut)}

/* ----- spé ----- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{--c:#3b82f6;display:inline-flex;align-items:center;gap:9px;padding:10px 18px 10px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);transition:.18s}
.chip i{font-style:normal;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--c) 28%,transparent);font-size:18px}
.chip b{font-size:16px}
.chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 70%,#fff 10%)}
.chip.on{background:color-mix(in srgb,var(--c) 30%,#0b1230);border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent),0 10px 26px color-mix(in srgb,var(--c) 30%,transparent)}
.reprendre{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding:14px 20px;border-radius:18px;background:linear-gradient(90deg,rgba(245,185,66,.16),rgba(245,185,66,.04));border:1px solid rgba(245,185,66,.35);transition:.2s}
.reprendre:hover{transform:translateY(-2px);border-color:var(--gold)}
.reprendre span{font:700 12px/1 Fredoka,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.reprendre b{font-family:Fredoka,sans-serif;font-size:18px}
.reprendre em{font-style:normal;color:var(--mut);flex:1;min-width:0}
.reprendre i{font-style:normal;font-size:26px;color:var(--gold)}

/* ----- défi du jour ----- */
.defi{--c:#3b82f6;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(18px,4vw,44px);padding:clamp(18px,3.4vw,34px);border-radius:28px;background:
  radial-gradient(520px 320px at 8% 50%,color-mix(in srgb,var(--c) 34%,transparent),transparent 70%),linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.defi-img{margin:0;width:clamp(120px,19vw,200px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:5px solid #1b2548;box-shadow:0 22px 44px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--c) 40%,transparent);transform:rotate(-3deg)}
.defi-img img{width:100%;height:100%;object-fit:cover}
.defi-txt{display:flex;flex-direction:column;gap:10px}
.defi-txt h2{font-size:clamp(30px,5vw,52px);line-height:1.05}
.defi-ou{font:600 clamp(17px,2.4vw,22px)/1.3 Fredoka,sans-serif}
.fait{display:inline-flex;align-items:center;min-height:50px;padding:0 20px;border-radius:16px;background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.45);color:#86efac;font:700 17px Fredoka,sans-serif}
.serie{color:#ffb88a;font:600 16px Fredoka,sans-serif}

/* ----- les jeux ----- */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filtre{padding:9px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:15px;color:var(--mut);transition:.18s}
.filtre:hover{color:var(--ink)}
.filtre.on{background:var(--ink);color:#0b1020;border-color:var(--ink)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.jeu{--c:#3b82f6;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--line);transition:transform .22s,box-shadow .22s,border-color .22s}
a.jeu:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 75%,#fff 8%);box-shadow:0 26px 50px rgba(0,0,0,.45),0 0 44px color-mix(in srgb,var(--c) 32%,transparent)}
.aff{position:relative;aspect-ratio:9/13;overflow:hidden;background:#0b1230}
.aff img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
a.jeu:hover .aff img{transform:scale(1.05)}
.aff::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(transparent,rgba(7,11,26,.78))}
.tag,.duree{position:absolute;top:10px;z-index:2;padding:5px 11px;border-radius:999px;background:rgba(7,11,26,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:700 12.5px/1.2 Fredoka,sans-serif;border:1px solid rgba(255,255,255,.14)}
.tag{left:10px}
.duree{right:10px;color:var(--mut)}
.go{position:absolute;z-index:2;left:50%;bottom:16px;transform:translate(-50%,12px);opacity:0;padding:10px 24px;border-radius:14px;background:linear-gradient(180deg,#ffd77a,#f0a928);color:#2b1c03;font:700 16px Fredoka,sans-serif;box-shadow:0 10px 24px rgba(0,0,0,.4);transition:.22s}
a.jeu:hover .go,a.jeu:focus-visible .go{opacity:1;transform:translate(-50%,0)}
.bas{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.bas h3{font-size:20px}
.bas p{color:var(--mut);font-size:14px;line-height:1.45;min-height:2.9em}
.pr{height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:4px}
.pr i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff))}
.pr-txt{color:var(--mut);font-size:13px}
.jeu.bientot{opacity:.9;border-style:dashed;border-color:rgba(255,255,255,.2)}
.art{position:absolute;inset:0;display:grid;place-items:center;background:
  radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 50%,transparent),transparent 62%),repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 14px,transparent 14px 28px),#0b1230}
.art span{font-size:76px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));animation:flotte2 4.5s ease-in-out infinite}
@keyframes flotte2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ----- planche « un chapitre, six angles » ----- */
.planche{border-radius:26px;background:var(--glass);border:1px solid var(--line);padding:clamp(14px,3vw,26px)}
.vide{color:var(--mut);text-align:center;padding:30px 10px}
.pl-tete{--c:#3b82f6;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pl-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:color-mix(in srgb,var(--c) 28%,transparent);font-size:30px}
.pl-tete h3{font-size:26px;line-height:1.1}
.pl-tete p{color:var(--mut);font-size:14px}
.pl-bilan{margin-left:auto;text-align:right;display:flex;flex-direction:column}
.pl-bilan b{font:700 32px/1 Fredoka,sans-serif;color:var(--gold2)}
.pl-bilan span{color:var(--mut);font-size:13px}
.pl-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:16px 0 14px}
.pl-bar i{display:block;height:100%;border-radius:99px;transition:width .6s}
.chaps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.chap{border-radius:16px;background:rgba(7,11,26,.45);border:1px solid var(--line);overflow:hidden;transition:.18s}
.chap.maitrise{border-color:rgba(245,185,66,.5)}
.chap.parfait{border-color:var(--gold);box-shadow:0 0 22px rgba(245,185,66,.2)}
.chap-tete{width:100%;display:flex;align-items:center;gap:14px;padding:13px 16px;text-align:left}
.chap-tete:hover{background:rgba(255,255,255,.05)}
.chap .nom{flex:1;min-width:0;font-weight:600}
.gems{display:flex;gap:6px}
.gem{--c:#3b82f6;--s:0;width:16px;height:16px;border-radius:5px;transform:rotate(45deg) scale(.82);border:2px solid color-mix(in srgb,var(--c) 55%,#fff 0%);background:color-mix(in srgb,var(--c) calc(var(--s) * 33%),transparent);opacity:.9}
.gem[style*="--s:3"]{box-shadow:0 0 12px var(--c);border-color:#fff}
.gem.off{border-style:dashed;border-color:rgba(255,255,255,.22);opacity:.5}
.etat{min-width:106px;text-align:right;color:var(--mut);font-size:14px;font-weight:600}
.chap.maitrise .etat,.chap.parfait .etat{color:var(--gold2)}
.fl{color:var(--mut);font-size:22px;transition:transform .2s}
.chap.ouvert .fl{transform:rotate(90deg)}
.chap-jeux{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;padding:4px 14px 14px}
.cj{--c:#3b82f6;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--c) 14%,rgba(255,255,255,.04));border:1px solid color-mix(in srgb,var(--c) 40%,transparent);transition:.18s}
a.cj:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--c) 26%,rgba(255,255,255,.04))}
.cj i{font-style:normal;font-size:20px}
.cj b{flex:1;font:600 15px Fredoka,sans-serif}
.cj em{font-style:normal;letter-spacing:.06em;color:var(--mut);font-size:14px}
.cj em.s1,.cj em.s2,.cj em.s3{color:var(--gold2)}
.cj.off{opacity:.45;border-style:dashed}

/* ----- pourquoi ----- */
.raisons{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.raisons article{position:relative;padding:26px 24px;border-radius:22px;background:var(--glass);border:1px solid var(--line)}
.raisons b{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(245,185,66,.16);color:var(--gold2);font:700 19px Fredoka,sans-serif;margin-bottom:14px}
.raisons h3{font-size:20px;margin-bottom:8px}
.raisons p{color:var(--mut);font-size:15px}

/* ----- pied ----- */
.pied{max-width:var(--w);margin:30px auto 0;padding:34px var(--g) 50px;border-top:1px solid var(--line);color:var(--mut);display:flex;flex-direction:column;gap:6px}
.pied b{color:var(--ink);font-family:Fredoka,sans-serif;letter-spacing:.06em}
.pied .petit{max-width:56em}

/* ----- téléphone ----- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;text-align:left}
  .phones{order:-1;height:clamp(250px,58vw,360px);margin-bottom:-6px}
  .haut nav{display:none}
}
@media(max-width:640px){
  .haut{padding:10px 16px}
  .logo{font-size:18px}
  .grille{grid-template-columns:repeat(2,1fr);gap:12px}
  .bas{padding:11px 12px 13px}.bas h3{font-size:17px}.bas p{display:none}
  .defi{grid-template-columns:1fr;text-align:left;justify-items:start}
  .defi-img{width:140px}
  .chip{padding:8px 14px 8px 9px}.chip i{width:28px;height:28px;font-size:16px}.chip b{font-size:15px}
  .chap-tete{flex-wrap:wrap;gap:8px 12px}.chap .nom{flex:1 1 100%}.gems{order:2}.etat{order:3;margin-left:auto}.fl{order:4}
  .pl-bilan{margin-left:0;text-align:left;width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}