/* ======================================================================
 * 🃏 LA BOUTIQUE v3 « FLEX » À L'ÉCRAN (16 oct. 2026, incident 601)
 *
 * Partagée par l'écran du direct (/overlay/flex.css) et le site (/flex.css — Flex Simulator) : AUCUN style en ligne
 * n'est nécessaire (la CSP du site les refuse), tout passe par des classes et des variables posées en JS (CSSOM).
 * Préfixe `fx-` partout. Les dessins sont en CSS et en SVG (pas d'image), les mouvements se coupent en mouvement
 * réduit et au palier de charge extrême (`:root[data-charge="extreme"]`).
 *
 * L'unité : `--fu` (1 % de la largeur utile à l'antenne, `--u` de l'écran ; 10 px sur le site par défaut).
 * ====================================================================== */
.fx-ligne,.fx-carte{--fu:var(--u,10px);position:relative;isolation:isolate}
.fx-fond,.fx-bord{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden}
.fx-fond{z-index:-1}
.fx-bord{z-index:3;overflow:visible}
.fx-fond::before,.fx-fond::after,.fx-bord::before,.fx-bord::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit}
/* Sur une ligne du classement, le fond prend la place du dégradé du rang. */
.sp2-classement li.fx-ligne.fx-a-fond{background:rgba(8,10,20,.55) !important}
.sp2-classement li.fx-ligne .fx-fond{opacity:.92}
/* La photo d'une ligne enveloppée avec sa décoration : même taille que la photo seule. */
.sp2-classement li>.fx-av{flex:0 0 auto;position:relative;display:grid;place-items:center;width:calc(var(--u)*5.2);height:calc(var(--u)*5.2)}
.sp2-classement li>.fx-av>img,.sp2-classement li>.fx-av>i{width:100%;height:100%;border-radius:50%;object-fit:cover;box-sizing:border-box;border:calc(var(--u)*.32) solid #fff;background:#2a3050;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:calc(var(--u)*2.5);color:#10131c}
.sp2-classement.dense li>.fx-av{width:calc(var(--u)*3.9);height:calc(var(--u)*3.9)}
.sp2-classement.cc.on li>.fx-av{animation:ccTete 1.5s ease-in-out infinite alternate;animation-delay:calc(var(--i,0)*-170ms)}
.sp2-classement li>.fx-av>.fx-anneau{inset:-30%}
/* La carte du podium : un fond et un cadre derrière toute la marche. */
.fx-couches{display:contents}
#podium .marche.fx-carte{border-radius:calc(var(--fu)*1.4);padding:calc(var(--fu)*.9) calc(var(--fu)*.5) 0}
#podium .marche.fx-carte .tete{z-index:2}
#podium .marche.fx-carte .nom,#podium .marche.fx-carte .pts,#podium .marche.fx-carte .det{position:relative;z-index:2;text-shadow:0 .06em .2em rgba(0,0,0,.85)}
#podium .marche .fx-puces{position:relative;z-index:2;font-size:calc(var(--fu)*2.2*var(--k,1));flex-wrap:wrap;justify-content:center;max-width:100%}

/* ---------------------------------------------------------------- *
 * LES FONDS DE CARTE
 * ---------------------------------------------------------------- */
.fx-fond-soir{background:linear-gradient(180deg,#2a1b4d,#7a3b6e 45%,#f08a4b 78%,#ffd27a);background-size:100% 160%;animation:fxGlisseV 9s ease-in-out infinite alternate}
.fx-fond-soir::after{background:radial-gradient(40% 60% at 70% 100%,rgba(255,220,140,.55),transparent 70%)}
.fx-fond-nuit{background:radial-gradient(120% 90% at 50% 0%,#1b2a6b,#070b22 70%)}
.fx-fond-nuit::before{background:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 64%,#fff,transparent),radial-gradient(2px 2px at 46% 30%,#dfe8ff,transparent),radial-gradient(1px 1px at 63% 74%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 18%,#fff,transparent),radial-gradient(1px 1px at 90% 58%,#fff,transparent),radial-gradient(1.5px 1.5px at 8% 82%,#cfe0ff,transparent),radial-gradient(1px 1px at 55% 50%,#fff,transparent);animation:fxScintille 2.6s ease-in-out infinite}
.fx-fond-aurore{background:linear-gradient(180deg,#041022,#0b1c3a)}
.fx-fond-aurore::before{background:linear-gradient(100deg,transparent 10%,rgba(61,220,132,.55) 30%,rgba(32,227,255,.35) 45%,rgba(179,107,255,.5) 62%,transparent 85%);background-size:220% 100%;filter:blur(6px);animation:fxDefileH 7s linear infinite;-webkit-mask:linear-gradient(180deg,#000 10%,transparent 85%);mask:linear-gradient(180deg,#000 10%,transparent 85%)}
.fx-fond-synthwave{background:linear-gradient(180deg,#120024 0%,#3a0a5e 46%,#ff2bd6 50%,#10001f 52%,#0a0018 100%)}
.fx-fond-synthwave::before{inset:auto 0 0 0;height:48%;background:linear-gradient(90deg,rgba(255,43,214,.85) 1.5px,transparent 1.5px) 0 0/12% 100%,linear-gradient(0deg,rgba(32,227,255,.85) 1.5px,transparent 1.5px) 0 0/100% 22%;transform:perspective(140px) rotateX(58deg);transform-origin:50% 0;animation:fxGrille 1.1s linear infinite}
.fx-fond-synthwave::after{inset:8% 32% auto 32%;height:38%;border-radius:50% 50% 0 0;background:repeating-linear-gradient(180deg,#ffd166 0 9%,#ff6ad5 9% 12%,#ff9a3d 12% 22%,transparent 22% 25%);-webkit-mask:linear-gradient(180deg,#000 55%,transparent);mask:linear-gradient(180deg,#000 55%,transparent);filter:drop-shadow(0 0 8px #ff2bd6)}
.fx-fond-zone{background:#151515}
.fx-fond-zone::before{background:repeating-linear-gradient(135deg,#ffcc00 0 14px,#111 14px 28px);opacity:.8;animation:fxRayures 1.6s linear infinite;background-size:40px 40px;-webkit-mask:linear-gradient(180deg,#000 0 14%,transparent 14% 86%,#000 86%);mask:linear-gradient(180deg,#000 0 14%,transparent 14% 86%,#000 86%)}
.fx-fond-zone::after{background:radial-gradient(60% 50% at 30% 70%,rgba(110,255,120,.32),transparent 70%),radial-gradient(50% 40% at 75% 40%,rgba(110,255,120,.24),transparent 70%);animation:fxBrume 6s ease-in-out infinite alternate}
.fx-fond-serveurs{background:linear-gradient(90deg,#0b0f14,#141b24 50%,#0b0f14)}
.fx-fond-serveurs::before{background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(255,255,255,.06) 9% 10%),repeating-linear-gradient(0deg,rgba(32,227,255,.0) 0 6px,rgba(32,227,255,.55) 6px 7px,transparent 7px 13px);background-size:100% 100%,7px 100%;animation:fxLeds 1.3s steps(3) infinite}
.fx-fond-serveurs::after{background:radial-gradient(4px 4px at 18% 30%,#3dff8a,transparent),radial-gradient(4px 4px at 38% 62%,#ff5a5a,transparent),radial-gradient(4px 4px at 62% 26%,#3dff8a,transparent),radial-gradient(4px 4px at 84% 70%,#ffd166,transparent);animation:fxClignote 1.7s steps(2) infinite}
.fx-fond-code{background:linear-gradient(180deg,#001a08,#000a03)}
.fx-fond-code::before{background:repeating-linear-gradient(180deg,rgba(61,255,140,.95) 0 3px,rgba(61,255,140,.3) 3px 5px,transparent 5px 15px) 0 0/7px 46px,repeating-linear-gradient(180deg,rgba(160,255,190,.8) 0 2px,transparent 2px 19px) 3px 9px/9px 58px,repeating-linear-gradient(180deg,rgba(61,255,140,.6) 0 4px,transparent 4px 23px) 5px 4px/11px 70px;animation:fxCode 1.4s linear infinite;opacity:.7}
.fx-fond-magma{background:radial-gradient(120% 80% at 50% 120%,#ff6a00,#9a1b00 45%,#2a0500 80%)}
.fx-fond-magma::before{background:repeating-radial-gradient(circle at 30% 80%,transparent 0 10px,rgba(255,140,0,.45) 10px 12px,transparent 12px 24px),repeating-radial-gradient(circle at 75% 90%,transparent 0 14px,rgba(255,200,60,.35) 14px 16px,transparent 16px 30px);animation:fxBouillonne 3.4s ease-in-out infinite alternate}
.fx-fond-magma::after{background:radial-gradient(2px 2px at 20% 80%,#ffd166,transparent),radial-gradient(2.5px 2.5px at 45% 90%,#ffe08a,transparent),radial-gradient(2px 2px at 70% 85%,#ff9a3d,transparent),radial-gradient(2.5px 2.5px at 88% 95%,#ffd166,transparent);animation:fxBraises 1.6s linear infinite}
.fx-fond-ruelle{background:linear-gradient(180deg,#0a0420,#1a0a3a 60%,#05020e)}
.fx-fond-ruelle::before{background:linear-gradient(90deg,rgba(255,43,214,.0) 0 14%,rgba(255,43,214,.5) 14% 16%,transparent 16% 80%,rgba(32,227,255,.55) 80% 82%,transparent 82%),repeating-linear-gradient(100deg,rgba(190,220,255,.45) 0 1px,transparent 1px 10px);background-size:100% 100%,100% 100%;animation:fxPluie .5s linear infinite,fxEnseigne 3.3s steps(1) infinite}
.fx-fond-ruelle::after{inset:18% 40% 40% 40%;border:2px solid rgba(32,227,255,.7);border-radius:6px;box-shadow:0 0 12px #20e3ff,inset 0 0 10px rgba(32,227,255,.4);animation:fxHolo 2.6s steps(1) infinite}
.fx-fond-marbre{background:linear-gradient(115deg,#0b0b0d,#1b1b20 40%,#0d0d10 70%,#24242b)}
.fx-fond-marbre::before{background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.08) 31%,transparent 33%),linear-gradient(60deg,transparent 55%,rgba(255,255,255,.07) 56%,transparent 58%),linear-gradient(160deg,transparent 0 20%,rgba(255,209,102,.0) 20%,rgba(255,209,102,.8) 22%,rgba(255,240,180,.9) 23%,rgba(255,209,102,.7) 24%,transparent 26%),linear-gradient(20deg,transparent 0 60%,rgba(255,209,102,.75) 61%,rgba(255,246,204,.9) 62%,transparent 64%);background-size:100% 100%,100% 100%,100% 200%,100% 200%;animation:fxCoulee 6s linear infinite}
.fx-fond-marbre::after{background:linear-gradient(105deg,transparent 40%,rgba(255,240,190,.28) 50%,transparent 60%);animation:fxBalayage 3.6s ease-in-out infinite}
.fx-fond-sanctuaire{background:linear-gradient(180deg,#fff6d8,#ffd98a 45%,#e8a64a)}
.fx-fond-sanctuaire::before{background:repeating-conic-gradient(from 0deg at 50% -10%,rgba(255,255,255,.45) 0 6deg,transparent 6deg 18deg);animation:fxTourne 18s linear infinite;transform-origin:50% -10%}
.fx-fond-sanctuaire::after{background:radial-gradient(50% 30% at 20% 85%,rgba(255,255,255,.85),transparent 70%),radial-gradient(45% 28% at 60% 95%,rgba(255,250,235,.9),transparent 70%),radial-gradient(40% 26% at 92% 82%,rgba(255,255,255,.8),transparent 70%);animation:fxNuages 8s ease-in-out infinite alternate}
.fx-fond-holo{background:linear-gradient(125deg,#ff8ad8,#ffe066,#7dffb4,#4fc3ff,#b36bff,#ff8ad8);background-size:300% 300%;animation:fxHoloFond 4.5s linear infinite}
.fx-fond-holo::before{background:repeating-linear-gradient(115deg,rgba(255,255,255,.0) 0 10px,rgba(255,255,255,.35) 10px 12px,rgba(255,255,255,0) 12px 22px);mix-blend-mode:overlay;animation:fxDefileH 2.2s linear infinite;background-size:200% 100%}
.fx-fond-holo::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);animation:fxBalayage 2.4s ease-in-out infinite}
.fx-fond-abysse{background:radial-gradient(circle at 50% 50%,#000 0 14%,#120530 26%,#2a0d6b 40%,#05010f 75%)}
.fx-fond-abysse::before{inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(179,107,255,.55) 0 5deg,transparent 5deg 24deg,rgba(79,195,255,.35) 24deg 27deg,transparent 27deg 45deg);-webkit-mask:radial-gradient(circle,transparent 0 12%,#000 20%,transparent 62%);mask:radial-gradient(circle,transparent 0 12%,#000 20%,transparent 62%);animation:fxTourne 6s linear infinite}
.fx-fond-abysse::after{background:radial-gradient(circle at 50% 50%,#000 0 9%,rgba(255,200,120,.75) 10%,transparent 13%);animation:fxPouls 2.2s ease-in-out infinite}
.fx-fond-aube{background:linear-gradient(180deg,#1b2a6b,#6b4a9a 35%,#ff9a6a 62%,#ffe6a8)}
.fx-fond-aube::before{inset:auto 25% -30% 25%;height:70%;border-radius:50%;background:radial-gradient(circle,#fff6cc 0 30%,rgba(255,214,120,.8) 45%,transparent 70%);animation:fxLeve 7s ease-in-out infinite alternate}
.fx-fond-aube::after{background:repeating-conic-gradient(from 0deg at 50% 100%,rgba(255,240,200,.35) 0 4deg,transparent 4deg 14deg);animation:fxTourne 30s linear infinite;transform-origin:50% 100%}

/* ---------------------------------------------------------------- *
 * LES CADRES DE CARTE
 * ---------------------------------------------------------------- */
.fx-bord-lumineux{box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),0 0 10px rgba(255,255,255,.35);animation:fxRespire 2.6s ease-in-out infinite}
.fx-bord-pointille::before{inset:-2px;padding:3px;background:repeating-conic-gradient(from 0deg,#ff2bd6 0 4deg,transparent 4deg 9deg,#20e3ff 9deg 13deg,transparent 13deg 18deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fxTourne 7s linear infinite}
.fx-bord-laser{box-shadow:inset 0 0 0 2px #ff2bd6,0 0 12px #ff2bd6,0 0 22px rgba(32,227,255,.55);animation:fxLaser 1.8s ease-in-out infinite}
.fx-bord-laser::before{inset:-1px;border-radius:inherit;background:linear-gradient(90deg,transparent,#fff,transparent) 0 0/30% 2px no-repeat,linear-gradient(90deg,transparent,#fff,transparent) 100% 100%/30% 2px no-repeat;animation:fxCourse 2.2s linear infinite}
.fx-bord-gyrophares::before,.fx-bord-gyrophares::after{width:calc(var(--fu)*2.4);height:calc(var(--fu)*2.4);inset:auto;border-radius:50%;background:radial-gradient(circle,#fff6cc 0 18%,#ff9a00 30%,rgba(255,120,0,0) 70%),conic-gradient(from 0deg,rgba(255,170,0,.85) 0 40deg,transparent 40deg 360deg);animation:fxGyro 2s linear infinite}
.fx-bord-gyrophares::before{left:-6px;top:-6px}
.fx-bord-gyrophares::after{right:-6px;top:-6px;animation-delay:-1s}
.fx-bord-gyrophares{box-shadow:inset 0 0 0 2px rgba(255,170,0,.7)}
.fx-bord-cables{box-shadow:inset 0 0 0 3px #202838,inset 0 0 0 4px rgba(32,227,255,.35)}
.fx-bord-cables::before{inset:0;padding:3px;background:repeating-linear-gradient(90deg,#20e3ff 0 10px,transparent 10px 26px,#ff2bd6 26px 32px,transparent 32px 48px);background-size:96px 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fxCables 1.6s linear infinite}
.fx-bord-glitch{box-shadow:inset 0 0 0 2px #20e3ff;animation:fxGlitchBord 2s steps(1) infinite}
.fx-bord-glitch::before{box-shadow:inset 0 0 0 2px #ff2bd6;transform:translate(3px,-2px);opacity:0;animation:fxGlitchDouble 2s steps(1) infinite}
.fx-bord-obsidienne{box-shadow:inset 0 0 0 4px #121016,inset 0 0 0 5px #3a2f3f,0 0 10px rgba(255,90,0,.25)}
.fx-bord-obsidienne::before{background:linear-gradient(35deg,transparent 0 12%,rgba(255,110,0,.9) 12.5% 13%,transparent 13.5%),linear-gradient(-50deg,transparent 0 82%,rgba(255,150,0,.9) 82.5% 83%,transparent 83.5%),linear-gradient(80deg,transparent 0 93%,rgba(255,90,0,.85) 93.4% 93.8%,transparent 94.2%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:6px;animation:fxLaveFissure 2.4s ease-in-out infinite}
.fx-bord-or{box-shadow:inset 0 0 0 3px #ffd166,inset 0 0 0 5px #8a6508,0 0 14px rgba(255,209,102,.55)}
.fx-bord-or::before{background:radial-gradient(5px 5px at 4px 4px,#fff,transparent 70%),radial-gradient(5px 5px at calc(100% - 4px) 4px,#fff,transparent 70%),radial-gradient(5px 5px at 4px calc(100% - 4px),#fff,transparent 70%),radial-gradient(5px 5px at calc(100% - 4px) calc(100% - 4px),#fff,transparent 70%);animation:fxScintille 1.4s ease-in-out infinite}
.fx-bord-or::after{background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%);padding:3px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fxBalayage 2.8s ease-in-out infinite}
.fx-bord-colonnes::before{inset:-2px auto -2px -6px;width:calc(var(--fu)*1.6);border-radius:3px;background:repeating-linear-gradient(90deg,#f4f0e6 0 18%,#cfc6b4 18% 30%,#f4f0e6 30% 50%);box-shadow:0 0 6px rgba(0,0,0,.4)}
.fx-bord-colonnes::after{inset:-2px -6px -2px auto;width:calc(var(--fu)*1.6);border-radius:3px;background:repeating-linear-gradient(90deg,#f4f0e6 0 18%,#cfc6b4 18% 30%,#f4f0e6 30% 50%);box-shadow:0 0 6px rgba(0,0,0,.4)}
.fx-bord-colonnes{box-shadow:inset 0 3px 0 #e8dfc8,inset 0 -3px 0 #e8dfc8}
.fx-bord-colonnes .fx-laurier{position:absolute;left:50%;top:calc(var(--fu)*-1.4);transform:translateX(-50%);font-size:calc(var(--fu)*2.2);line-height:1;filter:drop-shadow(0 0 4px rgba(120,200,80,.6))}
.fx-bord-prisme::before{inset:-2px;padding:3px;background:conic-gradient(from 0deg,#ff4d6d,#ffe066,#3dffd8,#3b9dff,#b36bff,#ff4d6d);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fxHue 4s linear infinite}
.fx-bord-prisme{box-shadow:0 0 16px rgba(255,255,255,.35)}
.fx-bord-matiere{box-shadow:inset 0 0 0 3px #000,inset 0 0 18px 6px rgba(0,0,0,.9),0 0 18px 4px rgba(60,0,120,.55)}
.fx-bord-matiere::before{inset:-8px;border-radius:inherit;background:radial-gradient(3px 3px at 10% 0%,#b36bff,transparent),radial-gradient(3px 3px at 90% 100%,#4fc3ff,transparent),radial-gradient(2px 2px at 0% 60%,#fff,transparent),radial-gradient(2px 2px at 100% 30%,#b36bff,transparent);animation:fxAspire 2.4s ease-in infinite}

/* ---------------------------------------------------------------- *
 * LES DÉCORATIONS DE LA PHOTO (dans `.sk-av` : l'anneau suit la taille de la photo)
 * ---------------------------------------------------------------- */
.fx-anneau{position:absolute;inset:-34%;pointer-events:none;z-index:4;display:block}
.fx-anneau>*{position:absolute;display:block}
.fx-anneau svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Des bulles qui montent */
.fx-anneau-bulles>i{width:13%;height:13%;border-radius:50%;border:1.5px solid rgba(200,240,255,.9);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),rgba(160,220,255,.15) 60%);bottom:22%;animation:fxBulle 2.4s ease-in infinite}
.fx-anneau-bulles>i:nth-child(1){left:12%;animation-delay:0s}.fx-anneau-bulles>i:nth-child(2){left:78%;animation-delay:-.6s;width:9%;height:9%}
.fx-anneau-bulles>i:nth-child(3){left:30%;animation-delay:-1.2s;width:8%;height:8%}.fx-anneau-bulles>i:nth-child(4){left:64%;animation-delay:-1.8s}
/* Des étoiles qui tournent */
.fx-anneau-etoiles{animation:fxTourne 5s linear infinite}
.fx-anneau-etoiles>i{font-style:normal;font-size:1em;line-height:1;color:#ffe08a;text-shadow:0 0 .4em #ffd166;width:auto;height:auto}
.fx-anneau-etoiles>i:nth-child(1){left:46%;top:8%}.fx-anneau-etoiles>i:nth-child(2){left:84%;top:62%}.fx-anneau-etoiles>i:nth-child(3){left:6%;top:62%}
.fx-anneau-etoiles>i{font-size:clamp(8px,1.6em,28px)}
/* Un anneau de flammes */
.fx-anneau-flammes::before{content:"";position:absolute;inset:20%;border-radius:50%;background:conic-gradient(from 0deg,#ff3d00,#ffb000,#ff5a1f,#ffd000,#ff3d00);-webkit-mask:radial-gradient(farthest-side,transparent 78%,#000 80% 92%,transparent 96%);mask:radial-gradient(farthest-side,transparent 78%,#000 80% 92%,transparent 96%);filter:blur(1px);animation:fxTourne 1.6s linear infinite}
.fx-anneau-flammes>i{width:22%;height:30%;bottom:18%;border-radius:50% 50% 40% 40%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 85%,#fff3b0 0%,#ff9a00 45%,transparent 72%);mix-blend-mode:screen;transform-origin:50% 100%;animation:fxLangue 1s ease-in-out infinite}
.fx-anneau-flammes>i:nth-child(1){left:14%}.fx-anneau-flammes>i:nth-child(2){left:39%;height:38%;animation-delay:-.3s}.fx-anneau-flammes>i:nth-child(3){left:64%;animation-delay:-.6s}
/* La visière tactique : un viseur qui se verrouille */
.fx-anneau-visiere svg{animation:fxVerrou 2.4s ease-in-out infinite}
.fx-anneau-visiere svg .rot{transform-origin:50% 50%;animation:fxTourne 6s linear infinite}
.fx-anneau-visiere>b{left:30%;right:30%;top:42%;height:13%;border-radius:40%;background:linear-gradient(90deg,rgba(32,227,255,.15),rgba(32,227,255,.55),rgba(32,227,255,.15));box-shadow:0 0 8px #20e3ff;width:auto}
/* L'aura électrique */
.fx-anneau-eclairs svg{filter:drop-shadow(0 0 3px #9fd8ff) drop-shadow(0 0 6px #3b9dff)}
.fx-anneau-eclairs svg polyline{animation:fxCrepite .9s steps(1) infinite}
.fx-anneau-eclairs svg polyline:nth-child(2){animation-delay:-.3s}.fx-anneau-eclairs svg polyline:nth-child(3){animation-delay:-.6s}
/* La couronne flottante */
.fx-anneau-couronne svg.crn{left:28%;top:-6%;width:44%;height:auto;inset:auto;position:absolute;transform:rotate(-12deg);filter:drop-shadow(0 0 4px rgba(255,209,102,.8));animation:fxFlotte 2.4s ease-in-out infinite}
.fx-anneau-couronne>i{font-style:normal;color:#fff6cc;text-shadow:0 0 .3em #ffd166;font-size:clamp(6px,1em,18px);line-height:1;animation:fxScintille 1.5s ease-in-out infinite}
.fx-anneau-couronne>i:nth-child(2){left:22%;top:10%}.fx-anneau-couronne>i:nth-child(3){left:74%;top:6%;animation-delay:-.5s}.fx-anneau-couronne>i:nth-child(4){left:80%;top:30%;animation-delay:-1s}
/* Le cercle runique */
.fx-anneau-runes svg{animation:fxTourne 14s linear infinite;filter:drop-shadow(0 0 3px rgba(255,209,102,.9))}
.fx-anneau-runes svg .marques{animation:fxRunes 3s ease-in-out infinite}
/* L'anneau planétaire : une ceinture inclinée */
.fx-anneau-planetes>b{inset:28% 4%;border-radius:50%;border:2px solid rgba(200,180,255,.55);transform:rotate(-16deg) scaleY(.34);box-shadow:0 0 6px rgba(179,107,255,.6);width:auto;height:auto}
.fx-anneau-planetes>u{inset:0;transform:rotate(-16deg) scaleY(.34);width:auto;height:auto}
.fx-anneau-planetes>u>i{position:absolute;inset:0;animation:fxTourne 4.8s linear infinite}
.fx-anneau-planetes>u>i::after{content:"";position:absolute;left:47%;top:-1%;width:7%;height:7%;border-radius:40%;background:radial-gradient(circle at 35% 35%,#e9e2ff,#7a6a9a);box-shadow:0 0 4px #b36bff}
.fx-anneau-planetes>u>i:nth-child(2){animation-duration:6.2s;animation-delay:-2s}.fx-anneau-planetes>u>i:nth-child(3){animation-duration:3.9s;animation-delay:-1s}.fx-anneau-planetes>u>i:nth-child(4){animation-duration:5.4s;animation-delay:-3.3s}
/* Les tentacules des abysses */
.fx-anneau-tentacules svg path{transform-box:fill-box;transform-origin:50% 100%;animation:fxOndule 2.8s ease-in-out infinite}
.fx-anneau-tentacules svg path:nth-child(2){animation-delay:-.7s}.fx-anneau-tentacules svg path:nth-child(3){animation-delay:-1.4s}.fx-anneau-tentacules svg path:nth-child(4){animation-delay:-2.1s}
.fx-anneau-tentacules svg circle{animation:fxScintille 1.8s ease-in-out infinite}
/* Les deux dragons */
.fx-anneau-dragons>u{inset:0;animation:fxTourne 4s linear infinite;width:auto;height:auto}
.fx-anneau-dragons>u.glace{animation-direction:reverse;animation-duration:5s}
.fx-anneau-dragons>u>svg{left:36%;top:-8%;width:28%;height:28%;inset:auto;position:absolute}
.fx-anneau-dragons>u.glace>svg{top:auto;bottom:-8%}
/* Le halo néon (récompense) */
.fx-anneau-halo_neon::before,.fx-anneau-halo_neon::after{content:"";position:absolute;inset:22%;border-radius:50%;border:2px solid #ff2bd6;box-shadow:0 0 8px #ff2bd6,inset 0 0 8px #ff2bd6;animation:fxRespire 1.6s ease-in-out infinite}
.fx-anneau-halo_neon::after{inset:16%;border-color:#20e3ff;box-shadow:0 0 10px #20e3ff,inset 0 0 8px #20e3ff;animation-delay:-.8s}
/* La couronne boréale (édition limitée) */
.fx-anneau-boreale::before{content:"";position:absolute;inset:14%;border-radius:50%;background:conic-gradient(from 0deg,rgba(61,220,132,.9),rgba(32,227,255,.8),rgba(179,107,255,.9),rgba(61,220,132,.9));-webkit-mask:radial-gradient(farthest-side,transparent 72%,#000 76% 90%,transparent 100%);mask:radial-gradient(farthest-side,transparent 72%,#000 76% 90%,transparent 100%);filter:blur(2px);animation:fxTourne 7s linear infinite}
.fx-anneau-boreale>i{left:50%;top:2%;width:6%;height:30%;margin-left:-3%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(61,220,132,0));transform-origin:50% 160%;animation:fxTourne 9s linear infinite}

/* ---------------------------------------------------------------- *
 * LES PSEUDOS ANIMÉS
 * ---------------------------------------------------------------- */
.fx-pseudo{position:relative}
.fx-pseudo-relief{text-shadow:1px 1px 0 #2a2a3a,2px 2px 0 #1a1a26,3px 3px 0 #10101a;animation:fxRelief 3s ease-in-out infinite}
.fx-pseudo-neon{color:#fff;text-shadow:0 0 .12em #fff,0 0 .3em #ff2bd6,0 0 .6em #ff2bd6,0 0 1em #b36bff;animation:fxNeonPseudo 2.6s steps(1) infinite}
.fx-pseudo-chroma{background:linear-gradient(90deg,#ff4d6d,#ffb000,#ffe066,#3ddc84,#20e3ff,#b36bff,#ff4d6d);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:fxDefileH 2.6s linear infinite;filter:drop-shadow(0 0 .12em rgba(255,255,255,.5))}
.fx-pseudo-or{background:linear-gradient(100deg,#8a6508 0%,#ffd166 30%,#fff6cc 45%,#ffd166 55%,#b8860b 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:fxOrPseudo 2.4s linear infinite;filter:drop-shadow(0 .06em 0 rgba(0,0,0,.6))}
.fx-pseudo-flammes{background:linear-gradient(0deg,#ff3d00,#ff9a00 45%,#ffe066 80%);-webkit-background-clip:text;background-clip:text;color:transparent !important;filter:drop-shadow(0 0 .14em #ff5a1f);animation:fxFeuPseudo .7s ease-in-out infinite alternate}
.fx-pseudo-glitch{text-shadow:.06em 0 #ff2bd6,-.06em 0 #20e3ff;animation:fxGlitchPseudo 2.2s steps(1) infinite}
/* Un texte peint par son fond (background-clip) : une ombre de texte passerait PAR-DESSUS et le noircirait. */
.fx-pseudo-chroma,.fx-pseudo-or,.fx-pseudo-flammes{text-shadow:none !important}

/* ---------------------------------------------------------------- *
 * LES PUCES : compteur et badges
 * ---------------------------------------------------------------- */
.fx-puces{display:inline-flex;gap:.3em;align-items:center;vertical-align:middle;flex:0 0 auto}
.fx-cpt,.fx-badge{font-style:normal;display:inline-flex;align-items:center;gap:.2em;font-weight:900;line-height:1;white-space:nowrap;border-radius:.6em}
.fx-cpt{font-size:.62em;padding:.18em .45em;background:rgba(0,0,0,.45);color:#ffe08a;box-shadow:inset 0 0 0 1px rgba(255,224,138,.55)}
.fx-cpt b{font-variant-numeric:tabular-nums;color:#fff}
.fx-cpt small{font-weight:700;opacity:.85;font-size:.85em}
.fx-badge{font-size:.62em;width:1.7em;height:1.7em;justify-content:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),rgba(0,0,0,.45));box-shadow:0 0 0 1.5px var(--fxb,#ffd166),0 0 .5em color-mix(in srgb,var(--fxb,#ffd166) 60%,transparent)}
.fx-badge-ancien{--fxb:#cd7f32}.fx-badge-nocturne{--fxb:#7c6cff}.fx-badge-savant{--fxb:#3b9dff}.fx-badge-invincible{--fxb:#d7dde6}.fx-badge-fondateur{--fxb:#3ddc84}.fx-badge-centurion{--fxb:#ffd166}
.fx-badge-neon{--fxb:#ff2bd6}.fx-badge-feu{--fxb:#ff7a1a}.fx-badge-couronne{--fxb:#ffe066}.fx-badge-abysses{--fxb:#20e3ff}.fx-badge-melomane{--fxb:#b36bff}
.fx-badge-legende{--fxb:#fff;box-shadow:0 0 0 1.5px #ff4d6d,0 0 0 3px #ffe066,0 0 .6em #b36bff}
.cc.trois .fx-cpt small,.cc.dense .fx-cpt small{display:none}
/* Sur une ligne, LE PSEUDO D'ABORD (« c'est lui qu'on cherche ») : les puces rétrécissent et se coupent avant lui ;
   un badge en deux colonnes, aucun en trois, le compteur seul quand la salle est pleine. */
.sp2-classement li .fx-puces{flex:0 1 auto;min-width:0;overflow:hidden;font-size:calc(var(--u)*2.6)}
.sp2-classement li .fx-puces~.m{margin-left:auto}
.sp2-classement li:has(.fx-puces) .nm{min-width:calc(var(--u)*11)}
.sp2-classement li .fx-badge:nth-child(n+3){display:none}
.sp2-classement.dense li .fx-badge,.sp2-classement.trois li .fx-badge{display:none}
.sp2-classement.trois li .fx-puces{display:none}

/* ---------------------------------------------------------------- *
 * LA CARTE (podium, site) : phrase, familier, socle
 * ---------------------------------------------------------------- */
.fx-phrase{position:absolute;left:50%;bottom:calc(100% + var(--fu)*.6);transform:translateX(-50%) scale(0);transform-origin:50% 100%;z-index:6;
  max-width:calc(var(--fu)*24);width:max-content;padding:calc(var(--fu)*.55) calc(var(--fu)*1.1);border-radius:calc(var(--fu)*1.2);
  font:900 calc(var(--fu)*1.55)/1.15 "Archivo",system-ui,sans-serif;color:#141821;background:#fff;text-align:center;white-space:normal;
  box-shadow:0 calc(var(--fu)*.3) 0 rgba(0,0,0,.35);animation:fxBulleEntre .55s cubic-bezier(.2,1.5,.4,1) .35s forwards}
.fx-phrase::after{content:"";position:absolute;left:50%;top:100%;width:0;height:0;border:calc(var(--fu)*.7) solid transparent;border-top-color:#fff;transform:translateX(-50%)}
.fx-phrase[data-rarete="legendaire"]{background:linear-gradient(180deg,#fff6cc,#ffd166);color:#3a2600}
.fx-phrase[data-rarete="legendaire"]::after{border-top-color:#ffd166}
.fx-phrase[data-rarete="mythique"]{background:linear-gradient(90deg,#f4e3c0,#fff4dc,#f4e3c0);color:#4a2b00;border-radius:4px;box-shadow:0 0 0 2px #b8860b,0 calc(var(--fu)*.3) 0 rgba(0,0,0,.4);animation:fxParchemin .9s cubic-bezier(.2,1.1,.4,1) .35s forwards}
.fx-phrase[data-rarete="mythique"]::after{border-top-color:#f4e3c0}
.fx-familier{position:absolute;right:calc(var(--fu)*-3.4);top:calc(var(--fu)*-1.2);width:calc(var(--fu)*5.2);height:calc(var(--fu)*5.2);z-index:7;pointer-events:none}
.fx-familier svg{width:100%;height:100%;overflow:visible}
.fx-fam-luciole{animation:fxOrbite 3.6s linear infinite}
.fx-fam-luciole svg{animation:fxLuciole 1.1s ease-in-out infinite}
.fx-fam-chaton{top:auto;bottom:calc(var(--fu)*-1);right:calc(var(--fu)*-2.6)}
.fx-fam-chaton svg .queue{transform-origin:20% 90%;transform-box:fill-box;animation:fxQueue 1.2s ease-in-out infinite}
.fx-fam-robot svg{animation:fxRobotDanse 1.2s steps(4) infinite}
.fx-fam-drone{animation:fxPlane 2.6s ease-in-out infinite}
.fx-fam-drone svg .feux{animation:fxRgb 1.8s linear infinite}
.fx-fam-drone .holo{position:absolute;left:50%;top:100%;transform:translateX(-50%);font:900 calc(var(--fu)*1.4)/1 "Anton",Impact,sans-serif;color:#9ff6ff;text-shadow:0 0 6px #20e3ff;white-space:nowrap;padding-top:calc(var(--fu)*1.6);
  background:linear-gradient(180deg,rgba(32,227,255,.45),transparent) top center/60% 100% no-repeat;animation:fxHolo 2.2s steps(1) infinite}
.fx-fam-kraken svg{animation:fxFlotte 3s ease-in-out infinite}
.fx-fam-kraken svg .tent{transform-box:fill-box;transform-origin:50% 0;animation:fxOndule 1.6s ease-in-out infinite}
.fx-fam-kraken svg .bulle{animation:fxBulleBocal 1.8s ease-in infinite}
.fx-fam-coffre svg{animation:fxSaute 1.3s cubic-bezier(.3,1.6,.5,1) infinite}
.fx-fam-coffre svg .couvercle{transform-box:fill-box;transform-origin:10% 100%;animation:fxCouvercle 1.3s ease-in-out infinite}
.fx-fam-dragon svg{animation:fxFlotte 2.2s ease-in-out infinite}
/* 🛡️ v4 (incident 606) */
.fx-fam-poussin{top:auto;bottom:calc(var(--fu)*-1);right:calc(var(--fu)*-2.4)}
.fx-fam-poussin svg{animation:fxSaute 1s cubic-bezier(.3,1.6,.5,1) infinite}
.fx-fam-poussin svg .aile{transform-box:fill-box;transform-origin:90% 50%;animation:fxBattement .4s ease-in-out infinite alternate}
.fx-fam-fantome svg{animation:fxFlotte 2.8s ease-in-out infinite}
.fx-fam-hibou svg .tete{transform-box:fill-box;transform-origin:50% 90%;animation:fxHibou 2.8s ease-in-out infinite}
@keyframes fxHibou{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-12deg)}86%{transform:rotate(10deg)}}
.fx-fam-dragon svg .aile{transform-box:fill-box;transform-origin:90% 90%;animation:fxBattement .5s ease-in-out infinite alternate}
.fx-fam-dragon svg .souffle{transform-box:fill-box;transform-origin:0% 50%;animation:fxSouffle 1.2s ease-out infinite}
/* Le socle : il remplace la marche, garde sa hauteur et son numéro */
.fx-socle{position:relative;overflow:visible !important;background:none !important;border-top:0 !important;color:#fff !important;text-shadow:0 .08em .2em rgba(0,0,0,.8)}
.fx-socle>.fx-s{position:absolute;inset:0;border-radius:6px;overflow:hidden}
.fx-socle>.fx-s::before,.fx-socle>.fx-s::after{content:"";position:absolute;pointer-events:none}
.fx-socle>span.fx-n{position:relative;z-index:2;align-self:start;margin-top:calc(var(--fu)*.3);line-height:1}
.fx-socle-rocher>.fx-s{background:radial-gradient(70% 60% at 50% 30%,#8e8a80,#5a5650 60%,#3a3733);border-radius:40% 45% 10% 10%/30% 35% 6% 6%}
.fx-socle-rocher>.fx-s::before{inset:0 0 auto 0;height:26%;background:radial-gradient(40% 80% at 30% 0%,#5fa840,transparent 70%),radial-gradient(30% 70% at 75% 0%,#4f9a36,transparent 70%)}
.fx-socle-glace>.fx-s{background:linear-gradient(160deg,rgba(220,246,255,.95),rgba(120,200,255,.75) 50%,rgba(80,160,230,.85));box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.fx-socle-glace>.fx-s::before{inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.7) 25%,transparent 30%),linear-gradient(70deg,transparent 60%,rgba(255,255,255,.5) 63%,transparent 66%)}
.fx-socle-glace>.fx-s::after{left:10%;right:10%;top:-30%;height:40%;background:radial-gradient(40% 60% at 30% 100%,rgba(255,255,255,.6),transparent 70%),radial-gradient(40% 60% at 70% 100%,rgba(255,255,255,.5),transparent 70%);animation:fxBrumeMonte 3s ease-in-out infinite}
.fx-socle-serveurs>.fx-s{background:linear-gradient(90deg,#10161e,#1c2633 50%,#10161e);box-shadow:inset 0 0 0 2px #2c3a4c}
.fx-socle-serveurs>.fx-s::before{inset:8%;background:repeating-linear-gradient(180deg,#0a0e14 0 10px,#151d28 10px 12px),radial-gradient(3px 3px at 12% 50%,#3dff8a,transparent);background-size:100% 100%,100% 12px}
.fx-socle-serveurs>.fx-s::after{inset:8%;background:radial-gradient(3px 3px at 85% 30%,#3dff8a,transparent),radial-gradient(3px 3px at 80% 55%,#20e3ff,transparent),radial-gradient(3px 3px at 88% 78%,#ffd166,transparent),radial-gradient(3px 3px at 74% 42%,#ff5a5a,transparent);animation:fxClignote 1.1s steps(2) infinite}
.fx-socle-cratere>.fx-s{background:radial-gradient(60% 40% at 50% 12%,#ff9a00,#a33a00 40%,#3a1a0a 62%,#241008);border-radius:50% 50% 8px 8px/40% 40% 8px 8px}
.fx-socle-cratere>.fx-s::before{left:20%;right:20%;top:-60%;height:80%;background:radial-gradient(35% 50% at 40% 100%,rgba(140,140,150,.6),transparent 70%),radial-gradient(30% 45% at 65% 90%,rgba(160,160,170,.5),transparent 70%);animation:fxFumee 2.8s ease-in-out infinite}
.fx-socle-nuage>.fx-s{background:radial-gradient(35% 55% at 25% 45%,#fff,rgba(255,255,255,0) 70%),radial-gradient(40% 60% at 55% 35%,#fff,rgba(255,255,255,0) 70%),radial-gradient(35% 55% at 80% 50%,#fffaf0,rgba(255,255,255,0) 70%),radial-gradient(60% 50% at 50% 80%,#ffe6a8,rgba(255,230,168,0) 75%);overflow:visible;animation:fxFlotte 3.2s ease-in-out infinite}
.fx-socle-nuage>.fx-s::after{inset:0;background:radial-gradient(2px 2px at 20% 30%,#ffd166,transparent),radial-gradient(2px 2px at 70% 20%,#fff6cc,transparent),radial-gradient(2px 2px at 50% 70%,#ffd166,transparent);animation:fxScintille 1.4s ease-in-out infinite}
.fx-socle-nuage{color:#7a4a00 !important;text-shadow:0 1px 0 #fff !important}
.fx-socle-bolide>.fx-s{background:linear-gradient(180deg,#2b0c3a 0%,#0b0b14 60%),linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);border-radius:46% 46% 10px 10px/30% 30% 10px 10px;box-shadow:0 8px 18px -4px #ff2bd6,inset 0 2px 0 rgba(255,255,255,.25)}
.fx-socle-bolide>.fx-s::before{left:8%;top:18%;width:20%;height:22%;border-radius:40%;background:radial-gradient(circle,#fff,#9ff6ff 50%,transparent 70%);box-shadow:calc(var(--fu)*12) 0 0 0 transparent}
.fx-socle-bolide>.fx-s::after{right:8%;top:18%;width:20%;height:22%;border-radius:40%;background:radial-gradient(circle,#fff,#9ff6ff 50%,transparent 70%)}
.fx-socle-cristaux>.fx-s{overflow:visible;background:linear-gradient(180deg,transparent 30%,#8a6508 30%,#ffd166 100%);clip-path:polygon(0 100%,0 55%,12% 20%,22% 50%,34% 5%,46% 42%,58% 0,70% 38%,82% 10%,92% 48%,100% 30%,100% 100%)}
.fx-socle-cristaux>.fx-s::before{inset:0;background:linear-gradient(115deg,rgba(174,241,255,.95),rgba(120,180,255,.6) 40%,rgba(255,255,255,.9) 55%,rgba(150,120,255,.6) 80%);clip-path:polygon(8% 100%,12% 22%,20% 100%,30% 100%,34% 8%,40% 100%,52% 100%,58% 3%,64% 100%,76% 100%,82% 12%,88% 100%);animation:fxScintille 1.8s ease-in-out infinite}
.fx-socle-trone>.fx-s,.fx-socle-trone_or>.fx-s{background:linear-gradient(180deg,#5a5650,#3a3733);clip-path:polygon(10% 100%,10% 0,22% 0,22% 40%,78% 40%,78% 0,90% 0,90% 100%);border-radius:0}
.fx-socle-trone>.fx-s::before,.fx-socle-trone_or>.fx-s::before{left:22%;right:22%;top:40%;bottom:0;background:linear-gradient(180deg,#6a655c,#45413b)}
.fx-socle-trone>.fx-s::after{inset:0;background:radial-gradient(4px 4px at 16% 20%,#20e3ff,transparent),radial-gradient(4px 4px at 84% 20%,#20e3ff,transparent),radial-gradient(4px 4px at 16% 60%,#b36bff,transparent),radial-gradient(4px 4px at 84% 60%,#b36bff,transparent);animation:fxRunes 2.4s ease-in-out infinite}
.fx-socle-trone_or>.fx-s{background:linear-gradient(180deg,#ffe29a,#b8860b)}
.fx-socle-trone_or>.fx-s::before{background:linear-gradient(180deg,#fff0b8,#c99a1a)}
.fx-socle-trone_or>.fx-s::after{inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);animation:fxBalayage 2.4s ease-in-out infinite}

/* ---------------------------------------------------------------- *
 * LA SCÈNE DU N°1 : danses, chorés, fins (podium final et site)
 * ---------------------------------------------------------------- */
.fx-scene{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:visible}
.fx-scene>*{position:absolute}
/* Petit coucou */
.fx-danse-coucou{right:calc(var(--fu)*-1.5);top:calc(var(--fu)*2);font-size:calc(var(--fu)*4);line-height:1;transform-origin:70% 90%;animation:fxCoucou .8s ease-in-out infinite}
/* Le robot : la tête bouge par à-coups */
.fx-tete-robot{animation:fxRobotDanse 1.1s steps(4) infinite}
/* Paillettes : la main au-dessus */
.fx-danse-main{left:50%;top:calc(var(--fu)*-4.4);transform:translateX(-50%);font-size:calc(var(--fu)*3.4);line-height:1;animation:fxSaupoudre .7s ease-in-out infinite}
/* Jongleur de feu : trois boules en paraboles */
.fx-danse-jongle{left:50%;top:calc(var(--fu)*-2);width:calc(var(--fu)*10);height:calc(var(--fu)*9);transform:translateX(-50%)}
.fx-danse-jongle>i{position:absolute;bottom:0;width:calc(var(--fu)*2);height:calc(var(--fu)*2);border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff6cc,#ffb000 40%,#ff3d00 70%,transparent 72%);box-shadow:0 0 calc(var(--fu)*1.2) #ff7a1a;animation:fxJongle 1.5s ease-in-out infinite}
.fx-danse-jongle>i:nth-child(2){animation-delay:-.5s}.fx-danse-jongle>i:nth-child(3){animation-delay:-1s}
/* Le festin : la table et le pilon doré */
.fx-danse-festin{left:50%;bottom:calc(var(--fu)*-1);transform:translateX(-50%);width:calc(var(--fu)*16);height:calc(var(--fu)*6);animation:fxMonteBas .5s cubic-bezier(.2,1.4,.4,1) both}
.fx-danse-festin svg{width:100%;height:100%;overflow:visible}
.fx-danse-festin svg .pilon{transform-box:fill-box;transform-origin:80% 80%;animation:fxPilon 1s ease-in-out infinite}
/* Pose de légende : lunettes et éclairs derrière */
.fx-lunettes{position:absolute;left:50%;top:var(--fx-yeux,40%);width:calc(var(--fu)*9);transform:translate(-50%,-50%);z-index:9;pointer-events:none;animation:fxLunettes .6s cubic-bezier(.2,1.3,.4,1) both}
.fx-lunettes svg{width:100%;height:auto;overflow:visible}
.fx-lunettes .reflet{animation:fxReflet 2.2s ease-in-out .6s infinite}
.fx-eclairs-dos{inset:calc(var(--fu)*-6) calc(var(--fu)*-4) 30% calc(var(--fu)*-4);z-index:-1}
.fx-eclairs-dos svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px #9fd8ff)}
.fx-eclairs-dos svg polyline{opacity:0;animation:fxEclairDos 1.6s steps(1) infinite}
.fx-eclairs-dos svg polyline:nth-child(2){animation-delay:-.55s}.fx-eclairs-dos svg polyline:nth-child(3){animation-delay:-1.1s}
/* Platines laser */
.fx-danse-dj{left:50%;bottom:calc(var(--fu)*.2);transform:translateX(-50%);width:calc(var(--fu)*17);height:calc(var(--fu)*6);animation:fxMonteBas .5s cubic-bezier(.2,1.4,.4,1) both}
.fx-danse-dj svg{width:100%;height:100%;overflow:visible}
.fx-danse-dj svg .disque{transform-box:fill-box;transform-origin:50% 50%;animation:fxTourne var(--fx-temps,.6s) linear infinite}
.fx-lasers{left:50%;top:calc(var(--fu)*.4);width:0;height:0}
.fx-lasers>i{position:absolute;left:0;bottom:0;width:calc(var(--fu)*.35);height:calc(var(--fu)*26);transform-origin:50% 100%;background:linear-gradient(0deg,var(--c,#ff2bd6),transparent);filter:blur(.5px);opacity:.6;animation:fxLaserBalaye calc(var(--fx-temps,.6s)*8) ease-in-out infinite}
.fx-lasers>i:nth-child(1){--c:#ff2bd6;--a0:-50deg;--a1:-10deg}.fx-lasers>i:nth-child(2){--c:#20e3ff;--a0:50deg;--a1:10deg;animation-delay:calc(var(--fx-temps,.6s)*-2)}
.fx-lasers>i:nth-child(3){--c:#7cff3d;--a0:-25deg;--a1:25deg;animation-delay:calc(var(--fx-temps,.6s)*-4)}.fx-lasers>i:nth-child(4){--c:#ffe066;--a0:25deg;--a1:-25deg;animation-delay:calc(var(--fx-temps,.6s)*-6)}
/* Les chorés : ola, ovation, boss */
.fx-ola .tete{animation:fxOla 1.2s ease-in-out infinite}
.fx-ola[data-rank="1"] .tete{animation-delay:-.4s}.fx-ola[data-rank="3"] .tete{animation-delay:-.8s}
.fx-bravo{right:calc(var(--fu)*-1.8);top:calc(var(--fu)*1);font-size:calc(var(--fu)*3);line-height:1;animation:fxApplaudit .5s ease-in-out infinite}
.fx-bravo.g{right:auto;left:calc(var(--fu)*-1.8);animation-delay:-.25s}
.fx-boss .tete{animation:fxChoreBoss calc(var(--fx-temps,.5s)*4) ease-in-out infinite}
.fx-boss[data-rank="1"] .tete{animation:fxChoreChef calc(var(--fx-temps,.5s)*4) ease-in-out infinite}
/* Les fins du n°1 */
.fx-tampon{left:50%;top:64%;width:calc(var(--fu)*15);filter:drop-shadow(0 0 calc(var(--fu)*.4) rgba(0,0,0,.6));transform:translate(-50%,-50%) rotate(-14deg) scale(3);opacity:0;z-index:10;animation:fxTampon .45s cubic-bezier(.6,0,.9,.4) forwards}
.fx-tampon svg{width:100%;height:auto;overflow:visible}
.fx-sceau{left:50%;top:56%;width:calc(var(--fu)*7.5);transform:translate(-50%,-50%) scale(2.4);opacity:0;z-index:10;animation:fxSceau .5s cubic-bezier(.6,0,.9,.4) forwards;filter:drop-shadow(0 .2em .3em rgba(0,0,0,.5))}
.fx-sceau svg{width:100%;height:auto}
.fx-signature{left:50%;top:44%;width:calc(var(--fu)*14);transform:translate(-50%,-50%);z-index:10}
.fx-signature svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #9fd8ff)}
.fx-signature svg path{stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600);animation:fxSigne 1.1s ease-out forwards}
.fx-avale{animation:fxAvale 1.05s cubic-bezier(.6,0,.9,.3) forwards}
.fx-vortex{position:fixed;inset:0;pointer-events:none;z-index:11;background:radial-gradient(circle at 50% 42%,#000 0 0,transparent 0);animation:fxVortex 1.1s ease-in forwards}

/* ---------------------------------------------------------------- *
 * LA LÉGENDE DE L'ANNONCEUR (la phrase écrite, dans le style de la voix)
 * ---------------------------------------------------------------- */
.fx-legende{position:fixed;left:6vw;right:6vw;top:21vh;z-index:14;pointer-events:none;text-align:center;
  font:400 calc(var(--fu)*4.2)/1.05 "Anton","Archivo Black",Impact,sans-serif;letter-spacing:.03em;color:#fff;opacity:0;animation:fxLegende 3.8s ease-out forwards}
.fx-legende[data-style="bande"]{color:#f2e6c9;text-shadow:0 0 calc(var(--fu)*1.6) rgba(0,0,0,.95),0 .05em 0 #000;letter-spacing:.12em;text-transform:uppercase;font-size:calc(var(--fu)*3.4)}
.fx-legende[data-style="ia"]{font-family:"Archivo",ui-monospace,monospace;font-weight:900;font-size:calc(var(--fu)*2.8);color:#9ff6ff;text-shadow:0 0 10px #20e3ff;animation:fxLegende 3.8s ease-out forwards,fxGlitchPseudo .9s steps(1) infinite}
.fx-legende[data-style="manga"]{color:#fff;-webkit-text-stroke:calc(var(--fu)*.25) #111;text-shadow:calc(var(--fu)*.4) calc(var(--fu)*.4) 0 #ff2b55;transform-origin:50% 50%;animation:fxLegendeManga 3.4s cubic-bezier(.2,1.6,.4,1) forwards}
.fx-legende[data-style="commentateur"]{color:#ffe066;text-shadow:0 .06em 0 #b04a10,0 0 calc(var(--fu)*1.2) rgba(255,120,0,.7);font-style:italic}

/* ---------------------------------------------------------------- *
 * LA MÉTÉO DU LIVE : une toile sous la boîte du podium (le JS dessine), plus un voile CSS
 * ---------------------------------------------------------------- */
.fx-meteo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s ease}
.fx-meteo.on{opacity:1}
/* L'effet plein cadre : une toile posée sur la carte, le temps de l'éclat */
.fx-effet{position:fixed;pointer-events:none;z-index:13}
.fx-eclair-carte{animation:fxFlashCarte .35s ease-out}
.fx-glitch-carte{animation:fxGlitchCarte .8s steps(1)}
.fx-coupe-carte{animation:fxCoupe .9s steps(1)}

/* ---------------------------------------------------------------- *
 * LES MOUVEMENTS
 * ---------------------------------------------------------------- */
@keyframes fxGlisseV{to{background-position:0 100%}}
@keyframes fxScintille{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes fxDefileH{to{background-position:-200% 0}}
@keyframes fxGrille{from{background-position:0 0,0 0}to{background-position:0 0,0 22%}}
@keyframes fxRayures{to{background-position:40px 0}}
@keyframes fxBrume{to{transform:translateX(8%) scale(1.08)}}
@keyframes fxLeds{50%{filter:brightness(1.5)}}
@keyframes fxClignote{50%{opacity:.25}}
@keyframes fxCode{to{background-position:0 46px,3px 67px,5px 74px}}
@keyframes fxBouillonne{to{transform:scale(1.06);filter:brightness(1.25)}}
@keyframes fxBraises{from{transform:translateY(0);opacity:1}to{transform:translateY(-60%);opacity:0}}
@keyframes fxPluie{to{background-position:0 0,-10px 30px}}
@keyframes fxEnseigne{0%,70%,100%{opacity:1}72%,76%{opacity:.55}}
@keyframes fxHolo{0%,46%,52%,100%{opacity:1}48%{opacity:.4}}
@keyframes fxCoulee{to{background-position:0 0,0 0,0 200%,0 -200%}}
@keyframes fxBalayage{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
@keyframes fxTourne{to{transform:rotate(360deg)}}
@keyframes fxNuages{to{transform:translateX(6%)}}
@keyframes fxHoloFond{to{background-position:300% 300%}}
@keyframes fxPouls{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
@keyframes fxLeve{to{transform:translateY(-18%)}}
@keyframes fxRespire{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes fxLaser{0%,100%{box-shadow:inset 0 0 0 2px #ff2bd6,0 0 12px #ff2bd6,0 0 22px rgba(32,227,255,.55)}50%{box-shadow:inset 0 0 0 2px #20e3ff,0 0 16px #20e3ff,0 0 26px rgba(255,43,214,.6)}}
@keyframes fxCourse{0%{background-position:-30% 0,130% 100%}100%{background-position:130% 0,-30% 100%}}
@keyframes fxGyro{to{transform:rotate(360deg)}}
@keyframes fxCables{to{background-position:96px 0}}
@keyframes fxGlitchBord{0%,88%,100%{transform:none}90%{transform:translate(-3px,1px)}94%{transform:translate(2px,-1px)}}
@keyframes fxGlitchDouble{0%,88%,100%{opacity:0}90%,95%{opacity:1}}
@keyframes fxLaveFissure{0%,100%{opacity:.6;filter:brightness(1)}50%{opacity:1;filter:brightness(1.6)}}
@keyframes fxHue{to{filter:hue-rotate(360deg)}}
@keyframes fxAspire{0%{transform:scale(1.15);opacity:0}30%{opacity:1}100%{transform:scale(.9);opacity:0}}
@keyframes fxBulle{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(-260%) scale(1.1);opacity:0}}
@keyframes fxLangue{0%,100%{transform:scaleY(1) scaleX(1)}35%{transform:scaleY(1.25) scaleX(.85)}70%{transform:scaleY(.9) scaleX(1.1)}}
@keyframes fxVerrou{0%,100%{transform:scale(1.08);opacity:.7}40%,70%{transform:scale(.96);opacity:1}}
@keyframes fxCrepite{0%,100%{opacity:0}10%,22%{opacity:1}26%{opacity:.2}30%,36%{opacity:1}40%{opacity:0}}
@keyframes fxFlotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8%)}}
@keyframes fxRunes{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes fxOndule{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes fxRelief{0%,100%{text-shadow:1px 1px 0 #2a2a3a,2px 2px 0 #1a1a26,3px 3px 0 #10101a}50%{text-shadow:-1px 1px 0 #2a2a3a,-2px 2px 0 #1a1a26,-3px 3px 0 #10101a}}
@keyframes fxNeonPseudo{0%,64%,72%,100%{opacity:1}66%,70%{opacity:.78}}
@keyframes fxOrPseudo{to{background-position:-250% 0}}
@keyframes fxFeuPseudo{to{filter:drop-shadow(0 -.08em .22em #ff9a00)}}
@keyframes fxGlitchPseudo{0%,86%,100%{transform:none;text-shadow:.06em 0 #ff2bd6,-.06em 0 #20e3ff}88%{transform:translateX(-.05em);text-shadow:-.1em 0 #ff2bd6,.1em 0 #20e3ff}92%{transform:translateX(.05em) skewX(-6deg)}}
@keyframes fxBulleEntre{to{transform:translateX(-50%) scale(1)}}
@keyframes fxParchemin{0%{transform:translateX(-50%) scaleX(.05)}60%{transform:translateX(-50%) scaleX(1.06)}100%{transform:translateX(-50%) scaleX(1)}}
@keyframes fxOrbite{from{transform:rotate(0) translateX(calc(var(--fu)*2.5)) rotate(0)}to{transform:rotate(360deg) translateX(calc(var(--fu)*2.5)) rotate(-360deg)}}
@keyframes fxLuciole{0%,100%{opacity:.7;filter:drop-shadow(0 0 2px #ffe680)}50%{opacity:1;filter:drop-shadow(0 0 8px #ffe680)}}
@keyframes fxQueue{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(16deg)}}
@keyframes fxRobotDanse{0%{transform:translateX(0) rotate(0)}25%{transform:translateX(-6%) rotate(-8deg)}50%{transform:translateX(0) rotate(0) translateY(-6%)}75%{transform:translateX(6%) rotate(8deg)}100%{transform:none}}
@keyframes fxPlane{0%,100%{transform:translate(0,0)}50%{transform:translate(-10%,-14%)}}
@keyframes fxRgb{0%{fill:#ff4d6d}33%{fill:#3ddc84}66%{fill:#3b9dff}100%{fill:#ff4d6d}}
@keyframes fxBulleBocal{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-40%);opacity:0}}
@keyframes fxSaute{0%,100%{transform:translateY(0)}40%{transform:translateY(-22%)}55%{transform:translateY(0) scaleY(.92)}}
@keyframes fxCouvercle{0%,30%,100%{transform:rotate(0)}45%,70%{transform:rotate(-38deg)}}
@keyframes fxBattement{to{transform:rotate(-28deg)}}
@keyframes fxSouffle{0%,55%{transform:scaleX(0);opacity:0}65%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1.3);opacity:0}}
@keyframes fxBrumeMonte{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-20%);opacity:.9}}
@keyframes fxFumee{0%{transform:translateY(0) scale(.8);opacity:0}30%{opacity:.8}100%{transform:translateY(-50%) scale(1.3);opacity:0}}
@keyframes fxCoucou{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(18deg)}}
@keyframes fxSaupoudre{0%,100%{transform:translateX(-50%) rotate(-10deg)}50%{transform:translateX(-50%) rotate(14deg)}}
@keyframes fxJongle{0%{transform:translate(0,0)}25%{transform:translate(calc(var(--fu)*4),calc(var(--fu)*-7))}50%{transform:translate(calc(var(--fu)*8),0)}75%{transform:translate(calc(var(--fu)*4),calc(var(--fu)*-3))}100%{transform:translate(0,0)}}
@keyframes fxMonteBas{from{transform:translate(-50%,60%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes fxPilon{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-24deg) translateY(-30%)}}
@keyframes fxLunettes{from{transform:translate(-50%,-260%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
@keyframes fxReflet{0%,60%,100%{transform:translateX(-30%);opacity:0}70%{opacity:1}85%{transform:translateX(60%);opacity:0}}
@keyframes fxEclairDos{0%,100%{opacity:0}4%,12%{opacity:1}16%{opacity:0}}
@keyframes fxLaserBalaye{0%,100%{transform:rotate(var(--a0,-40deg))}50%{transform:rotate(var(--a1,40deg))}}
@keyframes fxOla{0%,60%,100%{transform:translateY(0)}20%{transform:translateY(-22%)}}
@keyframes fxApplaudit{0%,100%{transform:scale(1) rotate(-8deg)}50%{transform:scale(1.25) rotate(8deg)}}
@keyframes fxChoreBoss{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-10%) rotate(-10deg)}50%{transform:translateY(-14%)}75%{transform:translateX(10%) rotate(10deg)}}
@keyframes fxChoreChef{0%,100%{transform:scale(1)}50%{transform:scale(1.07) translateY(-6%)}}
@keyframes fxTampon{0%{transform:translate(-50%,-50%) rotate(-14deg) scale(3);opacity:0}70%{opacity:1}85%{transform:translate(-50%,-50%) rotate(-14deg) scale(.92)}100%{transform:translate(-50%,-50%) rotate(-14deg) scale(1);opacity:1}}
@keyframes fxSceau{0%{transform:translate(-50%,-50%) scale(2.4);opacity:0}70%{opacity:1}85%{transform:translate(-50%,-50%) scale(.9)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes fxSigne{to{stroke-dashoffset:0}}
@keyframes fxAvale{0%{transform:none;filter:none}100%{transform:rotate(540deg) scale(0);filter:blur(4px) brightness(.4)}}
@keyframes fxVortex{0%{background:radial-gradient(circle at 50% 42%,#000 0%,rgba(80,20,160,.7) 0%,transparent 0%)}60%{background:radial-gradient(circle at 50% 42%,#000 0%,#000 6%,rgba(120,40,220,.8) 9%,transparent 22%)}100%{background:radial-gradient(circle at 50% 42%,#000 0%,#000 0%,transparent 0%);opacity:0}}
@keyframes fxLegende{0%{opacity:0;transform:translateY(12px) scale(.96)}12%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}
@keyframes fxLegendeManga{0%{opacity:0;transform:scale(2.2) rotate(-6deg)}12%{opacity:1;transform:scale(1) rotate(-3deg)}85%{opacity:1;transform:scale(1.04) rotate(-3deg)}100%{opacity:0}}
@keyframes fxFlashCarte{0%{filter:brightness(2.6)}100%{filter:none}}
@keyframes fxGlitchCarte{0%{transform:none}10%{transform:translate(-4px,2px) skewX(-6deg);filter:hue-rotate(90deg)}20%{transform:translate(3px,-1px)}30%{transform:none;filter:none}45%{transform:translate(5px,0) skewX(8deg);filter:hue-rotate(-60deg) saturate(2)}55%{transform:none;filter:none}70%{transform:translate(-2px,1px)}80%,100%{transform:none;filter:none}}
@keyframes fxCoupe{0%,100%{clip-path:none}20%{clip-path:polygon(0 0,100% 0,100% 30%,0 45%)}40%{clip-path:polygon(0 45%,100% 30%,100% 70%,0 82%)}60%{clip-path:polygon(0 82%,100% 70%,100% 100%,0 100%)}80%{clip-path:none;filter:brightness(2)}}

/* Le mouvement réduit et le palier de charge extrême : tout se pose, rien ne bouge. */
@media (prefers-reduced-motion: reduce){
  .fx-fond,.fx-fond::before,.fx-fond::after,.fx-bord,.fx-bord::before,.fx-bord::after,.fx-anneau,.fx-anneau *,.fx-anneau::before,.fx-anneau::after,.fx-pseudo,.fx-familier,.fx-familier *,.fx-socle *,.fx-scene *,.fx-legende{animation:none !important}
  .fx-phrase{transform:translateX(-50%) scale(1);animation:none}
  .fx-legende{opacity:1}
}
:root[data-charge="extreme"] .fx-fond::before,:root[data-charge="extreme"] .fx-fond::after,:root[data-charge="extreme"] .fx-bord::before,:root[data-charge="extreme"] .fx-bord::after,
:root[data-charge="extreme"] .fx-anneau *,:root[data-charge="extreme"] .fx-anneau::before,:root[data-charge="extreme"] .fx-anneau::after{animation:none !important}