/* =========================================================================== LOT 09 — MOUVEMENT (ESSAI, 2026-09-30, branche essai/mouvement-interface) Ce que cette feuille fait : donner un RYTHME COMMUN à ce qui bouge déjà, et un retour visuel à ce qui ne réagissait pas — sans toucher une seule page. Tout passe par des classes partagées (gabarit .mx-*, liste .tbl-*, coquille .et-*, Bootstrap .btn), si bien que les ~900 écrans en héritent d'un coup. Ce qu'elle ne fait pas : aucune couleur (les jetons --et-* seulement, donc le thème sombre suit), aucune géométrie de mise en page, aucun chiffre qui bouge (« un chiffre qui bouge se lit mal », easypaie.css §16 — la règle vaut ici : une tuile peut se soulever, sa valeur ne s'anime jamais). Les durées et courbes sont des jetons (easytech-theme.css, bloc MOUVEMENT) ; sous prefers-reduced-motion ils valent 0 et tout ce qui suit s'éteint. Les animations d'ENTRÉE sont en « backwards », jamais en « both » : une valeur d'animation conservée après la fin l'emporte sur toute transition — le soulèvement d'une tuile au survol restait bloqué (mesuré, pas supposé). Chargée EN DERNIER (App.razor) : elle reprend des animations que modele-erp.css pose déjà (.mx-modale-cadre, .mx-page, .mx-panneau) — à spécificité égale, l'ordre tranche. Les sélecteurs passent par :where() pour garder la spécificité au plus bas : une feuille d'écran qui voudrait autre chose gagne sans lutter. ⚠ Contredit la passation design-7 (« Rien d'autre ne bouge ») : PROPOSITION. =========================================================================== */ /* --------------------------------------------------------------------------- 0. IMAGES-CLÉS — préfixe mvt-, libre dans tout le dépôt (vérifié). --------------------------------------------------------------------------- */ @keyframes mvt-voile { from { opacity: 0; } to { opacity: 1; } } @keyframes mvt-fenetre { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes mvt-monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes mvt-glisse { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes mvt-reflet { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* --------------------------------------------------------------------------- 1. RÉACTIVITÉ — tout ce qui se clique change d'état en douceur. Avant : la plupart des boutons et liens basculaient sèchement, quelques-uns avaient une transition écrite à la main (.12s ici, .15s là). --------------------------------------------------------------------------- */ .appgrid :where(.mx-btn, .btn, .et-navmain, .mx-onglet, .tbl-etat-opt, .tbl-vider, a) { transition-property: background-color, border-color, color, box-shadow, transform, opacity; transition-duration: var(--et-duree-courte); transition-timing-function: var(--et-courbe-standard); } /* L'appui se SENT : le bouton s'enfonce d'un rien, et revient vite. */ .appgrid :where(.mx-btn, .btn):active:not(:disabled) { transform: scale(.965); transition-duration: var(--et-duree-instant); } /* Le focus d'un champ s'installe au lieu d'apparaître : un halo doux de la couleur d'action, en plus de la bordure — angles droits conservés (charte : « les champs de saisie n'ont JAMAIS d'arrondi »). */ .appgrid :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { transition: border-color var(--et-duree-courte) var(--et-courbe-standard), box-shadow var(--et-duree-courte) var(--et-courbe-standard); } .appgrid :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--et-form-blue) 18%, transparent); } /* Le menu latéral : le libellé glisse d'un pas vers la droite au survol, comme une main qui l'effleure. */ .appgrid .et-navmain .lb { transition: transform var(--et-duree-courte) var(--et-courbe-sortie); } .appgrid .et-navmain:hover .lb { transform: translateX(3px); } /* Les lignes de liste : le fond de survol arrive au lieu de clignoter. */ .appgrid .tbl tbody td { transition: background-color var(--et-duree-courte) var(--et-courbe-standard); } /* --------------------------------------------------------------------------- 2. FENÊTRES — elles arrivent de quelque part. Avant : 160 ms, glissement de 8 px (mxUp). Après : un peu plus long, une courbe qui décélère longuement, et une légère mise à l'échelle — la fenêtre « se pose » au lieu de glisser. --------------------------------------------------------------------------- */ .mx-voile { animation: mvt-voile var(--et-duree-moyenne) var(--et-courbe-standard) backwards; } .mx-modale-cadre, .modal.show > .modal-dialog { animation: mvt-fenetre var(--et-duree-longue) var(--et-courbe-sortie) backwards; transform-origin: 50% 30%; } /* Un léger flou derrière le voile donne de la profondeur. Réservé aux écrans larges : sur un Android d'entrée de gamme, un backdrop-filter coûte cher. */ @media (min-width: 1024px) { .mx-voile { backdrop-filter: blur(2px); } } /* --------------------------------------------------------------------------- 3. PAGES, PANNEAUX, TUILES — l'arrivée se fait en cascade. --------------------------------------------------------------------------- */ .mx-page { animation: mvt-monte var(--et-duree-longue) var(--et-courbe-sortie) backwards; } .mx-panneau { animation: mvt-glisse var(--et-duree-moyenne) var(--et-courbe-sortie) backwards; } /* Tuiles d'indicateur : elles montent l'une après l'autre. Huit pas au plus — au-delà, la cascade deviendrait une attente. */ .mx-ind-grille > .mx-ind { animation: mvt-monte var(--et-duree-longue) var(--et-courbe-sortie) backwards; } .mx-ind-grille > .mx-ind:nth-child(2) { animation-delay: calc(var(--et-cascade-pas) * 1); } .mx-ind-grille > .mx-ind:nth-child(3) { animation-delay: calc(var(--et-cascade-pas) * 2); } .mx-ind-grille > .mx-ind:nth-child(4) { animation-delay: calc(var(--et-cascade-pas) * 3); } .mx-ind-grille > .mx-ind:nth-child(5) { animation-delay: calc(var(--et-cascade-pas) * 4); } .mx-ind-grille > .mx-ind:nth-child(6) { animation-delay: calc(var(--et-cascade-pas) * 5); } .mx-ind-grille > .mx-ind:nth-child(7) { animation-delay: calc(var(--et-cascade-pas) * 6); } .mx-ind-grille > .mx-ind:nth-child(n+8) { animation-delay: calc(var(--et-cascade-pas) * 7); } /* Une tuile qui MÈNE quelque part se soulève au survol ; une tuile qui ne fait qu'afficher ne bouge pas — un soulèvement promet un clic. La tuile cliquable EST le lien (, 16 écrans ;