/* =====================================================================================
   MOTION DES MENUS - MONDE & PRESTIGE (30/09/2026)
   -------------------------------------------------------------------------------------
   Pages : superligue, pantjoueurs (pantheon), autrechamp, monde (Infos monde), mondial,
   messages (journal), justice, profil. Le script compagnon est motion-monde.js.

   Regles du lot :
   - les ENTREES ne jouent que sous `body.vue-entree` (pose ~1,6 s par go() a l'arrivee
     sur une page) : sans elle, elles rejoueraient a chaque rafraichissement silencieux.
     Tout doit donc finir en moins de 1,5 s, retard compris.
   - `mmo-bascule` (pose par le script) rejoue une entree courte sur un changement
     d'onglet, de tri ou de pays, qui ne passent pas par vue-entree.
   - les BOUCLES sont rares, legeres (transform/opacity sur un ou deux elements), et
     commencent a leur pose neutre sous `body:not(.vue-entree)` : quand l'entree finit,
     la boucle prend le relais sans saut.
   - rien ne bouge avec `body.anim-off` ni prefers-reduced-motion (tout le fichier est
     sous prefers-reduced-motion:no-preference, chaque regle exige :not(.anim-off)).
   - l'etat final de chaque cle est `transform:none` : aucune transformation ne reste
     posee (elle casserait un position:fixed descendant et creerait des calques inutiles).
   ===================================================================================== */

