/* * UAO — Couche d'animations globale * --------------------------------- * Chargée une seule fois dans le layout : s'applique à TOUTES les pages. * * Principes : * 1. Accessibilité — tout est désactivé si l'utilisateur a demandé * « prefers-reduced-motion » (voir bloc final). * 2. Sûreté — les animations d'apparition au scroll ne masquent un élément * QUE si la classe `.anim-ready` est présente sur . Cette classe * n'est ajoutée que PAR le JS (animations.js). Donc si le JS ne s'exécute * pas, rien n'est jamais masqué : le contenu reste visible. * 3. Discrétion — transitions courtes (150–450 ms), aucun mouvement brusque. * * Variables de rythme réutilisables. */ :root { --anim-fast: .15s; --anim-base: .25s; --anim-slow: .45s; --anim-ease: cubic-bezier(.22, .61, .36, 1); /* easeOutCubic — sortie douce */ } /* ══════════════════════════════════════════════════════════════════════════ 1. ENTRÉE DE PAGE Le corps de contenu apparaît en fondu-montée à chaque chargement. Animation CSS pure : l'état final est TOUJOURS visible (aucune dépendance JS). ══════════════════════════════════════════════════════════════════════════ */ @keyframes uaoFadeInUp { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } @keyframes uaoFadeIn { from { opacity: 0; } to { opacity: 1; } } .content-body { animation: uaoFadeInUp var(--anim-slow) var(--anim-ease) both; } /* Le fil d'ariane / en-tête glisse légèrement avant le reste. */ .content-body .form-head, .content-body .page-titles { animation: uaoFadeInUp var(--anim-base) var(--anim-ease) both; } /* ══════════════════════════════════════════════════════════════════════════ 2. APPARITION AU SCROLL (révélation progressive) Géré par animations.js via IntersectionObserver. `.anim-ready` (posée par le JS) active le masquage initial ; `.in-view` (posée quand l'élément entre dans le viewport) le révèle. ══════════════════════════════════════════════════════════════════════════ */ .anim-ready .uao-reveal { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity var(--anim-slow) var(--anim-ease), transform var(--anim-slow) var(--anim-ease); will-change: opacity, transform; } .anim-ready .uao-reveal.in-view { opacity: 1; transform: none; /* IMPORTANT : on retire `will-change` une fois révélé. `will-change:transform` crée un bloc conteneur pour les descendants position:absolute, ce qui décale les menus déroulants (bootstrap-select positionnés par Popper) — ils apparaissaient « en bas ». `transform:none` + `will-change:auto` rend la carte de nouveau neutre. */ will-change: auto; } /* Décalage en cascade des éléments d'un même groupe (cartes d'une rangée…). */ .anim-ready .uao-reveal[style*="--d:"] { transition-delay: var(--d); } /* ══════════════════════════════════════════════════════════════════════════ 3. SURVOL DES CARTES Élévation douce au survol — s'applique à toutes les cartes du thème. ══════════════════════════════════════════════════════════════════════════ */ .card, .widget-stat, .stat-mini, .soon-card { transition: transform var(--anim-base) var(--anim-ease), box-shadow var(--anim-base) var(--anim-ease); } .card:hover, .widget-stat:hover, .stat-mini:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(30, 50, 114, .12); } /* Cartes interactives (cliquables) : légère mise en avant supplémentaire. */ a > .card:hover, .card.card-link:hover, [role="button"] > .card:hover { box-shadow: 0 14px 32px rgba(30, 50, 114, .18); } /* ══════════════════════════════════════════════════════════════════════════ 4. BOUTONS Réaction au survol et au clic (retour visuel tactile). ══════════════════════════════════════════════════════════════════════════ */ .btn { transition: transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(1px) scale(.985); } /* Icône d'un bouton « + Ajouter » qui pulse légèrement au survol. */ .btn:hover > i.fa-plus, .btn:hover > i.fa-plus-circle { transform: rotate(90deg); } .btn > i.fa-plus, .btn > i.fa-plus-circle { transition: transform var(--anim-base) var(--anim-ease); display: inline-block; } /* ══════════════════════════════════════════════════════════════════════════ 5. TABLEAUX Survol de ligne + apparition en fondu des lignes rechargées (DataTables). ══════════════════════════════════════════════════════════════════════════ */ .table tbody tr { transition: background-color var(--anim-fast) var(--anim-ease); } /* Lignes réinjectées après un rechargement AJAX : léger fondu (classe posée par le JS). */ .uao-row-in { animation: uaoFadeIn var(--anim-base) var(--anim-ease) both; } /* ══════════════════════════════════════════════════════════════════════════ 6. NAVIGATION (sidebar) Liens du menu + ouverture des sous-menus. ══════════════════════════════════════════════════════════════════════════ */ .deznav .metismenu > li > a, .deznav .metismenu ul a { transition: color var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease), padding-left var(--anim-fast) var(--anim-ease); } /* Léger retrait du lien au survol pour un effet « vivant ». */ .deznav .metismenu ul a:hover { padding-left: 4.2rem; } /* Les entrées d'un sous-menu qui vient de s'ouvrir apparaissent en cascade. */ .deznav .metismenu .mm-show > li { animation: uaoFadeInUp var(--anim-base) var(--anim-ease) both; } .deznav .metismenu .mm-show > li:nth-child(2) { animation-delay: .04s; } .deznav .metismenu .mm-show > li:nth-child(3) { animation-delay: .08s; } .deznav .metismenu .mm-show > li:nth-child(4) { animation-delay: .12s; } .deznav .metismenu .mm-show > li:nth-child(5) { animation-delay: .16s; } .deznav .metismenu .mm-show > li:nth-child(n+6) { animation-delay: .2s; } /* Chevron des menus déroulants : rotation fluide. */ .deznav .metismenu li > a[aria-expanded]::after, .deznav .metismenu li > a .menu-icon-arrow { transition: transform var(--anim-base) var(--anim-ease); } /* ══════════════════════════════════════════════════════════════════════════ 7. BADGES / PASTILLES Petite pulsation d'attention sur les compteurs (messages, en attente…). ══════════════════════════════════════════════════════════════════════════ */ @keyframes uaoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } .badge.uao-attn { animation: uaoPulse 2.2s var(--anim-ease) infinite; } /* ══════════════════════════════════════════════════════════════════════════ 8. CHAMPS DE FORMULAIRE Focus mis en valeur en douceur. ══════════════════════════════════════════════════════════════════════════ */ .form-control, .default-select + .bootstrap-select .btn, .dataTables_filter input { transition: border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease); } /* ══════════════════════════════════════════════════════════════════════════ 9. MODALES Entrée légèrement plus vivante que le fondu par défaut de Bootstrap. ══════════════════════════════════════════════════════════════════════════ */ .modal.fade .modal-dialog { transition: transform var(--anim-base) var(--anim-ease), opacity var(--anim-base) var(--anim-ease); transform: translateY(-12px) scale(.98); } .modal.show .modal-dialog { transform: none; } /* ══════════════════════════════════════════════════════════════════════════ 10. LIENS & ONGLETS ══════════════════════════════════════════════════════════════════════════ */ a { transition: color var(--anim-fast) var(--anim-ease); } .nav-tabs .nav-link, .nav-pills .nav-link { transition: color var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease); } /* ══════════════════════════════════════════════════════════════════════════ ACCESSIBILITÉ — respect de « réduire les animations » Si l'utilisateur a activé cette préférence système, on neutralise TOUT. ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* On s'assure que rien ne reste masqué. */ .anim-ready .uao-reveal { opacity: 1 !important; transform: none !important; } }