/** * Motion premium — Intranet DTISI * ================================ * Couche de mouvement cohérente, alignée sur IBM Carbon Motion : * mouvement PRODUCTIF (rapide, discret, fonctionnel) — jamais décoratif. * Durées et courbes = tokens Carbon. Tout est piloté par tokens et * ENTIÈREMENT désactivé sous prefers-reduced-motion. * * Progressive enhancement : les états d'entrée (opacité 0) ne s'appliquent * QUE si (ajouté par motion-premium.js dès le chargement). * Sans JS → tout le contenu reste visible (aucun risque de contenu masqué). * * Chargé APRÈS ui-enhancements.css dans includes/header.php. */ :root { /* Durées Carbon Motion */ --motion-fast-01: 70ms; --motion-fast-02: 110ms; --motion-moderate-01: 150ms; --motion-moderate-02: 240ms; --motion-slow-01: 400ms; --motion-slow-02: 700ms; /* Courbes Carbon : productive (UI courante), entrée/sortie (expressive) */ --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9); --ease-entrance: cubic-bezier(0, 0, 0.3, 1); --ease-exit: cubic-bezier(0.4, 0.14, 1, 1); } /* ============================================================ 1. RÉVÉLATION À L'ENTRÉE (cartes/KPI/sections, en cascade) État initial appliqué uniquement quand JS est actif. ============================================================ */ .js-motion .reveal { opacity: 0; transform: translateY(14px); will-change: opacity, transform; } .js-motion .reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--motion-moderate-02) var(--ease-entrance), transform var(--motion-moderate-02) var(--ease-entrance); transition-delay: var(--reveal-delay, 0ms); } /* Une fois révélé, on relâche will-change */ .js-motion .reveal.is-visible { will-change: auto; } /* ============================================================ 2. SURVOL — élévation discrète et fonctionnelle S'applique aux surfaces cliquables/informatives courantes. ============================================================ */ [class*="kpi-card"], [class*="stat-card"], .metric-card, .sensor-card, .backlog-card, .info-card, .analyse-card, .dashboard-card, .server-card { transition: transform var(--motion-fast-02) var(--ease-productive), box-shadow var(--motion-fast-02) var(--ease-productive), border-color var(--motion-fast-02) var(--ease-productive); } [class*="kpi-card"]:hover, [class*="stat-card"]:hover, .metric-card:hover, .sensor-card:hover, .backlog-card:hover, .info-card:hover, .analyse-card:hover, .dashboard-card:hover, .server-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16, 22, 26, 0.10), 0 2px 6px rgba(16, 22, 26, 0.08); } /* Boutons : réponse tactile au survol/appui (sans changer la couleur) */ .btn { transition: background-color var(--motion-fast-02) var(--ease-productive), border-color var(--motion-fast-02) var(--ease-productive), box-shadow var(--motion-fast-02) var(--ease-productive), transform var(--motion-fast-01) var(--ease-productive); } .btn:not(:disabled):hover { transform: translateY(-1px); } .btn:not(:disabled):active { transform: translateY(0); } /* Lignes de tableau : surbrillance douce */ .table tbody tr { transition: background-color var(--motion-fast-02) var(--ease-productive); } /* Icônes de KPI : léger zoom au survol de la carte */ [class*="kpi-card"] .kpi-icon, [class*="stat-card"] .stat-icon { transition: transform var(--motion-moderate-01) var(--ease-productive); } [class*="kpi-card"]:hover .kpi-icon, [class*="stat-card"]:hover .stat-icon { transform: scale(1.08); } /* ============================================================ 3. COMPTEURS KPI — la valeur qui « monte » (piloté par JS, ici on garantit juste des chiffres tabulaires stables). ============================================================ */ .mp-counting { font-variant-numeric: tabular-nums; } /* ============================================================ 4. SQUELETTES DE CHARGEMENT (shimmer Carbon) ============================================================ */ .skeleton, .mp-skeleton { background: linear-gradient(100deg, #eaeaea 30%, #f4f4f4 50%, #eaeaea 70%); background-size: 200% 100%; animation: mpShimmer 1.4s var(--ease-productive) infinite; border-radius: 4px; } @keyframes mpShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ============================================================ 5. APPARITION AU DÉFILEMENT DES GRAPHES / SECTIONS lourdes (classe optionnelle .mp-rise posée par JS) ============================================================ */ .js-motion .mp-rise { opacity: 0; transform: translateY(20px); } .js-motion .mp-rise.is-visible { opacity: 1; transform: none; transition: opacity var(--motion-slow-01) var(--ease-entrance), transform var(--motion-slow-01) var(--ease-entrance); } /* ============================================================ 6. RESPECT ABSOLU DE prefers-reduced-motion Neutralise TOUTE la couche (et les animations héritées). ============================================================ */ @media (prefers-reduced-motion: reduce) { .js-motion .reveal, .js-motion .mp-rise { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } [class*="kpi-card"], [class*="stat-card"], .metric-card, .sensor-card, .backlog-card, .info-card, .analyse-card, .dashboard-card, .server-card, .btn, .table tbody tr, [class*="kpi-card"] .kpi-icon, [class*="stat-card"] .stat-icon { transition: none !important; } [class*="kpi-card"]:hover, [class*="stat-card"]:hover, .metric-card:hover, .sensor-card:hover, .backlog-card:hover, .info-card:hover, .analyse-card:hover, .dashboard-card:hover, .server-card:hover, .btn:hover, .btn:active { transform: none !important; } .skeleton, .mp-skeleton { animation: none !important; } }