@media (prefers-reduced-motion: no-preference) {

/* ---- les courbes et le rang dans une cascade ----------------------------------------
   --mmo-i numerote les enfants d'une liste (0, 1, 2...) : le retard de chacun s'en
   deduit. Plafonne a 13 : au-dela, les lignes sont sous la ligne de flottaison et un
   retard plus long ne ferait qu'allonger l'attente. */
body:is([data-vue="superligue"],[data-vue="pantjoueurs"],[data-vue="autrechamp"],[data-vue="monde"],[data-vue="mondial"],[data-vue="messages"],[data-vue="justice"],[data-vue="profil"]){
  --mmo-sortie:cubic-bezier(.16,.84,.3,1);
  --mmo-ressort:cubic-bezier(.34,1.56,.64,1);
}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(2){--mmo-i:1}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(3){--mmo-i:2}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(4){--mmo-i:3}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(5){--mmo-i:4}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(6){--mmo-i:5}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(7){--mmo-i:6}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(8){--mmo-i:7}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(9){--mmo-i:8}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(10){--mmo-i:9}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(11){--mmo-i:10}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(12){--mmo-i:11}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(13){--mmo-i:12}
body[data-vue] :is(#content,.sl-skin,.sl-primes,.sl-cal,tbody,.iu-grille,.iu-kpis,.car-grille,.mo-tabs,.jm-liste,#mo-corps,.pjt-tete .grid,.car-total) > :nth-child(n+14){--mmo-i:13}

/* ---- les gestes de base ---- */
@keyframes mmoMonte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mmoGlisse{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes mmoFondu{from{opacity:0}to{opacity:1}}
/* une carte qui se redresse vers le lecteur, comme posee sur une table */
@keyframes mmoCarte3d{from{opacity:0;transform:perspective(1000px) rotateX(16deg) translateY(26px) scale(.97)}to{opacity:1;transform:none}}
/* une ligne de classement qui bascule en place, charniere en haut */
@keyframes mmoLigne{from{opacity:0;transform:perspective(700px) rotateX(-62deg) translateY(-6px)}to{opacity:1;transform:none}}
/* la marche du podium : plus haut, plus lent, avec un petit rebond */
@keyframes mmoPodium{0%{opacity:0;transform:perspective(700px) translateY(34px) rotateX(38deg) scale(.96)}65%{opacity:1;transform:perspective(700px) translateY(-3px) rotateX(-4deg)}100%{opacity:1;transform:none}}
/* une piece qu'on lance : medailles, trophees, logos */
@keyframes mmoPiece{0%{opacity:0;transform:perspective(400px) rotateY(-540deg) scale(.35)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes mmoPop{0%{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:none}}
/* une tuile qui se retourne (rotation sur l'axe horizontal) */
@keyframes mmoTuile{from{opacity:0;transform:perspective(600px) rotateX(-90deg)}to{opacity:1;transform:none}}
/* une jauge qui se remplit depuis la gauche */
@keyframes mmoJauge{from{transform:scaleX(0)}to{transform:none}}
/* un reflet qui traverse (pseudo-element seulement) */
@keyframes mmoReflet{0%{transform:translateX(-130%) skewX(-18deg);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(330%) skewX(-18deg);opacity:0}}
@keyframes mmoRefletBoucle{0%,72%{transform:translateX(-130%) skewX(-18deg);opacity:0}76%{opacity:1}96%{opacity:1}100%{transform:translateX(330%) skewX(-18deg);opacity:0}}

/* =====================================================================================
   1. SUPER LEAGUE - la competition reine. L'habillage rouge (braises, brasier) existe
   deja ; on y ajoute une mise en scene d'arrivee : le blason est lance comme une piece,
   le titre tombe, les primes se retournent, le classement monte marche par marche.
   ===================================================================================== */
@keyframes mmoSlTitre{0%{opacity:0;transform:translateY(-10px) scale(1.4)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes mmoSlBalance{0%,100%{rotate:y 0deg}25%{rotate:y 11deg}75%{rotate:y -11deg}}
body:not(.anim-off)[data-vue="superligue"].vue-entree .sl-logo{animation:mmoPiece 1s var(--mmo-sortie) both}
body:not(.anim-off)[data-vue="superligue"].vue-entree .sl-titre{animation:mmoSlTitre .8s var(--mmo-sortie) .25s both}
body:not(.anim-off)[data-vue="superligue"].vue-entree .sl-sous{animation:mmoMonte .6s var(--mmo-sortie) .5s both}
body:not(.anim-off)[data-vue="superligue"].vue-entree .sl-skin > .card.sl-card{
  animation:mmoCarte3d .6s var(--mmo-sortie) both;animation-delay:calc(.35s + var(--mmo-i,0) * 70ms)}
body:not(.anim-off)[data-vue="superligue"].vue-entree .sl-prime{
  animation:mmoTuile .55s var(--mmo-sortie) both;transform-origin:50% 0;animation-delay:calc(.55s + var(--mmo-i,0) * 60ms)}
body:not(.anim-off)[data-vue="superligue"].vue-entree .sl-tbl tbody tr{
  animation:mmoLigne .5s var(--mmo-sortie) both;transform-origin:50% 0;animation-delay:calc(.55s + var(--mmo-i,0) * 38ms)}
body:not(.anim-off)[data-vue="superligue"].vue-entree .sl-tbl tbody tr:nth-child(-n+3){animation-name:mmoPodium;animation-duration:.75s}
body:not(.anim-off)[data-vue="superligue"].vue-entree .sl-cal-l{
  animation:mmoGlisse .45s var(--mmo-sortie) both;animation-delay:calc(.6s + var(--mmo-i,0) * 35ms)}
body:not(.anim-off)[data-vue="superligue"].vue-entree .sl-champion{animation:mmoPop .7s var(--mmo-ressort) .6s both}
/* le blason se balance doucement une fois l'arrivee jouee (propriete `rotate`, distincte
   de `transform` : l'entree et la boucle ne se marchent pas dessus). L'image survit aux
   rafraichissements (voir _reecrireEnGardantImages) : la boucle ne redemarre pas. */
body:not(.anim-off):not(.vue-entree)[data-vue="superligue"] .sl-logo{animation:mmoSlBalance 11s ease-in-out infinite}
/* le bandeau du champion : un reflet qui passe de temps en temps */
body:not(.anim-off)[data-vue="superligue"] .sl-champion{position:relative;overflow:hidden}
body:not(.anim-off)[data-vue="superligue"] .sl-champion::after{content:'';position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:mmoRefletBoucle 6s ease-in-out 1.2s infinite both}
@media (hover:hover){
  body:not(.anim-off)[data-vue="superligue"] .sl-prime{transition:transform .25s var(--mmo-sortie),border-color .25s}
  body:not(.anim-off)[data-vue="superligue"] .sl-prime:hover{transform:perspective(500px) rotateX(10deg) translateY(-3px);border-color:rgba(255,160,90,.55)}
}

/* =====================================================================================
   2. PANTHEON DES JOUEURS - les medailles sont lancees, les lignes basculent en place.
   Au changement de tri ou de portee, seul le tableau rejoue (mmo-bascule) : le haut de
   page ne bouge pas, on voit le classement se recomposer.
   ===================================================================================== */
body:not(.anim-off)[data-vue="pantjoueurs"].vue-entree .pjt-tete .kpi{
  animation:mmoTuile .55s var(--mmo-sortie) both;transform-origin:50% 0;animation-delay:calc(.15s + var(--mmo-i,0) * 90ms)}
body:not(.anim-off)[data-vue="pantjoueurs"]:is(.vue-entree) .pjt tbody tr,
body:not(.anim-off)[data-vue="pantjoueurs"] .mmo-bascule .pjt tbody tr{
  animation:mmoLigne .5s var(--mmo-sortie) both;transform-origin:50% 0;animation-delay:calc(.3s + var(--mmo-i,0) * 40ms)}
body:not(.anim-off)[data-vue="pantjoueurs"].vue-entree .pjt tbody tr:nth-child(-n+3),
body:not(.anim-off)[data-vue="pantjoueurs"] .mmo-bascule .pjt tbody tr:nth-child(-n+3){animation-name:mmoPodium;animation-duration:.75s}
body:not(.anim-off)[data-vue="pantjoueurs"].vue-entree .pjt-med,
body:not(.anim-off)[data-vue="pantjoueurs"] .mmo-bascule .pjt-med{animation:mmoPiece .9s var(--mmo-sortie) both;animation-delay:calc(.45s + var(--mmo-i,0) * 110ms)}
/* la medaille d'or garde un reflet qui passe toutes les 7 s : un seul element */
body:not(.anim-off)[data-vue="pantjoueurs"] .pjt-med.m1{position:relative;overflow:hidden}
body:not(.anim-off)[data-vue="pantjoueurs"] .pjt-med.m1::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:mmoRefletBoucle 7s ease-in-out 1.4s infinite both}

/* =====================================================================================
   3. AUTRES CHAMPIONNATS - le drapeau flotte, le classement bascule ligne a ligne.
   Changer de pays par le menu ne change pas de page : le script pose mmo-bascule.
   ===================================================================================== */
@keyframes mmoDrapeau{0%,100%{transform:perspective(300px) rotateY(0deg) skewY(0deg)}30%{transform:perspective(300px) rotateY(-16deg) skewY(1.5deg)}65%{transform:perspective(300px) rotateY(9deg) skewY(-1deg)}}
@keyframes mmoDrapeauLeve{from{opacity:0;transform:perspective(300px) rotateY(-80deg)}to{opacity:1;transform:perspective(300px) rotateY(0deg) skewY(0deg)}}
body:not(.anim-off)[data-vue="autrechamp"] #content > .card:first-child img{transform-origin:0 50%}
body:not(.anim-off)[data-vue="autrechamp"].vue-entree #content > .card:first-child img,
body:not(.anim-off)[data-vue="autrechamp"] #content > .card.mmo-bascule:first-child img{animation:mmoDrapeauLeve .8s var(--mmo-sortie) both}
body:not(.anim-off):not(.vue-entree)[data-vue="autrechamp"] #content > .card:not(.mmo-bascule):first-child img{animation:mmoDrapeau 5.5s ease-in-out infinite}
body:not(.anim-off)[data-vue="autrechamp"].vue-entree #content > .card:first-child h3,
body:not(.anim-off)[data-vue="autrechamp"] #content > .card.mmo-bascule:first-child h3{animation:mmoGlisse .55s var(--mmo-sortie) .15s both}
body:not(.anim-off)[data-vue="autrechamp"].vue-entree #content > .card,
body:not(.anim-off)[data-vue="autrechamp"] #content > .card.mmo-bascule{animation:mmoCarte3d .55s var(--mmo-sortie) both;animation-delay:calc(var(--mmo-i,0) * 90ms)}
body:not(.anim-off)[data-vue="autrechamp"].vue-entree #content .tbl tbody tr,
body:not(.anim-off)[data-vue="autrechamp"] #content > .card.mmo-bascule .tbl tbody tr{
  animation:mmoLigne .45s var(--mmo-sortie) both;transform-origin:50% 0;animation-delay:calc(.25s + var(--mmo-i,0) * 35ms)}

/* =====================================================================================
   4. INFOS MONDE - une chaine d'info : le bandeau DIRECT tombe, le globe tourne dans le
   titre, la une se deplie comme un ecran de plateau, les cartes se redressent.
   Le grand sujet tourne toutes les 7 s (infos-une.js) : a chaque changement, le texte
   entre et le chiffre geant bascule - c'est le « flash » qui manquait. Cette regle-la
   n'est pas sous vue-entree, puisqu'elle accompagne une rotation voulue.
   ===================================================================================== */
@keyframes mmoRideau{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes mmoDeplie{from{opacity:0;transform:perspective(1400px) rotateY(-78deg)}to{opacity:1;transform:none}}
@keyframes mmoChiffre{0%{opacity:0;transform:perspective(500px) rotateX(-95deg) translateY(10px)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes mmoTexteUne{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
body:not(.anim-off)[data-vue="monde"].vue-entree .mo-direct{animation:mmoRideau .5s var(--mmo-sortie) both}
body:not(.anim-off)[data-vue="monde"].vue-entree .mo-live{animation:mmoPop .5s var(--mmo-ressort) .3s both}
body:not(.anim-off)[data-vue="monde"].vue-entree .mo-tabs{animation:mmoFondu .4s ease .15s both}
body:not(.anim-off)[data-vue="monde"].vue-entree .mo-tab{animation:mmoMonte .4s var(--mmo-sortie) both;animation-delay:calc(.2s + var(--mmo-i,0) * 40ms)}
/* la une : le visuel se deplie depuis sa charniere droite */
body:not(.anim-off)[data-vue="monde"].vue-entree .iu-hero{animation:mmoFondu .35s ease .2s both}
body:not(.anim-off)[data-vue="monde"].vue-entree .iu-hero > .mv{animation:mmoDeplie .85s var(--mmo-sortie) .3s both;transform-origin:100% 50%}
/* a chaque sujet (entree ET rotation) : le texte glisse, le chiffre bascule */
body:not(.anim-off)[data-vue="monde"] .iu-hero > .t{animation:mmoTexteUne .6s var(--mmo-sortie) both}
body:not(.anim-off)[data-vue="monde"] .iu-hero .mv-in{animation:mmoChiffre .7s var(--mmo-sortie) .12s both;transform-origin:50% 100%}
/* les cartes, les chiffres, le mercato */
body:not(.anim-off)[data-vue="monde"].vue-entree .iu-carte,
body:not(.anim-off)[data-vue="monde"] .mmo-bascule .iu-carte,
body:not(.anim-off)[data-vue="monde"] .iu-grille.mmo-bascule > .iu-carte{
  animation:mmoCarte3d .6s var(--mmo-sortie) both;transform-origin:50% 100%;animation-delay:calc(.45s + var(--mmo-i,0) * 60ms)}
body:not(.anim-off)[data-vue="monde"].vue-entree .iu-kpi,
body:not(.anim-off)[data-vue="monde"] .iu-kpis.mmo-bascule > .iu-kpi{animation:mmoTuile .5s var(--mmo-sortie) both;transform-origin:50% 0;animation-delay:calc(.7s + var(--mmo-i,0) * 60ms)}
body:not(.anim-off)[data-vue="monde"].vue-entree .iu-tr{animation:mmoGlisse .45s var(--mmo-sortie) .75s both}
body:not(.anim-off)[data-vue="monde"].vue-entree .iu-cite{animation:mmoFondu .6s ease .8s both}
/* les autres onglets : leurs cartes et leurs articles arrivent en cascade */
body:not(.anim-off)[data-vue="monde"] #mo-corps > .mmo-bascule:not(#iu-hero-zone):not(#iu-seg-zone){
  animation:mmoMonte .5s var(--mmo-sortie) both;animation-delay:calc(var(--mmo-i,0) * 55ms)}
body:not(.anim-off)[data-vue="monde"] #mo-corps > #iu-hero-zone.mmo-bascule > .iu-hero > .mv{animation:mmoDeplie .75s var(--mmo-sortie) both;transform-origin:100% 50%}
body:not(.anim-off)[data-vue="monde"] .mmo-bascule .jm-art,
body:not(.anim-off)[data-vue="monde"].vue-entree .jm-art{animation:mmoGlisse .45s var(--mmo-sortie) both;animation-delay:calc(.15s + var(--mmo-i,0) * 45ms)}
@media (hover:hover){
  body:not(.anim-off)[data-vue="monde"] .iu-carte{transition:transform .25s var(--mmo-sortie),border-color .15s}
  body:not(.anim-off)[data-vue="monde"] .iu-carte:hover{transform:perspective(900px) rotateX(5deg) translateY(-5px)}
  body:not(.anim-off)[data-vue="monde"] .iu-carte .mv-v{transition:transform .3s var(--mmo-sortie)}
  body:not(.anim-off)[data-vue="monde"] .iu-carte:hover .mv-v{transform:scale(1.08)}
}

/* =====================================================================================
   5. LE GLOBE (pose par motion-monde.js) - fil de fer en vraie 3D : six meridiens et
   trois paralleles dans un groupe qui tourne. Une seule animation, sur un seul calque.
   ===================================================================================== */
@keyframes mmoTourne{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes mmoGlobeArrive{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.mmo-globe{position:relative;display:inline-block;flex:none;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(120,190,255,.28),rgba(20,40,90,.35) 55%,rgba(5,10,30,.55) 100%)}
.mmo-globe::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(143,211,255,.55)}
.mmo-globe > b{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.35),transparent 42%)}
.mmo-gl-axe{position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(400px) rotateZ(-20deg) rotateX(-14deg)}
.mmo-gl-rot{position:absolute;inset:0;transform-style:preserve-3d;animation:mmoTourne 26s linear infinite}
.mmo-gl-rot > i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(143,211,255,.5)}
.mmo-gl-rot > i.m{transform:rotateY(calc(var(--k) * 30deg))}
.mmo-gl-rot > i.p0{transform:rotateX(90deg);border-color:rgba(255,215,106,.7)}
.mmo-gl-rot > i.p1{inset:15%;transform:rotateX(90deg) translateZ(calc(var(--mmo-r) * .36))}
.mmo-gl-rot > i.p2{inset:15%;transform:rotateX(90deg) translateZ(calc(var(--mmo-r) * -.36))}
/* le petit, dans le titre INFOS MONDE */
.mmo-globe-mini{--mmo-r:20px;width:20px;height:20px;vertical-align:-4px;margin-right:9px}
.mmo-globe-mini .mmo-gl-rot > i{border-color:rgba(255,255,255,.55)}
.mmo-globe-mini .mmo-gl-rot > i.p0{border-color:#e3262e}
/* le grand, en filigrane du classement mondial */
.mmo-porte-globe{position:relative;isolation:isolate;overflow:hidden}
.mmo-globe-grand{--mmo-r:180px;position:absolute;top:-44px;right:-34px;width:180px;height:180px;z-index:-1;opacity:.3}
.mmo-globe-grand .mmo-gl-rot > i{border-color:rgba(255,215,106,.45)}
.mmo-globe-grand .mmo-gl-rot > i.p0{border-color:rgba(255,215,106,.8)}
body:not(.anim-off)[data-vue="mondial"].vue-entree .mmo-globe-grand{animation:mmoGlobeArrive 1s var(--mmo-sortie) .1s both}
body.anim-off .mmo-gl-rot{animation:none}
@media (max-width:600px){
  .mmo-globe-grand{--mmo-r:110px;width:110px;height:110px;top:-30px;right:-26px;opacity:.28}
  /* le bandeau DIRECT est deja plein a 390 px : le petit globe n'y a pas sa place */
  .mmo-globe-mini{display:none}
}

/* =====================================================================================
   6. CLASSEMENT MONDIAL DES PRESIDENTS - la carte s'ouvre, le podium monte, ta ligne
   est balayee par un reflet dore.
   ===================================================================================== */
body:not(.anim-off)[data-vue="mondial"].vue-entree #content > .card{animation:mmoCarte3d .6s var(--mmo-sortie) both}
body:not(.anim-off)[data-vue="mondial"].vue-entree #content .tbl tbody tr,
body:not(.anim-off)[data-vue="mondial"] .mmo-bascule .tbl tbody tr{
  animation:mmoLigne .5s var(--mmo-sortie) both;transform-origin:50% 0;animation-delay:calc(.35s + var(--mmo-i,0) * 45ms)}
body:not(.anim-off)[data-vue="mondial"].vue-entree #content .tbl tbody tr:nth-child(-n+3),
body:not(.anim-off)[data-vue="mondial"] .mmo-bascule .tbl tbody tr:nth-child(-n+3){animation-name:mmoPodium;animation-duration:.8s}
body:not(.anim-off)[data-vue="mondial"] #content .tbl tr.moi > td:nth-child(2){position:relative;overflow:hidden}
body:not(.anim-off)[data-vue="mondial"].vue-entree #content .tbl tr.moi > td:nth-child(2)::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,215,106,.28),transparent);animation:mmoReflet .9s ease-in-out .7s both}

/* =====================================================================================
   7. JOURNAL (messagerie) - les messages tombent en pile, les sabliers se remplissent,
   et les decisions en attente recoivent un reflet a l'arrivee pour qu'on les voie.
   ===================================================================================== */
body:not(.anim-off)[data-vue="messages"].vue-entree #content > .card,
body:not(.anim-off)[data-vue="messages"].vue-entree #content > h3.sec{
  animation:mmoCarte3d .5s var(--mmo-sortie) both;transform-origin:50% 0;animation-delay:calc(var(--mmo-i,0) * 55ms)}
body:not(.anim-off)[data-vue="messages"].vue-entree #content > .card div[style*="height:3px"] > i{
  animation:mmoJauge .8s var(--mmo-sortie) both;transform-origin:0 50%;animation-delay:calc(.3s + var(--mmo-i,0) * 55ms)}
body:not(.anim-off)[data-vue="messages"] #content > .card[style*="border-color:var(--accent)"]{position:relative;overflow:hidden}
body:not(.anim-off)[data-vue="messages"].vue-entree #content > .card[style*="border-color:var(--accent)"]::after{content:'';position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(77,184,255,.22),transparent);animation:mmoReflet 1s ease-in-out .5s both}

/* =====================================================================================
   8. JUSTICE - des dossiers poses sur le bureau, un par un ; la jauge du soupcon se
   remplit sous les yeux. Au changement d'onglet (Situation, Operations...), le nouveau
   dossier arrive de la meme facon.
   ===================================================================================== */
body:not(.anim-off)[data-vue="justice"].vue-entree #content > :is(.card,.instr),
body:not(.anim-off)[data-vue="justice"] #content > .mmo-bascule:is(.card,.instr){
  animation:mmoCarte3d .55s var(--mmo-sortie) both;animation-delay:calc(.1s + var(--mmo-i,0) * 80ms)}
body:not(.anim-off)[data-vue="justice"].vue-entree #content > .rowb:first-child > .btn{animation:mmoMonte .4s var(--mmo-sortie) both}
body:not(.anim-off)[data-vue="justice"].vue-entree #content .card div[style*="overflow:hidden"] > :is(i,div)[style*="width"],
body:not(.anim-off)[data-vue="justice"] #content > .mmo-bascule div[style*="overflow:hidden"] > :is(i,div)[style*="width"]{
  animation:mmoJauge .9s var(--mmo-sortie) .45s both;transform-origin:0 50%}
body:not(.anim-off)[data-vue="justice"] #content > .card .rowb > div > b{display:inline-block}
body:not(.anim-off)[data-vue="justice"].vue-entree #content > .card .rowb > div > b{animation:mmoPop .5s var(--mmo-ressort) .55s both}

/* =====================================================================================
   9. PROFIL DU PRESIDENT - le portrait se retourne comme une carte, les trophees sont
   lances, l'encart des grandes fortunes recoit un reflet d'or, la carriere s'ouvre.
   ===================================================================================== */
body:not(.anim-off)[data-vue="profil"].vue-entree #content > :is(.card,.grid){
  animation:mmoCarte3d .55s var(--mmo-sortie) both;animation-delay:calc(var(--mmo-i,0) * 70ms)}
body:not(.anim-off)[data-vue="profil"].vue-entree #content .avatar-xl2{animation:mmoPiece 1s var(--mmo-sortie) .2s both}
body:not(.anim-off)[data-vue="profil"] #content > .card:first-child{position:relative;overflow:hidden}
body:not(.anim-off)[data-vue="profil"].vue-entree #content > .card:first-child::after{content:'';position:absolute;top:0;bottom:0;left:0;width:26%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,215,106,.22),transparent);animation:mmoReflet 1.1s ease-in-out .35s both}
body:not(.anim-off)[data-vue="profil"].vue-entree #fort-rang{animation:mmoPop .6s var(--mmo-ressort) .4s both}
/* les trophees du palmares (icone + compteur) */
body:not(.anim-off)[data-vue="profil"].vue-entree #content .card .rowb > div > div:first-child > .ico{animation:mmoPiece .95s var(--mmo-sortie) .5s both}
body:not(.anim-off)[data-vue="profil"].vue-entree #content .card .rowb > div:nth-child(2) > div:first-child > .ico{animation-delay:.6s}
body:not(.anim-off)[data-vue="profil"].vue-entree #content .card .rowb > div:nth-child(3) > div:first-child > .ico{animation-delay:.7s}
body:not(.anim-off)[data-vue="profil"].vue-entree #content .card .rowb > div:nth-child(4) > div:first-child > .ico{animation-delay:.8s}
body:not(.anim-off)[data-vue="profil"].vue-entree #content .card .rowb > div:nth-child(5) > div:first-child > .ico{animation-delay:.9s}
@keyframes mmoPieceTour{from{transform:perspective(300px) rotateY(0deg)}to{transform:perspective(300px) rotateY(360deg)}}
@media (hover:hover){
  body:not(.anim-off)[data-vue="profil"] #content .card .rowb > div:hover > div:first-child > .ico{animation:mmoPieceTour .9s var(--mmo-sortie)}
}
/* la carriere (remplie apres coup par sa propre route) */
body:not(.anim-off)[data-vue="profil"].vue-entree .car-total-t{animation:mmoPop .6s var(--mmo-ressort) .3s both;transform-origin:0 50%}
body:not(.anim-off)[data-vue="profil"].vue-entree .car-cel{animation:mmoTuile .5s var(--mmo-sortie) both;transform-origin:50% 0;animation-delay:calc(.35s + var(--mmo-i,0) * 55ms)}
body:not(.anim-off)[data-vue="profil"].vue-entree .car-club{animation:mmoGlisse .45s var(--mmo-sortie) .6s both}

} /* fin prefers-reduced-motion:no-preference */

/* Mouvement reduit : le globe reste, immobile. */
@media (prefers-reduced-motion: reduce) {
  .mmo-gl-rot{animation:none}
}

/* ---- Carriere saison par saison (pantheon) et Grandes fortunes (fortunes) — ajout du 30/09 ----
   Deux pages restees sans mouvement : les cartes se posent en cascade, les lignes des tableaux
   glissent a leur place, le podium des fortunes monte. Entree seulement (vue-entree). */
@media (prefers-reduced-motion: no-preference) {
@keyframes mmoPose{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mmoLigne{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes mmoPodium{from{opacity:0;transform:translateY(22px) scale(.94)}60%{opacity:1}to{opacity:1;transform:none}}
body.vue-entree:is([data-vue="pantheon"],[data-vue="fortunes"]):not(.anim-off):not(.mode-perso) .content > .card{animation:mmoPose .7s cubic-bezier(.16,.84,.3,1) both}
body.vue-entree:is([data-vue="pantheon"],[data-vue="fortunes"]):not(.anim-off):not(.mode-perso) .content > .card:nth-child(2){animation-delay:.08s}
body.vue-entree:is([data-vue="pantheon"],[data-vue="fortunes"]):not(.anim-off):not(.mode-perso) .content > .card:nth-child(3){animation-delay:.16s}
body.vue-entree:is([data-vue="pantheon"],[data-vue="fortunes"]):not(.anim-off):not(.mode-perso) .content > .card:nth-child(n+4){animation-delay:.24s}
body.vue-entree:is([data-vue="pantheon"],[data-vue="fortunes"]):not(.anim-off):not(.mode-perso) tbody tr{animation:mmoLigne .55s cubic-bezier(.16,.84,.3,1) both;animation-delay:calc(.2s + var(--mmo-i,0) * .045s)}
body.vue-entree[data-vue="fortunes"]:not(.anim-off):not(.mode-perso) tbody tr:nth-child(-n+3){animation-name:mmoPodium;animation-duration:.8s}
}

/* =====================================================================================
   THEMES DES MENUS - MONDE & PRESTIGE (30/09/2026)
   -------------------------------------------------------------------------------------
   Decision de Ju : UN SEUL theme pour tous les menus, celui de l'accueil (bleu nuit, accent
   or creme), « pour reposer les yeux ». La palette est posee par le socle (index.html,
   body.menu-theme[data-vue]) ; ici on ne fait que RETEINDRE les composants de nos pages
   qui peignaient leur couleur en dur, et toujours avec les variables du theme
   (--card, --vp-carte-bas, --line, --vp-accent, --muted). La Super League garde sa propre
   identite braise (pas de menu-theme sur elle). On garde les couleurs qui DISENT quelque
   chose : or/argent/bronze des rangs, victoire/defaite, soupcon, partis, rubriques.
   ===================================================================================== */

/* ---- socle commun a nos pages --------------------------------------------------------
   theme.css peint TOUTES les .card en bleu marine avec !important : la regle du socle
   (sans !important) perdait. On la repose avec la meme force, et on reteint le bouton or
   (son degrade descendait vers #1e7fe0) et les boutons ordinaires (#28304c). */
body.menu-theme:is([data-vue="pantjoueurs"],[data-vue="pantheon"],[data-vue="fortunes"],[data-vue="autrechamp"],[data-vue="monde"],[data-vue="mondial"],[data-vue="messages"],[data-vue="justice"],[data-vue="profil"]){
  --accent-deep:color-mix(in srgb,var(--vp-accent) 62%,#000);
  --accent-glow:color-mix(in srgb,var(--vp-accent) 30%,transparent)}
body.menu-theme:is([data-vue="pantjoueurs"],[data-vue="pantheon"],[data-vue="fortunes"],[data-vue="autrechamp"],[data-vue="monde"],[data-vue="mondial"],[data-vue="messages"],[data-vue="justice"],[data-vue="profil"]) #content .card{background:linear-gradient(180deg,var(--card),var(--vp-carte-bas))!important}
body.menu-theme:is([data-vue="pantjoueurs"],[data-vue="pantheon"],[data-vue="fortunes"],[data-vue="autrechamp"],[data-vue="monde"],[data-vue="mondial"],[data-vue="messages"],[data-vue="justice"],[data-vue="profil"]) #content .btn:not(.gold):not(.green):not(.red):not(.watch):not(.play):not(.bq-verrou){
  background:linear-gradient(180deg,color-mix(in srgb,var(--line) 78%,var(--card)),var(--card))!important;border-color:color-mix(in srgb,var(--vp-accent) 22%,transparent)!important;color:#fff8ef}
body.menu-theme:is([data-vue="pantjoueurs"],[data-vue="pantheon"],[data-vue="fortunes"],[data-vue="autrechamp"],[data-vue="monde"],[data-vue="mondial"],[data-vue="messages"],[data-vue="justice"],[data-vue="profil"]) #content .btn.gold{background:linear-gradient(180deg,color-mix(in srgb,var(--vp-accent) 88%,#fff),var(--accent-deep))!important;color:#1a1206!important}
body.menu-theme:is([data-vue="pantjoueurs"],[data-vue="pantheon"],[data-vue="fortunes"],[data-vue="autrechamp"],[data-vue="monde"],[data-vue="mondial"],[data-vue="messages"],[data-vue="justice"],[data-vue="profil"]) #content th{color:color-mix(in srgb,var(--muted) 85%,var(--vp-accent))}
/* Consigne de Ju : la police a empattements UNIQUEMENT sur le grand titre du haut ; les
   h3.sec reprennent leur allure d'origine (capitales espacees, police du jeu). */
body.menu-theme:is([data-vue="pantjoueurs"],[data-vue="pantheon"],[data-vue="fortunes"],[data-vue="autrechamp"],[data-vue="monde"],[data-vue="mondial"],[data-vue="messages"],[data-vue="justice"],[data-vue="profil"]) h3.sec{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
/* avatars, pastilles et etiquettes : fond #0e1638 en dur (classe et <rect>) */
body.menu-theme:is([data-vue="pantjoueurs"],[data-vue="pantheon"],[data-vue="fortunes"],[data-vue="autrechamp"],[data-vue="monde"],[data-vue="mondial"],[data-vue="messages"],[data-vue="justice"],[data-vue="profil"]) #content :is(.avatar,.chip,.car,.mo-sc .v){background:color-mix(in srgb,var(--card) 70%,#000)}
body.menu-theme:is([data-vue="pantjoueurs"],[data-vue="pantheon"],[data-vue="fortunes"],[data-vue="autrechamp"],[data-vue="monde"],[data-vue="mondial"],[data-vue="messages"],[data-vue="justice"],[data-vue="profil"]) #content rect[fill="#0e1638"]{fill:color-mix(in srgb,var(--card) 70%,#000)}
body.menu-theme:is([data-vue="pantjoueurs"],[data-vue="pantheon"],[data-vue="fortunes"],[data-vue="autrechamp"],[data-vue="monde"],[data-vue="mondial"],[data-vue="messages"],[data-vue="justice"],[data-vue="profil"]) #content .kpi{background:color-mix(in srgb,var(--vp-carte-bas) 70%,transparent);border-color:color-mix(in srgb,var(--vp-accent) 16%,var(--line))}

/* ---- PANTHEON DES JOUEURS : l'en-tete or/bleu marine en dur (!important) ---- */
body.menu-theme[data-vue="pantjoueurs"] #content .pjt-tete{
  background:radial-gradient(circle at 50% 118%,transparent 58px,#ffffff10 59px,#ffffff10 60px,transparent 61px),
    linear-gradient(155deg,color-mix(in srgb,var(--vp-accent) 20%,var(--card)) 0%,var(--card) 50%,var(--vp-carte-bas) 100%)!important;
  border-color:color-mix(in srgb,var(--vp-accent) 40%,transparent)!important}

/* ---- PANTHEON DES PRESIDENTS ---- */
body.menu-theme[data-vue="pantheon"] #content .pr-barre>i{background:linear-gradient(90deg,var(--accent-deep),var(--vp-accent))!important}
body.menu-theme[data-vue="pantheon"] #content .pn-rg.podium{color:#d9dde8} /* argent (etait bleu ciel) */
body.menu-theme[data-vue="pantheon"] #content .pn-rg.or{color:#2a1c08}

/* ---- GRANDES FORTUNES : lignes du classement (.instr), podium lisere d'or ---- */
body.menu-theme[data-vue="fortunes"] #content > div > .instr:nth-child(-n+3){border-color:color-mix(in srgb,var(--vp-accent) 40%,transparent);box-shadow:inset 3px 0 var(--vp-accent)}
body.menu-theme[data-vue="fortunes"] #content > .card:first-of-type{border-color:color-mix(in srgb,var(--vp-accent) 50%,transparent)!important}

/* ---- AUTRES CHAMPIONNATS : la carte du pays, meridiens discrets ---- */
body.menu-theme[data-vue="autrechamp"] #content > .card:first-of-type{
  background:repeating-linear-gradient(90deg,transparent 0 46px,color-mix(in srgb,var(--vp-accent) 6%,transparent) 46px 47px),repeating-linear-gradient(0deg,transparent 0 46px,color-mix(in srgb,var(--vp-accent) 6%,transparent) 46px 47px),linear-gradient(135deg,var(--card),var(--vp-carte-bas) 70%)!important;
  border-color:color-mix(in srgb,var(--vp-accent) 35%,transparent)!important}

/* ---- INFOS MONDE : infos-une.js et journal-monde.js peignent #0a0e1a / #111726 et des
   textes gris-bleu en dur. Ils prennent les variables du theme ; le rouge DIRECT et les
   couleurs des rubriques (--c) restent : elles disent de quoi parle l'article. */
body.menu-theme[data-vue="monde"] :is(.mo-direct,.iu-hero,.iu-kpi,.mo .kpi,.mv,.mo-cp-t){background-color:var(--vp-carte-bas)}
body.menu-theme[data-vue="monde"] .iu-hero{background:var(--vp-carte-bas)}
body.menu-theme[data-vue="monde"] .mo-direct{background:linear-gradient(180deg,var(--card),var(--vp-carte-bas))}
body.menu-theme[data-vue="monde"] :is(.mo .mo-tabs,.iu-carte,.iu-bloc,.iu-cite,.jm-liste,.jm-bloc,.mo-cp){background:var(--card)}
body.menu-theme[data-vue="monde"] #content .mo .card{background:var(--card)!important}
body.menu-theme[data-vue="monde"] .mv::before{background:radial-gradient(circle at 50% 50%,transparent 0 17%,color-mix(in srgb,var(--c) 40%,transparent) 17.4% 18.2%,transparent 18.6%),
  linear-gradient(90deg,transparent calc(50% - 1px),color-mix(in srgb,var(--c) 40%,transparent) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
  repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 12%,transparent) 0 16px,transparent 16px 32px),
  radial-gradient(ellipse at 20% 0%,color-mix(in srgb,var(--c) 45%,transparent),transparent 65%),
  linear-gradient(160deg,color-mix(in srgb,var(--c) 26%,var(--vp-carte-bas)),var(--vp-carte-bas) 75%)}
body.menu-theme[data-vue="monde"] :is(.mo-date,.mo-desc,.iu-hero .meta,.iu-carte p,.iu-kpi .l,.jm-art p,.jm-lire .meta,.mo .mo-tab,.iu-tr small,.jm-art .k span,.jm-tr small){color:var(--muted)}
body.menu-theme[data-vue="monde"] .mo .mo-tab:hover{color:#fff}
/* onglets a l'ancienne (.mo-tab.on vert) : le rouge de la redaction */
body.menu-theme[data-vue="monde"] .mo-tab.on{background:linear-gradient(135deg,#e3262e,#a3161c);color:#fff}

/* ---- CLASSEMENT MONDIAL : le globe en or creme ; rangs 2 et 3 en argent ---- */
body.menu-theme[data-vue="mondial"] .mmo-globe::before{border-color:color-mix(in srgb,var(--vp-accent) 55%,transparent)}
body.menu-theme[data-vue="mondial"] .mmo-gl-rot > i{border-color:color-mix(in srgb,var(--vp-accent) 45%,transparent)}
body.menu-theme[data-vue="mondial"] #content > .card:first-of-type{border-color:color-mix(in srgb,var(--vp-accent) 45%,transparent)!important}
body.menu-theme[data-vue="mondial"] #content td.ctr[style*="#8fd3ff"]{color:#d9dde8!important}

/* ---- JOURNAL (messagerie) : theme.css imposait une bordure unie a toutes les cartes :
   le cadre des messages qui attendent une decision, annonce « en bleu » par la page, avait
   disparu. Il revient (le bleu est ici une information, la page le dit). */
body.menu-theme[data-vue="messages"] #content .card[style*="border-color:var(--accent)"]{border-color:#6fa8ff!important;box-shadow:inset 3px 0 #6fa8ff,0 8px 24px #0006!important}

/* ---- JUSTICE et PROFIL : le bouton d'action vert passe a l'or creme (meme role) ---- */
body.menu-theme:is([data-vue="justice"],[data-vue="profil"]) #content .btn.green{
  background:linear-gradient(180deg,color-mix(in srgb,var(--vp-accent) 88%,#fff),var(--accent-deep))!important;color:#1a1206!important;box-shadow:0 4px 14px var(--accent-glow)!important;border:0!important}

/* ---- PROFIL : la carriere et les cadres bleu ciel en dur ---- */
body.menu-theme[data-vue="profil"] #content .car-total{background:linear-gradient(140deg,var(--card),var(--vp-carte-bas));border-color:color-mix(in srgb,var(--vp-accent) 28%,transparent)}
body.menu-theme[data-vue="profil"] #content .car-club.encours{border-color:color-mix(in srgb,var(--vp-accent) 50%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--vp-accent) 8%,transparent),transparent)}
body.menu-theme[data-vue="profil"] #content .car-club:hover{border-color:color-mix(in srgb,var(--vp-accent) 35%,transparent)}
body.menu-theme[data-vue="profil"] #content .car-tag{background:var(--vp-accent);color:#2a1a08}
body.menu-theme[data-vue="profil"] #content :is(.car-v[style*="#8fd3ff"],div[style*="color:#3aa3ff"]){color:var(--vp-accent)!important}
body.menu-theme[data-vue="profil"] #content .card[style*="border-color:#3aa3ff"]{border-color:color-mix(in srgb,var(--vp-accent) 45%,transparent)!important}
body.menu-theme[data-vue="profil"] #content div[style*="#4db8ff22"]{background:color-mix(in srgb,var(--vp-accent) 14%,transparent)!important}
body.menu-theme[data-vue="profil"] #content div[style*="color:#8a93b5"]{color:var(--muted)!important}

/* ---- SUPER LEAGUE : hors theme unique, elle garde sa braise. theme.css ecrasait pourtant
   ses cartes (.sl-card) en bleu marine avec !important : on leur rend leur degrade. */
body[data-vue="superligue"] .sl-skin .card.sl-card{background:linear-gradient(150deg,rgba(46,10,6,.90),rgba(14,4,3,.94))!important;border-color:rgba(224,52,31,.34)!important}