/* Clins d'œil : un effet par jeu et par film, joué au survol (ordinateur) et à l'ouverture de la fiche (partout).
   Couches : .fx (copie de l'image, filtres), .fx::before (voiles, particules), .fx::after (traits, mots), .fx>i (second trait).
   L'effet démarre quand .fx s'affiche : chaque survol le rejoue. Données : clins.js. */
/* Pas de z-index ni de container-type ici : ils isoleraient le calque et les modes de fusion ne teinteraient plus l'image. */
.fx{display:none;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}
.fx[data-fx~=mono],.fx[data-fx~=sepia],.fx[data-fx~=tint],.fx[data-fx~=glitch],.fx[data-fx~=wobble],.fx[data-fx~=shake],.fx[data-fx~=vhs],.fx[data-fx~=sink],.fx[data-fx~=mirror],.fx[data-fx~=droste]{background:var(--img) center/cover no-repeat}
.fx::before,.fx::after,.fx>i{content:"";position:absolute;pointer-events:none}
.fx>i{display:block;top:0;right:0;bottom:0;left:0;font-style:normal}
.fx-host:hover .fx,.fx-host:focus-visible .fx,.fx.play{display:block}
@media(hover:none){.fx-host:hover .fx{display:none}.fx.play{display:block}}
@media(prefers-reduced-motion:reduce){.fx,.fx::before,.fx::after,.fx>i{animation:none!important}.fx-host:hover .fx{display:none}}

