/* ==================================================================== style-modern.css — Design premium 2026 – Tailwind-like + Bootstrap ==================================================================== */ /* Reset & Base */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f8fafc; color: #1e293b; line-height: 1.6; } /* Couleurs principales (inspiré Tailwind) */ :root { --primary: #6366f1; /* indigo-500 */ --primary-dark: #4f46e5; /* indigo-600 */ --primary-light: #818cf8; /* indigo-400 */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1e293b; --gray-900: #111827; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #0ea5e9; } /* Sidebar */ .sidebar { background: var(--gray-800); color: #e2e8f0; transition: all 0.3s ease; } .sidebar .nav-link { color: #cbd5e1; font-weight: 500; transition: all 0.2s; } .sidebar .nav-link:hover, .sidebar .nav-link.active { background: var(--gray-700); color: white; border-left: 4px solid var(--primary); } /* Topbar */ .navbar { background: white; border-bottom: 1px solid var(--gray-200); box-shadow: 0 1px 3px rgba(0,0,0,0.05); } /* Cards */ .card { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); transition: all 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); } .card-header { background: white; border-bottom: 1px solid var(--gray-200); padding: 1rem 1.5rem; font-weight: 600; } /* Boutons premium */ .btn-primary { background: var(--primary); border: none; border-radius: 8px; padding: 0.625rem 1.5rem; font-weight: 500; transition: all 0.2s; } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); } .btn-outline-primary { border-color: var(--primary); color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); color: white; } /* Badges */ .badge { padding: 0.5em 0.9em; font-weight: 500; border-radius: 6px; } /* Tableaux */ .table { --bs-table-bg: white; --bs-table-accent-bg: rgba(99, 102, 241, 0.05); } .table thead th { background: var(--gray-800); color: white; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; } /* Statistiques cartes */ .stat-card { border-radius: 16px; padding: 1.75rem; background: white; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); transition: transform 0.2s; } .stat-card:hover { transform: translateY(-6px); } .stat-icon { font-size: 2.8rem; opacity: 0.15; } /* Responsive */ @media (max-width: 992px) { .sidebar { width: 100%; height: auto; position: relative; } .main-content { margin-left: 0 !important; } } /* Dark mode (optionnel – activable via classe .dark sur ) */ .dark { --bg: #0f172a; --text: #e2e8f0; --card: #1e293b; } .dark body { background: var(--bg); color: var(--text); } .dark .card { background: var(--card); color: var(--text); } .dark .navbar { background: var(--card); border-color: #334155; } /* Améliorations pour Heroicons */ .heroicon { width: 1.5rem; height: 1.5rem; } /* Active state pour sidebar avec Heroicons */ .nav-link.active svg { color: var(--primary-light); } /* Hover animation légère */ .nav-link:hover svg { transform: scale(1.1); transition: transform 0.2s ease; } /* Mode ultra-minimaliste */ .card { box-shadow: none; border: 1px solid #e5e7eb; border-radius: 0; } .table thead th { background: #f9fafb; color: #6b7280; font-weight: 500; text-transform: none; letter-spacing: normal; } .btn { border-radius: 6px; font-weight: 500; box-shadow: none; }