/* Livre animé (flipbook) — pages lecons/livre-anime*.html, moteur js/livre-anime.js */
:root{
  --la-ink:#2b2140; --la-paper:#fffaf0; --la-paper2:#f1e5cb; --la-pink:#e0127e; --la-blue:#16a3d9;
  --la-gold:#ffc94a; --la-ok:#18a957; --la-bad:#e5484d; --la-try:#f59e0b;
  --la-bg1:#5b1d3a; --la-bg2:#2a0f24; --la-bg3:#12071a;
}
.la-body{margin:0; min-height:100vh; font-family:Andika,system-ui,sans-serif; color:#fff; overflow-x:hidden;
  background:radial-gradient(1200px 700px at 50% -10%,var(--la-bg1) 0%,var(--la-bg2) 45%,var(--la-bg3) 100%)}
.la-body *{box-sizing:border-box}
.la-bulbs{position:fixed; inset:0 0 auto 0; height:10px; display:flex; justify-content:space-around; pointer-events:none; z-index:2}
.la-bulbs i{width:8px;height:8px;border-radius:50%;background:#ffd36b;box-shadow:0 0 12px #ffb300;animation:la-twinkle 1.6s infinite alternate}
.la-bulbs i:nth-child(odd){animation-delay:.8s}
@keyframes la-twinkle{to{opacity:.25}}
.la-top{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 6px}
.la-top a{color:#ffd9ec; text-decoration:none; font-weight:700}
.la-top a:hover{text-decoration:underline}
.la-title{font:700 clamp(1rem,2.4vw,1.4rem) Fredoka,sans-serif; margin:0; text-align:center;
  background:linear-gradient(90deg,#ffd36b,#ff7ab8); -webkit-background-clip:text; background-clip:text; color:transparent}
.la-title .e{-webkit-text-fill-color:initial}

/* ---------- book ---------- */
.la-wrap{max-width:1180px; margin:0 auto; padding:8px 16px 0; display:flex; justify-content:center}
.la-book{position:relative; width:min(100%,1100px); aspect-ratio:1.62; perspective:2600px; transition:transform .9s cubic-bezier(.6,.05,.25,1)}
.la-book.closed{transform:translateX(-25%)}
.la-book::before{content:""; position:absolute; left:4%; right:4%; bottom:-28px; height:40px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent); filter:blur(6px)}
.la-half{position:absolute; top:0; width:50%; height:100%}
.la-half.l{left:0} .la-half.r{right:0}
.la-leaf{position:absolute; top:0; right:0; width:50%; height:100%; transform-origin:left center; transform-style:preserve-3d; z-index:20;
  transition:transform 1.05s cubic-bezier(.45,.05,.2,1)}
.la-leaf.flipped{transform:rotateY(-180deg)}
.la-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; color:var(--la-ink);
  background:linear-gradient(90deg,var(--la-paper2) 0,var(--la-paper) 7%,var(--la-paper) 100%);
  border-radius:4px 14px 14px 4px; box-shadow:inset 0 0 0 1px rgba(90,60,30,.12),0 18px 40px rgba(0,0,0,.35)}
.la-face.back,.la-half.l>.la-face{border-radius:14px 4px 4px 14px; background:linear-gradient(270deg,var(--la-paper2) 0,var(--la-paper) 7%,var(--la-paper) 100%)}
.la-face.back{transform:rotateY(180deg)}
.la-face::after{content:""; position:absolute; top:0; bottom:0; left:0; width:9%; pointer-events:none; z-index:4;
  background:linear-gradient(90deg,rgba(80,50,20,.22),transparent)}
.la-face.back::after,.la-half.l>.la-face::after{left:auto; right:0; background:linear-gradient(270deg,rgba(80,50,20,.22),transparent)}
.la-leaf .la-face::before{content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(255,255,255,.28) 60%,transparent); animation:la-sheen 1.05s ease-in-out}
@keyframes la-sheen{from{opacity:0}50%{opacity:1}to{opacity:0}}
.la-empty{background:transparent!important; box-shadow:none!important}
.la-empty::after{display:none}

/* cover */
.la-cover{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:7%; color:#fff!important;
  background:linear-gradient(150deg,#b3124f,#6a0b3a 60%,#3a0624)!important}
.la-cover::after{display:none}
.la-cover .tag{font:600 .85rem Fredoka,sans-serif; letter-spacing:2px; text-transform:uppercase; color:#ffd36b}
.la-cover h2{font:700 clamp(1.5rem,3.6vw,2.8rem) Fredoka,sans-serif; margin:.3em 0; text-shadow:0 4px 0 rgba(0,0,0,.25)}
.la-cover .emo{font-size:clamp(3rem,7vw,5.5rem); animation:la-floaty 3s ease-in-out infinite}
.la-cover .thumb{width:62%; aspect-ratio:4/3; border-radius:14px; background-size:cover; background-position:center; box-shadow:0 12px 30px rgba(0,0,0,.4); border:4px solid #ffd36b; margin:.6em 0; animation:la-floaty 4s ease-in-out infinite}
.la-cover .by{opacity:.85; font-size:.92rem}
.la-cover .la-btn{margin-top:1em}
@keyframes la-floaty{50%{transform:translateY(-8px) rotate(-2deg)}}
.la-endpaper{background:repeating-linear-gradient(45deg,#7a0d44 0 14px,#6a0b3a 14px 28px)!important}

/* scene (illustration page) */
.la-scene{position:absolute; inset:0; overflow:hidden; background:#1a0d12}
.la-scene .bg{position:absolute; inset:-8%; background-size:cover; background-position:center; filter:blur(18px) brightness(.55) saturate(1.3); transform:scale(1.1)}
.la-scene .art{position:absolute; inset:6% 6% 9%; display:flex; align-items:center; justify-content:center; perspective:900px}
.la-scene .art img{max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.5); border:5px solid #fff;
  transform-origin:50% 100%; opacity:0}
.la-scene.live .art img{animation:la-popup 1.1s cubic-bezier(.3,1.4,.5,1) forwards, la-kb 14s 1.1s ease-in-out infinite alternate}
@keyframes la-popup{0%{opacity:0; transform:rotateX(75deg) scale(.7)}60%{opacity:1}100%{opacity:1; transform:none}}
@keyframes la-kb{from{transform:scale(1)}to{transform:scale(var(--kz,1.12)) translate(var(--kx,0),var(--ky,0))}}
.la-scene .sweep{position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%); transform:translateX(-120%)}
.la-scene.live .sweep{animation:la-sweep 5s 1.2s ease-in-out infinite}
@keyframes la-sweep{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.la-scene .fx{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.la-fl{position:absolute; bottom:-10%; font-size:1.6rem; animation:la-up linear forwards; opacity:0; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
@keyframes la-up{0%{opacity:0; transform:translate(0,0) rotate(0)}12%{opacity:1}100%{opacity:0; transform:translate(var(--dx,20px),-560px) rotate(var(--rt,30deg))}}
.la-scene .pgnum{position:absolute; bottom:2.5%; left:0; right:0; text-align:center; font:700 .78rem Fredoka,sans-serif; color:rgba(255,255,255,.65); z-index:3}
.la-scene .chip{position:absolute; left:50%; top:4%; transform:translateX(-50%); z-index:3; font:700 clamp(.75rem,1.4vw,.95rem) Fredoka,sans-serif;
  background:rgba(0,0,0,.5); color:#fff; padding:.35em .9em; border-radius:999px; white-space:nowrap; backdrop-filter:blur(4px); opacity:0}
.la-scene.live .chip{animation:la-fadein .8s 1.1s forwards}
@keyframes la-fadein{to{opacity:1}}

/* text page */
.la-tp{position:absolute; inset:0; padding:6% 7% 5% 9%; display:flex; flex-direction:column}
.la-tp .head{display:flex; justify-content:space-between; align-items:center; gap:8px; font:600 .78rem Fredoka,sans-serif; color:#9a7b4f; letter-spacing:1px; text-transform:uppercase}
.la-tp .txt{flex:1; display:flex; flex-direction:column; justify-content:center; gap:.55em; font-size:clamp(.98rem,1.75vw,1.32rem); line-height:1.72; min-height:0; overflow:auto}
.la-tp .txt p{margin:0}
.la-tp .k-chapo{font-style:italic; color:#5d4a7a}
.la-tp .k-right{text-align:right; font-weight:700}
.la-tp .k-source{text-align:right; font-size:.82em; color:#6b5a4a; font-style:italic}
.la-tp .k-name{font:700 1.05em Fredoka,sans-serif; color:var(--la-blue)}
.la-tp .foot{display:flex; justify-content:space-between; align-items:center; font:700 .82rem Fredoka,sans-serif; color:#9a7b4f}
.la-w{border-radius:5px; padding:0 1px; transition:background .15s,color .15s; cursor:pointer}
.la-face.live .la-w{animation:la-ink .45s both; animation-delay:calc(var(--i)*22ms + .2s)}
@keyframes la-ink{from{opacity:0; filter:blur(3px)}}
.la-w.kw{color:var(--la-pink); font-weight:700}
.la-w.on{background:#ffe27a; color:#000}
.la-w.cur{box-shadow:0 3px 0 var(--la-blue)}
.la-w.ok{color:var(--la-ok)}
.la-w.bad{color:#fff; background:var(--la-bad); animation:la-shake .4s}
.la-w.fixed{color:#fff; background:var(--la-ok); animation:la-pop .5s}
@keyframes la-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes la-pop{50%{transform:scale(1.25)}}
.la-mic-bar{display:none; align-items:center; gap:8px; font-size:.82rem; background:#eef8ff; border-radius:10px; padding:6px 10px; margin-top:6px; color:#1d4f73}
.la-face.reading .la-mic-bar{display:flex}
.la-mic-bar .dot{width:10px; height:10px; border-radius:50%; background:var(--la-bad); animation:la-twinkle .7s infinite alternate; flex:none}
.la-mic-bar .heard{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:italic}
.la-mic-bar .sc{font-weight:700; white-space:nowrap}

/* last page */
.la-end{position:absolute; inset:0; padding:6% 6% 5% 9%; overflow:auto; font-size:clamp(.82rem,1.3vw,1rem)}
.la-end h3{font:700 1.12em Fredoka,sans-serif; color:var(--la-blue); margin:.8em 0 .45em}
.la-end h3:first-child{margin-top:0}
.la-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.la-card{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; background:#fff; color:var(--la-ink); text-decoration:none; font-weight:700; font-size:.88em;
  box-shadow:0 3px 10px rgba(60,30,10,.12); border:2px solid transparent; transition:transform .15s, border-color .15s, box-shadow .15s; cursor:pointer; text-align:left; font-family:inherit}
.la-card:hover,.la-card:focus-visible{transform:translateY(-2px); border-color:var(--la-pink); box-shadow:0 8px 18px rgba(224,18,126,.2); outline:none}
.la-card .ic{font-size:1.35em; flex:none}
.la-video{position:relative; display:block; width:100%; border:0; padding:0; border-radius:14px; overflow:hidden; cursor:pointer; aspect-ratio:16/9; background:#000 center/cover}
.la-video::after{content:"▶"; position:absolute; inset:0; margin:auto; width:64px; height:44px; border-radius:12px; background:#ff0033; color:#fff; display:grid; place-items:center; font-size:1.3rem; box-shadow:0 6px 18px rgba(0,0,0,.4); transition:transform .2s}
.la-video:hover::after{transform:scale(1.12)}
.la-score{font:700 1em Fredoka,sans-serif; color:var(--la-pink)}

/* buttons / controls */
.la-btn{font:700 .92rem Fredoka,sans-serif; border:0; cursor:pointer; border-radius:999px; padding:.6em 1.1em; color:#fff;
  background:linear-gradient(135deg,#ff5fa2,#e0127e); box-shadow:0 6px 18px rgba(224,18,126,.4); transition:transform .15s,box-shadow .15s}
.la-btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(224,18,126,.5)}
.la-btn:active{transform:scale(.96)}
.la-btn.alt{background:linear-gradient(135deg,#2ec5ff,#1680d9); box-shadow:0 6px 18px rgba(22,128,217,.35)}
.la-btn.mic{background:linear-gradient(135deg,#34d399,#059669); box-shadow:0 6px 18px rgba(5,150,105,.35)}
.la-btn.mic[aria-pressed="true"]{background:linear-gradient(135deg,#f87171,#dc2626); animation:la-pulse 1.2s infinite}
@keyframes la-pulse{50%{box-shadow:0 0 0 10px rgba(220,38,38,.18)}}
.la-btn.ghost{background:rgba(255,255,255,.12); box-shadow:none; backdrop-filter:blur(6px)}
.la-btn:focus-visible,.la-w:focus-visible,.la-sel:focus-visible{outline:3px solid #ffd36b; outline-offset:2px}
.la-controls{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; padding:34px 16px 8px}
.la-opts{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; padding:4px 16px; font-size:.85rem; color:#f3d5e4}
.la-sel{font:600 .85rem Andika,sans-serif; border-radius:10px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; padding:.35em .5em; max-width:260px}
.la-sel option{color:#000}
.la-dots{display:flex; gap:6px; justify-content:center; padding:10px 16px 14px; flex-wrap:wrap}
.la-dots button{width:11px; height:11px; border-radius:50%; border:0; background:rgba(255,255,255,.25); cursor:pointer; padding:0; transition:all .3s}
.la-dots button.on{background:var(--la-gold); width:28px; border-radius:6px}
.la-dots button.done{background:#34d399}
.la-hint{font-size:.85rem; color:#e9c6d8; text-align:center; padding:0 16px 26px; max-width:760px; margin:0 auto; line-height:1.5}
.la-toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,140%); background:#1f1430; color:#fff; padding:.7em 1.2em; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.4); z-index:60; transition:transform .35s cubic-bezier(.3,1.4,.5,1); max-width:calc(100% - 32px); text-align:center}
.la-toast.show{transform:translate(-50%,0)}
.la-modal{position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:70; padding:16px}
.la-modal.open{display:flex}
.la-modal iframe{width:min(960px,100%); aspect-ratio:16/9; border:0; border-radius:14px; background:#000}
.la-modal .x{position:absolute; top:14px; right:18px}

/* hub */
.la-hub{max-width:1180px; margin:0 auto; padding:10px 16px 50px}
.la-hub h2{font:700 1.3rem Fredoka,sans-serif; color:#ffd36b; margin:1.6em 0 .6em}
.la-hub .intro{text-align:center; color:#f3d5e4; max-width:760px; margin:0 auto; line-height:1.6}
.la-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.la-bk{position:relative; display:flex; flex-direction:column; text-decoration:none; color:#fff; border-radius:6px 16px 16px 6px; overflow:hidden; min-height:250px;
  background:linear-gradient(150deg,#b3124f,#6a0b3a 60%,#3a0624); box-shadow:inset 8px 0 0 rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.35);
  transition:transform .25s, box-shadow .25s; opacity:0; animation:la-in .6s forwards; animation-delay:calc(var(--i)*60ms)}
.la-bk:hover,.la-bk:focus-visible{transform:translateY(-6px) rotate(-1deg); box-shadow:inset 8px 0 0 rgba(0,0,0,.25),0 20px 36px rgba(224,18,126,.35); outline:none}
.la-bk .pic{height:140px; background-size:cover; background-position:center; border-bottom:3px solid #ffd36b}
.la-bk .meta{padding:10px 14px 14px 18px}
.la-bk .n{font:600 .75rem Fredoka,sans-serif; letter-spacing:1px; color:#ffd36b; text-transform:uppercase}
.la-bk h3{font:700 1.08rem Fredoka,sans-serif; margin:.25em 0 0}
@keyframes la-in{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

/* single page (phone) */
.la-book.single{aspect-ratio:auto; height:min(78vh,760px); max-width:480px; overflow:hidden; border-radius:14px}
.la-book.single.closed{transform:none}
.la-book.single .la-half,.la-book.single .la-leaf{width:100%}
.la-book.single .la-half.l{display:none}
.la-sp{position:absolute; inset:0; display:flex; flex-direction:column}
.la-sp .s{position:relative; height:50%; flex:none}
.la-sp .t{position:relative; flex:1}
.la-sp .la-tp{padding:4% 6% 4%}
.la-sp .la-tp .txt{font-size:1.02rem; line-height:1.6; justify-content:flex-start}

@media (prefers-reduced-motion:reduce){
  .la-body *,.la-body *::before,.la-body *::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.2s!important}
}
html:has(.la-body){background:#12071a}

/* ---------- scènes dessinées (js/livre-anime-scenes.js) ---------- */
.la-scene.drawn{background:#fff}
.la-say{position:absolute; z-index:5; max-width:84%; background:#fff; color:var(--la-ink); font:700 clamp(.78rem,1.5vw,1.05rem) Fredoka,sans-serif;
  padding:.55em .95em; border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.35); opacity:0; transform:scale(.3); transform-origin:30% 100%;
  animation:la-say .6s .7s cubic-bezier(.3,1.6,.5,1) forwards}
.la-say::after{content:""; position:absolute; left:28%; bottom:-12px; border:8px solid transparent; border-top:13px solid #fff}
@keyframes la-say{to{opacity:1; transform:none}}
.la-scene .lz{position:absolute; inset:0; width:100%; height:100%; display:block; transition:opacity .6s}
.la-scene .lz.out{opacity:0}
.lz [class^="lz-"],.lz [class*=" lz-"]{transform-box:fill-box; transform-origin:50% 100%}
.la-scene.live .lz-bob{animation:lz-bob 2.4s ease-in-out infinite}
.la-scene.live .lz-breathe{animation:lz-breathe 2.8s ease-in-out infinite}
.la-scene.live .lz-walkin{animation:lz-walkin 2.4s cubic-bezier(.3,.6,.3,1) both}
.la-scene.live .lz-walkinR{animation:lz-walkinR 2.4s cubic-bezier(.3,.6,.3,1) both}
.la-scene.live .lz-walk{animation:lz-walk 6s ease-in-out infinite alternate}
.la-scene.live .lz-wave[style*="transform-origin"]{animation:lz-armwave .7s ease-in-out infinite alternate; transform-box:view-box}
.la-scene.live g.lz-wave:not([style*="transform-origin"]){animation:lz-surf 2.6s ease-in-out infinite}
.la-scene.live .lz-talk{animation:lz-talk .22s ease-in-out infinite alternate; transform-origin:50% 50%}
.la-scene.live .lz-blink{animation:lz-blink 4s infinite; transform-origin:50% 50%}
.la-scene.live .lz-blink2{animation:lz-blink2 1s steps(2) infinite}
.la-scene.live .lz-tear{animation:lz-tear 1.8s ease-in infinite}
.la-scene.live .lz-cloud{animation:lz-cloud 18s linear infinite}
.la-scene.live .lz-cloudFast{animation:lz-cloudFast 3s linear infinite}
.la-scene.live .lz-spin-slow{animation:lz-spin 40s linear infinite; transform-origin:50% 50%}
.la-scene.live .lz-spin{animation:lz-spin 4s linear infinite; transform-origin:50% 100%}
.la-scene.live .lz-twinkle{animation:lz-twinkle 1.8s ease-in-out infinite alternate; transform-origin:50% 50%}
.la-scene.live .lz-sway{animation:lz-sway 3.5s ease-in-out infinite alternate}
.la-scene.live .lz-ray{animation:lz-ray 5s ease-in-out infinite alternate}
.la-scene.live .lz-bubble{animation:lz-bubble 6s linear infinite}
.la-scene.live .lz-rain{animation:lz-rain .9s linear infinite}
.la-scene.live .lz-glow{animation:lz-glow 3s ease-in-out infinite alternate}
.la-scene.live .lz-curtL{animation:lz-curtL 2s ease-in-out both; transform-origin:0 50%}
.la-scene.live .lz-curtR{animation:lz-curtR 2s ease-in-out both; transform-origin:100% 50%}
.la-scene.live .lz-drop{animation:lz-drop 5s ease-in-out infinite}
.la-scene.live .lz-clapL{animation:lz-clapL .3s ease-in-out infinite alternate}
.la-scene.live .lz-clapR{animation:lz-clapR .3s ease-in-out infinite alternate}
.la-scene.live .lz-bow{animation:lz-bow 1.8s ease-in-out infinite}
.la-scene.live .lz-coat{animation:lz-coat 1.6s .4s cubic-bezier(.3,1.4,.5,1) both; transform-origin:50% 0}
.la-scene.live .lz-rise{animation:lz-rise 3.2s ease-out infinite}
.la-scene.live .lz-pop{animation:lz-pop .7s cubic-bezier(.3,1.6,.5,1) both; transform-origin:50% 50%}
.la-scene.live .lz-shake{animation:lz-shake .12s infinite alternate}
.la-scene.live .lz-jump{animation:lz-jump 1s ease-in-out infinite}
.la-scene.live .lz-bounce{animation:lz-bounce .9s cubic-bezier(.4,0,.6,1) infinite; transform-origin:50% 50%}
.la-scene.live .lz-float{animation:lz-float 3s ease-in-out infinite}
.la-scene.live .lz-scent{animation:lz-scent 2s linear infinite}
.la-scene.live .lz-grow,.la-scene.live .lz-sprout{animation:lz-grow 1.2s cubic-bezier(.3,1.5,.5,1) both}
.la-scene.live .lz-flicker{animation:lz-flicker .25s steps(2) infinite}
.la-scene.live .lz-fly,.la-scene.live .lz-stack{animation:lz-fly .9s cubic-bezier(.3,1.4,.5,1) both}
.la-scene.live .lz-flyacross{animation:lz-flyacross 6s ease-in-out infinite}
.la-scene.live .lz-hop{animation:lz-hop 1s ease-in-out infinite}
.la-scene.live .lz-ear{animation:lz-ear 2.5s ease-in-out infinite; transform-box:view-box}
.la-scene.live .lz-shiver{animation:lz-shake .08s infinite alternate}
.la-scene.live .lz-poke{animation:lz-poke .5s ease-in-out infinite alternate}
.la-scene.live .lz-flap{animation:lz-flap .25s ease-in-out infinite alternate; transform-box:view-box}
.la-scene.live .lz-wag,.la-scene.live .lz-ant{animation:lz-wag .3s ease-in-out infinite alternate; transform-box:view-box}
.la-scene.live .lz-creep{animation:lz-creep 3s ease-in-out infinite}
.la-scene.live .lz-dash{animation:lz-dash 1.8s ease-in infinite}
.la-scene.live .lz-swim{animation:lz-swim 3s ease-in-out infinite}
.la-scene.live .lz-leap{animation:lz-leap 2.6s ease-in-out infinite; transform-origin:50% 50%}
.la-scene.live .lz-cramped{animation:lz-cramped 3s ease-in-out infinite alternate; transform-origin:50% 50%}
.la-scene.live .lz-splash{animation:lz-splash 1.2s ease-out infinite}
.la-scene.live .lz-swimacross{animation:lz-swimacross 6s linear infinite}
.la-scene.live .lz-drift{animation:lz-drift 5s ease-in-out infinite alternate; transform-origin:50% 50%}
.la-scene.live .lz-sweep{animation:lz-sweepB .6s ease-in-out infinite alternate}
.la-scene.live .lz-shrink{animation:lz-shrink 3s ease-in infinite}
.la-scene.live .lz-throw{animation:lz-throw 1.8s ease-in infinite}
.la-scene.live .lz-sob{animation:lz-sob .5s ease-in-out infinite alternate}
.la-scene.live .lz-flip{animation:lz-flip 2.2s ease-in-out infinite; transform-origin:50% 60%}
.la-scene.live .lz-wobble{animation:lz-wobble 1.2s ease-in-out infinite alternate}
.la-scene.live .lz-dive{animation:lz-dive 3s ease-in-out infinite; transform-origin:50% 50%}
.la-scene.live .lz-drum{animation:lz-drum .18s infinite alternate}
.la-scene.live .lz-chew,.la-scene.live .lz-play{animation:lz-chew .3s ease-in-out infinite alternate}
.la-scene.live .lz-fill{animation:lz-fill 2s ease-out both}
.la-scene.live .lz-write{animation:lz-write .35s ease-in-out infinite alternate}
.la-scene.live .lz-trainIn{animation:lz-trainIn 3s cubic-bezier(.2,.7,.3,1) both}
.la-scene.live .lz-drive{animation:lz-drive 5s ease-in-out infinite}
.la-scene.live .lz-laugh{animation:lz-jump .5s ease-in-out infinite}
.la-scene.live .lz-flame{animation:lz-flame .4s ease-in-out infinite alternate}
.la-scene.live .lz-steam,.la-scene.live .lz-notes,.la-scene.live .lz-dust{animation:lz-rise 2.2s ease-out infinite}
.la-scene.live .lz-spark{animation:lz-blink2 .3s steps(2) infinite}
.la-scene.live .lz-slump{animation:lz-slump 2s ease-in both}
.la-scene.live .lz-fall{animation:lz-fall 2.6s ease-in-out infinite}
.la-scene.live .lz-pounce{animation:lz-pounce 2.6s ease-in-out infinite}
.la-scene.live .lz-roll{animation:lz-roll 2.6s ease-in infinite; transform-origin:50% 50%}
.la-scene.live .lz-run{animation:lz-run 2.4s linear infinite}
.la-scene.live .lz-limp{animation:lz-limp 1.2s ease-in-out infinite}
.la-scene.live .lz-spotA{animation:lz-spot 3s ease-in-out infinite alternate; transform-origin:50% 0}
.la-scene.live .lz-spotB{animation:lz-spot 3s ease-in-out infinite alternate-reverse; transform-origin:50% 0}
@keyframes lz-bob{50%{transform:translateY(-4px)}}
@keyframes lz-breathe{50%{opacity:.35; transform:scale(.96)}}
@keyframes lz-walkin{0%{transform:translateX(-340px)}20%{transform:translate(-270px,-6px)}40%{transform:translate(-190px,0)}60%{transform:translate(-110px,-6px)}80%{transform:translate(-40px,0)}100%{transform:none}}
@keyframes lz-walkinR{0%{transform:translateX(340px)}20%{transform:translate(270px,-6px)}40%{transform:translate(190px,0)}60%{transform:translate(110px,-6px)}80%{transform:translate(40px,0)}100%{transform:none}}
@keyframes lz-walk{from{transform:translateX(-30px)}to{transform:translateX(60px)}}
@keyframes lz-armwave{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes lz-talk{to{transform:scaleY(2.2)}}
@keyframes lz-blink{0%,92%,100%{transform:none}95%{transform:scaleY(.1)}}
@keyframes lz-blink2{50%{opacity:.2}}
@keyframes lz-tear{0%{opacity:0; transform:none}20%{opacity:1}100%{opacity:0; transform:translateY(24px)}}
@keyframes lz-cloud{from{transform:translateX(-120px)}to{transform:translateX(700px)}}
@keyframes lz-cloudFast{from{transform:translateX(60px)}to{transform:translateX(-60px)}}
@keyframes lz-spin{to{transform:rotate(360deg)}}
@keyframes lz-twinkle{from{opacity:.2; transform:scale(.6)}to{opacity:1; transform:scale(1.1)}}
@keyframes lz-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes lz-ray{from{opacity:.4}to{opacity:1}}
@keyframes lz-bubble{0%{transform:translateY(0); opacity:0}10%{opacity:1}100%{transform:translateY(-720px); opacity:0}}
@keyframes lz-surf{50%{transform:translate(-20px,-8px)}}
@keyframes lz-rain{from{transform:translateY(-40px)}to{transform:translateY(760px)}}
@keyframes lz-glow{from{opacity:.65}to{opacity:1}}
@keyframes lz-curtL{from{transform:scaleX(2.6)}to{transform:none}}
@keyframes lz-curtR{from{transform:scaleX(2.6)}to{transform:none}}
@keyframes lz-drop{0%,10%{transform:translateY(-104%)}25%,40%{transform:none}55%,65%{transform:translateY(-104%)}78%,88%{transform:none}100%{transform:translateY(-104%)}}
@keyframes lz-clapL{from{transform:translate(-8px,4px) rotate(-14deg)}to{transform:translate(2px,0)}}
@keyframes lz-clapR{from{transform:translate(8px,4px) rotate(14deg)}to{transform:translate(-2px,0)}}
@keyframes lz-bow{0%,20%{transform:none}45%,60%{transform:translateY(8px) scaleY(.86)}90%,100%{transform:none}}
@keyframes lz-coat{from{opacity:0; transform:scale(.2,.1)}to{opacity:1; transform:none}}
@keyframes lz-rise{0%{opacity:0; transform:translateY(20px)}15%{opacity:1}100%{opacity:0; transform:translateY(-160px)}}
@keyframes lz-pop{from{opacity:0; transform:scale(.2)}to{opacity:1; transform:none}}
@keyframes lz-shake{from{transform:translate(-2px,1px)}to{transform:translate(2px,-1px)}}
@keyframes lz-jump{0%,100%{transform:none}40%{transform:translateY(-40px)}60%{transform:translateY(-30px)}}
@keyframes lz-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-90px) rotate(180deg)}}
@keyframes lz-float{50%{transform:translateY(-16px) rotate(6deg)}}
@keyframes lz-scent{to{stroke-dashoffset:-40}}
@keyframes lz-grow{from{transform:scale(0)}to{transform:none}}
@keyframes lz-flicker{50%{opacity:.7}}
@keyframes lz-fly{from{opacity:0; transform:translate(-200px,-200px) rotate(-30deg)}to{opacity:1; transform:none}}
@keyframes lz-flyacross{0%{transform:translate(-420px,60px) rotate(-10deg)}50%{transform:translate(0,-30px) rotate(6deg)}100%{transform:translate(420px,40px) rotate(-6deg)}}
@keyframes lz-hop{0%,100%{transform:none}50%{transform:translateY(-22px)}}
@keyframes lz-ear{0%,80%,100%{transform:none}90%{transform:rotate(-12deg)}}
@keyframes lz-poke{from{transform:translateX(-6px)}to{transform:translateX(10px) rotate(6deg)}}
@keyframes lz-flap{from{transform:rotate(10deg)}to{transform:rotate(-35deg)}}
@keyframes lz-wag{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes lz-creep{50%{transform:translateX(14px) scaleX(1.04)}}
@keyframes lz-dash{0%{transform:translateX(-340px)}60%,100%{transform:translateX(380px)}}
@keyframes lz-swim{50%{transform:translate(10px,-12px) rotate(-3deg)}}
@keyframes lz-leap{0%,100%{transform:translateY(80px) rotate(30deg)}50%{transform:translateY(-200px) rotate(-30deg)}}
@keyframes lz-cramped{from{transform:translateX(-30px)}to{transform:translateX(30px)}}
@keyframes lz-splash{from{opacity:1; transform:scale(.4)}to{opacity:0; transform:scale(1.3)}}
@keyframes lz-swimacross{from{transform:translateX(-260px)}to{transform:translateX(260px)}}
@keyframes lz-drift{from{transform:translate(-16px,-8px) rotate(-8deg)}to{transform:translate(16px,10px) rotate(8deg)}}
@keyframes lz-sweepB{from{transform:rotate(-6deg)}to{transform:rotate(6deg) translateX(10px)}}
@keyframes lz-shrink{0%{opacity:1; transform:none}80%,100%{opacity:0; transform:scale(.2)}}
@keyframes lz-throw{0%{opacity:0; transform:none}10%{opacity:1}100%{opacity:1; transform:translate(260px,180px) rotate(360deg)}}
@keyframes lz-sob{from{transform:none}to{transform:translateY(4px) scaleY(.97)}}
@keyframes lz-flip{0%,15%{transform:none}50%{transform:translateY(-120px) rotate(-180deg)}85%,100%{transform:translate(80px,-62px) rotate(-360deg)}}
@keyframes lz-wobble{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes lz-dive{0%,20%{transform:translateY(-380px)}60%{transform:translateY(0) rotate(-540deg)}70%{transform:translateY(-30px) rotate(-540deg)}80%,100%{transform:rotate(-540deg)}}
@keyframes lz-drum{to{transform:translateY(6px)}}
@keyframes lz-chew{to{transform:translateY(-3px) scaleY(1.02)}}
@keyframes lz-fill{from{width:0}to{width:40px}}
@keyframes lz-write{from{transform:translateX(-8px)}to{transform:translateX(8px) rotate(6deg)}}
@keyframes lz-trainIn{from{transform:translateX(700px)}to{transform:none}}
@keyframes lz-drive{from{transform:translateX(-200px)}to{transform:translate(500px,-40px)}}
@keyframes lz-flame{from{transform:scale(.9,1)}to{transform:scale(1.08,1.15)}}
@keyframes lz-slump{to{transform:translateY(20px) rotate(4deg)}}
@keyframes lz-fall{0%,30%{transform:none}50%,80%{transform:translate(-30px,10px) rotate(-70deg)}100%{transform:none}}
@keyframes lz-pounce{0%{transform:translateX(160px)}40%{transform:translate(-40px,-60px)}60%,100%{transform:translate(-60px,0)}}
@keyframes lz-roll{from{transform:translateX(200px) rotate(0)}to{transform:translateX(-500px) rotate(-720deg)}}
@keyframes lz-run{0%{transform:translateX(-120px)}100%{transform:translateX(560px)}}
@keyframes lz-limp{0%,100%{transform:none}50%{transform:rotate(-5deg) translateY(4px)}}
@keyframes lz-spot{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}

.la-scene.live .lz-trek{animation:lz-trek 4s ease-in-out infinite}
.la-scene.live .lz-sail{animation:lz-sail 4s ease-in-out infinite alternate; transform-origin:50% 100%}
.la-scene.live .lz-row{animation:lz-row 3s ease-in-out infinite alternate}
.la-scene.live .lz-peek{animation:lz-peek 2.7s ease-in-out infinite}
.la-scene.live .lz-scan{animation:lz-scan 5s ease-in-out infinite alternate}
.la-scene.live .lz-drop2{animation:lz-drop2 2.4s ease-in both}
.la-scene.live .lz-push{animation:lz-push 3s ease-out both}
.la-scene.live .lz-hatfly{animation:lz-hatfly 2.4s ease-out infinite; transform-origin:50% 50%}
@keyframes lz-trek{0%{transform:none; opacity:1}80%{transform:translate(var(--tx),var(--ty)); opacity:1}100%{transform:translate(var(--tx),var(--ty)); opacity:0}}
@keyframes lz-sail{from{transform:translateX(-30px) rotate(-3deg)}to{transform:translateX(30px) rotate(3deg)}}
@keyframes lz-row{from{transform:translateY(40px)}to{transform:translateY(-60px)}}
@keyframes lz-peek{0%,100%{transform:translateY(80px)}30%,60%{transform:none}}
@keyframes lz-scan{from{transform:translateX(-50px)}to{transform:translateX(50px)}}
@keyframes lz-drop2{from{transform:translateY(-220px)}to{transform:none}}
@keyframes lz-push{from{transform:translateX(-200px)}to{transform:none}}
@keyframes lz-hatfly{0%{transform:translate(0,180px) rotate(0); opacity:0}15%{opacity:1}100%{transform:translate(160px,-200px) rotate(540deg); opacity:0}}

/* ---------- pause / reprise (clic sur la page) ---------- */
.la-book{cursor:pointer}
.la-pp{position:absolute; left:50%; top:50%; z-index:40; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%;
  display:grid; place-items:center; font-size:2.6rem; color:#fff; background:rgba(20,8,30,.6); backdrop-filter:blur(6px);
  box-shadow:0 0 0 6px rgba(255,255,255,.18); pointer-events:none; animation:la-pp .9s ease-out forwards}
@keyframes la-pp{0%{opacity:0; transform:scale(.4)}25%{opacity:1; transform:scale(1.05)}70%{opacity:1; transform:scale(1)}100%{opacity:0; transform:scale(1.25)}}

/* ---------- fenêtre d'explication des mots en rose ---------- */
.la-w.kw{cursor:help; border-bottom:2px dotted var(--la-pink); transition:background .2s, transform .2s}
.la-w.kw:hover{background:#ffe3f1; transform:translateY(-1px)}
.la-gloss{position:fixed; inset:0; z-index:80; background:rgba(18,7,26,.25); animation:la-glbg .25s ease-out}
.la-gloss.closing{animation:la-glbg .25s ease-in reverse forwards}
@keyframes la-glbg{from{opacity:0}}
.la-gl-card{position:fixed; width:min(340px,calc(100vw - 24px)); padding:22px 20px 18px; border-radius:22px; color:var(--la-ink); text-align:center;
  background:linear-gradient(#fffaf0,#fffaf0) padding-box, linear-gradient(135deg,#ff5fa2,#ffd36b,#2ec5ff) border-box; border:4px solid transparent;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 8px rgba(255,95,162,.12); font-family:Andika,system-ui,sans-serif;
  animation:la-glin .5s cubic-bezier(.3,1.5,.5,1)}
.la-gloss.closing .la-gl-card{animation:la-glin .25s ease-in reverse forwards}
@keyframes la-glin{from{opacity:0; transform:scale(.6) translateY(14px)}}
.la-gl-card.below::before,.la-gl-card.above::before{content:""; position:absolute; left:calc(var(--ax) - 10px); width:20px; height:20px; background:#fffaf0;
  border:4px solid #ff8fc0; transform:rotate(45deg)}
.la-gl-card.below::before{top:-13px; border-right:0; border-bottom:0}
.la-gl-card.above::before{bottom:-13px; border-left:0; border-top:0}
.la-gl-x{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; background:#f3e6ee; color:#7a3a5a; font-size:1rem; transition:transform .2s, background .2s}
.la-gl-x:hover{transform:rotate(90deg); background:#ffd3e8}
.la-gl-x:focus-visible{outline:3px solid #ffd36b; outline-offset:2px}
.la-gl-ic{font-size:3.4rem; line-height:1; margin:-48px auto 6px; width:84px; height:84px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#ffe3f1); box-shadow:0 10px 24px rgba(224,18,126,.3); animation:la-glbounce 2.2s ease-in-out infinite}
@keyframes la-glbounce{50%{transform:translateY(-6px) rotate(-6deg)}}
.la-gl-tag{font:600 .72rem Fredoka,sans-serif; letter-spacing:2px; text-transform:uppercase; color:#b07a3a}
.la-gl-w{font:700 1.5rem Fredoka,sans-serif; margin:.1em 0 .35em; background:linear-gradient(90deg,#e0127e,#ff7a3c); -webkit-background-clip:text; background-clip:text; color:transparent}
.la-gl-d{margin:0 0 .7em; font-size:1.06rem; line-height:1.55}
.la-gl-ex{margin:0 0 .9em; padding:.6em .8em; border-radius:12px; background:#eef8ff; color:#1d4f73; font-style:italic; font-size:.95rem; line-height:1.5; text-align:left; border-left:4px solid var(--la-blue)}
.la-gl-act{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.la-gl-act .la-btn{font-size:.85rem; padding:.5em .95em}
.la-gl-act .la-btn.ghost{background:#f3e6ee; color:#7a3a5a}
.la-gl-sp{position:absolute; font-size:1.2rem; pointer-events:none; animation:la-glsp 1.6s ease-in-out infinite}
.la-gl-sp.s1{left:14px; top:18px}.la-gl-sp.s2{right:52px; top:-8px; animation-delay:.5s}.la-gl-sp.s3{left:40%; bottom:-10px; animation-delay:1s}
@keyframes la-glsp{50%{transform:scale(1.4) rotate(20deg); opacity:.4}}
@media (max-width:560px){
  .la-gl-card{left:12px!important; right:12px; bottom:14px; top:auto!important; width:auto; animation-name:la-glup}
  @keyframes la-glup{from{transform:translateY(110%)}}
}
.la-pic-emo{display:grid; place-items:center; font-size:4rem; background:linear-gradient(135deg,#2fb6e6,#0b4f8a)}