/* =====================================================================================
   MOTION DES MENUS - GROUPE CLUB (30/09/2026)
   Pages : gains (accueil), effectif, cohesion, coach, contrats, calendrier, champ, stade,
   avantmatch, formation, histoire, tactique, objectifs.

   Regles :
   - les animations d'ENTREE ne jouent que sous `body.vue-entree` (posee ~1,6 s a l'arrivee
     sur une page par go()) : sans ce garde-fou elles rejoueraient a chaque rafraichissement
     silencieux (la page est redessinee toutes les ~30 s). `both` partout : retirer la
     classe ne fait rien sauter.
   - on anime `translate` / `scale` / `rotate` (proprietes individuelles) et `opacity`,
     jamais `transform` a l'entree : le relief au survol (motion-club.js) pose `transform`
     et les deux se composent sans se marcher dessus.
   - rien en boucle infinie ici ; tout se coupe avec « Animations & effets » (body.anim-off)
     et avec la preference systeme « reduire les animations ».
   - vie privee, Ballon d'Or, dilemmes, match, telephone, mascotte, #ov : jamais touches.
   ===================================================================================== */

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

/* ---------- rang parmi les freres : --mc-n (0..14) sert a toutes les cascades ---------- */
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *{--mc-n:14}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(1){--mc-n:0}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(2){--mc-n:1}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(3){--mc-n:2}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(4){--mc-n:3}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(5){--mc-n:4}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(6){--mc-n:5}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(7){--mc-n:6}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(8){--mc-n:7}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(9){--mc-n:8}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(10){--mc-n:9}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(11){--mc-n:10}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(12){--mc-n:11}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(13){--mc-n:12}
body:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content *:nth-child(14){--mc-n:13}

/* ---------- mouvements ---------- */
@keyframes mcMonte{from{opacity:0;translate:0 16px}}
@keyframes mcMonteCourt{from{opacity:0;translate:0 8px}}
@keyframes mcGauche{from{opacity:0;translate:-24px 0}}
@keyframes mcDroite{from{opacity:0;translate:24px 0}}
@keyframes mcGaucheCourt{from{opacity:0;translate:-12px 0}}
@keyframes mcDroiteCourt{from{opacity:0;translate:12px 0}}
@keyframes mcApparait{from{opacity:0}}
@keyframes mcPop{0%{opacity:0;scale:.6}60%{opacity:1;scale:1.06}100%{opacity:1;scale:1}}
@keyframes mcRecul{from{scale:1.13}}                          /* la photo recule doucement */
@keyframes mcRemplit{from{scale:0 1}}                         /* jauge qui se remplit */
@keyframes mcArc{from{stroke-dashoffset:150.8}}               /* arc de l'ambiance du stade */
@keyframes mcEtage{from{opacity:0;translate:0 20px;scale:.96}}
@keyframes mcCarte{from{opacity:0;rotate:x 32deg;translate:0 30px}}      /* carte qui se redresse */
@keyframes mcDonne{from{opacity:0;rotate:y -80deg;translate:-24px 0}}    /* carte qu'on retourne */
@keyframes mcVolte{from{opacity:0;rotate:y -110deg}}
@keyframes mcPiece{from{rotate:y -360deg;scale:.72}}                     /* blason qui tourne comme une piece */
@keyframes mcEclat{from{background-color:#ffd76a47}}                     /* ta ligne s'allume puis s'apaise */
/* ⚠️ 01/10/2026 : la carte choisie GROSSISSAIT de 4,5 % (≈ 10 px aux bords sous le doigt).
   Ju : au clic, rien ne doit bouger. Le coup est marque par un halo dore, sans geometrie. */
@keyframes mcChoix{0%{box-shadow:0 0 0 0 #ffd76a00}35%{box-shadow:0 0 0 4px #ffd76a73,0 0 22px #ffd76a40}100%{box-shadow:0 0 0 0 #ffd76a00}}

/* =====================================================================================
   ACCUEIL (gains)
   L'affiche du prochain match se met en place comme un generique : la photo recule, les
   deux equipes arrivent chacune de leur cote, le « VS » claque au milieu.
   ===================================================================================== */
body:not(.anim-off)[data-vue=gains].vue-entree .poster.affiche>img{animation:mcRecul 1.4s cubic-bezier(.2,.7,.2,1) both}
body:not(.anim-off)[data-vue=gains].vue-entree .affiche .pv>.mid{animation:mcMonteCourt .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.05s + var(--mc-n)*.06s)}
body:not(.anim-off)[data-vue=gains].vue-entree .affiche .vs>.team:first-child{animation:mcGauche .6s .2s cubic-bezier(.2,.8,.2,1) both}
body:not(.anim-off)[data-vue=gains].vue-entree .affiche .vs>.team:last-child{animation:mcDroite .6s .2s cubic-bezier(.2,.8,.2,1) both}
body:not(.anim-off)[data-vue=gains].vue-entree .affiche .vs>div:not(.team){animation:mcPop .5s .38s cubic-bezier(.2,.8,.2,1) both}
/* les chiffres cles arrivent un par un (et defilent : motion-club.js) */
body:not(.anim-off)[data-vue=gains].vue-entree .kpis>.kpi{animation:mcMonteCourt .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.12s + var(--mc-n)*.06s)}
/* dernier match : les barres de stats se remplissent, ligne apres ligne */
body[data-vue=gains] .pile .card div[style*="grid-template-columns:46px"]{--mc-r:var(--mc-n)}
body:not(.anim-off)[data-vue=gains].vue-entree .pile .card div[style*="grid-template-columns:46px"] i{transform-origin:left center;animation:mcRemplit .8s cubic-bezier(.25,.8,.25,1) both;animation-delay:calc(.25s + var(--mc-r,0)*.05s)}
/* ta ligne du mini-classement s'allume une fois */
body:not(.anim-off)[data-vue=gains].vue-entree .mini-clt tr.moi td{animation:mcEclat 1.3s .45s ease-out both}
/* journal du club : les nouvelles tombent l'une sous l'autre */
body:not(.anim-off)[data-vue=gains].vue-entree .card.large .evt{animation:mcGaucheCourt .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--mc-n)*.045s)}

