:root {
      --primary: #1152d4;
      --primary-light: #4d7fe5;
      --primary-dark: #0a3a9c;
      --primary-extra-light: #e8effd;
      --background-light: #f6f6f8;
      --background-dark: #101622;
      --gradient-blue: linear-gradient(135deg, #1152d4 0%, #4d7fe5 100%);
      --gradient-light-blue: linear-gradient(135deg, #e8effd 0%, #f0f5ff 100%);
    }
    
    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--background-light);
      color: #0d121b;
     padding-top: 0;
    }
    
    .dark-mode {
      background-color: var(--background-dark);
      color: #e9ecef;
    }
    
            /* Navigation améliorée */
        .navbar {
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            background-color: rgba(246, 246, 248, 0.95);
            backdrop-filter: blur(10px);
        }
        
        .dark-mode .navbar {
            background-color: rgba(16, 22, 34, 0.95);
        }
        
        .navbar.scrolled {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
        
        .navbar-brand {
            font-weight: 800;
            font-size: 1.5rem;
            background: var(--gradient-blue);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .nav-link {
            font-weight: 500;
            position: relative;
            transition: var(--transition);
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background: var(--gradient-blue);
            transition: var(--transition);
        }
        
        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }