/* Twelve animated illustrated worlds, plus the final rescue tableau. */
.mission-card{padding:10px 14px 15px;min-height:285px;display:flex;flex-direction:column}
.mission-illustration{display:block;position:relative;margin:-3px -7px 4px;overflow:hidden;border-radius:15px;box-shadow:0 4px 0 #245a7226;aspect-ratio:320/180;background:#b4ebfc}
.mission-art{display:block;width:100%;height:100%;overflow:hidden}
.mission-art text{font:900 47px Fredoka,"Trebuchet MS",sans-serif;fill:#245a72;paint-order:stroke;stroke:#fff8;stroke-width:2px}
.mission-art .tiny-note{font-size:37px;fill:#ee8e5c;stroke:none}
.mission-art .scene-notes text{fill:#417bb3;stroke:none}
.mission-number{top:15px;right:18px;background:#fffdf0d9;border:2px solid #fff;border-radius:8px;padding:1px 7px;box-shadow:0 2px 0 #245a7224;color:#276b88}
.mission-card .mission-tag{margin-top:5px}
.mission-card strong{font-size:clamp(1rem,1.35vw,1.35rem)}
.mission-card .mission-status{margin-top:auto;padding-top:10px}
.mission-card:hover .mission-art,.mission-card:focus-visible .mission-art{filter:saturate(1.25)}
/* Décors des missions : un geste propre à chaque jeu, joué seulement sur l'écran de mission ou quand la carte a le focus. */
.lamp,.scene-flip,.scene-vanish,.scene-pop{transform-box:fill-box;transform-origin:center}
.scene-dance,.scene-drop,.scene-jump,.scene-squash,.scene-pencil,.scene-flames,.scene-note{transform-box:fill-box;transform-origin:center bottom}
.scene-swing{transform-box:fill-box;transform-origin:center top}
.scene-beam{transform-box:view-box;transform-origin:38px 114px}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-twinkles{animation:world-twinkle 2.2s ease-in-out infinite}
:is(.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .lamp{animation:lamp-blink 1.6s calc(var(--i,0)*.3s) ease-in-out infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-flip{animation:scene-flip 2.8s calc(var(--i,0)*.45s) ease-in-out infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-note{animation:scene-note 2.2s calc(var(--i,0)*.6s) ease-out infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-dance{animation:scene-dance 2.4s linear infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-dance-b{animation-delay:.08s}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-vanish{animation:scene-vanish 2.6s ease-in-out infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-drop{animation:scene-drop-x 2.4s linear infinite,scene-drop-y 2.4s infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-flames{animation:scene-flames .7s ease-in-out infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-swing{animation:scene-swing 1.8s ease-in-out infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-pop{animation:scene-pop 2.6s ease-in infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-jump{animation:scene-jump 1.6s ease-in-out infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-squash{animation:scene-squash 1.6s ease-in-out infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-beam{animation:scene-beam 2.6s ease-in-out infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-draw{animation:scene-draw 3.2s ease-in-out infinite}
:is(.scene-illustration,.mission-card:hover,.mission-card:focus-visible,.controller-mode .mission-card:focus) .scene-pencil{animation:scene-pencil .5s ease-in-out infinite}
/* Mission 1 : les lampes s'allument dans la couleur saisie. */
.scene-illustration .lamp{transition:fill .25s}
.scene-illustration .lamp.lit{animation:lamp-on .35s ease-out}
.mission-scene{justify-content:center}
.scene-illustration{width:100%;max-width:560px;aspect-ratio:320/180;margin:8px auto 13px;border:5px solid white;border-radius:23px;box-shadow:0 10px 0 #245a7233,0 17px 30px #245a7225;overflow:hidden;transform:rotate(-2deg)}
.scene-illustration .mission-art{transform:scale(1.01)}
.mission-scene .eyebrow,.mission-scene h1,.mission-scene p{position:relative;z-index:1}
.mission-scene h1{margin:6px 0;font-size:clamp(2rem,3.2vw,3.8rem)}
.mission-scene p{font-size:clamp(1rem,1.3vw,1.3rem);margin-bottom:0}
@keyframes lamp-blink{0%,60%,100%{opacity:1}30%{opacity:.3}}
@keyframes lamp-on{from{transform:scale(1.6)}to{transform:scale(1)}}
@keyframes scene-flip{0%,45%,100%{transform:scaleX(1)}22%{transform:scaleX(.05)}}
@keyframes scene-note{0%{transform:translateY(10px);opacity:0}25%{opacity:1}100%{transform:translateY(-22px);opacity:0}}
@keyframes scene-dance{0%,50%,100%{transform:rotate(0)}6%,18%,31%,43%{transform:rotate(-8deg) translateY(-3px)}12%,25%,37%{transform:rotate(8deg) translateY(-3px)}}
@keyframes scene-vanish{0%,55%,100%{transform:scale(1)}20%,35%{transform:scale(0)}}
@keyframes scene-drop-x{from{translate:-74px 0}to{translate:78px 0}}
@keyframes scene-drop-y{0%,100%{transform:translateY(28px) scale(.6);animation-timing-function:ease-out}50%{transform:translateY(-8px) scale(1);animation-timing-function:ease-in}}
@keyframes scene-flames{0%,100%{transform:scaleY(1) skewX(0)}25%{transform:scaleY(1.2) skewX(6deg)}50%{transform:scaleY(.92) skewX(-3deg)}75%{transform:scaleY(1.25) skewX(-6deg)}}
@keyframes scene-swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes scene-pop{0%,100%{transform:scale(1)}45%{transform:scale(1.3)}55%,70%{transform:scale(0)}}
@keyframes scene-jump{0%,50%,100%{transform:translateY(0)}25%{transform:translateY(-16px)}}
@keyframes scene-squash{0%,50%,100%{transform:scale(1)}75%{transform:scale(1.12,.8)}}
@keyframes scene-beam{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes scene-draw{0%{stroke-dasharray:100;stroke-dashoffset:100}65%,100%{stroke-dasharray:100;stroke-dashoffset:0}}
@keyframes scene-pencil{50%{transform:translate(2px,-3px) rotate(4deg)}}
@keyframes world-twinkle{50%{opacity:.3}}

.victory{max-width:1560px;margin:auto;min-height:calc(100vh - 118px);display:flex;flex-direction:column;justify-content:center;padding:20px clamp(15px,3vw,45px) 26px;gap:16px;overflow:hidden}
.victory-sky{position:relative;display:grid;grid-template-columns:1.15fr .85fr;min-height:370px;background:linear-gradient(135deg,#a8e7fa,#d9f6d1 65%,#fff2b4);border:7px solid #fff;border-radius:31px;box-shadow:0 8px 0 #7dbfbb,0 20px 38px #1b606b25;isolation:isolate;overflow:hidden}
.victory-volcano{position:relative;min-height:370px;z-index:1}
.victory-volcano .volcano-art{height:100%;min-height:370px;background:transparent!important}
.victory-volcano .volcano-svg{height:100%;width:100%;object-fit:cover}
.victory-rays{position:absolute;inset:-60%;z-index:0;background:repeating-conic-gradient(from 0deg,#fff9a780 0 12deg,transparent 12deg 25deg);animation:victory-spin 30s linear infinite;pointer-events:none}
.victory-banner{position:relative;z-index:3;align-self:center;padding:25px clamp(18px,3vw,48px) 25px 15px;text-align:left}
.victory-banner .eyebrow{color:#ce6730}
.victory-banner h1{font-size:clamp(3rem,5.8vw,6.4rem);line-height:.9;color:#f26a3c;text-shadow:4px 5px 0 #fff,8px 9px 0 #2b83a6;margin:13px 0 20px;transform:rotate(-2deg);animation:victory-title .8s .2s cubic-bezier(.2,1.5,.3,1) both}
.victory-banner p{font-size:clamp(1rem,1.55vw,1.45rem);line-height:1.35;font-weight:900;color:#195b74;max-width:440px;margin-bottom:21px}
.victory-banner .big-button{border:3px solid white;box-shadow:0 7px 0 #a54b27,0 14px 25px #195b7430;white-space:normal}
@keyframes victory-title{from{transform:scale(.2) rotate(-15deg);opacity:0}to{transform:scale(1) rotate(-2deg);opacity:1}}
@keyframes victory-spin{to{transform:rotate(360deg)}}
@media(orientation:landscape) and (min-width:900px){.mission-scene{padding:16px 20px}.scene-illustration{max-width:440px;margin:29px auto 14px}.mission-scene h1{font-size:clamp(2rem,3vw,3.4rem)}}
@media(max-width:850px){.victory-sky{grid-template-columns:1fr}.victory-volcano{min-height:260px;max-height:330px}.victory-volcano .volcano-art{min-height:260px}.victory-banner{padding:20px;text-align:center}.victory-banner h1{font-size:clamp(2.8rem,9vw,5rem)}.victory-banner p{margin:0 auto 18px}}
@media(max-width:470px){.mission-card{padding:7px 9px 12px;min-height:230px}.mission-card .mission-tag{font-size:.6rem}.mission-card strong{font-size:1rem}.mission-number{font-size:1rem;right:8px;top:8px}.scene-illustration{margin-top:42px}}
@media(orientation:landscape) and (max-height:500px){.scene-illustration{width:65%;margin:22px auto 7px}.mission-scene h1{font-size:1.8rem}.mission-scene p{font-size:.85rem}.victory{padding:8px 16px}.victory-sky{grid-template-columns:1fr 1fr;min-height:230px}.victory-volcano,.victory-volcano .volcano-art{min-height:230px}.victory-banner h1{font-size:3rem;margin:7px 0}.victory-banner p{font-size:.9rem;margin-bottom:7px}.victory-banner .big-button{min-height:43px}.victory-team{display:none}}

/* A readable control deck for a television, with the flyer’s bright pencil palette. */
body{background-image:radial-gradient(circle at 15% 13%,#ffe7a1 0,transparent 27%),radial-gradient(circle at 85% 79%,#d8efc3 0,transparent 28%),repeating-linear-gradient(0deg,#98682708 0 1px,transparent 1px 5px);background-color:#fff9e8}
.hub{padding-top:14px}.hero{min-height:250px}.hero>div:first-child{padding:22px 32px}.hero h1{font-size:clamp(2rem,3.3vw,3.4rem);margin:6px 0}.hero p{font-size:clamp(1rem,1.2vw,1.2rem);margin:0}.hero .volcano-art{min-height:230px}.hero .progress{margin:12px 0 4px}
.hub .section-heading{margin:18px 0 9px}.team-section .section-heading h2{font-size:clamp(1.3rem,2vw,2rem)}.hub .dino-card .dino{height:56px}.hub .dino-card{padding:3px}.missions-section .section-heading h2{font-size:clamp(1.35rem,2vw,2rem)}
.mission-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mission-card{min-height:215px;padding:9px 13px 13px}.mission-illustration{height:112px;aspect-ratio:auto}.mission-card:focus-visible{outline:5px solid #ffd53b;outline-offset:2px;transform:translateY(-4px)}
.scene-illustration{max-width:650px}.mission-info .code-panel{flex:0 0 auto}.mission-adult .how{max-height:none;overflow:visible}.mission-info{justify-content:center}.mission-adult .how{font-size:clamp(1rem,1.1vw,1.3rem);line-height:1.35}.mission-adult .gear{font-size:clamp(.9rem,.95vw,1.1rem)}
.all-keyboards.one-keyboard{grid-template-columns:1fr}.one-keyboard .keyboard-group{padding:10px}.one-keyboard .code-key{min-height:56px;font-size:1.5rem}.one-keyboard .key-row{grid-template-columns:repeat(4,minmax(0,1fr))}.one-keyboard .keyboard-group:has(.shape-picto) .key-row{grid-template-columns:repeat(3,minmax(0,1fr))}.one-keyboard .code-key[class*=color-]{font-size:1.2rem}.keyboard-toggle{display:block;margin:8px 0 0;padding:6px;font-size:.8rem;text-align:left}.code-feedback{font-size:.86rem}.code-display{min-height:56px}
.shape-picto{display:block;margin:1px auto 4px;width:26px;height:26px;background:#75bfe4;border:2px solid #225978}.shape-cercle{border-radius:50%}.shape-triangle{clip-path:polygon(50% 0,100% 100%,0 100%);border:0;background:#f1b953}.shape-carré{background:#e990b2}.code-key b{display:block;font-size:.85rem}.cake-choice{width:82px;height:76px;display:inline-block}
.volume-step{min-width:48px;min-height:48px;background:#ffe281;color:#16567b;border:2px solid #bc9137;border-radius:12px;font:900 1.5rem Arial,sans-serif}.volume-step:focus-visible{outline:4px solid #f5bf27}
.reset-card{position:fixed;inset:0;margin:auto;max-width:min(550px,calc(100vw - 24px));max-height:max-content}.reset-card::backdrop{background:#10384cb3;backdrop-filter:blur(3px)}
.treasure .chest{transform:scale(1.28);margin:78px 0 38px}.treasure .chest.opened{transform:scale(1.28)}
@media(orientation:landscape) and (min-width:900px) and (max-height:800px){.hub{padding:8px 24px 28px}.hero{min-height:145px}.hero .volcano-art{min-height:145px}.hero>div:first-child{padding:12px 22px}.hero h1{font-size:2.3rem}.hero p{font-size:.95rem;line-height:1.2}.hero .progress{margin:5px 0 2px}.hub .section-heading{margin:8px 0 5px}.team-section .section-heading h2{font-size:1.3rem;margin:2px 0}.hub .dino-card .dino{height:40px}.hub .dino-card strong{font-size:.74rem}.mission-grid{gap:8px}.mission-card{min-height:164px;padding:6px 9px}.mission-illustration{height:73px;margin:0 0 3px}.mission-card strong{font-size:1.05rem}.mission-card .mission-tag{font-size:.61rem}.mission-card .mission-status{padding-top:4px}.scene-illustration{max-width:450px;margin:29px auto 11px}.mission-info .code-panel{padding:13px}.mission-adult .how{font-size:.98rem}.mission-adult .gear{font-size:.87rem}.one-keyboard .code-key{min-height:46px}.one-keyboard .keyboard-group{padding:6px}}
@media(max-width:850px){.mission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mission-card{min-height:220px}.mission-illustration{height:105px}.hub .dino-card .dino{height:55px}.final-art{display:flex;max-height:240px;min-height:200px}.final-art .volcano-art.big{min-height:180px}.cooling{padding:3px;gap:2px}.cooling span{font-size:1.25rem}.celebration .dino-card:nth-child(n+5),.treasure .dino-card:nth-child(n+5),.victory-team .dino-card:nth-child(n+5){display:block}.celebration .dino-team,.treasure .dino-team,.victory-team .dino-team{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:470px){.mission-card{min-height:190px}.mission-illustration{height:78px}.final-art{max-height:205px}.one-keyboard .code-key{min-height:54px}.treasure .chest{transform:scale(1);margin:12px 0 20px}.treasure .chest.opened{transform:scale(1)}}
@media(min-width:900px){.mission-grid .mission-card{display:grid;grid-template-columns:42% minmax(0,1fr);grid-template-rows:auto auto auto 1fr;align-content:center;column-gap:12px;min-height:162px}.mission-grid .mission-illustration{grid-column:1;grid-row:1/5;height:118px;aspect-ratio:auto;margin:0;align-self:center}.mission-grid .mission-number{left:calc(42% - 33px);right:auto;top:12px}.mission-grid .mission-tag,.mission-grid .mission-card strong,.mission-grid .mission-card small,.mission-grid .mission-status{grid-column:2;margin:0}.mission-grid .mission-tag{grid-row:1}.mission-grid .mission-card strong{grid-row:2;margin:4px 0;line-height:1.1}.mission-grid .mission-card small{grid-row:3}.mission-grid .mission-status{grid-row:4;align-self:end;padding-top:6px}}
.story-callout{max-width:700px;padding:17px 20px 15px;background:#fff8dc;border:3px solid #f4c847;border-radius:20px;box-shadow:0 6px 0 #e9b953;transform:rotate(-.5deg)}.story-callout>span,.mission-story>span{display:block;font-size:.72rem;letter-spacing:.1em;font-weight:1000;color:#b7542f;margin-bottom:7px}.intro-copy .story-callout p{font-size:clamp(1rem,1.25vw,1.25rem);line-height:1.42;margin:0}.intro-copy .intro-goal{font-size:clamp(.95rem,1.1vw,1.15rem);font-weight:850;margin:19px 0 13px}.intro-copy h1{font-size:clamp(2.4rem,4.2vw,4.5rem);margin-bottom:13px}.intro-copy small{margin-top:11px}.intro-mini-team{margin-top:10px}.intro-mini-team .dino{object-fit:contain}.dino-card .dino{object-fit:contain;display:block;margin:auto}.poster-wrap{isolation:isolate}.poster-wrap img.rigolo{position:absolute;z-index:2;width:27%;height:auto;max-width:160px;left:-10%;bottom:-7%;transform-origin:50% 85%}.mission-story{position:relative;z-index:1;background:#fff9e6;border-left:6px solid #f5b244;border-radius:14px;padding:13px 16px;box-shadow:0 4px 0 #ffffff77}.mission-scene .mission-story p{font-size:clamp(1rem,1.18vw,1.23rem);font-weight:800;line-height:1.38;margin:0}.final-narration{max-width:700px;background:#fff2cc;border-left:6px solid #f4bf43;border-radius:12px;padding:12px 16px;font-size:clamp(.95rem,1.15vw,1.15rem);font-weight:800;line-height:1.35}.one-keyboard .keyboard-group:has(.color-rouge) .key-row{grid-template-columns:repeat(5,minmax(0,1fr))}.color-violet{color:#864ac2}
@media(max-width:1100px){.poster-wrap img.rigolo{width:25%;left:-5%}.mission-story{padding:10px 13px}}
@media(max-width:760px){.intro{gap:35px}.story-callout{padding:15px}.poster-wrap{margin-left:7%}.poster-wrap img.rigolo{left:-8%}.mission-scene .mission-story p{font-size:1rem}.one-keyboard .keyboard-group:has(.color-rouge) .key-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:470px){.mission-grid .mission-card{min-height:186px}.poster-wrap img.rigolo{width:28%}.mission-scene h1{font-size:2.1rem}.final-narration{font-size:.9rem}}
/* DinoRigolo court vers le public sur la page de garde (petits bonds, sans retournement), puis respire à côté du carton. */
.intro-rigolo{position:absolute;z-index:5;left:-10%;bottom:-7%;width:27%;max-width:160px;pointer-events:none;user-select:none;transform-origin:50% 85%;animation:rigolo-approach 4.2s cubic-bezier(.3,.1,.3,1) .6s 1 both;will-change:transform}
.poster-wrap .intro-rigolo img.rigolo{display:block;position:static;width:100%;height:auto;max-width:none;left:auto;bottom:auto;border-radius:0;transform-origin:50% 85%;animation:rigolo-hop .38s ease-in-out .6s 11 both,rigolo-idle 3.2s ease-in-out 4.9s infinite}
@keyframes rigolo-approach{0%,100%{transform:translate3d(0,0,0) scale(.8)}45%{transform:translate3d(-11vw,7vh,0) scale(1.45)}70%{transform:translate3d(-4vw,3vh,0) scale(1.05)}}
@keyframes rigolo-hop{0%,100%{transform:translateY(0) rotate(-4deg) scale(1.04,.96)}50%{transform:translateY(-14px) rotate(4deg) scale(.97,1.05)}}
@keyframes rigolo-idle{0%,100%{transform:translateY(0) rotate(-4deg) scale(1.04,.96)}50%{transform:translateY(-5px) rotate(2deg) scale(1,1)}}
@media(max-width:760px){.intro-rigolo{left:-4%;width:23%}}
.badge-show{position:relative;width:130px;height:138px;filter:drop-shadow(0 9px 0 #e79a352d);animation:badge-arrive .8s cubic-bezier(.18,1.4,.35,1) both}.badge-show svg{width:100%;height:100%}.badge-show:before,.badge-show:after{content:'✦';position:absolute;color:#ffcd48;font-size:2.4rem;animation:badge-spark 1.5s ease-in-out infinite}.badge-show:before{top:7px;left:-25px}.badge-show:after{right:-27px;bottom:32px;animation-delay:.4s}.celebration .badge-show{flex:none}.celebration .dino-card{background:#fffdf2;border-color:#f4cd70}
.chest .box{background:linear-gradient(145deg,#ffe07c 0,#df973e 42%,#aa5f25 100%);box-shadow:inset 0 12px 0 #fff3a466,inset 0 -12px 0 #82421a5e}.chest .box:before{content:'';position:absolute;inset:0 auto 0 18%;width:8%;background:#884b27;box-shadow:140px 0 0 #884b27}.chest .lid{background:linear-gradient(#ffeaa2 0,#f7bd54 50%,#a95c22 100%);box-shadow:inset 0 5px 0 #fff8c0}.chest .lid:after{content:'★';position:absolute;left:calc(50% - 18px);bottom:-17px;width:36px;height:35px;border:4px solid #80501d;background:#ffe384;border-radius:9px;color:#af6b24;display:grid;place-content:center;font-size:1.25rem}.chest .coins{display:flex;justify-content:space-around;gap:1px;top:34px;left:-8px;width:calc(100% + 16px);font-size:1rem}.coin{width:39px;height:39px;flex:none;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 36% 28%,#fff3a9,#efbd4d 46%,#b66c2e 82%);border:4px double #9f5b21;box-shadow:0 3px 0 #804522;color:#a56824}.chest.opened .coin:nth-child(1){animation:coin-arc 1.2s .55s ease-out both}.chest.opened .coin:nth-child(2){animation:coin-arc 1.2s .62s ease-out both}.chest.opened .coin:nth-child(3){animation:coin-arc 1.2s .69s ease-out both}.chest.opened .coin:nth-child(4){animation:coin-arc 1.2s .76s ease-out both}.chest.opened .coin:nth-child(5){animation:coin-arc 1.2s .83s ease-out both}
@keyframes badge-arrive{0%{transform:scale(.2) rotate(-24deg);opacity:0}70%{transform:scale(1.12) rotate(7deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes badge-spark{50%{transform:scale(.4) rotate(45deg);opacity:.3}}
@keyframes coin-arc{0%{transform:translateY(16px) scale(.4);opacity:0}45%{transform:translateY(-75px) rotate(18deg);opacity:1}100%{transform:translateY(-30px) rotate(-8deg);opacity:1}}
/* ───────── 10 novembre 2026 : animations et récit ───────── */
/* Mode calme choisi dans le menu adulte : plus aucun mouvement. (Le réglage du système n'est plus consulté.) */
html.motion-calm *,html.motion-calm *:before,html.motion-calm *:after{animation:none!important;transition-duration:.01ms!important}
/* Chaque nouvel écran arrive en fondu (classe posée par swapView() dans app.js). */
main.screen-in{animation:screen-in .3s ease-out backwards}
@keyframes screen-in{from{opacity:0;transform:translateY(12px)}}

/* Carte : volcan entier dans le bandeau, réservoir d'eau en 8 cases, bouton du final en haut. */
.hero .volcano-art{aspect-ratio:700/430;min-height:0;align-self:center;border-radius:18px}
@media(min-width:761px){.hero{grid-template-columns:1fr auto}.hero .volcano-art{width:clamp(220px,22vw,440px);margin:10px}}
.tank{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;height:30px;margin:12px 0 4px;padding:4px;background:#fff;border:3px solid #2787bf;border-radius:14px;max-width:560px}
.tank span{border-radius:7px;background:#d9eef7;transition:background .5s}
.tank span.full{background:linear-gradient(#8fe3ff,#2796d8)}
.tank span.new{transform-origin:50% 100%;animation:tank-fill .7s 1.5s cubic-bezier(.2,1.5,.3,1) both}
@keyframes tank-fill{from{opacity:.1;transform:scaleY(.15)}to{opacity:1;transform:scaleY(1)}}
.hero-go{display:block;margin-top:10px}
@media(orientation:landscape) and (min-width:900px) and (max-height:800px){.tank{height:24px;margin:6px 0 2px}.hero-go{min-height:50px;padding:10px 22px;margin-top:6px}}

/* Cartes des missions : dessin entier à gauche, texte lisible à droite, trois colonnes. */
@media(min-width:900px){
.mission-grid .mission-card{grid-template-columns:46% minmax(0,1fr);min-height:0;padding:8px 12px 8px 8px}
.mission-grid .mission-illustration{height:auto;aspect-ratio:320/180;width:100%}
.mission-grid .mission-number{left:calc(46% - 36px)}
.mission-grid .mission-card strong{font-size:clamp(1.15rem,1.4vw,1.6rem)}
.mission-grid .mission-card small{font-size:clamp(.8rem,.95vw,1.1rem)}
.mission-grid .mission-tag{font-size:clamp(.62rem,.72vw,.85rem)}
.mission-grid .mission-status{font-size:clamp(.74rem,.9vw,1.05rem)}
}

/* Intro : couverture, puis trois pages d'histoire en gros caractères. */
.intro-skip{display:block;margin-top:8px}
.intro .poster-wrap{justify-self:center;width:fit-content;max-width:100%}
.intro .poster-wrap>img{width:auto;max-width:100%;max-height:calc(100vh - 118px - 2*clamp(24px,4vw,65px) - 46px)}
.intro-copy .story-callout.story-big{max-width:none;padding:22px 26px 20px}
.intro-copy .story-callout.story-big p{max-width:none;font-size:clamp(1.3rem,2.05vw,2.3rem);line-height:1.34;font-weight:800}
.intro-story .eyebrow{margin-bottom:14px}
.intro-nav{display:flex;align-items:center;gap:14px;margin-top:24px}
.intro-nav .big-button{flex:1;max-width:460px}
.intro-dots{display:flex;gap:9px;margin-top:18px}
.intro-dots span{width:14px;height:14px;border-radius:50%;background:#cfe3ea}
.intro-dots .on{background:#f37b3d}
.intro-visual{position:relative;min-width:0}
.intro-volcano{border:7px solid #fff;border-radius:28px;overflow:hidden;box-shadow:0 10px 0 #7dbfbb,0 20px 38px #1b606b25;animation:intro-shake .45s .35s 3}
.intro-volcano .volcano-art{aspect-ratio:700/430;min-height:0;width:100%}
.final-art .volcano-art{background:linear-gradient(#80d0f6 0 78%,#67cb79 78% 100%)!important}
.intro-messenger{position:absolute;left:-10%;bottom:-5%;width:16%;max-width:125px;height:auto;transform-origin:50% 85%;animation:messenger-in .9s cubic-bezier(.2,.8,.3,1) both,rigolo-hop .38s ease-in-out infinite}
.intro-dinos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 10px}
.intro-dino{display:grid;justify-items:center;gap:5px;width:23%;min-width:0;animation:dino-appear .55s calc(.3s + var(--delay)) cubic-bezier(.2,1.5,.3,1) both}
.intro-dino .dino{width:100%;height:clamp(84px,17vh,180px);object-fit:contain}
.intro-dino b{max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;text-align:center;font-family:Fredoka,"Trebuchet MS",sans-serif;font-size:clamp(.8rem,1.05vw,1.15rem);color:#135e9d;background:#fff;border:3px solid var(--dino);border-radius:30px;padding:2px 6px;line-height:1.15}
@keyframes messenger-in{from{translate:0 100px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes intro-shake{25%{transform:translate(-6px,2px)}50%{transform:translate(6px,-2px)}75%{transform:translate(-4px,1px)}}
@keyframes dino-appear{from{opacity:0;transform:translateY(30px) scale(.4)}to{opacity:1;transform:none}}
@media(max-width:760px){.intro-dino{width:30%}.intro-nav{flex-wrap:wrap}}

/* Célébration : les éléments arrivent l'un après l'autre (badge, titre, phrases, compteur, dinos, boutons). */
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes count-pop{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
.celebration .badge-show{width:112px;height:119px}
.celebration .eyebrow,.celebration h1{animation:rise-in .45s .7s both}
.celebration p{animation:rise-in .45s .95s both}
.celebration .celebration-next{font-family:Fredoka,"Trebuchet MS",sans-serif;color:#1169aa;animation-delay:1.15s}
.celebration-count{display:flex;align-items:center;justify-content:center;gap:18px;margin:4px 0;animation:count-pop .5s 1.35s both}
.celebration-count .tank{width:min(420px,46vw);margin:0}
.celebration .team-party{animation:rise-in .45s 1.55s both}
.celebration .team-party .dino-card,.celebration .team-party .dino{animation-delay:calc(1.7s + var(--delay))}
.celebration-buttons{animation:rise-in .4s 1.95s both}
@media(orientation:landscape) and (max-height:800px){.celebration{padding:10px 28px}.celebration .badge-show{width:88px;height:94px}.celebration h1{font-size:2.4rem}.celebration .big-count{font-size:2.6rem}.celebration .dino-team{margin:4px 0 10px}.celebration .dino-card .dino{height:48px}}

/* Victoire : les sept dinos (et DinoRigolo) sont dans le paysage, au premier plan ; l'arc-en-ciel et le coffre sont dessinés dans le volcan. */
.victory{justify-content:flex-start}
.victory-sky{flex:1;min-height:0;grid-template-rows:minmax(0,1fr) auto}
.victory-volcano,.victory-volcano .volcano-art{min-height:230px}
.victory-banner{padding-top:16px;padding-bottom:16px}
.victory-banner h1{font-size:clamp(2.3rem,3.3vw,4.2rem);white-space:nowrap}
.victory-team{grid-column:1/-1;position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:space-around;gap:6px;padding:4px 18px 8px;background:#67cb79}
.victory-team:before{content:"";position:absolute;z-index:-1;left:52%;right:-4%;top:-22px;height:46px;background:#67cb79;border-radius:50% 50% 0 0/100% 100% 0 0}
.victory-dino{flex:1;min-width:0;display:grid;justify-items:center;animation:party-hop .75s calc(.9s + var(--delay)) 4,dino-wave 2.6s calc(4.4s + var(--delay)) ease-in-out infinite}
.victory-dino .dino{width:100%;height:clamp(56px,10.5vh,118px);object-fit:contain}
.victory-dino b{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-family:Fredoka,"Trebuchet MS",sans-serif;font-size:clamp(.7rem,1vw,1.05rem);color:#195b74;background:#fffdf2;border-radius:30px;padding:0 9px}
.victory-rigolo{flex:none;width:auto;height:clamp(84px,16vh,170px);transform-origin:50% 85%;animation:rigolo-hop .42s ease-in-out infinite}
@media(orientation:landscape) and (min-width:900px) and (max-height:800px){.victory{padding-top:10px;padding-bottom:12px}.victory-banner h1{margin:8px 0 12px}.victory-banner p{font-size:1.05rem;margin-bottom:12px}}
@media(max-width:850px){.victory-team{flex-wrap:wrap}.victory-team:before{display:none}.victory-dino{flex:0 0 22%}.victory-rigolo{height:78px}.victory-banner h1{white-space:normal}}

/* Coffre : le couvercle bascule vers l'arrière, on voit l'intérieur et les pièces restent dans le coffre. */
.chest{perspective:700px}
.chest:before{content:"";position:absolute;z-index:0;left:4%;width:92%;top:35px;height:64px;box-sizing:border-box;background:linear-gradient(#2f1608,#6b3a17);border:8px solid #84491f;border-radius:12px 12px 0 0}
.chest .lid{transform-origin:50% 0;transition:transform .8s cubic-bezier(.3,1.3,.5,1) .15s}
.chest.opened .lid{transform:rotateX(150deg)}
.chest .coins{top:62px;left:8%;width:84%;justify-content:space-between}
.chest.opened .coins{transform:none;opacity:1;z-index:4;transition:opacity .3s .5s}
@media(orientation:landscape) and (max-height:800px){.treasure{padding:8px 28px}.treasure h1{font-size:2.3rem;margin:2px 0}.treasure p{font-size:1rem}.treasure .chest,.treasure .chest.opened{transform:none;margin:34px 0 8px}.treasure h2{font-size:1.5rem;margin:0 0 2px}.treasure .dino-team{margin-top:8px}.treasure .dino-card .dino{height:40px}.treasure .text-button{margin-top:2px;padding:6px}}

/* Final : textes et réponses lisibles depuis le canapé sur un grand écran. */
.final-narration{max-width:900px;font-size:clamp(.95rem,1.4vw,1.7rem)}
.final-answers button{min-height:clamp(155px,22vh,260px)}
.final-answers button span{font-size:clamp(3.5rem,5vw,6rem)}
.final-answers button b{font-size:clamp(1.05rem,1.35vw,1.7rem)}
.final-feedback{font-size:clamp(1rem,1.3vw,1.6rem)}
.final-answers .cake-choice{width:clamp(82px,7vw,140px);height:auto}
.final-answers .choice-icon{width:clamp(60px,5vw,100px);height:auto}