:root { --navy:#0f1f4d; --gold:#ffd640; --orange:#ff8c1f; --sky:#7fbdf6; --white:#fff; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; scrollbar-color:var(--orange) var(--navy); }
body { font-family:"Nunito",system-ui,sans-serif; font-weight:700; color:var(--navy); background:var(--sky); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
::selection { background:var(--gold); color:var(--navy); }
a { color:inherit; text-underline-offset:3px; }
a:focus-visible, .btn:focus-visible { outline:3px solid var(--gold); outline-offset:3px; border-radius:8px; }
img, video { display:block; max-width:100%; }

/* Le texte du jeu : Lilita One, blanc cerné de bleu marine */
.type { font-family:"Lilita One","Nunito",sans-serif; font-weight:400; color:#fff; -webkit-text-stroke:.09em var(--navy); paint-order:stroke fill; text-shadow:0 .07em 0 rgba(15,31,77,.5); letter-spacing:.01em; line-height:1.05; text-wrap:balance; }
.type.small { font-size:clamp(1.15rem,2vw,1.6rem); }
h2.type { font-size:clamp(2.4rem,6vw,4.6rem); text-align:center; }
.intro { max-width:34em; margin:18px auto 0; text-align:center; font-size:clamp(1.08rem,1.6vw,1.3rem); line-height:1.5; }

.top { position:absolute; inset:0 0 auto 0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:16px clamp(16px,3vw,32px); color:#fff; text-shadow:0 1px 4px rgba(15,31,77,.7); font-weight:800; }
.brand { display:inline-flex; gap:8px; align-items:center; text-decoration:none; font-size:1.1rem; }
.top nav { display:flex; gap:20px; }
.top nav a { text-decoration:none; }
.top nav a:hover { text-decoration:underline; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:999px; border:4px solid #fff; font-family:"Lilita One",sans-serif; font-weight:400; font-size:1.2rem; text-decoration:none; }
.go { background:var(--orange); color:#fff; box-shadow:0 6px 0 rgba(15,31,77,.45); transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s; -webkit-text-stroke:.05em #8a3c00; paint-order:stroke fill; }
.go img { background:#fff; border-radius:6px; padding:3px; box-sizing:content-box; width:18px; height:20px; }
.go svg { background:#fff; color:#111; border-radius:6px; padding:3.5px 4px; box-sizing:content-box; width:16px; height:19px; }
.go img, .go svg { flex:none; } /* le logo garde sa taille quand le texte est long */
.go:hover { transform:translateY(-3px); box-shadow:0 9px 0 rgba(15,31,77,.45); }
.go:active { transform:translateY(4px); box-shadow:0 2px 0 rgba(15,31,77,.45); }
.soon { background:var(--navy); color:#fff; border-color:rgba(255,255,255,.55); font-size:1.05rem; }
.row { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* L'accueil : l'image pleine largeur, le texte dans le ciel, à gauche du volcan */
.hero { --y:clamp(64px,8vh,84px); --t:clamp(2.6rem,min(4.5vw,7vh),4.2rem); position:relative; height:100svh; min-height:640px; overflow:hidden; background:#2a1a4a; isolation:isolate; }
.hero-art { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 70%; }
.hero-copy { position:absolute; inset:var(--y) auto auto clamp(20px,5vw,84px); width:min(46%,640px); }
.hero h1 { font-size:var(--t); max-width:7em; }
.hero h1 span { color:var(--gold); }
.hero-go { position:absolute; inset:calc(var(--y) + var(--t)*3.3 + 20px) auto auto clamp(20px,5vw,84px); display:grid; gap:14px; justify-items:start; }
.hero-go .row { justify-content:flex-start; }
.only-phone { display:none; }

/* Les mondes : chaque bande est un versant, la page descend */
.worlds { padding-top:clamp(56px,9vw,110px); background:#dfe2fb; }
.worlds > .type, .worlds > .intro { padding-inline:16px; }
.world { background:var(--bg); color:var(--ink); margin-top:clamp(40px,6vw,70px); clip-path:polygon(0 0,100% 56px,100% 100%,0 100%); padding:clamp(84px,9vw,120px) 16px clamp(50px,7vw,90px); }
.world + .world { margin-top:-56px; }
.world.flip { clip-path:polygon(0 56px,100% 0,100% 100%,0 100%); }
.world-in { max-width:1120px; margin:auto; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,6vw,80px); align-items:center; }
.flip .art { order:2; }
.art { position:relative; aspect-ratio:1/1.08; }
.map { position:absolute; left:0; top:0; width:68%; height:100%; object-fit:cover; object-position:50% 45%; border:7px solid #fff; border-radius:26px; transform:rotate(-2.5deg); box-shadow:0 18px 36px rgba(15,31,77,.28); }
.art .clip { position:absolute; right:0; bottom:0; width:46%; aspect-ratio:9/16; object-fit:cover; border:7px solid #fff; border-radius:26px; transform:rotate(2.5deg); box-shadow:0 18px 36px rgba(15,31,77,.34); background:var(--navy); }
.flip .map { left:auto; right:0; transform:rotate(2.5deg); }
.flip .art .clip { right:auto; left:0; transform:rotate(-2.5deg); }
.say h3 { font-size:clamp(2.3rem,5vw,4.2rem); color:var(--hl); }
.say p { margin-top:16px; font-size:clamp(1.12rem,1.7vw,1.35rem); line-height:1.5; max-width:30em; font-weight:800; }

/* Ce qu'on peut faire */
.fun { background:#4a57e8; color:#fff; padding:clamp(120px,12vw,160px) 16px clamp(60px,8vw,110px); margin-top:-56px; clip-path:polygon(0 56px,100% 0,100% 100%,0 100%); }
.fun-in { max-width:1040px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,340px); gap:clamp(32px,6vw,80px); align-items:center; }
.fun h2.type { text-align:left; font-size:clamp(2.2rem,4.6vw,3.8rem); }
.fun ul { list-style:none; padding:0; margin-top:26px; display:grid; gap:14px; font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.4; }
.fun li b { display:block; font-size:clamp(1.7rem,3vw,2.3rem); color:var(--gold); }
.clip.tall { width:100%; aspect-ratio:9/16; object-fit:cover; border:8px solid #fff; border-radius:30px; box-shadow:0 20px 40px rgba(15,31,77,.4); background:var(--navy); }

/* Les dragons */
.dragons { padding:clamp(70px,9vw,110px) 16px; background:var(--sky); }
.wall { max-width:1120px; margin:36px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:6px 4px; }
.wall figure { display:grid; justify-items:center; gap:2px; }
.wall img { width:100%; max-width:140px; height:auto; aspect-ratio:1; object-fit:contain; transition:transform .25s cubic-bezier(.2,.9,.3,1.4); }
.wall figure:hover img { transform:translateY(-8px) scale(1.08); }
.wall figcaption { font-size:.92rem; font-weight:800; text-align:center; }

/* Les luges */
.sleds { background:#2a1020; color:#ffe9d6; padding:clamp(70px,9vw,110px) 16px; }
.line { max-width:1120px; margin:34px auto 0; display:grid; grid-template-columns:repeat(6,1fr); gap:8px; align-items:end; }
.line img { width:100%; height:auto; }

/* L'arrivée */
.finish { position:relative; background:var(--gold); padding:0 16px clamp(50px,7vw,80px); text-align:center; }
.checks { height:48px; margin:0 -16px clamp(44px,6vw,70px); background:conic-gradient(var(--navy) 25%,#fff 0 50%,var(--navy) 0 75%,#fff 0) 0 0/48px 48px; }
.finish h2.type { font-size:clamp(2.8rem,8vw,6rem); }
.finish .row { margin-top:26px; }
.parents { max-width:38em; margin:48px auto 0; padding-top:24px; border-top:3px solid rgba(15,31,77,.25); font-size:1.02rem; line-height:1.55; }
.parents h3 { font-family:"Lilita One",sans-serif; font-weight:400; font-size:1.4rem; margin-bottom:6px; }
.foot { background:var(--navy); color:#fff; padding:22px 16px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:.95rem; }

/* La barre de progression du jeu, le long de la page */
.hud { position:fixed; right:16px; top:50%; translate:0 -50%; z-index:6; display:grid; justify-items:center; gap:8px; opacity:0; transition:opacity .3s; pointer-events:none; }
.hud.on { opacity:1; }
.flag { width:26px; height:18px; border:2px solid #fff; border-radius:3px; background:conic-gradient(#111 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/10px 10px; }
.track { position:relative; width:14px; height:44vh; border:3px solid #fff; border-radius:9px; background:rgba(15,31,77,.75); }
.fill { position:absolute; inset:auto 0 0 0; height:calc(var(--p,0)*100%); background:#38b6ff; border-radius:6px; }
.me { position:absolute; left:50%; bottom:calc(var(--p,0)*100%); width:44px; max-width:none; translate:-50% 50%; filter:drop-shadow(0 2px 2px rgba(15,31,77,.5)); }

@media (max-width:900px) {
  .hero-art { object-position:50% 100%; }
  .hero-copy { inset:58px 12px auto; width:auto; text-align:center; }
  .hero h1 { font-size:clamp(1.3rem,7.2vw,3.4rem); max-width:none; white-space:nowrap; }
  .hero h1 span { font-size:1.6em; }
  .hero-go { inset:auto 12px calc(14px + env(safe-area-inset-bottom)); justify-items:center; text-align:center; }
  .hero-go .row { justify-content:center; width:100%; flex-wrap:nowrap; gap:8px; }
  .hero-go .btn { flex:1 1 0; width:auto; min-width:0; max-width:300px; padding:11px 6px; gap:6px; border-width:3px; font-size:clamp(.74rem,3.5vw,1.1rem); white-space:nowrap; }
  .only-phone { display:block; margin-top:6px; font-size:clamp(.72rem,3.95vw,1.2rem); } .only-wide { display:none; }
  .world-in, .fun-in { grid-template-columns:1fr; }
  .flip .art { order:0; }
  .art { max-width:440px; width:100%; margin:auto; }
  .say { text-align:center; } .say p { margin-inline:auto; }
  .fun h2.type { text-align:center; }
  .fun .clip.tall { max-width:300px; margin:auto; }
  .line { grid-template-columns:repeat(3,1fr); }
  .hud { display:none; }
  .btn { width:min(100%,340px); }
  .soon { background:rgba(15,31,77,.92); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .btn, .wall img { transition:none; } }