/* ============================================================ Animations d'apparition au defilement (sobres, pro) - variees selon la page (attribut data-page sur ) - respect de prefers-reduced-motion (accessibilite) ============================================================ */ /* Accessibilite : si l'utilisateur a demande a reduire les animations, on affiche tout normalement, sans mouvement. */ @media (prefers-reduced-motion: reduce) { .anim { opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: no-preference) { .anim { will-change: opacity, transform; } /* etats de depart selon la variante */ .anim-rise { opacity: 0; transform: translateY(28px); } .anim-zoom { opacity: 0; transform: scale(.95); } .anim-fade { opacity: 0; } .anim-left { opacity: 0; transform: translateX(-34px); } .anim-right { opacity: 0; transform: translateX(34px); } /* transition commune (courbe douce) */ .anim-rise, .anim-zoom, .anim-fade, .anim-left, .anim-right { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } /* etat visible */ .anim.anim-in { opacity: 1 !important; transform: none !important; } } /* Micro-interaction : leger relief au survol des cartes (partout, discret) */ @media (prefers-reduced-motion: no-preference) { .i9-card, .xp-service, .xp-value, .xp-member, .xp-office, .xs-service, .xs-tb { transition: transform .25s ease, box-shadow .25s ease; } .i9-card:hover, .xp-service:hover, .xp-value:hover, .xp-member:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(12, 30, 70, .14); } }