/* =====================================================================================
   EFFECTIF : les filtres se posent, la liste defile en cascade courte (pas de relief :
   c'est un tableau de travail, il doit rester immobile sous la souris).
   ===================================================================================== */
body:not(.anim-off)[data-vue=effectif].vue-entree .eff-puce{animation:mcPop .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--mc-n)*.05s)}
body:not(.anim-off)[data-vue=effectif].vue-entree .eff-table tbody tr{animation:mcMonteCourt .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.06s + var(--mc-n)*.03s)}

/* =====================================================================================
   VESTIAIRE (cohesion) : la pyramide se construit PAR LA BASE — la marge d'abord, les
   patrons en dernier, au sommet. Chaque joueur se pose ensuite dans son etage.
   ===================================================================================== */
body[data-vue=cohesion] .coh-e-marge{--mc-b:.1s}
body[data-vue=cohesion] .coh-e-groupe{--mc-b:.22s}
body[data-vue=cohesion] .coh-e-relais{--mc-b:.34s}
body[data-vue=cohesion] .coh-e-patron{--mc-b:.46s}
body:not(.anim-off)[data-vue=cohesion].vue-entree .coh-etage{animation:mcEtage .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--mc-b,0s)}
body:not(.anim-off)[data-vue=cohesion].vue-entree .coh-h{animation:mcPop .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--mc-b,0s) + .14s + var(--mc-n)*.035s)}
body:not(.anim-off)[data-vue=cohesion].vue-entree .kpis>.kpi{animation:mcMonteCourt .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.08s + var(--mc-n)*.07s)}

/* =====================================================================================
   COACH : le portrait se retourne, les jauges se remplissent, la citation glisse.
   Les messages NEUFS de l'echange arrivent de leur cote (classe posee par motion-club.js
   seulement quand un message s'ajoute, jamais au rafraichissement).
   ===================================================================================== */
