diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 3ae28c30..77940a89 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -120,76 +120,125 @@ body { box-shadow: 0 4px 12px rgba(11, 94, 124, 0.3); } -/* 3. Sidebar */ +/* ================================================= */ +/* SIDEBAR - Version corrigée */ +/* ================================================= */ + .sidebar { - width: var(--sidebar-width); - background: white; - border-right: 1px solid var(--border-color); - padding: 1.5rem 0.5rem; - transition: width 0.3s ease; + width: 260px; + background: linear-gradient(180deg, #1e2b3a 0%, #15232e 100%); + color: #fff; + position: fixed; + left: 0; + top: 0; + height: 100vh; + overflow-y: auto; + transition: all 0.3s; + z-index: 1000; + box-shadow: 2px 0 10px rgba(0,0,0,0.1); +} + +.sidebar-brand { + padding: 25px 20px; + display: flex; + align-items: center; + gap: 10px; + border-bottom: 1px solid rgba(255,255,255,0.1); + margin-bottom: 20px; +} + +.sidebar-brand img { + width: 40px; + height: 40px; +} + +.sidebar-brand span { + font-size: 1.2rem; + font-weight: 600; + color: white; + letter-spacing: 0.5px; +} + +.sidebar-nav { + list-style: none; + padding: 0 10px; + margin: 0; +} + +.sidebar-nav .nav-item { + margin-bottom: 5px; } .sidebar-nav .nav-link { display: flex; align-items: center; - gap: 0.75rem; - padding: 0.7rem 1rem; - color: #4b5563; - border-radius: 12px; - margin-bottom: 0.2rem; - transition: all 0.2s; - font-weight: 500; + padding: 12px 15px; + color: rgba(255,255,255,0.8); + text-decoration: none; + border-radius: 10px; + transition: all 0.3s; + gap: 12px; + font-size: 0.95rem; } -.sidebar-nav .nav-link i:first-child { - font-size: 1.3rem; - width: 1.75rem; - color: var(--primary); - transition: all 0.2s; +.sidebar-nav .nav-link i { + width: 24px; + font-size: 1.2rem; + color: rgba(255,255,255,0.6); + transition: all 0.3s; } .sidebar-nav .nav-link:hover { - background: var(--primary-light); - color: var(--primary); + background: rgba(255,255,255,0.1); + color: white; } -.sidebar-nav .nav-link[aria-expanded="true"] { - background: var(--primary-light); - color: var(--primary); +.sidebar-nav .nav-link:hover i { + color: white; +} + +.sidebar-nav .nav-link.active { + background: #0b5e7c; + color: white; + box-shadow: 0 4px 10px rgba(11,94,124,0.3); +} + +.sidebar-nav .nav-link.active i { + color: white; } /* Sous-menus */ .nav-content { - padding-left: 2.5rem; list-style: none; + padding-left: 45px; + margin: 5px 0 10px 0; +} + +.nav-content li { + margin-bottom: 3px; } .nav-content a { display: flex; align-items: center; - gap: 0.5rem; - padding: 0.5rem 0; - color: #6b7280; - font-size: 0.9rem; + padding: 8px 15px; + color: rgba(255,255,255,0.7); text-decoration: none; - transition: all 0.2s; - border-radius: 10px; + border-radius: 8px; + font-size: 0.9rem; + gap: 8px; } .nav-content a i { font-size: 0.5rem; - color: #9ca3af; + color: rgba(255,255,255,0.5); } -.nav-content a:hover, -.nav-content a.active { - color: var(--primary); - background: transparent; +.nav-content a:hover { + background: rgba(255,255,255,0.05); + color: white; } -.nav-content a.active i { - color: var(--primary); -} /* 4. Main content */ .main {