:root {
  --ciel: #DDEFF7; --ciel-2: #EAF4F8; --herbe: #BEDFAF; --herbe-2: #CFE8C2; --terre: #D9B996;
  --carotte: #EF9F52; --carotte-ombre: #D2823A; --mare: #4CA6A8; --mare-texte: #2E8C8E; --encre: #2F3A4F;
  --encre-2: #4A546B; --gris: #6B7590; --gris-2: #8A93A6; --creme: #FBF7EF; --creme-2: #F3EEE2; --ligne: #E6DFD0;
  --nuit: #22304A; --nuit-2: #1A2438; --lampe: #F6C177; --lampe-2: #FFE7B3; --blanc: #FFFFFF; --ombre-tuile: #D5DDE3;
  --f-titre: Grandstander, 'Trebuchet MS', 'Segoe UI', sans-serif; --f-texte: Nunito, 'Segoe UI', 'Trebuchet MS', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ciel); overflow: hidden; font-family: var(--f-texte); color: var(--encre); }
body { touch-action: none; user-select: none; -webkit-user-select: none; }

#cadre { position: fixed; inset: 0; overflow: hidden; background: var(--ciel); }
#stage { position: absolute; left: 0; top: 0; width: 390px; height: 844px; min-width: 390px; min-height: 844px; flex: none; overflow: hidden; transform-origin: top left; background: var(--ciel); --W: 390px; --H: 844px; --dx: 0px; --dy: 0px; }
img, svg { display: block; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--mare); outline-offset: 2px; }
.titre { font-family: var(--f-titre); font-weight: 700; }

