:root { --primary: #2C3E50; --accent: #08C5D1; --accent-light: rgba(8, 197, 209, 0.1); --bg-body: #F4F7FA; /* Un gris-bleu très doux */ --glass: rgba(255, 255, 255, 0.9); --radius: 16px; --shadow-sm: 0 4px 12px rgba(0,0,0,0.03); --shadow-md: 0 10px 30px rgba(44, 62, 80, 0.08); } body { background-color: var(--bg-body) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; color: #4A5568; } /* --- EFFET WAHOO SUR LE MAIN --- */ #main { margin: 90px 25px 25px 25px !important; padding: 30px !important; background: white !important; border-radius: 24px !important; box-shadow: var(--shadow-md) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; transition: transform 0.3s ease; } /* --- HEADER TRANSPARENT & FLOU --- */ .header { background: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05) !important; height: 70px !important; } /* --- SIDEBAR : PLUS DE LIGNES, QUE DU VIDE ET DU RELIEF --- */ .sidebar { background: var(--primary) !important; border: none !important; box-shadow: 15px 0 40px rgba(0,0,0,0.04) !important; } .sidebar-nav .nav-link { background: transparent !important; color: rgba(255,255,255,0.7) !important; margin: 4px 15px !important; border-radius: 12px !important; font-weight: 500 !important; } .sidebar-nav .nav-link.active-main, .sidebar-nav .nav-link:hover { background: var(--accent) !important; color: white !important; box-shadow: 0 8px 15px rgba(8, 197, 209, 0.3) !important; } /* --- TABLEAUX : L'EFFET "STRIPED" MODERNE --- */ .table { border-collapse: separate !important; border-spacing: 0 12px !important; } .table thead th { background: transparent !important; border: none !important; color: #A0AEC0 !important; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; } .table tbody tr { background: white !important; box-shadow: var(--shadow-sm) !important; transition: all 0.2s ease; } .table tbody tr:hover { transform: scale(1.01); box-shadow: var(--shadow-md) !important; } .table td { padding: 15px !important; border: none !important; vertical-align: middle; } .table td:first-child { border-radius: 12px 0 0 12px; } .table td:last-child { border-radius: 0 12px 12px 0; } .btn-info, .btn-primary { background: linear-gradient(135deg, #08C5D1 0%, #06A2AD 100%) !important; border: none !important; border-radius: 10px !important; padding: 8px 20px !important; font-weight: 600 !important; box-shadow: 0 4px 12px rgba(8, 197, 209, 0.2) !important; transition: all 0.3s ease !important; } .btn-info:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(8, 197, 209, 0.3) !important; } .context-sidebar { background: white !important; padding: 20px !important; } .context-widget { background: #F8FAFC !important; border-radius: 16px !important; padding: 20px !important; margin-bottom: 20px !important; border: 1px solid #EDF2F7 !important; } .context-widget h6 { color: #718096 !important; font-size: 0.7rem !important; font-weight: 800 !important; margin-bottom: 12px !important; }