body[data-vue=coach] .ch-id{perspective:700px}
body:not(.anim-off)[data-vue=coach].vue-entree .ch-av{animation:mcVolte .7s .05s cubic-bezier(.2,.8,.2,1) both}
body:not(.anim-off)[data-vue=coach].vue-entree .ch-nom{animation:mcGaucheCourt .45s .15s cubic-bezier(.2,.8,.2,1) both}
body:not(.anim-off)[data-vue=coach].vue-entree .ch-chip{animation:mcPop .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--mc-n)*.06s)}
body:not(.anim-off)[data-vue=coach].vue-entree .ch-bilan>div{animation:mcMonteCourt .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--mc-n)*.06s)}
body:not(.anim-off)[data-vue=coach].vue-entree .ch-quote{animation:mcGauche .55s .32s cubic-bezier(.2,.8,.2,1) both}
body[data-vue=coach] .ch-jauges>div{--mc-r:var(--mc-n)}
body:not(.anim-off)[data-vue=coach].vue-entree .ch-jauges i{transform-origin:left center;animation:mcRemplit .9s cubic-bezier(.25,.8,.25,1) both;animation-delay:calc(.35s + var(--mc-r,0)*.12s)}
body:not(.anim-off)[data-vue=coach].vue-entree .ch-strip>div{animation:mcMonteCourt .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.5s + var(--mc-n)*.07s)}
body:not(.anim-off)[data-vue=coach] .ch-msg.mc-neuf{animation:mcGaucheCourt .42s cubic-bezier(.2,.8,.2,1) both}
body:not(.anim-off)[data-vue=coach] .ch-msg.moi.mc-neuf{animation-name:mcDroiteCourt}
body:not(.anim-off)[data-vue=coach] :is(.ch-sys,.ch-rdv,.ch-jour).mc-neuf{animation:mcApparait .4s ease-out both}

/* =====================================================================================
   CONTRATS : la photo du bureau recule, les compteurs defilent, les segments de duree
   s'allument un a un (on « voit » les saisons restantes).
   ===================================================================================== */
body:not(.anim-off)[data-vue=contrats].vue-entree .ct-hero>img{animation:mcRecul 1.4s cubic-bezier(.2,.7,.2,1) both}
body:not(.anim-off)[data-vue=contrats].vue-entree .ct-hero-in>*{animation:mcMonteCourt .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.05s + var(--mc-n)*.06s)}
body:not(.anim-off)[data-vue=contrats].vue-entree .ct-dos{animation:mcMonteCourt .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--mc-n)*.05s)}
body:not(.anim-off)[data-vue=contrats].vue-entree .ct-segs>i.on{animation:mcPop .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.35s + var(--mc-n)*.07s)}

/* =====================================================================================
   CALENDRIER : cascade courte des journees, et la tienne (la prochaine) s'allume.
   ===================================================================================== */
body:not(.anim-off)[data-vue=calendrier].vue-entree #content tbody tr{animation:mcMonteCourt .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--mc-n)*.02s)}
body:not(.anim-off)[data-vue=calendrier].vue-entree #content tbody tr.moi td{animation:mcEclat 1.4s .4s ease-out both}

/* =====================================================================================
   CHAMPIONNATS : le classement se deroule, chaque blason se retourne a son tour ; au
   survol d'une ligne le blason fait un tour complet (souris seulement, plus bas).
   ===================================================================================== */
body[data-vue=champ] .clt-table tbody tr{--mc-r:var(--mc-n)}
body[data-vue=champ] .clt-club{perspective:260px}
body:not(.anim-off)[data-vue=champ].vue-entree .clt-table tbody tr{animation:mcMonteCourt .36s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--mc-n)*.025s)}
body:not(.anim-off)[data-vue=champ].vue-entree .clt-club>svg{animation:mcVolte .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.12s + var(--mc-r,0)*.035s)}
body:not(.anim-off)[data-vue=champ].vue-entree .clt-table tbody tr.moi td{animation:mcEclat 1.4s .5s ease-out both}
body:not(.anim-off)[data-vue=champ].vue-entree .grid.g2 .card tbody tr{animation:mcMonteCourt .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--mc-n)*.03s)}

/* =====================================================================================
   STADE : la photo recule, l'arc de l'ambiance se trace, les jauges se remplissent.
   ===================================================================================== */
body:not(.anim-off)[data-vue=stade].vue-entree .stade-g .poster>img{animation:mcRecul 1.4s cubic-bezier(.2,.7,.2,1) both}
body:not(.anim-off)[data-vue=stade].vue-entree .stade-g .poster .pv{animation:mcMonteCourt .5s .2s cubic-bezier(.2,.8,.2,1) both}
body:not(.anim-off)[data-vue=stade].vue-entree path[stroke-dasharray="150.8"]{animation:mcArc 1.2s .25s cubic-bezier(.3,.7,.2,1) both}
body:not(.anim-off)[data-vue=stade].vue-entree #content i[style*="height:100%"]{transform-origin:left center;animation:mcRemplit .9s .4s cubic-bezier(.25,.8,.25,1) both}

/* =====================================================================================
   AVANT-MATCH : le bandeau du stade recule comme une camera qui s'installe, le titre
   de l'affiche monte, les plans de match se posent en cascade.
   ===================================================================================== */
body:not(.anim-off)[data-vue=avantmatch].vue-entree #content div:is([style*="height:230px"],[style*="height: 230px"])>img{animation:mcRecul 1.5s cubic-bezier(.2,.7,.2,1) both}
body:not(.anim-off)[data-vue=avantmatch].vue-entree #content div:is([style*="height:230px"],[style*="height: 230px"])>div{animation:mcMonte .55s .25s cubic-bezier(.2,.8,.2,1) both}
body:not(.anim-off)[data-vue=avantmatch].vue-entree .am-plans>.instr{animation:mcMonteCourt .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--mc-n)*.05s)}

/* =====================================================================================
   CENTRE DE FORMATION : les centres se redressent comme des cartes posees sur la table.
   ===================================================================================== */
body[data-vue=formation].vue-entree .fo-grille{perspective:1400px}
body:not(.anim-off)[data-vue=formation].vue-entree .fo-centre{animation:mcCarte .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.08s + var(--mc-n)*.06s)}

/* =====================================================================================
   HISTOIRE : le blason tourne comme une piece qu'on lance, puis se pose.
   ===================================================================================== */
body[data-vue=histoire] .card .rowb>div:is([style*="line-height:0"],[style*="line-height: 0"]){perspective:420px}
body:not(.anim-off)[data-vue=histoire].vue-entree .card .rowb>div:is([style*="line-height:0"],[style*="line-height: 0"])>svg{animation:mcPiece 1.1s cubic-bezier(.2,.75,.25,1) both}
body:not(.anim-off)[data-vue=histoire].vue-entree .kpi{animation:mcMonteCourt .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--mc-n)*.07s)}
body:not(.anim-off)[data-vue=histoire].vue-entree #content tbody tr{animation:mcMonteCourt .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--mc-n)*.03s)}

/* =====================================================================================
   TACTIQUE : les styles de jeu sont distribues comme des cartes ; celle qu'on choisit
   marque le coup (classe posee par motion-club.js au changement de choix).
   ===================================================================================== */
body[data-vue=tactique].vue-entree .card>div[style*="grid-template-columns"]{perspective:1200px}
body:not(.anim-off)[data-vue=tactique].vue-entree .tac-card{animation:mcDonne .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.06s + var(--mc-n)*.07s)}
body:not(.anim-off)[data-vue=tactique] .tac-card.mc-choisi{animation:mcChoix .45s cubic-bezier(.2,.8,.2,1)}

/* =====================================================================================
   OBJECTIFS : les conditions de chaque sommet se lisent une par une.
   ===================================================================================== */
body:not(.anim-off)[data-vue=objectifs].vue-entree .card div.mini[style*="padding:2px 0"]{animation:mcGaucheCourt .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--mc-n)*.06s)}

/* =====================================================================================
   SOUS-ONGLETS (coach, formation, avant-match, histoire, championnats, supporters,
   filtres de l'effectif) : le contenu du nouvel onglet monte doucement. Classe posee par
   motion-club.js au clic, jamais au rafraichissement.
   ===================================================================================== */
body:not(.anim-off) #content .mc-onglet{animation:mcMonteCourt .32s cubic-bezier(.2,.8,.2,1) both}
body:not(.anim-off) #content .mc-onglet.mc-o1{animation-delay:0.04s}
body:not(.anim-off) #content .mc-onglet.mc-o2{animation-delay:0.08s}
body:not(.anim-off) #content .mc-onglet.mc-o3{animation-delay:0.12s}
body:not(.anim-off) #content .mc-onglet.mc-o4{animation-delay:0.16s}
body:not(.anim-off) #content .mc-onglet.mc-o5{animation-delay:0.20s}
body:not(.anim-off) #content .mc-onglet.mc-o6{animation-delay:0.24s}


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