.ecran { position: absolute; inset: 0; overflow: visible; border: 0 solid transparent; border-width: var(--dy) var(--dx); background-origin: border-box; background-clip: border-box; }
.scene-fond { position: absolute; left: calc(-1 * var(--dx)); top: calc(-1 * var(--dy)); width: var(--W); height: var(--H); background-position: center; background-size: cover; background-repeat: no-repeat; filter: blur(14px) saturate(1.05); transform: scale(1.08); pointer-events: none; }
.voile { inset: calc(-1 * var(--dy)) calc(-1 * var(--dx)); }
.ecran.creme { background: var(--creme); }
.ecran.jardin { background: linear-gradient(180deg, var(--ciel) 0%, var(--ciel-2) 44%, var(--herbe-2) 44%, var(--herbe) 100%); }
.ecran.jardin.monde-maison { background: #FBF3E4; }
.ecran.jardin.monde-ferme { background: linear-gradient(180deg, var(--ciel) 0%, var(--ciel-2) 44%, #D9C95A 44%, var(--herbe) 100%); }
.ecran.jardin.monde-ecole, .ecran.soin.monde-ecole { background: #FBF3E4; }
.zone.lettres .rond { background: radial-gradient(circle at 35% 30%, #FFE3C4, #F2B072); box-shadow: 0 6px 0 #D2823A; }
.zone.chiffres .rond { background: radial-gradient(circle at 35% 30%, #D4EEC3, #9FD08E); box-shadow: 0 6px 0 #7DB36F; }
.zone.copains .rond { background: radial-gradient(circle at 35% 30%, #F9D9D6, #F0A9A0); box-shadow: 0 6px 0 #C97F76; }
.tuile .lettre-svg, .tuile .points-svg { width: 78%; height: 78%; }
.objet .lettre-svg { width: 100%; height: 100%; }
.cible.casier .lettre-svg, .cible.casier .points-svg { width: 100%; height: 100%; }
.copain { position: relative; width: 114px; height: 150px; display: flex; flex-direction: column; align-items: center; }
.copain .assiette { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.carte-son .groupe-objets { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 250px; }
.ecran.jeu { background: linear-gradient(180deg, var(--ciel) 0%, var(--ciel-2) 100%); }
.ecran.crepuscule { background: linear-gradient(180deg, #F6C177 0%, #E8A07A 22%, #7A6A8E 48%, #2E3D5E 70%, var(--nuit) 100%); color: var(--creme); }
.ecran.nuit { background: var(--nuit); color: var(--creme); }

.ecran.nuit .icone-bouton, .ecran.nuit .haut button { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.ecran.nuit .icone-bouton svg, .ecran.nuit .haut button svg { stroke: var(--creme); }
.scene { position: absolute; inset: 0; pointer-events: none; }
.scene .scene-svg { width: 390px; height: 844px; }
.nuage-scene { animation: derive 46s ease-in-out infinite alternate; }
@keyframes derive { from { transform: translateX(-16px); } to { transform: translateX(22px); } }

.col { position: absolute; inset: 0; padding: 50px 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.col h1 { margin: 0; font-family: var(--f-titre); font-weight: 700; font-size: 26px; line-height: 1.1; }
.col p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--encre-2); }
.col .petit { font-size: 12.5px; color: var(--gris-2); line-height: 1.4; text-align: center; }
.libelle { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-2); }
.bouton { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 64px; border-radius: 22px; background: var(--carotte); color: var(--blanc); font-family: var(--f-titre); font-weight: 700; font-size: 22px; box-shadow: 0 6px 0 var(--carotte-ombre); transition: transform .12s; }
.bouton:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--carotte-ombre); }
.bouton.grand { height: 72px; font-size: 24px; }
.bouton.secondaire { background: var(--blanc); color: var(--encre); border: 2.5px solid var(--ligne); box-shadow: none; }
.bouton.contour { background: transparent; color: var(--mare-texte); border: 2px solid var(--mare); box-shadow: none; height: 56px; font-family: var(--f-texte); font-weight: 800; font-size: 16px; }
.bouton.texte { background: transparent; color: var(--mare-texte); box-shadow: none; height: 44px; font-family: var(--f-texte); font-weight: 800; font-size: 14px; }
.bouton.creme { background: var(--creme); color: var(--encre); box-shadow: 0 6px 0 #C9BFA9; }
.bouton[disabled] { opacity: .5; }
.carte { background: var(--blanc); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.carte.douce { background: var(--ciel-2); }
.carte.accent { border-left: 4px solid var(--carotte); }
.carte.sombre { background: var(--encre); color: var(--blanc); }
.tuile-choix { display: flex; align-items: center; justify-content: space-between; background: var(--blanc); border: 2px solid var(--ligne); border-radius: 16px; padding: 0 14px; height: 56px; width: 100%; text-align: left; }
.tuile-choix.on { border: 2.5px solid var(--mare); }
.tuile-choix b { font-weight: 800; font-size: 16px; display: block; }
.tuile-choix small { font-size: 12px; color: var(--gris); }
.tuile-choix .coche { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ligne); display: flex; align-items: center; justify-content: center; }
.tuile-choix.on .coche { background: var(--mare); border-color: var(--mare); }

.champ:not(.zone) { display: flex; align-items: center; justify-content: space-between; background: var(--blanc); border: 2px solid var(--ligne); border-radius: 16px; padding: 0 14px; height: 52px; font-size: 15px; }
.champ input { border: 0; background: transparent; font: inherit; font-weight: 800; text-align: right; color: var(--encre); width: 55%; outline: none; }
.champ input::placeholder { color: var(--gris-2); font-weight: 600; }
.puce { display: inline-flex; align-items: center; gap: 8px; background: var(--blanc); border: 2px solid var(--ligne); border-radius: 999px; padding: 4px 12px 4px 4px; height: 40px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.puce .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--mare); color: var(--blanc); display: flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-weight: 700; font-size: 14px; }
.puce small { color: var(--gris); font-weight: 600; font-size: 12px; }
.icone-bouton { width: 44px; height: 44px; border-radius: 14px; background: var(--blanc); border: 2px solid var(--ligne); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icone-bouton svg { width: 22px; height: 22px; fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico { width: 36px; height: 36px; border-radius: 12px; background: var(--creme-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ico svg { width: 20px; height: 20px; fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ligne-reglage { display: flex; align-items: center; justify-content: space-between; height: 44px; border-bottom: 1px solid #F0EBE0; font-size: 14px; width: 100%; text-align: left; }
.ligne-reglage:last-child { border-bottom: none; }
.ligne-reglage b { font-weight: 800; }
.ligne-reglage span { color: var(--gris); }
.points { display: inline-flex; gap: 4px; margin-left: 8px; flex-shrink: 0; align-items: center; }
.points i { width: 10px; height: 10px; border-radius: 50%; background: var(--ligne); }
.points i.on { background: var(--mare); }
.points small { font-size: 11px; color: var(--gris-2); margin-left: 4px; font-variant-numeric: tabular-nums; }
.competence { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; line-height: 1.25; }
.monde-ligne { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; border-bottom: 1px solid #F0EBE0; }
.monde-ligne:last-of-type { border-bottom: none; }
.monde-ligne > b { font-size: 13px; font-weight: 800; }
.zone-ligne { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.zone-ligne small { color: var(--gris-2); font-size: 11px; }
.rangee { display: flex; gap: 10px; align-items: center; }
.espace { margin-top: auto; }
.clavier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.clavier button { height: 64px; border-radius: 18px; background: var(--blanc); border: 2px solid var(--ligne); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.clavier button.vide { background: transparent; border-color: transparent; }
.clavier button.efface { background: var(--creme-2); border-color: var(--creme-2); }
.clavier button:active { transform: scale(.97); }
.pin-points { display: flex; gap: 16px; justify-content: center; }
.pin-points i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9BFA9; }
.pin-points i.on { background: var(--encre); border-color: var(--encre); }
.pin-points.erreur i { border-color: var(--carotte); }
.secoue { animation: secoue .4s; }
@keyframes secoue { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.haut { position: absolute; left: 16px; right: 16px; top: 54px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 6; }
.haut button { pointer-events: auto; width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; }
.haut button svg { width: 22px; height: 22px; fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bulle { position: absolute; left: 20px; right: 20px; top: 112px; display: flex; align-items: center; gap: 10px; background: var(--blanc); border-radius: 26px; padding: 10px 16px 10px 10px; box-shadow: 0 6px 18px rgba(47,58,79,.08); z-index: 5; }
.bulle .rejouer { width: 44px; height: 44px; border-radius: 50%; background: var(--mare); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bulle .rejouer svg { width: 22px; height: 22px; fill: none; stroke: var(--blanc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bulle .rejouer.parle { animation: pulse 1s infinite; box-shadow: 0 0 0 6px rgba(76,166,168,.25); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.bulle .texte { font-family: var(--f-titre); font-weight: 700; font-size: 17px; line-height: 1.2; flex: 1; }

.bulle .chiffre { flex: none; width: 58px; height: 58px; border-radius: 18px; background: #FFE7C2; box-shadow: 0 3px 0 #F2CFA0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.bulle .chiffre b { font-family: var(--f-titre); font-weight: 700; font-size: 30px; line-height: 1; color: var(--encre); }
.bulle .chiffre i { display: flex; gap: 3px; height: 6px; }
.bulle .chiffre i u { width: 6px; height: 6px; border-radius: 50%; background: #EF9F52; }
.bulle .chiffre.beaucoup i { gap: 2px; } .bulle .chiffre.beaucoup i u { width: 5px; height: 5px; }
.bulle.jardin-bulle { top: 178px; border-radius: 999px; padding: 8px 16px 8px 8px; }
.soleil { position: absolute; left: 0; top: 46px; width: 390px; height: 130px; pointer-events: none; }
.soleil .nuage { animation: derive 40s ease-in-out infinite alternate; }
.soleil .astre { animation: rayonne 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rayonne { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.pico { position: absolute; left: 14px; top: 694px; pointer-events: none; transition: transform .4s ease; z-index: 7; }

.pico-img .paupiere, .pico-img .paupiere-bas { transform-box: fill-box; transform: scaleY(0); }
.pico-img .paupiere { transform-origin: 50% 0%; }
.pico-img .paupiere-bas { transform-origin: 50% 100%; }
.pico-img .cil { opacity: 0; }
.pico-img .pupille { will-change: transform; }
.pico .pico-svg.sortant { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .2s; pointer-events: none; }
.pico.tap { pointer-events: auto; cursor: pointer; touch-action: manipulation; transform-origin: 50% 100%; }
.pico .brille { position: absolute; left: 50%; top: 40%; width: 12px; height: 12px; border-radius: 50%; background: #FFD866; box-shadow: 0 0 8px #FFD866; pointer-events: none; animation: brille .9s ease-out forwards; }
@keyframes brille { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
.pico .pico-svg { animation: respire 3.2s ease-in-out infinite; }
@keyframes respire { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.pico .pupilles circle { transition: transform .4s ease; }
.pico .paupieres ellipse { transform-box: fill-box; transform-origin: center; transform: scaleY(0); animation: cligne 4.6s infinite; }
.pico .paupieres ellipse:last-child { animation-delay: .02s; }
@keyframes cligne { 0%, 93%, 100% { transform: scaleY(0); } 95.5%, 97.5% { transform: scaleY(1); } }
.pico .oreille-g, .pico .oreille-d { transform-origin: 50% 90%; transition: transform .5s ease; }
.pico.regarde-gauche { transform: rotate(-5deg) translateX(-4px); } .pico.regarde-droite { transform: rotate(5deg) translateX(4px); } .pico.regarde-haut { transform: translateY(-4px); }
.pico.montre-gauche { transform: rotate(-10deg) translateX(-10px); } .pico.montre-droite { transform: rotate(10deg) translateX(10px); } .pico.montre-haut { transform: translateY(-10px); }
.pico.montre-gauche .oreille-g { transform: rotate(-38deg); }
.pico.montre-droite .oreille-d { transform: rotate(38deg); }
.pico.montre-haut .oreille-g { transform: rotate(-8deg); } .pico.montre-haut .oreille-d { transform: rotate(8deg); }
.pico .patte-coucou { transform-box: fill-box; transform-origin: 20% 90%; animation: coucou 2.4s ease-in-out infinite; }
@keyframes coucou { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-10deg); } }
.pico .etincelles circle { animation: scintille 1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.pico .etincelles circle:nth-child(2) { animation-delay: .3s; } .pico .etincelles circle:nth-child(3) { animation-delay: .6s; }
@keyframes scintille { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.3); opacity: 1; } }
.pico .zzz text { animation: monte 3s ease-in-out infinite; }
.pico .zzz text:nth-child(2) { animation-delay: 1s; } .pico .zzz text:nth-child(3) { animation-delay: 2s; }
@keyframes monte { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
.pico.bondit { animation: bondit .7s cubic-bezier(.3,.7,.4,1); transform-origin: 50% 100%; }
@keyframes bondit { 0% { transform: scale(1,1) translateY(0); } 15% { transform: scale(1.08,.88) translateY(0); } 45% { transform: scale(.95,1.08) translateY(-24px); } 60% { transform: scale(.97,1.05) translateY(-26px); } 85% { transform: scale(1.08,.9) translateY(0); } 100% { transform: scale(1,1) translateY(0); } }
.objet .pico-svg { animation: none; }

.panier-carottes { position: absolute; left: 284px; top: 738px; width: 84px; height: 84px; border: 0; background: none; padding: 0; z-index: 8; touch-action: none; cursor: grab; }
.panier-carottes .panier-img { position: absolute; left: 4px; top: 12px; }
.panier-carottes .panier-carotte { position: absolute; left: 22px; top: -6px; transform: rotate(-22deg); transition: opacity .3s, transform .3s; }
.panier-carottes.vide .panier-carotte { opacity: 0; transform: translateY(14px) rotate(-22deg); }
.panier-carottes .compte { position: absolute; right: -2px; top: 0; min-width: 26px; height: 26px; border-radius: 13px; background: #EF9F52; color: #fff; font-family: var(--f-titre); font-weight: 700; font-size: 16px; line-height: 26px; text-align: center; box-shadow: 0 2px 0 #D2823A; }
.panier-carottes.vide .compte { opacity: .55; }
.panier-carottes.secoue { animation: secoue .6s ease; }
@keyframes secoue { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-5deg); } }
.panier-carottes.pulse { animation: pulse-panier .5s ease; }
@keyframes pulse-panier { 50% { transform: scale(1.18); } }
.carotte-main, .carotte-vol { position: absolute; width: 64px; height: 64px; z-index: 20; pointer-events: none; }
.carotte-main { transform: translate(-50%, -50%) rotate(-25deg); filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); }
.bulle-besoin { position: absolute; left: 172px; top: 630px; width: 70px; height: 62px; border: 0; padding: 0; background: #fff; border-radius: 22px 22px 22px 6px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 #D5DDE3; z-index: 9; cursor: pointer; animation: flotte-bulle 2.2s ease-in-out infinite; }
@keyframes flotte-bulle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.bulle-besoin.secoue { animation: secoue .6s ease; }
.bulle-besoin .outil { position: relative; display: block; width: 52px; height: 52px; cursor: grab; touch-action: none; transition: opacity .2s; }
.bulle-besoin .outil.en-main { opacity: .3; }
.bulle-besoin .outil.presse { animation: presse .45s ease; }
@keyframes presse { 40% { transform: scaleX(.78) scaleY(1.1); } }
.pate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.outil-main { position: absolute; width: 74px; height: 74px; z-index: 20; pointer-events: none; transform: translate(-50%, -50%) rotate(-15deg); filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); }
.outil-main.boit { animation: boit .8s ease-in-out forwards; }
@keyframes boit { 0% { transform: translate(-50%, -50%) rotate(-15deg); } 100% { transform: translate(-30%, -70%) rotate(-70deg); } }

.ecran.soin { background: linear-gradient(180deg, var(--ciel) 0%, var(--ciel-2) 44%, var(--herbe-2) 44%, var(--herbe) 100%); }
.ecran.soin.monde-maison { background: #FBF3E4; }
.ecran.soin .pico.grand { z-index: 7; }
.etagere { position: absolute; left: 20px; top: 622px; width: 350px; height: 120px; background: rgba(255,248,236,.96); border-radius: 28px; box-shadow: 0 6px 0 #E3D4BC; display: flex; align-items: center; justify-content: center; gap: 14px; z-index: 8; }
.etagere .outil { position: relative; width: 94px; height: 94px; border: 0; padding: 0; background: #fff; border-radius: 22px; box-shadow: 0 4px 0 #E3D4BC; display: flex; align-items: center; justify-content: center; opacity: .5; touch-action: none; transition: opacity .2s; }
.etagere .outil.suivant { opacity: 1; box-shadow: 0 0 0 4px #FFD866, 0 4px 0 #E3D4BC; animation: appel 1.4s ease-in-out infinite; cursor: grab; }
@keyframes appel { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.etagere .outil.fait { opacity: .9; }
.etagere .outil.en-main { opacity: .25; animation: none; }
.etagere .outil.rappel { animation: secoue .5s ease; }
.etagere .outil .coche { position: absolute; right: -8px; top: -8px; width: 28px; height: 28px; border-radius: 50%; background: #6FAE4A; box-shadow: 0 2px 0 #4E7A45; display: flex; align-items: center; justify-content: center; }
.etagere .outil .coche svg { width: 18px; height: 18px; }
.etagere .outil .compte { position: absolute; right: -6px; top: -6px; min-width: 26px; height: 26px; border-radius: 13px; background: #EF9F52; color: #fff; font-family: var(--f-titre); font-weight: 700; font-size: 16px; line-height: 26px; text-align: center; box-shadow: 0 2px 0 #D2823A; }
.etagere .outil.presse { animation: presse .45s ease; }
.outil-main.grand { width: 96px; height: 96px; }
.outil-main.presse { animation: presse .45s ease; }
.outil-main.savonne { animation: savonne .7s ease-in-out; }
@keyframes savonne { 0%,100% { transform: translate(-50%,-50%) rotate(0); } 25% { transform: translate(-62%,-46%) rotate(-14deg); } 50% { transform: translate(-40%,-54%) rotate(10deg); } 75% { transform: translate(-58%,-48%) rotate(-8deg); } }
.outil-main.frotte-brosse { animation: frotte-brosse .14s ease-in-out infinite alternate; }
@keyframes frotte-brosse { from { transform: translate(calc(-50% - 11px), calc(-50% + 2px)); } to { transform: translate(calc(-50% + 11px), calc(-50% - 2px)); } }
.outil-main.frotte-gant { animation: frotte-gant .55s linear infinite; }
@keyframes frotte-gant { 0% { transform: translate(-50%,-50%) translate(-26px,0) rotate(-10deg); } 25% { transform: translate(-50%,-50%) translate(0,-40px) rotate(0); } 50% { transform: translate(-50%,-50%) translate(26px,0) rotate(10deg); } 75% { transform: translate(-50%,-50%) translate(0,16px) rotate(0); } 100% { transform: translate(-50%,-50%) translate(-26px,0) rotate(-10deg); } }
.outil-main.douche { animation: douche .6s ease-in-out infinite alternate; }
@keyframes douche { from { transform: translate(-50%,-50%) rotate(-10deg); } to { transform: translate(-50%,-50%) rotate(10deg); } }
.pico .pico-svg.calque { position: absolute; left: 0; top: 0; opacity: 0; animation: none; pointer-events: none; }
.pico.routine .pico-svg { animation: none; }
.mousse-bulle { position: absolute; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: inset -3px -3px 6px rgba(120,160,200,.35); pointer-events: none; z-index: 19; animation: mousse-monte 1.1s ease-out forwards; }
@keyframes mousse-monte { to { transform: translate(var(--dx), -44px) scale(1.3); opacity: 0; } }
.goutte { position: absolute; width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #7FC4EE; pointer-events: none; z-index: 19; animation: goutte-tombe .7s ease-in forwards; }
@keyframes goutte-tombe { to { transform: translate(var(--dx), 72px); opacity: 0; } }
.etoile-dent { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #BFE7FF, 0 0 2px #fff; pointer-events: none; z-index: 19; animation: brille .8s ease-out forwards; }
.pico.faim .pico-svg { animation: creux 2.4s ease-in-out infinite; }
@keyframes creux { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(1px) rotate(-1.5deg); } 60% { transform: translateY(0) rotate(1.5deg); } }
.miette { position: absolute; width: 8px; height: 8px; border-radius: 3px; background: #EF9F52; pointer-events: none; z-index: 21; animation: miette .7s ease-out forwards; }
@keyframes miette { to { transform: translate(var(--dx), var(--dy)) rotate(120deg); opacity: 0; } }

.compagnon { position: absolute; pointer-events: none; z-index: 7; }
.ecran.jeu .compagnon { right: 18px; top: 712px; }
.ecran.jeu .compagnon.lili { top: 704px; }
.carte-lili { background: #fff; border-radius: 22px; padding: 10px 12px 12px; box-shadow: 0 6px 0 #D5C6B3; }
.compagnon .ailes { transform-box: fill-box; transform-origin: 50% 100%; animation: bat .22s ease-in-out infinite alternate; }
@keyframes bat { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.compagnon.flotte { animation: flotte 3.4s ease-in-out infinite; }
.compagnon.flotte.gaston { animation-delay: 1.1s; } .compagnon.flotte.nour { animation-delay: .5s; animation-duration: 2.6s; }
@keyframes flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.compagnon .gaston-svg .pupilles { animation: regarde-autour 6s ease-in-out infinite; }
@keyframes regarde-autour { 0%, 40%, 100% { transform: translateX(0); } 50%, 70% { transform: translateX(-3px); } 80%, 90% { transform: translateX(3px); } }
.compagnon.content { animation: saute .7s ease; }
@keyframes saute { 0%,100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-26px) rotate(-6deg); } 70% { transform: translateY(-4px) rotate(4deg); } }

.ecran.carte { background: linear-gradient(180deg, var(--ciel) 0%, var(--ciel-2) 100%); }
.ecran.carte .chemin { position: absolute; top: calc(-1 * var(--dy)); bottom: calc(-1 * var(--dy)); left: calc(-1 * var(--dx)); right: calc(-1 * var(--dx)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; z-index: 1; }
.ecran.carte .chemin::-webkit-scrollbar { display: none; }
.ecran.carte .piste { position: relative; width: 390px; margin: var(--dy) 0 var(--dy) var(--dx); }
.ecran.carte .bulle { z-index: 6; }
.ecran.carte .soleil { z-index: 6; }
.ecran.carte .pico { z-index: 7; }
.ecran.carte .panier-carottes { z-index: 8; }
.ecran.carte .bulle-besoin { z-index: 9; }

.chapitre { position: absolute; left: calc(-1 * var(--dx)); width: var(--W); pointer-events: none; overflow: hidden; }
.chapitre::after { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; background: inherit; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.chapitre .ciel { position: absolute; left: 0; right: 0; top: 0; }
.chapitre .sol { position: absolute; left: 0; right: 0; bottom: 0; background-size: 780px auto; background-repeat: repeat; background-position: center top; border-radius: 50% 50% 0 0 / 34px 34px 0 0; box-shadow: 0 -5px 0 rgba(255,255,255,.4); }
.chapitre .sol::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.chapitre.monde-jardin { background: #BFE1F4; } .chapitre.monde-jardin .ciel { background: linear-gradient(180deg, #BFE1F4, #DDEFF7); } .chapitre.monde-jardin .sol { background-color: var(--herbe); } .chapitre.monde-jardin .sol::after { background: linear-gradient(180deg, rgba(207,232,194,.55), rgba(190,223,175,.42)); }
.chapitre.monde-maison { background: #FBF3E4; } .chapitre.monde-maison .ciel { background: linear-gradient(180deg, #FBF3E4, #F1E3CB); } .chapitre.monde-maison .sol { background-color: #E9C990; } .chapitre.monde-maison .sol::after { background: linear-gradient(180deg, rgba(251,243,228,.5), rgba(245,226,190,.35)); }
.chapitre.monde-ferme { background: #FFE7B3; } .chapitre.monde-ferme .ciel { background: linear-gradient(180deg, #FFE7B3, #DDEFF7); } .chapitre.monde-ferme .sol { background-color: #E9D27A; } .chapitre.monde-ferme .sol::after { background: linear-gradient(180deg, rgba(238,223,154,.6), rgba(233,210,122,.5)); }
.chapitre.monde-ecole { background: #E8EEF8; } .chapitre.monde-ecole .ciel { background: linear-gradient(180deg, #E8EEF8, #D6E2F3); } .chapitre.monde-ecole .sol { background-color: #D8E3EE; } .chapitre.monde-ecole .sol::after { background: linear-gradient(180deg, rgba(232,238,248,.45), rgba(214,226,243,.3)); }
.deco { position: absolute; pointer-events: none; z-index: 3; }
.deco img, .deco svg { width: 100%; height: 100%; object-fit: contain; }
.piste > .deco { z-index: 3; }
.panneau-monde { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 18px 0 6px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 4px 0 rgba(47,58,79,.12); font-family: var(--f-titre); font-weight: 700; font-size: 17px; color: var(--encre); white-space: nowrap; z-index: 3; }
.panneau-monde .rond { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--creme-2); flex-shrink: 0; }
.panneau-monde .rond img.zone-img { width: 40px; height: 40px; object-fit: contain; }
.panneau-monde .rond svg { width: 26px; height: 26px; fill: none; stroke: #4A3A2A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.panneau-monde span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.panneau-monde small { font-family: var(--f-texte); font-weight: 800; font-size: 11px; color: var(--gris); }

.route { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }
.route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route .bord { stroke: rgba(120,90,50,.16); stroke-width: 34px; }
.route .fond { stroke: #F1E3C4; stroke-width: 26px; }
.route .faite { stroke: #A9D48B; stroke-width: 26px; }
.route .pointilles { stroke: rgba(255,255,255,.85); stroke-width: 4px; stroke-dasharray: 10 14; }

.noeud { position: absolute; width: 92px; height: 92px; border: 0; padding: 0; background: none; z-index: 4; touch-action: manipulation; cursor: pointer; }
.noeud .rond { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--cat-clair)); border: 4px solid var(--cat); box-shadow: 0 6px 0 var(--cat), 0 8px 12px rgba(47,58,79,.14); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.noeud:active .rond { transform: scale(.94); }
.noeud .rond img.zone-img { width: 66px; height: 66px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(60,40,20,.18)); }
.noeud .rond svg { width: 44px; height: 44px; fill: none; stroke: #4A3A2A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.noeud .numero { position: absolute; right: -6px; bottom: 4px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--cat); color: #fff; font-family: var(--f-titre); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.noeud .feuilles-noeud { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); display: flex; gap: 2px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 3px 7px; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.noeud .feuilles-noeud svg { width: 16px; height: 16px; }
.noeud .feuilles-noeud svg.pousse { animation: pousse .55s cubic-bezier(.3,1.6,.5,1) both; }
.noeud.etat-loin { opacity: .55; }
.noeud.etat-loin .rond { filter: saturate(.2); border-color: #C9D2DA; box-shadow: 0 6px 0 #B9C3CC; }
.noeud.etat-loin .numero { background: #B9C3CC; }
.noeud.etat-suivant { z-index: 5; animation: noeud-pulse 1.6s ease-in-out infinite; }
.noeud.etat-suivant .rond { box-shadow: 0 6px 0 var(--cat), 0 0 0 8px rgba(246,193,119,.55), 0 0 36px rgba(246,193,119,.8); }
.noeud.etat-essaye .rond { border-style: dashed; }
.noeud.rappel { animation: noeud-rappel .6s ease; }
.noeud.fete .rond { animation: pousse .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes noeud-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes noeud-rappel { 0%,100% { transform: scale(1); } 30% { transform: scale(1.22); } 60% { transform: scale(.96); } }
.btn-ou svg { transform: rotate(-90deg); }

.onglets { display: flex; gap: 4px; background: var(--creme-2); border-radius: 999px; padding: 4px; }
.onglets button { flex: 1; height: 36px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--gris); }
.onglets button.on { background: var(--blanc); color: var(--encre); box-shadow: 0 2px 0 var(--ligne); }
.grille-livres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.livre-carte { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--blanc); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 0 var(--ligne); padding-bottom: 10px; }
.livre-carte .couv { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--creme-2); border-bottom: 4px solid var(--c, var(--carotte)); }
.livre-carte .couv img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.livre-carte .couv .titre-couv { position: absolute; left: 6px; right: 6px; top: 7px; text-align: center; }
.livre-carte .couv .titre-couv b { display: block; font-family: var(--f-titre); font-weight: 700; font-size: 14px; line-height: 1.05; color: var(--encre); text-shadow: 0 1px 0 #fff, 0 0 8px rgba(255,255,255,.95); }
.livre-carte .couv .titre-couv small { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 800; color: var(--encre-2); text-shadow: 0 1px 0 #fff, 0 0 6px rgba(255,255,255,.95); }
.livre-carte .theme { margin: 6px 10px 0; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c, var(--carotte)); }
.livre-carte .resume { margin: 0 10px; font-size: 11px; line-height: 1.3; color: var(--gris); }
.livre-carte:active { transform: scale(.98); }

.histoire-carte .couv img.monde { object-fit: contain; padding: 14%; box-sizing: border-box; background: color-mix(in srgb, var(--c, #F2A25C) 28%, #FBF6EC); }
.histoire-carte b { display: block; margin: 8px 10px 0; font-family: var(--f-titre); font-weight: 700; font-size: 14px; line-height: 1.1; color: var(--encre); }
.histoire-carte .duree { display: flex; align-items: center; gap: 4px; margin: 3px 10px 0; font-size: 11px; font-weight: 800; color: var(--gris); }
.ecran.nuit .livre-carte { box-shadow: 0 4px 0 rgba(0,0,0,.35); }

.carte.livres .rayon { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.carte.livres .rayon::-webkit-scrollbar { display: none; }
.livre-mini { flex: 0 0 96px; display: flex; flex-direction: column; gap: 4px; text-align: left; scroll-snap-align: start; }
.livre-mini .couv { display: block; width: 96px; height: 128px; border-radius: 12px; overflow: hidden; background: var(--creme-2); box-shadow: 0 3px 0 var(--ligne); border-bottom: 4px solid var(--c, var(--carotte)); }
.livre-mini .couv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.livre-mini b { font-size: 11.5px; line-height: 1.15; color: var(--encre); }
.livre-mini small { font-size: 10px; color: var(--gris-2); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.livre-mini:active .couv { transform: scale(.97); }
.ecran.livre { background: var(--blanc); }
.ecran.livre .haut { z-index: 6; }
.ecran.livre .lpages { position: absolute; left: 0; right: 0; top: 0; bottom: 96px; overflow: hidden; touch-action: pan-y; }
.lpage { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateX(40px) rotateY(-12deg); transform-origin: left center; transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .35s; pointer-events: none; overflow-y: auto; }
.lpage.on { opacity: 1; transform: none; pointer-events: auto; }
.lpage.avant { transform: translateX(-40px) rotateY(12deg); transform-origin: right center; }
.lpage img, .livre-mini img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.lpage .illu { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 80%; display: block; background: var(--creme-2); }
.lpage .cadre-illu { position: relative; flex: none; }
.lpage .cadre-illu.plein .illu { aspect-ratio: 3 / 4; object-position: center; }
.lpage.couverture .illu { aspect-ratio: auto; flex: 1; min-height: 0; height: 100%; object-position: center; }
.lpage.couverture .titre-couv { position: absolute; left: 20px; right: 20px; top: 108px; text-align: center; }
.lpage.couverture .titre-couv b { display: block; font-family: var(--f-titre); font-weight: 700; font-size: 34px; line-height: 1.02; text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255,255,255,.95); }
.lpage.couverture .titre-couv small { display: block; margin-top: 6px; font-size: 15px; font-weight: 800; color: var(--encre-2); text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255,255,255,.95); }
.lpage.couverture .pied { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 22px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92) 45%); text-align: center; font-size: 13px; color: var(--encre-2); font-weight: 800; }
.lpage .texte { padding: 14px 22px 24px; }
.lpage .texte h2 { font-family: var(--f-titre); font-weight: 700; font-size: 22px; margin: 0 0 8px; }
.lpage .texte p { margin: 0; font-size: 18px; line-height: 1.5; }
.lpage .cadre-illu.plein + .texte p { font-size: 16.5px; }
.lpage .ecouter { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--ciel-2); color: var(--mare-texte); font-weight: 800; font-size: 14px; }
.lpage .ecouter svg { width: 18px; height: 18px; fill: none; stroke: var(--mare-texte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lpage.parents { background: var(--creme); padding: 100px 22px 24px; }
.lpage.parents .libelle { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.lpage.parents h2 { font-family: var(--f-titre); font-weight: 700; font-size: 24px; margin: 4px 0 12px; }
.lpage.parents ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
.lpage.parents .fin { margin-top: auto; text-align: center; font-family: var(--f-titre); font-weight: 700; font-size: 20px; color: var(--mare-texte); padding-top: 18px; }
.etiquettes { position: absolute; inset: 0; pointer-events: none; }
.etiquettes svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.etiquettes line { stroke: var(--encre); vector-effect: non-scaling-stroke; stroke-width: 2px; }
.etiquettes circle { fill: var(--carotte); stroke: #fff; vector-effect: non-scaling-stroke; stroke-width: 2px; }
.etiquettes span { position: absolute; transform: translate(-50%, -50%); background: rgba(255,255,255,.95); color: var(--encre); font-family: var(--f-titre); font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 0 var(--ligne); white-space: nowrap; }
.lnav { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 12px; background: var(--blanc); border-top: 1px solid var(--ligne); z-index: 5; }
.lnav .fleche { width: 60px; height: 60px; border-radius: 50%; background: var(--carotte); color: #fff; box-shadow: 0 4px 0 var(--carotte-ombre); font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lnav .fleche:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--carotte-ombre); }
.lnav .fleche[disabled] { opacity: .3; }
.lnav .points { display: flex; gap: 6px; }
.lnav .points i { width: 9px; height: 9px; border-radius: 50%; background: var(--ligne); }
.lnav .points i.on { background: var(--carotte); }
.lnav .points i.parents { border-radius: 3px; }

.barre { height: 10px; border-radius: 999px; background: var(--creme-2); overflow: hidden; }
.barre i { display: block; height: 100%; border-radius: 999px; background: #6FAE4A; }
.cat-ligne { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 8px; font-size: 12px; }
.cat-ligne .pastille { width: 12px; height: 12px; border-radius: 50%; }
.cat-ligne .nom { font-weight: 800; }
.cat-ligne .detail { color: var(--gris-2); font-size: 11px; }
.cat-ligne .taux { font-weight: 800; color: var(--mare-texte); font-size: 11px; min-width: 62px; text-align: right; }
.cat-ligne .taux.bas { color: #B5462F; }
.arevoir { font-size: 12px; line-height: 1.35; color: var(--encre-2); }

.plateau { position: absolute; left: 0; top: 0; width: 390px; height: 844px; z-index: 2; }
.premier-plan { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.feuilles { display: flex; gap: 8px; pointer-events: none; background: rgba(255,255,255,.7); border-radius: 999px; padding: 6px 12px; }
.feuilles svg { width: 24px; height: 24px; }
.feuilles svg.pousse { animation: pousse .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes pousse { 0% { transform: scale(.3) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
.grille { position: absolute; left: 23px; display: grid; gap: 16px; }
.grille.deux { grid-template-columns: repeat(2, 164px); }
.grille.quatre { grid-template-columns: repeat(2, 164px); }
.grille.six { left: 24px; grid-template-columns: repeat(3, 108px); gap: 9px; }
.grille.trois { left: 24px; grid-template-columns: 342px; gap: 14px; }

.grille.deuxbd { left: 24px; grid-template-columns: 342px; gap: 16px; }
.tuile.grande-bd-tuile { width: 342px; height: 202px; }
.tuile.grande-bd-tuile img { width: auto; height: 186px; border-radius: 16px; }
.grille.trois.compact { gap: 12px; }
.tuile { width: 164px; height: 164px; border-radius: 24px; background: var(--blanc); box-shadow: 0 6px 0 var(--ombre-tuile); display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .3s, opacity .3s; position: relative; }
.tuile:active { transform: scale(.96); }
.tuile svg, .tuile img { width: 120px; height: 120px; }
img.objet-img { object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.tuile.large { width: 342px; height: 132px; }
.tuile.large svg, .tuile.large img { width: auto; height: 112px; }
.grille.compact .tuile.large { height: 96px; }
.grille.compact .tuile.large svg, .grille.compact .tuile.large img { height: 82px; }
.grille.six .tuile { width: 108px; height: 132px; }
.grille.six .tuile svg, .grille.six .tuile img { width: 84px; height: 84px; }
.tuile.libre { position: absolute; background: transparent; box-shadow: none; border-radius: 50%; }
.tuile.libre svg, .tuile.libre img { width: 100%; height: 100%; }
.tuile.halo { box-shadow: 0 6px 0 var(--ombre-tuile), 0 0 0 8px rgba(246,193,119,.55), 0 0 40px rgba(246,193,119,.6); }
.tuile.libre.halo { box-shadow: 0 0 0 8px rgba(246,193,119,.55), 0 0 40px rgba(246,193,119,.7); background: rgba(255,255,255,.5); }
.tuile.juste { box-shadow: 0 6px 0 var(--ombre-tuile), 0 0 0 6px rgba(76,166,168,.5); }
.tuile.libre.juste { box-shadow: 0 0 0 6px rgba(76,166,168,.5); background: rgba(255,255,255,.6); }
.tuile.ombre { opacity: .55; }
.tuile.tremble { animation: tremble .45s; }
@keyframes tremble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

.tuile.compte .badge { position: absolute; right: -6px; top: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--carotte); color: #fff; font-family: var(--f-titre); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 var(--carotte-ombre); transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.tuile.compte.fait .badge { transform: scale(1); }
.tuile.compte.fait { animation: hop .4s ease; }
@keyframes hop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.tuile.carte { perspective: 600px; background: transparent; box-shadow: none; }
.tuile.carte .interieur { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s; }
.tuile.carte.retournee .interieur { transform: rotateY(180deg); }
.tuile.carte .face { position: absolute; inset: 0; border-radius: 24px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--blanc); box-shadow: 0 6px 0 var(--ombre-tuile); }
.tuile.carte .face.dos { background: #EAF4F8; }
.tuile.carte .face.dos svg, .tuile.carte .face.dos img { width: 78%; height: 78%; }
.tuile.carte .face.recto { transform: rotateY(180deg); }
.tuile.carte .face.recto svg, .tuile.carte .face.recto img { width: 76%; height: 76%; }
.tuile.carte.trouvee .face.recto { box-shadow: 0 6px 0 var(--ombre-tuile), 0 0 0 6px rgba(76,166,168,.5); }
.tuile.carte.halo .face.dos { box-shadow: 0 6px 0 var(--ombre-tuile), 0 0 0 8px rgba(246,193,119,.55), 0 0 40px rgba(246,193,119,.6); }

.mot-carte { position: absolute; left: 24px; top: 216px; width: 342px; height: 150px; border-radius: 28px; background: var(--blanc); box-shadow: 0 6px 0 var(--ombre-tuile); display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 16px; }
.mot-carte .image svg, .mot-carte .image img { width: 120px; height: 120px; }
.mot-carte .syllabes { font-family: var(--f-titre); font-weight: 700; font-size: 30px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mot-carte .syllabes i { color: var(--gris-2); font-style: normal; font-size: 22px; }
.mot-carte .syllabes .s0 { color: var(--carotte); } .mot-carte .syllabes .s1 { color: var(--mare); } .mot-carte .syllabes .s2 { color: #8E7CC3; }
.frappes { position: absolute; left: 0; right: 0; top: 386px; display: flex; justify-content: center; gap: 14px; }
.frappes i { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.8); border: 3px solid var(--carotte); transition: transform .25s, background .25s; }
.frappes i.on { background: var(--carotte); transform: scale(1.15); }
.tambour { position: absolute; left: 95px; top: 440px; width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.tambour svg, .tambour img { width: 200px; height: 200px; filter: drop-shadow(0 8px 0 rgba(47,58,79,.12)); }
.tambour.frappe { animation: frappe .25s ease; }
@keyframes frappe { 0% { transform: scale(1); } 40% { transform: scale(.9) translateY(6px); } 100% { transform: scale(1); } }
.tambour.halo svg, .tambour.halo img { filter: drop-shadow(0 0 16px rgba(246,193,119,.95)); }

.objet { position: absolute; touch-action: none; cursor: grab; transition: box-shadow .2s; }
.objet svg, .objet img { width: 100%; height: 100%; }
.objet.saisi { z-index: 20; filter: drop-shadow(0 10px 10px rgba(47,58,79,.25)); transition: none; }
.objet.retour { transition: left .35s ease, top .35s ease; }
.objet.pose { transition: left .25s ease, top .25s ease; }
.objet.halo svg, .objet.halo img { filter: drop-shadow(0 0 12px rgba(246,193,119,.9)); }
.planche { position: absolute; left: 16px; width: 358px; border-radius: 28px; background: rgba(251,247,239,.78); box-shadow: 0 6px 0 rgba(201,191,169,.6); }
.cible { position: absolute; }
.cible svg, .cible img { width: 100%; height: 100%; }
.cible.halo { filter: drop-shadow(0 0 14px rgba(246,193,119,.95)); }
.cible.accueil { border-radius: 24px; background: rgba(255,255,255,.35); border: 3px dashed rgba(255,255,255,.9); }
.cible.casier { border-radius: 22px; background: rgba(255,255,255,.55); border: 3px dashed #C9BFA9; }
.cible.casier .marque { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); border-radius: 50%; background: var(--encre); opacity: .5; }
.cible.casier .marque.petit { width: 8px; height: 8px; } .cible.casier .marque.moyen { width: 13px; height: 13px; } .cible.casier .marque.grand { width: 18px; height: 18px; } .cible.casier .marque.geant { width: 23px; height: 23px; }
.frise { position: absolute; left: 24px; top: 224px; width: 342px; background: var(--creme-2); border-radius: 24px; padding: 14px; display: flex; justify-content: space-between; align-items: center; }
.frise .case { width: 58px; height: 58px; border-radius: 16px; background: var(--blanc); display: flex; align-items: center; justify-content: center; }
.frise .case.vide { background: transparent; border: 3px dashed #C9BFA9; }
.frise .case.remplie { animation: pousse .5s cubic-bezier(.3,1.6,.5,1); }
.frise .case svg, .frise .case img { width: 40px; height: 40px; }
.carte-son { position: absolute; left: 24px; top: 204px; width: 342px; height: 150px; border-radius: 28px; background: var(--blanc); box-shadow: 0 6px 0 var(--ombre-tuile); display: flex; align-items: center; justify-content: center; gap: 24px; }
.carte-son svg, .carte-son img { width: 120px; height: 120px; }
.carte-son .ecouter { width: 56px; height: 56px; border-radius: 50%; background: var(--ciel-2); display: flex; align-items: center; justify-content: center; }
.carte-son .ecouter svg { width: 26px; height: 26px; fill: none; stroke: var(--mare); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bravo { position: absolute; left: 0; right: 0; top: 380px; text-align: center; font-family: var(--f-titre); font-weight: 700; font-size: 34px; color: var(--encre); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; pointer-events: none; z-index: 30; text-shadow: 0 2px 0 #fff, 0 0 18px #fff; }
.bravo.on { opacity: 1; transform: scale(1); }
.etincelle { position: absolute; width: var(--r); height: var(--r); margin: -4px; border-radius: 50%; background: var(--c); pointer-events: none; z-index: 28; animation: etincelle .9s ease-out forwards; }
@keyframes etincelle { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.etapes { position: absolute; left: 20px; right: 20px; top: 606px; display: flex; justify-content: space-between; gap: 6px; }
.fin-carte { position: absolute; left: 20px; right: 20px; bottom: 154px; background: var(--creme); color: var(--encre); border-radius: 22px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.fin-carte .titre { font-size: 18px; line-height: 1.25; }
.fin-carte .pourquoi { font-size: 12px; line-height: 1.3; color: var(--gris-2); }
.fin-bas { position: absolute; left: 20px; right: 20px; top: 700px; display: flex; flex-direction: column; gap: 10px; }
.fin-bas .petit { text-align: center; font-size: 12px; color: #C9D2E6; }
.lampe { position: absolute; left: 55px; top: 90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(246,193,119,.55) 0%, rgba(246,193,119,.18) 45%, rgba(246,193,119,0) 70%); pointer-events: none; animation: rayonne 4s ease-in-out infinite; }
.oreilles-titre { position: absolute; left: 24px; right: 24px; top: 350px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.ondes { position: absolute; left: 24px; top: 500px; width: 342px; height: 60px; }
.ondes rect { transform-box: fill-box; transform-origin: center; animation: onde 1.6s ease-in-out infinite alternate; }
.ondes rect:nth-child(odd) { animation-delay: .4s; } .ondes rect:nth-child(3n) { animation-delay: .8s; }
@keyframes onde { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
.pause-grand { position: absolute; left: 147px; top: 590px; width: 96px; height: 96px; border-radius: 50%; background: var(--creme); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 0 #C9BFA9; }
.pause-grand svg { width: 40px; height: 40px; fill: var(--encre); }
.voile { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 1.5s; pointer-events: none; }
.voile.on { opacity: .96; pointer-events: auto; }
.avertissement-dev { position: absolute; left: 12px; right: 12px; bottom: 8px; font-size: 10px; color: #9AA6C2; text-align: center; pointer-events: none; z-index: 40; }
.fondu { animation: fondu .35s ease; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .pico .paupieres ellipse { transform: scaleY(0) !important; } }

.demo-fin { position: absolute; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(34, 48, 74, .58); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.demo-fin.on { opacity: 1; }
.demo-carte { background: var(--creme); border-radius: 24px; padding: 22px 20px; text-align: center; box-shadow: 0 8px 0 rgba(0, 0, 0, .18); max-width: 300px; }
.demo-titre { font-family: var(--f-titre); font-weight: 700; font-size: 20px; line-height: 1.15; margin: 0 0 8px; color: var(--encre); }
.demo-texte { font-size: 14px; line-height: 1.4; color: var(--encre-2); margin: 0 0 16px; }
.demo-bouton { display: block; font-family: var(--f-titre); font-weight: 700; font-size: 17px; text-decoration: none; padding: 13px 18px; border-radius: 18px; background: var(--carotte); color: #fff; box-shadow: 0 5px 0 var(--carotte-ombre); }
.demo-bouton:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--carotte-ombre); }

.fente-bd { width: 100%; height: 100%; border-radius: 16px; border: 3px dashed rgba(47,58,79,.28); background: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-weight: 700; font-size: 26px; color: rgba(47,58,79,.35); }
.objet .case-bd, .objet.pose .case-bd { border-radius: 14px; border: 3px solid var(--encre); object-fit: cover; background: #EFEAE0; }

.intro-bd { position: absolute; inset: 0; z-index: 30; background: rgba(47,58,79,.82); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.intro-bd img { width: 78%; max-width: 300px; border-radius: 24px; border: 5px solid #fff; display: block; -webkit-user-drag: none; }
.intro-bd p { color: #fff; text-align: center; font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0; max-width: 320px; }
.intro-bd .passer { color: rgba(255,255,255,.7); font-size: 13px; font-weight: 700; }
.intro-bd.arrive img { animation: bd-arrive .34s ease-out; }
@keyframes bd-arrive { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.intro-bd.propose .bd-oui { padding: 0; border: 5px solid #fff; border-radius: 26px; overflow: hidden; background: none; }
.intro-bd.propose .bd-oui img { width: 240px; height: 240px; object-fit: cover; display: block; -webkit-user-drag: none; }
.intro-bd.propose .bd-non { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; }
.intro-bd.propose .bd-non svg { width: 34px; height: 34px; stroke: var(--encre); fill: none; stroke-width: 2.5; }

.ecran.bd { background: var(--c, #E4F2DC); display: flex; flex-direction: column; gap: 4px; }

.ecran.bd .haut-bd { display: flex; align-items: center; gap: 10px; padding: 8px 4px 2px; }
.ecran.bd .haut-bd .titre-bd { flex: 1; text-align: center; font-family: var(--f-titre); font-size: 18px; }

.planche-bd { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; gap: 10px; overflow-y: auto; padding: 8px 2px 20px; align-content: start; }

.case-bd-btn { position: relative; padding: 0; border: 3px solid var(--encre); border-radius: 18px; overflow: hidden; background: #EFEAE0; }

.case-bd-btn img { width: 100%; height: auto; aspect-ratio: 1; display: block; -webkit-user-drag: none; }
.case-bd-btn .num { position: absolute; left: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--encre);
  font-family: var(--f-titre); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }

.grande-bd[hidden] { display: none; }
.grande-bd { position: absolute; inset: 0; background: rgba(47,58,79,.78); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; z-index: 5; }
.grande-bd img { width: 100%; max-width: 320px; border-radius: 22px; border: 4px solid #fff; -webkit-user-drag: none; }
.grande-bd p { color: #fff; text-align: center; font-size: 17px; font-weight: 800; max-width: 320px; }