/* Variables CSS */
        :root {
            --primary-color: #3498db;
            /* أزرق ساطع */
            --secondary-color: #2c3e50;
            /* رمادي داكن */
            --text-color: #ecf0f1;
            /* رمادي فاتح */
            --hover-color: #e74c3c;
            /* أحمر */
            --background-dark: #202020;
            --background-light: #333;
            /* Police pour l'arabe - assurez-vous que cette police est disponible ou remplacez-la par une police de secours commune */
            --font-family: 'Arial', 'Noto Sans Arabic', sans-serif;
            --transition-speed: 0.3s;
        }

        
        /* --- En-tête de navigation --- */
   /* --- En-tête de navigation --- */
.navbar {
    background-color: white;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    /* Supprimez les lignes suivantes pour que le menu ne reste pas apparent en scrollant */
    /* position: sticky; */
    /* top: 0; */
    z-index: 1000;
}

        .navbar-brand {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 1.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            transition: color var(--transition-speed) ease;
            margin-right: 30px;
        }

        .navbar-brand:hover {
            color: var(--hover-color);
        }

        .navbar-brand img {
            height: 40px;
            margin-left: 10px;
            /* Changement : marge à gauche pour le texte RTL */
            margin-right: 0;
            /* Annule la marge droite précédente */
        }

        /* --- Menu de navigation principal --- */
        .nav-links {
            list-style: none;
            display: flex;
            margin-bottom: 0;
        }

        .nav-links li {
            margin-right: 2.5rem;
            /* Changement : marge à droite pour les éléments RTL */
            margin-left: 0;
            /* Annule la marge gauche précédente */
        }

        .nav-links a {
            color:black;
            text-decoration: none;
            font-size: 1.1rem;
            padding: 0.5rem 0;
            position: relative;
            transition: color var(--transition-speed) ease;
            font-family: var(--font-family);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            display: block;
            margin-top: 5px;
            left: 0;
            /* Changement : la barre d'animation commence à gauche */
            right: auto;
            /* Annule la propriété right précédente */
            background: var(--primary-color);
            transition: width var(--transition-speed) ease;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }

        .nav-links a:hover::after {
            width: 100%;
            left: 0;
            background: var(--primary-color);
        }

        /* --- Menu Hamburger --- */
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 10px 0;
            position: relative;
            z-index: 10000;
        }

        .hamburger span {
            background: var(--text-color);
            height: 3px;
            width: 30px;
            margin: 4px 0;
            transition: all var(--transition-speed) ease;
        }

        /* Animation du hamburger en croix pour RTL */
        .hamburger.active span:nth-child(1) {
            transform: translateY(7px) rotate(-45deg);
            /* Rotation inversée */
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active span:nth-child(3) {
            transform: translateY(-7px) rotate(45deg);
            /* Rotation inversée */
        }

        /* --- Menu mobile (responsive) --- */
        .nav-mobile {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            /* Changement : commence à droite pour glisser depuis la droite */
            left: auto;
            /* Annule la propriété left précédente */
            width: 100%;
            height: 100%;
            background-color: rgba(32, 32, 32, 0.95);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transform: translateX(-100%);
            /* Glisse depuis la droite */
            transition: transform var(--transition-speed) ease-in-out;
            z-index: 9999;
            list-style: none;
        }

        .nav-mobile.active {
            transform: translateX(0);
            /* Glisse en place */
        }

        .nav-mobile li {
            margin: 1.5rem 0;
        }

        .nav-mobile a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 1.8rem;
            font-weight: bold;
            transition: color var(--transition-speed) ease;
        }

        .nav-mobile a:hover {
            color: var(--primary-color);
        }

        /* --- Media Queries pour la responsivité --- */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .hamburger {
                display: flex;
            }

            .nav-mobile {
                display: flex;
            }
        }