/* =====================================================================================
   RELIEF AU SURVOL - souris seulement (jamais au doigt).
   motion-club.js pose .mc-tilt et les variables --mc-rx/--mc-ry (inclinaison), --mc-mx/
   --mc-my (position du reflet), --mc-px/--mc-py (parallaxe de la photo, -1..1).
   ===================================================================================== */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:not(.anim-off) .mc-tilt{
    transform:perspective(900px) rotateX(var(--mc-rx,0deg)) rotateY(var(--mc-ry,0deg));
    transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .15s,background .15s,translate .3s ease;
  }
  body:not(.anim-off) .mc-tilt.mc-suit{transition:transform .12s linear,border-color .15s,background .15s,translate .3s ease}
  /* la tactique pose un translateY en style en ligne au survol : on passe devant (seul endroit) */
  body:not(.anim-off)[data-vue=tactique] .tac-card.mc-tilt{transform:perspective(900px) rotateX(var(--mc-rx,0deg)) rotateY(var(--mc-ry,0deg))!important;transition:transform .55s cubic-bezier(.2,.8,.2,1),border .15s,translate .3s ease!important}
  body:not(.anim-off)[data-vue=tactique] .tac-card.mc-tilt.mc-suit{transition:transform .12s linear,border .15s,translate .3s ease!important}
  /* une carte qu'on peut ouvrir se souleve un peu */
  body:not(.anim-off) :is(.fo-centre,.tac-card).mc-tilt.mc-suit{translate:0 -3px}
  body:not(.anim-off) .mc-rel{position:relative}
  /* reflet qui suit la souris : un seul element a la fois, sur ordinateur seulement */
  body:not(.anim-off) .mc-reflet::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
    background:radial-gradient(circle at var(--mc-mx,50%) var(--mc-my,0%),#ffffff21,#ffffff00 55%);
    opacity:0;transition:opacity .35s ease;
  }
  body:not(.anim-off) .mc-reflet.mc-suit::after{opacity:1}

  /* parallaxe : la photo glisse a l'oppose de la souris, comme vue par une fenetre */
  body:not(.anim-off)[data-vue=gains] .poster.affiche>img,
  body:not(.anim-off)[data-vue=stade] .stade-g .poster>img,
  body:not(.anim-off)[data-vue=contrats] .ct-hero>img,
  body:not(.anim-off)[data-vue=avantmatch] #content div:is([style*="height:230px"],[style*="height: 230px"])>img{
    transition:translate .6s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1);
  }
  body:not(.anim-off) .mc-para>img{
    scale:1.06;translate:calc(var(--mc-px,0)*-12px) calc(var(--mc-py,0)*-8px);
  }
  body:not(.anim-off) .mc-para.mc-suit>img{transition:translate .15s linear,scale .9s cubic-bezier(.2,.8,.2,1)}

  /* championnats : au survol d'une ligne, le blason fait un tour */
  body:not(.anim-off)[data-vue=champ] .clt-table tbody tr .clt-club>svg{transition:rotate .7s cubic-bezier(.3,.7,.2,1)}
  body:not(.anim-off)[data-vue=champ] .clt-table tbody tr:hover .clt-club>svg{rotate:y 360deg}
  /* vestiaire : le joueur survole se detache */
  body:not(.anim-off)[data-vue=cohesion] .coh-h{transition:translate .18s ease}
  body:not(.anim-off)[data-vue=cohesion] .coh-h:hover{translate:0 -2px}
}

/* =====================================================================================
   THEME DES MENUS - GROUPE CLUB (30/09/2026)
   Decision de Ju : UN SEUL theme pour tous les menus (hors vie privee, Super League,
   Ballon d'Or), celui de l'accueil - bleu nuit et or creme, « pour reposer les yeux ».
   Les couleurs sont imposees par le socle (index.html, body.menu-theme[data-vue]{--vp-...}).
   Ici on ne pose AUCUNE couleur propre a un menu : seulement les variables du socle
   (--card, --vp-carte-bas, --line, --vp-accent, --muted, --txt) pour repeindre les
   composants des pages du club qui peignent leur couleur en dur (bleu vif, vert, violet).
   Les couleurs qui portent un sens (victoire / defaite, note d'un joueur, jauges, postes,
   cartons, zones de montee et de descente) sont laissees telles quelles.
   ===================================================================================== */