/* --- Filtres sur l'image (calque .fx) --- */
.fx[data-fx~=mono]{background:var(--img) center/cover no-repeat,#8a8a8a;background-blend-mode:luminosity;animation:fxIn .35s ease both}
.fx[data-fx~=sepia]{background:var(--img) center/cover no-repeat,#9a6a3a;background-blend-mode:luminosity;animation:fxFlicker .18s steps(2) 6,fxIn .3s ease both}
.fx[data-fx~=tint]{background:var(--img) center/cover no-repeat,var(--c);background-blend-mode:luminosity;animation:fxIn .4s ease both}
.fx[data-fx~=vhs]{filter:saturate(1.6) contrast(1.1) hue-rotate(-12deg);animation:fxIn .3s ease both}
.fx[data-fx~=vhs]>i{background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px),linear-gradient(180deg,var(--ca),transparent 45%,var(--cb));mix-blend-mode:screen}
.fx[data-fx~=wobble]{animation:fxWobble .9s cubic-bezier(.3,1.6,.5,1) both}
.fx[data-fx~=shake]{animation:fxShake .5s linear both}
.fx[data-fx~=sink]{animation:fxSink 1.4s cubic-bezier(.5,0,.2,1) forwards;background-color:#000}
.fx[data-fx~=mirror]{animation:fxMirror 1.2s ease-in-out both}
.fx[data-fx~=droste]{animation:fxIn .3s ease both}
.fx[data-fx~=droste]::before{inset:20%;background:var(--img) center/cover;box-shadow:0 0 0 2px rgba(255,255,255,.6),0 10px 30px rgba(0,0,0,.6);animation:fxDroste 1.6s cubic-bezier(.2,.7,.1,1) both}
.fx[data-fx~=droste]>i{inset:36%;background:var(--img) center/cover;box-shadow:0 0 0 2px rgba(255,255,255,.6);animation:fxDroste 1.6s .25s cubic-bezier(.2,.7,.1,1) both}
.fx[data-fx~=glitch]{animation:fxGlitch .9s steps(1) both}
.fx[data-fx~=glitch]>i{background:var(--img) center/cover;mix-blend-mode:screen;opacity:.7;filter:hue-rotate(160deg) saturate(3);animation:fxGlitchSlice .9s steps(1) both}

/* --- Voiles et particules (.fx::before) --- */
.fx[data-fx~=ring]::before{left:50%;top:50%;width:170%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:4px solid var(--c);box-shadow:0 0 0 999px var(--ca),0 0 0 999px rgba(8,4,20,.35),inset 0 0 0 1px rgba(255,255,255,.75),inset 0 0 30px var(--c),0 0 30px var(--c);animation:fxRing 1.6s cubic-bezier(.4,0,.2,1) forwards}
.fx[data-fx~=ripple]::before{left:50%;top:58%;width:30%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--c);animation:fxRipple 1.1s ease-out 3 both}
.fx[data-fx~=scan]::before{left:0;right:0;top:-4px;height:3px;background:var(--c);box-shadow:0 0 16px 3px var(--c),0 -40px 60px var(--cb);animation:fxScan 1.3s cubic-bezier(.5,0,.5,1) 2 both}
.fx[data-fx~=rise]::before{left:-10%;right:-10%;bottom:-2px;height:42%;background:radial-gradient(40px 14px at 20px 0,transparent 98%,var(--ca)) 0 0/40px 100% repeat-x,linear-gradient(180deg,var(--ca),var(--c));opacity:.8;animation:fxRise 1.6s cubic-bezier(.3,.7,.2,1) both}
.fx[data-fx~=heartbeat]::before{inset:0;box-shadow:inset 0 0 70px 18px var(--c);animation:fxBeat 1s ease-in-out 3 both}
.fx[data-fx~=ember]::before{left:0;right:0;bottom:-30%;height:70%;background:radial-gradient(60% 60% at 50% 100%,var(--c),transparent 70%);opacity:.75;animation:fxEmber 1.8s ease-in-out both}
.fx[data-fx~=glow]::before{inset:-10%;background:radial-gradient(circle at 50% 46%,var(--c) 0,var(--ca) 22%,transparent 58%);mix-blend-mode:screen;animation:fxGlow 1.8s ease-in-out both}
.fx[data-fx~=beam]::before{left:50%;top:-10%;width:34%;height:120%;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,240,.75),transparent);mix-blend-mode:screen;animation:fxBeam 1.6s ease both}
.fx[data-fx~=speed]::before{inset:0;background:linear-gradient(90deg,transparent,var(--c) 40%,transparent 41%) 0 18%/220% 2px no-repeat,linear-gradient(90deg,transparent,#fff 30%,transparent 31%) 0 34%/180% 1px no-repeat,linear-gradient(90deg,transparent,var(--c) 50%,transparent 51%) 0 52%/260% 3px no-repeat,linear-gradient(90deg,transparent,#fff 45%,transparent 46%) 0 71%/200% 1px no-repeat,linear-gradient(90deg,transparent,var(--c) 35%,transparent 36%) 0 86%/240% 2px no-repeat;animation:fxSpeed .5s linear 4 both}
.fx[data-fx~=halftone]::before{inset:0;background:radial-gradient(circle,var(--c) 32%,transparent 34%) 0 0/9px 9px;-webkit-mask-image:linear-gradient(135deg,#000,transparent 70%);mask-image:linear-gradient(135deg,#000,transparent 70%);mix-blend-mode:screen;opacity:.75;animation:fxIn .5s ease both}
.fx[data-fx~=grid]::before{inset:0;background:repeating-linear-gradient(0deg,var(--ca) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,var(--ca) 0 1px,transparent 1px 22px);box-shadow:inset 0 0 0 999px var(--cb);animation:fxGridIn 1s steps(6) both}
.fx[data-fx~=pixel]::before{inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 2px,transparent 2px 18px),repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 2px,transparent 2px 18px);animation:fxPixel .8s steps(4) both}
.fx[data-fx~=splat]::before{inset:0;background:radial-gradient(14% 11% at 22% 30%,var(--c) 96%,transparent),radial-gradient(9% 12% at 31% 24%,var(--c) 96%,transparent),radial-gradient(10% 7% at 17% 38%,var(--c) 96%,transparent),radial-gradient(2.4% 1.8% at 40% 14%,var(--c) 96%,transparent),radial-gradient(1.6% 1.2% at 8% 20%,var(--c) 96%,transparent),radial-gradient(16% 12% at 68% 72%,var(--c2) 96%,transparent),radial-gradient(10% 14% at 77% 64%,var(--c2) 96%,transparent),radial-gradient(11% 8% at 60% 80%,var(--c2) 96%,transparent),radial-gradient(2.6% 2% at 86% 86%,var(--c2) 96%,transparent),radial-gradient(1.8% 1.4% at 52% 60%,var(--c2) 96%,transparent);opacity:.92;animation:fxSplat .45s cubic-bezier(.3,1.7,.5,1) both}
.fx[data-fx~=web]::before{left:0;top:0;width:150%;height:150%;transform-origin:0 0;background:repeating-conic-gradient(from 90deg at 0 0,rgba(255,255,255,.75) 0 .5deg,transparent .5deg 11deg),repeating-radial-gradient(circle at 0 0,transparent 0 24px,rgba(255,255,255,.6) 24px 25.5px);-webkit-mask-image:radial-gradient(circle at 0 0,#000 30%,transparent 62%);mask-image:radial-gradient(circle at 0 0,#000 30%,transparent 62%);animation:fxWeb .5s cubic-bezier(.2,.8,.2,1) both}
.fx[data-fx~=lens]::before{left:50%;top:50%;width:62%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:repeating-conic-gradient(rgba(0,0,0,.35) 0 6deg,transparent 6deg 30deg),repeating-radial-gradient(circle,transparent 0 9px,rgba(0,0,0,.28) 9px 11px);box-shadow:0 0 0 999px rgba(6,6,6,.9),inset 0 0 30px rgba(0,0,0,.7);animation:fxLens 1.5s cubic-bezier(.6,0,.2,1) both}
.fx[data-fx~=eye]::before{inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,45%),transparent 0 18%,rgba(0,0,0,.72) 46%);transition:background .1s;animation:fxIn .4s ease both}
.fx[data-fx~=film]::before{inset:0;background:linear-gradient(90deg,#0c0c0c 0 7%,transparent 7% 93%,#0c0c0c 93%),repeating-linear-gradient(180deg,transparent 0 6px,rgba(240,235,220,.85) 6px 14px,transparent 14px 22px) 2.2% 0/3% 100% no-repeat,repeating-linear-gradient(180deg,transparent 0 6px,rgba(240,235,220,.85) 6px 14px,transparent 14px 22px) 97.8% 0/3% 100% no-repeat;animation:fxFilm .6s linear 3 both}
.fx[data-fx~=stars]::before,.fx[data-fx~=snow]::before,.fx[data-fx~=bubbles]::before,.fx[data-fx~=money]::before,.fx[data-fx~=rain]::before,.fx[data-fx~=petals]::before,.fx[data-fx~=balloons]::before{inset:-20% 0 0}
.fx[data-fx~=stars]::before{background:radial-gradient(2px 2px at 18% 22%,#fff,transparent),radial-gradient(3px 3px at 72% 18%,var(--c),transparent),radial-gradient(2px 2px at 44% 48%,#fff,transparent),radial-gradient(3px 3px at 82% 62%,var(--c),transparent),radial-gradient(2px 2px at 24% 76%,var(--c),transparent),radial-gradient(2px 2px at 60% 86%,#fff,transparent),radial-gradient(4px 4px at 36% 34%,var(--c),transparent);animation:fxTwinkle 1.2s ease-in-out 2 both}
.fx[data-fx~=snow]::before{background:radial-gradient(3px 3px at 10% 10%,#fff 60%,transparent),radial-gradient(2px 2px at 30% 40%,#fff 60%,transparent),radial-gradient(4px 4px at 55% 20%,#fff 60%,transparent),radial-gradient(2px 2px at 75% 50%,#fff 60%,transparent),radial-gradient(3px 3px at 90% 15%,#fff 60%,transparent),radial-gradient(3px 3px at 20% 70%,#fff 60%,transparent),radial-gradient(2px 2px at 65% 80%,#fff 60%,transparent);background-size:100% 50%;animation:fxFall 2.4s linear both}
.fx[data-fx~=petals]::before{background:radial-gradient(5px 3px at 10% 10%,var(--c) 70%,transparent),radial-gradient(4px 3px at 34% 40%,var(--c2) 70%,transparent),radial-gradient(6px 4px at 58% 18%,var(--c) 70%,transparent),radial-gradient(4px 3px at 80% 46%,var(--c2) 70%,transparent),radial-gradient(5px 3px at 24% 74%,var(--c) 70%,transparent),radial-gradient(5px 3px at 70% 82%,var(--c2) 70%,transparent);background-size:100% 50%;animation:fxFall 2.6s linear both}
.fx[data-fx~=rain]::before{background:repeating-linear-gradient(100deg,transparent 0 14px,rgba(200,220,255,.45) 14px 15px,transparent 15px 31px);background-size:100% 60px;animation:fxRain .35s linear 6 both}
.fx[data-fx~=money]::before{background:linear-gradient(var(--c),var(--c)) 12% 6%/16px 9px no-repeat,linear-gradient(var(--c),var(--c)) 46% 22%/18px 10px no-repeat,linear-gradient(var(--c),var(--c)) 78% 4%/15px 9px no-repeat,linear-gradient(var(--c),var(--c)) 28% 46%/17px 10px no-repeat,linear-gradient(var(--c),var(--c)) 66% 40%/16px 9px no-repeat,linear-gradient(var(--c),var(--c)) 88% 64%/18px 10px no-repeat,linear-gradient(var(--c),var(--c)) 8% 70%/15px 9px no-repeat;opacity:.9;animation:fxFall 2s linear both}
.fx[data-fx~=bubbles]::before{inset:0 0 -40%;background:radial-gradient(circle at 20% 80%,transparent 4px,rgba(255,255,255,.75) 5px,transparent 6px),radial-gradient(circle at 46% 90%,transparent 6px,rgba(255,255,255,.7) 7px,transparent 8px),radial-gradient(circle at 70% 76%,transparent 3px,rgba(255,255,255,.75) 4px,transparent 5px),radial-gradient(circle at 84% 94%,transparent 5px,rgba(255,255,255,.7) 6px,transparent 7px),radial-gradient(circle at 34% 98%,transparent 3px,rgba(255,255,255,.7) 4px,transparent 5px);animation:fxBubble 2s ease-in both}
.fx[data-fx~=balloons]::before{inset:0 0 -60%;background:radial-gradient(11px 14px at 22% 80%,#e8423f 95%,transparent),radial-gradient(10px 13px at 40% 88%,#f2c14e 95%,transparent),radial-gradient(12px 15px at 58% 78%,#3fa7d6 95%,transparent),radial-gradient(10px 13px at 74% 90%,#59cd90 95%,transparent),radial-gradient(11px 14px at 50% 96%,#ee6c9e 95%,transparent);animation:fxBubble 2.4s ease-in both}
.fx[data-fx~=drip]::before{left:0;right:0;top:0;height:46%;transform-origin:top;background:linear-gradient(var(--c),var(--c)) 0 0/100% 12% no-repeat,radial-gradient(circle at 50% 100%,var(--c) 60%,transparent 62%) 14% 0/14px 64% no-repeat,radial-gradient(circle at 50% 100%,var(--c) 60%,transparent 62%) 38% 0/10px 42% no-repeat,radial-gradient(circle at 50% 100%,var(--c) 60%,transparent 62%) 63% 0/16px 86% no-repeat,radial-gradient(circle at 50% 100%,var(--c) 60%,transparent 62%) 86% 0/11px 52% no-repeat,linear-gradient(var(--c),var(--c)) calc(14% + 3px) 0/8px 56% no-repeat,linear-gradient(var(--c),var(--c)) calc(63% + 4px) 0/8px 80% no-repeat;animation:fxDrip 1.8s cubic-bezier(.5,0,.3,1) both}
.fx[data-fx~=lasers]::before{inset:0;background:linear-gradient(28deg,transparent 30%,var(--c) 30.3%,transparent 30.8%),linear-gradient(-22deg,transparent 46%,var(--c) 46.3%,transparent 46.8%),linear-gradient(64deg,transparent 58%,var(--c) 58.3%,transparent 58.8%),linear-gradient(-58deg,transparent 70%,var(--c) 70.3%,transparent 70.8%);filter:drop-shadow(0 0 4px var(--c));animation:fxLasers 1.2s ease-in-out both}
.fx[data-fx~=eq]::before{left:8%;right:8%;bottom:0;height:46%;background:linear-gradient(var(--c),var(--c)) 0 100%/9% 40% no-repeat,linear-gradient(var(--c),var(--c)) 13% 100%/9% 70% no-repeat,linear-gradient(var(--c),var(--c)) 26% 100%/9% 52% no-repeat,linear-gradient(var(--c),var(--c)) 39% 100%/9% 90% no-repeat,linear-gradient(var(--c),var(--c)) 52% 100%/9% 60% no-repeat,linear-gradient(var(--c),var(--c)) 65% 100%/9% 80% no-repeat,linear-gradient(var(--c),var(--c)) 78% 100%/9% 45% no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/9% 66% no-repeat;opacity:.85;transform-origin:bottom;animation:fxEq .35s ease-in-out 6 alternate both}
.fx[data-fx~=crack]::before{inset:0;background:linear-gradient(32deg,transparent 49.6%,rgba(255,255,255,.85) 50%,transparent 50.4%) 0 0/50% 50% no-repeat,linear-gradient(-48deg,transparent 49.6%,rgba(255,255,255,.85) 50%,transparent 50.4%) 100% 0/50% 50% no-repeat,linear-gradient(70deg,transparent 49.6%,rgba(255,255,255,.85) 50%,transparent 50.4%) 0 100%/50% 50% no-repeat,linear-gradient(-20deg,transparent 49.6%,rgba(255,255,255,.85) 50%,transparent 50.4%) 100% 100%/50% 50% no-repeat,radial-gradient(circle at 50% 50%,rgba(255,255,255,.5) 0 3%,transparent 3.5% 8%,rgba(255,255,255,.35) 8.4%,transparent 9%);animation:fxCrack .25s steps(2) both}
.fx[data-fx~=portal]::before{left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(var(--c) 0 12deg,var(--c2) 12deg 24deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%);mask-image:radial-gradient(circle,#000 0,transparent 55%);mix-blend-mode:screen;opacity:.8;animation:fxPortal 2s linear both}
.fx[data-fx~=checker]::before{inset:0;background:repeating-conic-gradient(rgba(0,0,0,.55) 0 25%,rgba(255,255,255,.12) 0 50%) 0 0/25% 18.75%;animation:fxGridIn .8s steps(5) both}
.fx[data-fx~=shapes]::before{inset:0;background:radial-gradient(circle at 20% 50%,transparent 0 8%,var(--c) 8.4% 10.6%,transparent 11%);box-shadow:inset 0 0 0 999px rgba(0,0,0,.35);animation:fxIn .25s ease both}
.fx[data-fx~=shapes]>i{top:50%;left:68%;right:auto;bottom:auto;width:18%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid var(--c);animation:fxIn .25s .3s ease both}
.fx[data-fx~=shapes]>i::before{content:"";position:absolute;left:-150%;top:-6%;width:112%;height:112%;background:conic-gradient(from 150deg at 50% 0,var(--c) 0 60deg,transparent 0);-webkit-mask-image:linear-gradient(#000 0 86%,transparent 86%);mask-image:linear-gradient(#000 0 86%,transparent 86%);animation:fxIn .25s .15s ease both}
.fx[data-fx~=deadeye]::before{inset:0;background:radial-gradient(circle at 34% 30%,#c0141c 0 1.2%,transparent 1.4%),radial-gradient(circle at 60% 46%,#c0141c 0 1.2%,transparent 1.4%),radial-gradient(circle at 46% 64%,#c0141c 0 1.2%,transparent 1.4%),linear-gradient(45deg,transparent 48.6%,#c0141c 49%,#c0141c 51%,transparent 51.4%) 31% 27%/7% 6% no-repeat,linear-gradient(-45deg,transparent 48.6%,#c0141c 49%,#c0141c 51%,transparent 51.4%) 31% 27%/7% 6% no-repeat,linear-gradient(45deg,transparent 48.6%,#c0141c 49%,#c0141c 51%,transparent 51.4%) 62% 45%/7% 6% no-repeat,linear-gradient(-45deg,transparent 48.6%,#c0141c 49%,#c0141c 51%,transparent 51.4%) 62% 45%/7% 6% no-repeat,linear-gradient(45deg,transparent 48.6%,#c0141c 49%,#c0141c 51%,transparent 51.4%) 46% 66%/7% 6% no-repeat,linear-gradient(-45deg,transparent 48.6%,#c0141c 49%,#c0141c 51%,transparent 51.4%) 46% 66%/7% 6% no-repeat;animation:fxPixel .9s steps(3) both}
.fx[data-fx~=clouds]::before{inset:0 -60%;background:radial-gradient(28% 14% at 20% 30%,rgba(255,255,255,.75),transparent 70%),radial-gradient(24% 12% at 55% 62%,rgba(255,255,255,.65),transparent 70%),radial-gradient(30% 13% at 82% 24%,rgba(255,255,255,.7),transparent 70%);animation:fxClouds 2.4s linear both}
.fx[data-fx~=comet]::before{left:-40%;top:12%;width:60%;height:3px;background:linear-gradient(90deg,transparent,var(--c2),#fff);border-radius:3px;box-shadow:0 0 12px var(--c);transform:rotate(24deg);animation:fxComet 1.3s ease-in both}
.fx[data-fx~=map]::before{inset:0;background:radial-gradient(circle at 74% 70%,transparent 0 4%,var(--c) 4.2% 5%,transparent 5.3%),linear-gradient(45deg,transparent 47%,var(--c) 47% 53%,transparent 53%) 71% 67%/7% 7% no-repeat,linear-gradient(-45deg,transparent 47%,var(--c) 47% 53%,transparent 53%) 71% 67%/7% 7% no-repeat;animation:fxIn .4s .9s ease both}
.fx[data-fx~=map]>i{right:auto;bottom:auto;background:repeating-linear-gradient(90deg,var(--c) 0 8px,transparent 8px 14px) 0 0/100% 2px no-repeat;left:14%;top:30%;width:60%;height:2px;transform:rotate(32deg);transform-origin:0 0;animation:fxDraw .9s steps(9) both}
.fx[data-fx~=split]::before{inset:0;background:var(--c);mix-blend-mode:color;clip-path:polygon(0 0,58% 0,42% 100%,0 100%);animation:fxSplitL .8s cubic-bezier(.2,.8,.2,1) both}
.fx[data-fx~=split]>i{background:var(--c2);mix-blend-mode:color;clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%);animation:fxSplitR .8s cubic-bezier(.2,.8,.2,1) both}
.fx[data-fx~=fuse]::before{left:0;right:0;bottom:8%;height:3px;background:linear-gradient(90deg,#1a1a1a,#1a1a1a) 0 0/0 100% no-repeat,repeating-linear-gradient(90deg,#e8dcc4 0 6px,#b9a888 6px 8px);box-shadow:0 0 0 1px rgba(0,0,0,.5);animation:fxBurn 1.6s linear both}

/* --- Traits et mots (.fx::after, .fx>i) --- */
.fx[data-fx~=slash]::after,.fx[data-fx~=slash2]::after,.fx[data-fx~=slash3]::after{left:-25%;right:-25%;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--c) 30%,#fff 50%,var(--c) 70%,transparent);box-shadow:0 0 12px 1px var(--c);transform:rotate(var(--ang,-28deg)) scaleX(0);transform-origin:0 50%;animation:fxSlash .5s cubic-bezier(.2,.8,.1,1) forwards}
.fx[data-fx~=slash2]>i::before,.fx[data-fx~=slash3]>i::before,.fx[data-fx~=slash3]>i::after{content:"";position:absolute;left:-25%;right:-25%;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--c) 30%,#fff 50%,var(--c) 70%,transparent);box-shadow:0 0 12px 1px var(--c);transform-origin:100% 50%}
.fx[data-fx~=slash2]>i::before{transform:rotate(calc(var(--ang,-28deg) * -1)) scaleX(0);animation:fxSlashB .5s .18s cubic-bezier(.2,.8,.1,1) forwards}
.fx[data-fx~=slash3]::after{top:42%}
.fx[data-fx~=slash3]>i::before{top:50%;transform:rotate(var(--ang,-28deg)) scaleX(0);transform-origin:0 50%;animation:fxSlash .5s .06s cubic-bezier(.2,.8,.1,1) forwards}
.fx[data-fx~=slash3]>i::after{top:58%;transform:rotate(var(--ang,-28deg)) scaleX(0);transform-origin:0 50%;animation:fxSlash .5s .12s cubic-bezier(.2,.8,.1,1) forwards}
.fx[data-fx~=thread]::after{left:-10%;right:-10%;top:58%;height:1px;background:linear-gradient(90deg,transparent,var(--c),transparent);box-shadow:0 0 8px var(--c);transform:scaleX(0);transform-origin:left;animation:fxThread .8s cubic-bezier(.2,.7,.1,1) forwards}
.fx[data-fx~=crosshair]::after{left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);background:linear-gradient(var(--c),var(--c)) 50% 0/2px 14px no-repeat,linear-gradient(var(--c),var(--c)) 50% 100%/2px 14px no-repeat,linear-gradient(var(--c),var(--c)) 0 50%/14px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 50%/14px 2px no-repeat;filter:drop-shadow(0 0 3px rgba(0,0,0,.9));animation:fxAim .5s cubic-bezier(.2,.8,.2,1) both}
.fx[data-fx~=crosshair]>i{right:auto;bottom:auto;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%) rotate(45deg);background:linear-gradient(#fff,#fff) 50% 0/2px 9px no-repeat,linear-gradient(#fff,#fff) 50% 100%/2px 9px no-repeat,linear-gradient(#fff,#fff) 0 50%/9px 2px no-repeat,linear-gradient(#fff,#fff) 100% 50%/9px 2px no-repeat;opacity:0;animation:fxHit .35s .55s ease-out both}
.fx[data-fx~=word]::after,.fx[data-fx~=type]::after{content:attr(data-w);left:6%;right:6%;top:50%;transform:translateY(-50%);text-align:center;font:800 28px/.95 'Barlow Condensed',sans-serif;font:800 clamp(18px,13cqw,46px)/.95 'Barlow Condensed',var(--font,sans-serif);letter-spacing:.04em;text-transform:uppercase;color:var(--c);text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 24px rgba(0,0,0,.85);animation:fxWord .5s cubic-bezier(.2,1.4,.4,1) both}
.fx[data-wf=serif]::after{font:italic 500 26px/1.05 'Cormorant Garamond',Georgia,serif;font:italic 500 clamp(18px,12cqw,40px)/1.05 'Cormorant Garamond',Georgia,serif;text-transform:none;letter-spacing:0}
.fx[data-fx~=type]::after{font:600 15px/1.2 'Courier New',monospace;font:600 clamp(12px,7.5cqw,22px)/1.2 'Courier New',monospace;text-transform:none;letter-spacing:.02em;white-space:normal;color:var(--c);animation:fxType 1.4s steps(18) both}
.fx[data-fx~=rec]::after{content:"REC";left:9%;top:8%;padding-left:16px;font:700 12px/1 'Courier New',monospace;letter-spacing:.12em;color:#fff;background:radial-gradient(circle at 5px 50%,#e0201c 4px,transparent 5px);animation:fxBlink 1s steps(2) 3 both}
.fx[data-fx~=bar]::after{left:0;bottom:0;height:4px;width:var(--p,62%);background:var(--c);box-shadow:0 0 10px var(--c);transform-origin:left;animation:fxBar .9s cubic-bezier(.2,.8,.2,1) both}
.fx[data-fx~=fuse]::after{left:0;bottom:calc(8% - 6px);width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffd27a 35%,#ff7a1a 60%,transparent 70%);box-shadow:0 0 14px 4px rgba(255,160,40,.8);animation:fxFuse 1.6s linear both}
.fx[data-fx~=hud]::after{left:6%;right:6%;top:6%;height:8px;border:1px solid rgba(255,255,255,.8);background:linear-gradient(90deg,var(--c) 0 var(--p,70%),transparent var(--p,70%));animation:fxBar .6s ease both}
.fx[data-fx~=lasereyes]::after{left:50%;top:32%;width:120%;height:3px;background:linear-gradient(90deg,#ff2a1a,#fff 40%,#ff2a1a);box-shadow:0 0 14px 3px #ff2a1a;transform:rotate(14deg) scaleX(0);transform-origin:0 50%;animation:fxSlash .4s cubic-bezier(.2,.8,.1,1) forwards}
.fx[data-fx~=lasereyes]>i::before{content:"";position:absolute;left:44%;top:30%;width:120%;height:3px;background:linear-gradient(90deg,#ff2a1a,#fff 40%,#ff2a1a);box-shadow:0 0 14px 3px #ff2a1a;transform:rotate(16deg) scaleX(0);transform-origin:0 50%;animation:fxSlash .4s .05s cubic-bezier(.2,.8,.1,1) forwards}

/* --- La phrase en grand, à l'ouverture d'une fiche --- */
.fx-cri{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:24px;pointer-events:none;text-align:center;font:800 clamp(34px,6.4vw,84px)/.95 'Barlow Condensed',sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--c,#fff);text-shadow:0 0 30px rgba(0,0,0,.9),0 4px 0 rgba(0,0,0,.4);background:radial-gradient(60% 46% at 50% 52%,rgba(0,0,0,.72),transparent 72%);animation:fxCri 2.6s cubic-bezier(.2,.7,.1,1) forwards}
.fx-cri[data-wf=serif]{font:italic 500 clamp(34px,5.6vw,76px)/1.05 'Cormorant Garamond',Georgia,serif;text-transform:none;letter-spacing:0}
.fx-cri[data-wf=mono]{font:600 clamp(22px,3.4vw,40px)/1.25 'Courier New',monospace;text-transform:none;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){.fx-cri{display:none}}

@keyframes fxIn{from{opacity:0}to{opacity:1}}
@keyframes fxFlicker{50%{opacity:.82}}
@keyframes fxWobble{0%{transform:none}25%{transform:rotate(-3deg) scale(1.04)}50%{transform:rotate(2.5deg) scale(1.03)}75%{transform:rotate(-1.2deg)}100%{transform:none}}
@keyframes fxShake{0%,100%{transform:none}10%{transform:translate(-4px,2px)}20%{transform:translate(4px,-3px)}30%{transform:translate(-3px,-2px)}40%{transform:translate(3px,3px)}50%{transform:translate(-2px,1px)}60%{transform:translate(2px,-1px)}}
@keyframes fxSink{0%{transform:none;opacity:1}100%{transform:scale(.55) translateY(14%);opacity:.75}}
@keyframes fxMirror{0%{transform:none}45%,55%{transform:scaleX(-1)}100%{transform:none}}
@keyframes fxDroste{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes fxGlitch{0%{transform:none}10%{transform:translate(-5px,0) skewX(4deg)}20%{transform:translate(4px,0)}30%{transform:none}55%{transform:translate(3px,0) skewX(-3deg)}65%{transform:none}}
@keyframes fxGlitchSlice{0%{clip-path:inset(10% 0 70% 0);transform:translate(8px)}15%{clip-path:inset(55% 0 25% 0);transform:translate(-10px)}30%{clip-path:inset(30% 0 52% 0);transform:translate(6px)}45%{clip-path:inset(78% 0 6% 0);transform:translate(-6px)}60%,100%{clip-path:inset(100% 0 0 0)}}
@keyframes fxRing{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(.42)}}
@keyframes fxRipple{from{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(-50%,-50%) scale(3.2);opacity:0}}
@keyframes fxScan{from{top:-4px}to{top:100%}}
@keyframes fxRise{from{transform:translateY(100%)}to{transform:none}}
@keyframes fxBeat{0%,100%{opacity:.25}15%{opacity:1}30%{opacity:.4}45%{opacity:.9}}
@keyframes fxEmber{0%{opacity:0;transform:translateY(20%)}50%{opacity:.85}100%{opacity:.6;transform:none}}
@keyframes fxGlow{0%{opacity:0;transform:scale(.6)}50%{opacity:1}100%{opacity:.7;transform:scale(1)}}
@keyframes fxBeam{0%{opacity:0;transform:translateX(-50%) scaleX(.2)}40%{opacity:1}100%{opacity:.55;transform:translateX(-50%) scaleX(1)}}
@keyframes fxSpeed{from{background-position:120% 18%,120% 34%,120% 52%,120% 71%,120% 86%}to{background-position:-120% 18%,-120% 34%,-120% 52%,-120% 71%,-120% 86%}}
@keyframes fxGridIn{from{opacity:0}to{opacity:1}}
@keyframes fxPixel{from{opacity:0}to{opacity:1}}
@keyframes fxSplat{from{transform:scale(.2);opacity:0}to{transform:none;opacity:.88}}
@keyframes fxWeb{from{transform:scale(0)}to{transform:none}}
@keyframes fxLens{0%{transform:translate(-50%,-50%) scale(.08)}60%{transform:translate(-50%,-50%) scale(.08)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes fxFilm{50%{opacity:.85}}
@keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:none}}
@keyframes fxFall{from{transform:translateY(-30%)}to{transform:translateY(40%)}}
@keyframes fxRain{from{background-position:0 0}to{background-position:-12px 60px}}
@keyframes fxBubble{from{transform:translateY(10%);opacity:.9}to{transform:translateY(-70%);opacity:0}}
@keyframes fxDrip{from{transform:scaleY(0)}to{transform:none}}
@keyframes fxLasers{0%{opacity:0}30%{opacity:1}50%{opacity:.4}70%,100%{opacity:1}}
@keyframes fxEq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes fxCrack{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes fxPortal{from{transform:translate(-50%,-50%) rotate(0) scale(.3)}to{transform:translate(-50%,-50%) rotate(270deg) scale(1)}}
@keyframes fxClouds{from{transform:translateX(18%)}to{transform:translateX(-18%)}}
@keyframes fxComet{from{transform:translate(0,0) rotate(24deg);opacity:0}20%{opacity:1}to{transform:translate(260%,120%) rotate(24deg);opacity:0}}
@keyframes fxDraw{from{width:0}to{width:60%}}
@keyframes fxSplitL{from{transform:translateX(-30%);opacity:0}to{transform:none;opacity:1}}
@keyframes fxSplitR{from{transform:translateX(30%);opacity:0}to{transform:none;opacity:1}}
@keyframes fxSlash{0%{transform:rotate(var(--ang,-28deg)) scaleX(0);opacity:1}65%{transform:rotate(var(--ang,-28deg)) scaleX(1);opacity:1}100%{transform:rotate(var(--ang,-28deg)) scaleX(1);opacity:.85}}
@keyframes fxSlashB{0%{transform:rotate(calc(var(--ang,-28deg) * -1)) scaleX(0)}65%,100%{transform:rotate(calc(var(--ang,-28deg) * -1)) scaleX(1)}}
@keyframes fxThread{to{transform:scaleX(1)}}
@keyframes fxAim{from{transform:translate(-50%,-50%) scale(1.8);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
@keyframes fxHit{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1.3)}}
@keyframes fxWord{from{opacity:0;transform:translateY(-50%) scale(1.6)}to{opacity:1;transform:translateY(-50%)}}
@keyframes fxType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fxBlink{50%{opacity:0}}
@keyframes fxBar{from{transform:scaleX(0)}to{transform:none}}
@keyframes fxFuse{from{left:-4px}to{left:calc(100% - 10px)}}
@keyframes fxBurn{to{background-size:100% 100%,auto}}
@keyframes fxCri{0%{opacity:0;transform:scale(1.15)}12%{opacity:1;transform:none}72%{opacity:1}100%{opacity:0}}

/* Supports : l'effet couvre exactement l'image */
.poster .ph{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.dlg-ph{position:relative;display:block;width:210px;overflow:hidden;border-radius:5px}
.dlg-ph img{display:block;width:100%}
.gd-ph{position:relative;display:block;overflow:hidden;border-radius:3px}
.gd-ph .gd-cover{display:block}
.gt-art,.poster .ph,.dlg-ph{container-type:inline-size}
@media(max-width:700px){.dlg-ph{width:min(210px,60vw)}}