/* Maquette scenes InuNeko (test) */
.scene{position:relative;max-width:980px;margin:2.5rem auto 3.5rem;padding:1.5rem 1rem 1rem;border-radius:18px;background:linear-gradient(#fbf7f0,#f3eadc);overflow:hidden}
.scene h2{margin:0 0 .3rem}.scene .scene-sous{margin:0 0 1rem;opacity:.8}
.sc-sol{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:.6rem;min-height:clamp(230px,34vw,380px);padding-bottom:10px}
.sc-sol::after{content:"";position:absolute;left:8%;right:8%;bottom:4px;height:14px;border-radius:50%;background:rgba(92,58,33,.10)}
.sc-el{position:relative;z-index:1;line-height:0}
.sc-el img{display:block;width:auto;transform-origin:50% 100%}
.s1{--p:clamp(210px,32vw,360px)}
.s1 .precila img{height:var(--p)}.s1 .tsuky img{height:calc(var(--p)*.55)}.s1 .chiot img{height:calc(var(--p)*.32)}
.s1 .chiot{transform:scaleX(-1)}
.s2{--p:clamp(180px,26vw,280px)}
.s2 .precila img{height:var(--p)}.s2 .chiot img{height:calc(var(--p)*.59)}
.sc-icone{position:absolute;width:38px;height:38px;opacity:0;pointer-events:none;z-index:2}
.s1 .coeur{left:50%;top:-18%}.s2 .loupe{right:-18%;top:-30%}.s2 .coeur{left:30%;top:-28%}
.sc-rejouer{margin-top:.8rem;background:none;border:1px solid rgba(92,58,33,.35);border-radius:999px;padding:.45rem 1rem;font:inherit;font-size:.85rem;cursor:pointer;color:inherit}
.sc-rejouer:focus-visible{outline:2px dashed #b8643a;outline-offset:3px}
.sc-etapes{display:flex;justify-content:center;gap:1.4rem;list-style:none;padding:0;margin:1rem 0 0;font-size:.95rem}
.sc-etapes li{opacity:.35}
/* Scene 1 */
.s1.joue .precila{animation:e-gauche .7s ease-out both}
.s1.joue .tsuky{animation:e-droite .7s ease-out .4s both}
.s1.joue .chiot{animation:e-trot 1.1s ease-out 1.1s both}
.s1.joue .chiot img{animation:trot .22s ease-in-out 1.1s 5 alternate}
.s1.joue .precila img{animation:penche .9s ease-in-out 2.4s both}
.s1.joue .tsuky img{animation:hop .6s ease-in-out 2.8s}
.s1.joue .coeur{animation:coeur 1.2s ease-out 2.9s both}
@keyframes e-gauche{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes e-droite{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes e-trot{from{opacity:0;transform:scaleX(-1) translateX(-260px)}to{opacity:1;transform:scaleX(-1)}}
@keyframes trot{from{transform:translateY(0)}to{transform:translateY(-7px) rotate(-2deg)}}
@keyframes penche{0%,100%{transform:none}40%,70%{transform:rotate(3deg) translateX(6px)}}
@keyframes hop{0%,100%{transform:none}45%{transform:translateY(-16px) scale(.98,1.04)}75%{transform:scale(1.04,.95)}}
@keyframes coeur{0%{opacity:0;transform:translateY(10px) scale(.5)}25%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-34px) scale(1.1)}}
/* Scene 2 */
.s2.joue .chiot{animation:e-gauche .7s ease-out both}
.s2.joue .precila{animation:e-droite .7s ease-out .2s both}
.s2.joue .loupe{animation:loupe 1.6s ease-in-out 1s both}
.s2.joue .precila img{animation:observe 1.6s ease-in-out 2.6s both}
.s2.joue .chiot img{animation:fretille .15s ease-in-out 4.3s 8 alternate}
.s2.joue .coeur{animation:coeur 1.2s ease-out 4.4s both}
.s2.joue .sc-etapes li:nth-child(1){animation:etape 1.6s ease 1s both}
.s2.joue .sc-etapes li:nth-child(2){animation:etape 1.6s ease 2.6s both}
.s2.joue .sc-etapes li:nth-child(3){animation:etape-fin .6s ease 4.2s both}
@keyframes loupe{0%{opacity:0;transform:translate(10px,10px) rotate(-10deg)}20%,80%{opacity:1;transform:none}50%{transform:translate(-8px,4px) rotate(8deg)}100%{opacity:0}}
@keyframes observe{0%,100%{transform:none}35%,75%{transform:rotate(-3deg) translateX(-5px)}}
@keyframes fretille{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@keyframes etape{0%{opacity:.35}15%,85%{opacity:1;font-weight:600}100%{opacity:.6}}
@keyframes etape-fin{from{opacity:.35}to{opacity:1;font-weight:600}}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important}.sc-etapes li{opacity:1}.sc-rejouer{display:none}}

/* centrage */
.scene h2,.scene .scene-sous{text-align:center}
.sc-etapes{flex-wrap:wrap}

/* correctif final */
img[src*='precila-genoux']{mix-blend-mode:multiply!important;background:none!important}
*:has(> img[src*='precila-genoux']){background:none!important}
.scene p,[class*='scene'] p{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
