/* ===================================================================================== STABILITE DES PAGES (01/10/2026) — chargee EN DERNIER, apres toutes les feuilles motion. Ju : « quand je clique, la page a un petit moment d'ecran noir avant de revenir, et ca decale aussi dans la page ». Mesure dans un Chrome sans ecran (390 px) : chaque entree de contenu partait d'une opacite 0 — #content entier (viewIn), puis chaque carte (cardIn), puis les entrees des menus (mc*, mb*, mmo*, pm-monte). Pendant 0,3 a 0,6 s on voyait le fond sombre du jeu : 4 images entierement vides a chaque changement de page, et opacite 0 a chaque filtre de l'Effectif. Les translations faisaient en plus glisser le contenu de 6 a 30 px sous le doigt. Une regle @keyframes posee plus loin dans le document REMPLACE celle du meme nom : on redefinit donc ici les entrees de CONTENU en un simple eclaircissement, sans noir et sans deplacement. Les fenetres, toasts, pop-up et la 2D ne sont pas concernes. ===================================================================================== */ @keyframes viewIn{from{opacity:1}to{opacity:1}} @keyframes cardIn{from{opacity:.75}to{opacity:1}} @keyframes pm-monte{from{opacity:.75}to{opacity:1}} /* menus du club (motion-club.css) */ @keyframes mcApparait{from{opacity:.75}to{opacity:1}} @keyframes mcCarte{from{opacity:.75}to{opacity:1}} @keyframes mcDonne{from{opacity:.75}to{opacity:1}} @keyframes mcDroiteCourt{from{opacity:.75}to{opacity:1}} @keyframes mcDroite{from{opacity:.75}to{opacity:1}} @keyframes mcEtage{from{opacity:.75}to{opacity:1}} @keyframes mcGaucheCourt{from{opacity:.75}to{opacity:1}} @keyframes mcGauche{from{opacity:.75}to{opacity:1}} @keyframes mcMonteCourt{from{opacity:.75}to{opacity:1}} @keyframes mcMonte{from{opacity:.75}to{opacity:1}} @keyframes mcVolte{from{opacity:.75}to{opacity:1}} /* menus business (motion-business.css) */ @keyframes mbMonte{from{opacity:.75}to{opacity:1}} @keyframes mbDonne{from{opacity:.75}to{opacity:1}} @keyframes mbGlisse{from{opacity:.75}to{opacity:1}} @keyframes mbCarte{from{opacity:.75}to{opacity:1}} /* menus monde (motion-monde.css) */ @keyframes mmoCarte3d{from{opacity:.75}to{opacity:1}} @keyframes mmoDeplie{from{opacity:.75}to{opacity:1}} @keyframes mmoFondu{from{opacity:.75}to{opacity:1}} @keyframes mmoGlisse{from{opacity:.75}to{opacity:1}} @keyframes mmoLigne{from{opacity:.75}to{opacity:1}} @keyframes mmoMonte{from{opacity:.75}to{opacity:1}} @keyframes mmoPodium{from{opacity:.75}to{opacity:1}} @keyframes mmoPose{from{opacity:.75}to{opacity:1}} @keyframes mmoRideau{from{opacity:.75}to{opacity:1}} @keyframes mmoTexteUne{from{opacity:.75}to{opacity:1}} @keyframes mmoTuile{from{opacity:.75}to{opacity:1}} /* === vie privee === */ /* ⚠️ LA VIE PRIVEE S'ETEIGNAIT A CHAQUE SOUS-MENU (mesure 01/10, Chrome sans ecran, 390 et 1280). luxApparait partait d'opacite 0 avec 14 px de descente : en-tete de chaque menu (.vps-tete), toutes ses cartes (.vp-scene.entree .card) et chaque oeuvre de la galerie (.lux-carte) — or un filtre de la galerie remet les cartes en display:block, ce qui REJOUE l'animation : les 127 oeuvres repartaient du noir a chaque filtre (opacite 0,00 mesuree sur 25 filtres sur 25). Meme traitement qu'au-dessus : un simple eclaircissement, sans noir ni deplacement. */ /* ⚠️ 04/10/2026 — « QUAND JE CLIQUE SUR PATRIMOINE, LEGER ECRAN NOIR » (Ju). Le 0,75 restait de trop ici : dans la vie privee, ce sont TOUTES les cartes de la page, plus l'en-tete, qui entrent ensemble par cette cle, posees sur une scene deja sombre — l'ecran entier arrivait assombri puis s'eclaircissait pendant 0,7 a 0,9 s (mesure image par image, 390 px : 25 images de fondu apres le changement de page). Et .lux-tete la rejoue a CHAQUE reecriture (Matieres premieres, Collections). Plus aucun fondu : le contenu est la, a pleine lumiere, des la premiere image. */ @keyframes luxApparait{from{opacity:1}to{opacity:1}} /* Le telephone du president : chaque rafraichissement (sync toutes les quelques secondes, message lu) reecrit la liste et chaque ligne rejouait wpIn depuis l'opacite 0 avec 7 px de glissement — la liste clignotait et tremblait sous le doigt (opacite 0,00, 7 px). */ @keyframes wpIn{from{opacity:.75}to{opacity:1}} /* === monde === */ /* ⚠️ 01/10/2026 (agent monde) — six entrees de motion-monde.css partaient encore d'une opacite 0 et n'etaient pas neutralisees plus haut. Mesure a 390 px, retour sur Profil : la pastille du rang des fortunes (mmoPop) et les cinq trophees (mmoPiece) restaient a opacite 0,00 pendant 0,5 a 0,9 s ; Infos monde > A LA UNE : le chiffre geant de la une (mmoChiffre) retombait a 0,00 a chaque clic de l'onglet ET a chaque rotation du sujet (7 s), puisque cette regle-la n'est pas sous vue-entree. Meme traitement que les autres : un simple eclaircissement, sans rotation ni changement d'echelle (plus rien ne tourne ni ne grossit sous le doigt). */ @keyframes mmoPiece{from{opacity:.75}to{opacity:1}} @keyframes mmoPop{from{opacity:.75}to{opacity:1}} @keyframes mmoSlTitre{from{opacity:.75}to{opacity:1}} @keyframes mmoChiffre{from{opacity:.75}to{opacity:1}} /* le drapeau des autres championnats : sa boucle (mmoDrapeau) repart de la pose neutre */ @keyframes mmoDrapeauLeve{from{opacity:.75}to{opacity:1}} /* le globe en filigrane du classement mondial est pose a opacite 0,3 : son entree le faisait passer de 0 a 1 (plus vif que sa pose), puis retomber d'un coup a 0,3 quand vue-entree tombait. Une cle vide : il est simplement la, a sa pose. */ @keyframes mmoGlobeArrive{from{}to{}} /* La scene de chaque menu (.vp-scene) et la galerie (.lux-page) coupent leur decor en overflow:hidden, ce qui en fait des boites DEFILABLES par programme : un scrollIntoView, un focus, la recherche dans la page les faisait defiler de l'interieur (418 px mesures sur Parts de clubs), et la reecriture suivante les remettait a zero — tout le contenu sautait d'autant sous le doigt. overflow:clip coupe pareil mais ne defile jamais. */ .vp-scene,.lux-page{overflow:clip} /* === club === */ /* ⚠️ LE FIL DU COACH DEFILAIT DE HAUT EN BAS A CHAQUE CLIC. vCoach reecrit la page puis pose fil.scrollTop=scrollHeight ; avec scroll-behavior:smooth (COACH_CSS) le fil neuf partait de 0 et glissait jusqu'au dernier message : 1 134 px parcourus en 0,5 s mesures (390 px), a chaque question posee ou consigne donnee. Le dernier message est pose d'emblee. #content devant : COACH_CSS est injectee APRES cette feuille. */ #content .ch-chat{scroll-behavior:auto} /* ⚠️ SALLE DE REUNION (Contrats, Effectif) : LES CURSEURS DESCENDAIENT SOUS LE DOIGT. La jauge de l'agent s'ouvre sur « Calcul… » (45 px) puis recoit sa reponse (170 a 208 px) : curseurs et boutons tombaient de 125 px (PC) / 140 px (390) un instant apres l'ouverture, et de 23 px encore quand une ligne apparaissait en glissant le salaire. Meme defaut a l'entretien d'embauche du coach (#nego-jauge) : 40 px quand l'alerte de finances apparait. On reserve la place de la reponse la plus haute ; le contenu y est centre. */ #nego2-jauge,#nego-jauge{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center} #nego2-jauge{min-height:192px} #nego-jauge{min-height:266px} @media (max-width:700px){#nego2-jauge{min-height:210px}#nego-jauge{min-height:304px}} /* Le verdict (« Pas encore convaincu », « Accepte ! ») s'inserait AU-DESSUS de « Proposer l'offre » : le bouton fuyait de 82 px (390) / 90 px (PC) sous le doigt, et un second clic tombait a cote. Le verdict s'affiche desormais juste sous les boutons. */ .reunion .body{display:flex;flex-direction:column} .reunion .body>#reunion-res{order:1} /* === cadre === */ /* ⚠️ 01/10/2026 (agent cadre) — LE JOURNAL (menu Messages) S'OUVRAIT SUR UN ECRAN VIDE. Chaque ligne du fil et chaque decision (jnStyles dans index.html) entrait par jnEntre, depuis une opacite 0 avec 8 px de montee et un retard en cascade (35 ms par ligne) : mesure a l'ouverture par le menu, 16 a 18 images ou 73 a 85 % de l'ecran montrait le fond (390 et 1280). La feuille du journal est posee dans : cette regle-ci, plus loin dans le document, la remplace. Un simple eclaircissement, sans noir ni deplacement. */ @keyframes jnEntre{from{opacity:.75}to{opacity:1}} /* ⚠️ (agent cadre, 01/10) LE LOGO DE LA SUPER LEAGUE N'AVAIT PAS DE HAUTEUR AVANT D'ETRE CHARGE (width seule, height:auto). Mesure en arrivant par le menu avec 250 ms de reseau : la page s'affiche, puis le logo arrive et pousse TOUTES les cartes de 160 px vers le bas (CLS 0,15 en 390, 0,07 en 1280). L'image est carree (512 x 512) : sa place est reservee d'avance. */ .sl-logo{aspect-ratio:1/1} /* === fin cadre === */ /* === business === (agent business, 01/10/2026 — n'editer que cette section) */ /* ⚠️ Les pastilles des menus business (note des joueurs du Marche, ruptures de la Boutique, points des Finances, variations de la Bourse) partaient d'une opacite 0 et d'une echelle 0,4 (mbPop) : mesure a l'arrivee, 390 et 1280 px, opacite 0 pendant 0,3 a 0,85 s, et le meme saut a chaque onglet touche dans la seconde et demie d'arrivee. Simple eclaircissement, comme les autres entrees de contenu ci-dessus. */ @keyframes mbPop{from{opacity:.75}to{opacity:1}} /* === fin business === */ /* === tour du jeu (02/10/2026) === */ /* ⚠️ SUR TELEPHONE, LE SURVOL RESTE COLLE APRES LE DOIGT. Un ecran tactile n'a pas de souris : apres un toucher, le navigateur garde :hover sur l'element jusqu'au toucher suivant. Les effets de survol qui DEPLACENT (bouton qui monte de 1 px, ligne qui glisse de 2 px, carte de la galerie qui monte de 4 px et dont la photo grossit de 6 %) laissaient donc l'element decale sous le doigt apres chaque toucher. On ne garde ces mouvements que la ou une vraie souris survole. `:not(:active)` laisse intact l'enfoncement au toucher. */ @media (hover:none){ .btn:hover:not(:active),.jrow:hover:not(:active),.pc:hover:not(:active),.nav-item:hover:not(:active), .mo-club:hover:not(:active),.bd-cand:hover:not(:active),.mar-l.clic:hover:not(:active), .fo-centre:hover:not(:active),.wp-notif:hover:not(:active),#wp-fab:hover:not(:active), .lux-carte:hover:not(:active),.dil-choix button:hover:not(:active),.jn-opts button:hover:not(:active), .ch-sujet:hover:not([disabled]):not(:active),.acm-lien:hover:not(:active),.acm-cta:hover:not(:active), #titlescreen .acs-cta:hover:not(:active),#titlescreen .acs-bloc:hover:not(:active), #titlescreen .ts-btn.acp-cta:hover:not(:active),#titlescreen .acp-tuile:hover:not(:active){transform:none} .lux-carte:hover .lux-cadre img,.fo-centre:hover .fo-photo>img,.acm-cta:hover b,#titlescreen .acp-tuile:hover .acp-fond{transform:none} body:not(.anim-off)[data-vue="monde"] .iu-carte:hover,body:not(.anim-off)[data-vue="monde"] .iu-carte:hover .mv-v, body:not(.anim-off)[data-vue="superligue"] .sl-prime:hover, body[data-vue="boutique"]:not(.mode-perso):not(.anim-off) .bq-art:hover > .bq-img img{transform:none} } /* ⚠️ DEUX TOUCHERS RAPIDES SUR UN BOUTON ZOOMAIENT LA PAGE (Safari iPhone : le double toucher agrandit l'ecran — la page « saute » et il faut la redezoomer a deux doigts). `manipulation` garde le defilement et le zoom a deux doigts, et retire seulement le zoom au double toucher sur ce qui se clique. Le rectangle bleu qu'Android pose sur l'element touche (un eclair a chaque clic sur les cartes cliquables) devient un voile a peine visible : le retour au toucher reste, l'eclair disparait. `:where()` donne a la regle un poids nul : une carte qui a deja son propre reglage (le glisser des rencontres en pan-y, le voile du menu en none) le garde. */ html{-webkit-tap-highlight-color:rgba(255,255,255,.06)} :where(button,.btn,a,label,select,summary,[onclick],[role="button"],.nav-item){touch-action:manipulation} /* ⚠️ LE BOUTON « JOUER » DU BANDEAU REPEIGNAIT LA PAGE 60 FOIS PAR SECONDE, SUR TOUS LES ECRANS. pillJouer animait `filter` et `box-shadow` : deux proprietes que seul le fil principal sait peindre, donc un recalcul de style + une peinture a chaque image, pour toujours (mesure le 02/10/2026, telephone ralenti x4, page Effectif immobile : le fil principal occupe ~40 % du temps). L'anneau bleu ne se voyait meme pas : la pastille est decoupee par son clip-path. Meme respiration, mais par un voile clair dont seule l'opacite varie — travail de la carte graphique, le fil principal reste libre. */ .pill-jouer{animation:none;position:relative} .pill-jouer::after{content:'';position:absolute;inset:0;border-radius:inherit;background:#fff;opacity:0;pointer-events:none; animation:pillLueur 1.3s ease-in-out infinite;will-change:opacity} @keyframes pillLueur{0%,100%{opacity:0}50%{opacity:.16}} @media (prefers-reduced-motion:reduce){.pill-jouer::after{animation:none}} body.anim-off .pill-jouer::after{animation:none} /* ⚠️ LE REFLET DORE DES GALERIES (Grands projets, Collections, scenes de la vie privee) FAISAIT REPEINDRE TOUTE LA PAGE A CHAQUE IMAGE. Il glissait en animant `background-position` d'un calque aussi haut que la page : 3,35 millions de pixels repeints 60 fois par seconde sur Grands projets (1,9 sur la vie privee), mesure le 02/10/2026. Meme reflet, meme trajet, meme duree : il est desormais porte par un pseudo-element qu'on DEPLACE (transform), ce que la carte graphique fait seule, sans repeindre. (250 % de large : -78 % → +18 % = la course exacte de l'ancien background-position 130 % → -30 %.) */ .lux-reflet,.vp-scene>.vps-reflet{animation:none!important;background:none!important;overflow:hidden} .lux-reflet::before,.vp-scene>.vps-reflet::before{content:'';position:absolute;top:0;bottom:0;left:0;width:250%;pointer-events:none; background:linear-gradient(115deg,transparent 40%,rgba(255,236,190,.07) 50%,transparent 60%); animation:luxRefletT 11s ease-in-out infinite;will-change:transform} .vp-scene>.vps-reflet::before{background:linear-gradient(115deg,transparent 40%,rgba(255,244,220,.06) 50%,transparent 60%);animation-duration:12s} @keyframes luxRefletT{0%,20%{transform:translateX(-78%)}80%,100%{transform:translateX(18%)}} @media (prefers-reduced-motion:reduce){.lux-reflet::before,.vp-scene>.vps-reflet::before{animation:none;transform:translateX(-78%)}} /* Le bouton « Jouer le match » de l'accueil respirait aussi par `filter:brightness` (peinture a chaque image, pour un ecart de 8 % de luminosite qu'on ne voit pas) : on garde la respiration par l'echelle seule, que la carte graphique anime sans le fil principal. */ @keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}} /* ⚠️ SUR TELEPHONE, FAIRE DEFILER UNE FENETRE JUSQU'AU BOUT FAISAIT DEFILER LA PAGE DERRIERE. Le geste « deborde » de la fenetre (#ov) ou de la liste du telephone du president vers la page : a la fermeture, on ne retrouvait plus l'endroit d'ou on l'avait ouverte. Le defilement reste desormais dans la fenetre. */ .overlay,.wp-body{overscroll-behavior:contain} /* === fin tour du jeu === */ /* 03/10/2026 — la bulle de conseil de la mascotte passait PAR-DESSUS les fenêtres (dont l'offre d'agent à 1,99 € sur téléphone) et en cachait le haut. Une fenêtre ouverte a la priorité. */ body:has(#ov.show) .masc-perche{opacity:0;visibility:hidden;transition:opacity .15s} /* === 04/10/2026 — fiches et fenetres === */ /* ⚠️ LA FICHE D'UN JOUEUR S'OUVRAIT SUR UN VOILE SOMBRE SANS CONTENU pendant 110 a 180 ms (mesure 390 px) : le voile (mfVoile, 0,2 s) arrivait plus vite que la fenetre, qui partait d'une opacite 0 (mfFenetre, 0,28 s). C'est vraisemblablement l'« ecran noir » vu en cliquant. La fenetre est desormais la des la premiere image, avec le voile ; il ne reste qu'un leger rapproche (transform, sans effet sur la mise en page). */ @keyframes mfFenetre{from{opacity:1;transform:scale(.985)}to{opacity:1;transform:none}}