body.menu-theme:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]){
  --accent-deep:color-mix(in srgb,var(--vp-accent) 62%,#000);
  --accent-glow:color-mix(in srgb,var(--vp-accent) 30%,transparent);
  --mc-sur-accent:color-mix(in srgb,var(--vp-bas) 85%,#000);
  --mc-bouton:linear-gradient(180deg,color-mix(in srgb,var(--vp-accent) 72%,#fff),var(--vp-accent));
  --mc-neutre:linear-gradient(180deg,color-mix(in srgb,var(--line) 70%,var(--card)),var(--card));
  --mc-voile:color-mix(in srgb,var(--vp-accent) 14%,transparent);
  --mc-ligne-accent:color-mix(in srgb,var(--vp-accent) 38%,transparent);
  --mc-case:color-mix(in srgb,var(--card) 78%,var(--line));
  --mc-fond-sombre:color-mix(in srgb,var(--vp-bas) 88%,#000)}
/* motifs du decor : la bulle du theme plutot que l'accent plein, plus discret */
body.menu-theme:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #menu-decor .mt-motif{color:var(--vp-bulle)}
/* theme.css peint .card en bleu marine avec !important : la regle du socle ne passait pas.
   Les cartes de l'accueil aux couleurs du club (.club-teinte, voulu par Ju le 28/09) restent. */
body.menu-theme:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content .card:not(.club-teinte .card){background:linear-gradient(180deg,var(--card),var(--vp-carte-bas))!important;border-color:var(--line)!important}
/* consigne de Ju (30/09) : la police a empattements seulement sur le grand titre de scene.
   Le socle la pose aussi sur h3.sec : on rend aux titres de section la police du jeu. */
body.menu-theme:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content h3.sec{color:var(--txt)!important;font-family:var(--font-disp);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
/* boutons : le neutre prend la matiere du theme, le principal prend l'accent.
   Rouge (danger), direct (watch) et verrou gardent leur sens. */
body.menu-theme:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content .btn:not(.gold):not(.green):not(.red):not(.play):not(.watch):not(.bq-verrou):not(.ct-btn.go){background:var(--mc-neutre)!important;border-color:color-mix(in srgb,var(--vp-accent) 22%,var(--line))!important;color:var(--txt)!important}
body.menu-theme:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content :is(.btn.gold,.btn.green,.btn.play,.ct-btn.go){background:var(--mc-bouton)!important;color:var(--mc-sur-accent)!important;border-color:var(--vp-accent)!important;box-shadow:inset 0 1px 0 #ffffff55,0 6px 18px var(--accent-glow)!important;text-shadow:none!important}
body.menu-theme:is([data-vue=gains],[data-vue=effectif],[data-vue=cohesion],[data-vue=coach],[data-vue=contrats],[data-vue=calendrier],[data-vue=champ],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation],[data-vue=histoire],[data-vue=tactique],[data-vue=objectifs]) #content :is(.btn.gold,.btn.green,.btn.play)[disabled]{filter:saturate(.45) brightness(.72);box-shadow:none!important}
/* rangees d'onglets (coach, avant-match, formation) : la puce active en accent */
body.menu-theme:is([data-vue=coach],[data-vue=avantmatch],[data-vue=formation]) #content :is(.ch-tabs,.am-tabs,.fo-tabs){background:var(--mc-fond-sombre)!important;border-color:var(--line)!important}
body.menu-theme:is([data-vue=coach],[data-vue=avantmatch],[data-vue=formation]) #content :is(.ch-tab,.am-tab,.fo-tab){color:var(--muted)}
body.menu-theme:is([data-vue=coach],[data-vue=avantmatch],[data-vue=formation]) #content :is(.ch-tab,.am-tab,.fo-tab):hover{color:var(--txt)}
body.menu-theme:is([data-vue=coach],[data-vue=avantmatch],[data-vue=formation]) #content :is(.ch-tab,.am-tab,.fo-tab).on{background:var(--mc-bouton)!important;color:var(--mc-sur-accent)!important;box-shadow:0 4px 14px var(--accent-glow)!important}

/* ---------- accueil ---------- */
body.menu-theme[data-vue="gains"] #content .mini-clt tr.moi{background:var(--mc-voile)}
body.menu-theme[data-vue="gains"] #content .mini-clt tr.moi td{color:var(--vp-accent)}

/* ---------- effectif ---------- */
body.menu-theme[data-vue="effectif"] #content .eff-table th{background:var(--vp-carte-bas);border-bottom-color:var(--line)}
body.menu-theme[data-vue="effectif"] #content .eff-puce{background:var(--card2);border-color:var(--line)}
body.menu-theme[data-vue="effectif"] #content .eff-puce.on{background:var(--mc-bouton);border-color:var(--vp-accent);color:var(--mc-sur-accent)}
body.menu-theme[data-vue="effectif"] #content .eff-puce.on b{color:var(--mc-sur-accent)}

/* ---------- vestiaire ----------
   --blue y marque « les relais » ; le socle le passe a l'or, comme les patrons : on
   rend aux relais une teinte a eux (le gris perle du theme) pour garder la hierarchie. */
body.menu-theme[data-vue="cohesion"] #content .coh-etage{background:#ffffff06}
body.menu-theme[data-vue="cohesion"] #content .coh-etage.coh-e-patron{background:color-mix(in srgb,var(--vp-accent) 9%,transparent)}
body.menu-theme[data-vue="cohesion"] #content :is(.coh-etage.coh-e-relais,.coh-place.coh-e-relais){border-left-color:var(--muted);background:color-mix(in srgb,var(--muted) 6%,transparent)}
body.menu-theme[data-vue="cohesion"] #content .coh-e-relais .coh-tit b{color:var(--muted)}
body.menu-theme[data-vue="cohesion"] #content .coh-place.coh-e-relais>i{background:var(--muted)}
body.menu-theme[data-vue="cohesion"] #content .coh-h{background:var(--mc-fond-sombre);border-color:var(--line)}

/* ---------- coach : le vert pelouse et le bleu vif de l'en-tete passent au theme ---------- */
body.menu-theme[data-vue="coach"] #content .ch{--ch-v:var(--vp-accent);--ch-f:color-mix(in srgb,var(--card) 85%,#000);--ch-l:color-mix(in srgb,var(--line) 70%,transparent)}
body.menu-theme[data-vue="coach"] #content .ch-hero{border-color:var(--mc-ligne-accent);
  background:radial-gradient(circle at 50% 118%,transparent 58px,#ffffff10 59px,#ffffff10 60px,transparent 61px),
             linear-gradient(90deg,transparent calc(50% - .5px),#ffffff0d calc(50% - .5px),#ffffff0d calc(50% + .5px),transparent calc(50% + .5px)),
             linear-gradient(155deg,var(--vp-haut) 0%,var(--card) 55%,var(--vp-carte-bas) 100%)}
body.menu-theme[data-vue="coach"] #content :is(.ch-av,.ch-ini){background:linear-gradient(135deg,var(--vp-accent),var(--line))}
body.menu-theme[data-vue="coach"] #content .ch-ini{color:var(--mc-sur-accent)}
body.menu-theme[data-vue="coach"] #content :is(.ch-sujet,.ch-pill,.ch-tuile){background:var(--mc-case)}
body.menu-theme[data-vue="coach"] #content :is(.ch-sujet:hover:not([disabled]),.ch-pill:hover){border-color:var(--mc-ligne-accent)}
body.menu-theme[data-vue="coach"] #content .ch-sujet:hover:not([disabled]){background:color-mix(in srgb,var(--line) 60%,var(--card))}
body.menu-theme[data-vue="coach"] #content .ch-pill.on{background:var(--vp-accent);color:var(--mc-sur-accent)}
body.menu-theme[data-vue="coach"] #content .ch-chat{background:var(--mc-fond-sombre)}
body.menu-theme[data-vue="coach"] #content .ch-bulle{background:var(--mc-case)}
body.menu-theme[data-vue="coach"] #content .ch-msg.moi .ch-bulle{background:linear-gradient(135deg,color-mix(in srgb,var(--vp-accent) 22%,var(--card)),var(--card));border-color:var(--mc-ligne-accent)}

/* ---------- contrats ---------- */
body.menu-theme[data-vue="contrats"] #content .ct-dos{background:linear-gradient(90deg,var(--mc-case),var(--card));border-color:#ffffff10;border-left-color:var(--mc-ligne-accent)}
body.menu-theme[data-vue="contrats"] #content .ct-dos.bientot{border-left-color:var(--vp-accent)}
body.menu-theme[data-vue="contrats"] #content .ct-dos.part{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 22%,var(--card)),var(--card))}

/* ---------- stade ---------- */
body.menu-theme[data-vue="stade"] #content .jrow{background:linear-gradient(180deg,var(--card),var(--vp-carte-bas));border-color:#ffffff10}

/* ---------- formation ---------- */
body.menu-theme[data-vue="formation"] #content .fo-centre{background:linear-gradient(180deg,var(--card),var(--vp-carte-bas));border-color:#ffffff12}
body.menu-theme[data-vue="formation"] #content .fo-centre.ouvert{border-color:var(--mc-ligne-accent)}
body.menu-theme[data-vue="formation"] #content .fo-photo{background:linear-gradient(155deg,var(--card),var(--vp-carte-bas))}
body.menu-theme[data-vue="formation"] #content .fo-badge.ferme{border-color:var(--mc-ligne-accent)}

/* ---------- archives : les 2e et 3e du podium en gris perle plutot qu'en bleu ciel ---------- */
body.menu-theme[data-vue="histoire"] #content [style*="color:#8fd3ff"]{color:var(--muted)!important}

/* ---------- photos de bandeau au ton du theme (consigne de Ju, 30/09) ----------
   Un filtre de couleur sur l'image (un peu d'or, un peu de nuit) et le voile deja pose
   par le jeu repeint aux couleurs du theme. On repeint les voiles existants plutot que
   d'en ajouter : le ::after de .stade-g .poster sert au reflet du survol (motion-club.js).
   Les cases posees sur les photos prennent la teinte aussi. Le filtre est le meme partout. */
body.menu-theme:is([data-vue=gains],[data-vue=contrats],[data-vue=stade],[data-vue=avantmatch],[data-vue=formation]) #content{--mc-filtre-photo:sepia(.28) saturate(.95) brightness(.9)}
body.menu-theme[data-vue="gains"] #content .poster.affiche>img,
body.menu-theme[data-vue="contrats"] #content .ct-hero>img,
body.menu-theme[data-vue="stade"] #content .stade-g .poster>img,
body.menu-theme[data-vue="stade"] #content div[style*="#16305f"]>img,
body.menu-theme[data-vue="avantmatch"] #content div[style*="height:230px"]>img,
body.menu-theme[data-vue="formation"] #content .fo-photo>img{filter:var(--mc-filtre-photo)}
body.menu-theme[data-vue="formation"] #content .fo-centre:not(.ouvert) .fo-photo>img{filter:sepia(.3) saturate(.45) brightness(.72)}
/* voiles */
body.menu-theme[data-vue="contrats"] #content .card.ct-hero.ct-hero.ct-hero{border-color:var(--mc-ligne-accent)!important}
body.menu-theme[data-vue="contrats"] #content .ct-hero::before{background:linear-gradient(90deg,color-mix(in srgb,var(--vp-bas) 95%,transparent) 0%,color-mix(in srgb,var(--vp-milieu) 78%,transparent) 45%,color-mix(in srgb,var(--vp-haut) 35%,transparent) 100%)}
body.menu-theme[data-vue="contrats"] #content .ct-hero-in .rowb>div[style*="#050b18"]{background:color-mix(in srgb,var(--vp-bas) 72%,transparent)!important;border-color:color-mix(in srgb,var(--vp-accent) 20%,transparent)!important}
body.menu-theme[data-vue="stade"] #content .stade-g .poster{background:var(--vp-bas);border-color:var(--line)}
body.menu-theme[data-vue="stade"] #content .poster .pv{background:linear-gradient(0deg,color-mix(in srgb,var(--vp-bas) 93%,transparent),color-mix(in srgb,var(--vp-bas) 33%,transparent) 60%,transparent)}
body.menu-theme[data-vue="stade"] #content div[style*="#16305f"]{background:linear-gradient(135deg,var(--vp-haut),var(--vp-bas))!important}
body.menu-theme[data-vue="stade"] #content div[style*="#0a1228c2"]{background:linear-gradient(color-mix(in srgb,var(--vp-bas) 76%,transparent),color-mix(in srgb,var(--vp-bas) 90%,transparent))!important}
body.menu-theme[data-vue="avantmatch"] #content div[style*="height:230px"]>div[style*="rgba(6,11,26"]{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--vp-bas) 50%,transparent) 30%,color-mix(in srgb,var(--vp-bas) 97%,transparent))!important}
body.menu-theme[data-vue="avantmatch"] #content .card.am-vivre.am-vivre.am-vivre{border-color:var(--mc-ligne-accent)!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--vp-bas) 90%,transparent),color-mix(in srgb,var(--vp-milieu) 60%,transparent)),url('images/stade/parvis.webp?v=2809') center/cover!important}
body.menu-theme[data-vue="formation"] #content .fo-voile{background:linear-gradient(180deg,#0000 35%,color-mix(in srgb,var(--vp-bas) 90%,transparent) 100%)}