/* ============================================================================= * admin-ergonomic-v2.css — Audit consultant 2026-04-19 * * Améliorations ergonomiques non-intrusives (additif) : * - Design tokens en CSS vars * - Dark mode (toggle manuel + prefers-color-scheme) * - Focus-visible WCAG 2.2 * - Skeleton loaders * - Scrollbar personnalisée * - Print styles * - Responsive tweaks * * Chargé automatiquement par InjectAdminEnhancements middleware. * Suffixé .adm-* pour éviter toute collision avec les styles existants. * ============================================================================= */ /* ---------- 1. Design tokens (CSS vars) ---------- */ :root { --adm-primary: #6366f1; --adm-primary-hover: #4f46e5; --adm-success: #10b981; --adm-warning: #f59e0b; --adm-danger: #ef4444; --adm-info: #06b6d4; --adm-text: #1f2937; --adm-text-muted: #6b7280; --adm-bg: #ffffff; --adm-bg-muted: #f9fafb; --adm-border: #e5e7eb; --adm-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --adm-space-1: 0.25rem; --adm-space-2: 0.5rem; --adm-space-3: 0.75rem; --adm-space-4: 1rem; --adm-space-6: 1.5rem; --adm-space-8: 2rem; --adm-radius: 8px; --adm-transition: 150ms ease-in-out; } /* ---------- 2. Dark mode (opt-in via data-theme="dark" sur ) ---------- */ [data-theme="dark"] { --adm-text: #f3f4f6; --adm-text-muted: #9ca3af; --adm-bg: #1f2937; --adm-bg-muted: #111827; --adm-border: #374151; --adm-shadow: 0 1px 3px rgba(0,0,0,0.4); color-scheme: dark; } [data-theme="dark"] body { background-color: var(--adm-bg-muted) !important; color: var(--adm-text) !important; } [data-theme="dark"] .card, [data-theme="dark"] .card-body, [data-theme="dark"] .card-header { background-color: var(--adm-bg) !important; color: var(--adm-text) !important; border-color: var(--adm-border) !important; } [data-theme="dark"] .table { color: var(--adm-text) !important; } [data-theme="dark"] .table tbody tr:hover { background-color: rgba(255,255,255,0.04) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--adm-bg) !important; color: var(--adm-text) !important; border-color: var(--adm-border) !important; } [data-theme="dark"] .modal-content { background-color: var(--adm-bg); color: var(--adm-text); } /* ---------- 3. Focus-visible WCAG 2.2 ---------- */ .adm-scope :focus-visible, html :focus-visible { outline: 3px solid var(--adm-primary) !important; outline-offset: 2px !important; border-radius: 4px; } /* ---------- 4. Skeleton loaders (pour async content) ---------- */ .adm-skeleton { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%); background-size: 400% 100%; animation: adm-shimmer 1.4s ease infinite; border-radius: 4px; min-height: 1em; } [data-theme="dark"] .adm-skeleton { background: linear-gradient(90deg, #374151 25%, #4b5563 37%, #374151 63%); background-size: 400% 100%; } @keyframes adm-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------- 5. Scrollbar personnalisée ---------- */ .adm-scope *::-webkit-scrollbar { width: 10px; height: 10px; } .adm-scope *::-webkit-scrollbar-track { background: var(--adm-bg-muted); } .adm-scope *::-webkit-scrollbar-thumb { background: var(--adm-border); border-radius: 5px; } .adm-scope *::-webkit-scrollbar-thumb:hover { background: var(--adm-text-muted); } /* ---------- 6. Toast container top-right (si pas déjà présent) ---------- */ #adm-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .adm-toast { background: var(--adm-bg); color: var(--adm-text); border-left: 4px solid var(--adm-primary); padding: 0.75rem 1rem; border-radius: var(--adm-radius); box-shadow: var(--adm-shadow); min-width: 280px; animation: adm-slide-in 0.3s ease forwards; pointer-events: all; } .adm-toast.success { border-left-color: var(--adm-success); } .adm-toast.warning { border-left-color: var(--adm-warning); } .adm-toast.danger { border-left-color: var(--adm-danger); } @keyframes adm-slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ---------- 7. Session timeout modal ---------- */ #adm-session-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: none; align-items: center; justify-content: center; } #adm-session-modal.open { display: flex; } #adm-session-modal > .adm-session-box { background: var(--adm-bg); color: var(--adm-text); padding: 2rem; border-radius: var(--adm-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 420px; width: 90%; } /* ---------- 8. Dark mode toggle button ---------- */ #adm-dark-toggle { position: fixed; bottom: 1rem; right: 1rem; z-index: 500; width: 44px; height: 44px; border-radius: 50%; background: var(--adm-bg); color: var(--adm-text); border: 1px solid var(--adm-border); box-shadow: var(--adm-shadow); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--adm-transition); font-size: 1.25rem; } #adm-dark-toggle:hover { transform: scale(1.1); } /* ---------- 9. Copy-to-clipboard visual feedback ---------- */ [data-copy] { cursor: copy; transition: var(--adm-transition); position: relative; } [data-copy]:hover::after { content: "📋 Copier"; position: absolute; top: -1.75rem; right: 0; background: var(--adm-text); color: var(--adm-bg); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; white-space: nowrap; pointer-events: none; } [data-copy].adm-copied::after { content: "✓ Copié !" !important; background: var(--adm-success) !important; } /* ---------- 10. Unsaved changes indicator ---------- */ .adm-form-dirty { border-left: 4px solid var(--adm-warning); padding-left: 0.5rem; transition: var(--adm-transition); } /* ---------- 11. Loading overlay ---------- */ .adm-loading-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; z-index: 100; border-radius: inherit; } [data-theme="dark"] .adm-loading-overlay { background: rgba(31,41,55,0.85); } .adm-spinner { width: 32px; height: 32px; border: 3px solid var(--adm-border); border-top-color: var(--adm-primary); border-radius: 50%; animation: adm-spin 0.8s linear infinite; } @keyframes adm-spin { to { transform: rotate(360deg); } } /* ---------- 12. Print styles ---------- */ @media print { .sidebar-left, .main-header, .adm-floating, #adm-dark-toggle, .navbar, nav.breadcrumb, .btn, form button, .no-print { display: none !important; } .main-content-wrap { margin: 0 !important; padding: 1rem !important; } body { background: white !important; color: black !important; } .card { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; } a { color: black !important; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75rem; } } /* ---------- 13. Responsive tweaks (tablettes) ---------- */ @media (max-width: 991.98px) { .main-content-wrap { padding: 0.75rem !important; } .adm-table-responsive { font-size: 0.875rem; } } /* ---------- 14. Typography micro-adjustments ---------- */ .adm-scope body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- 15. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }