<div class="header w3-bar w3-card-4 w3-dark-blue">
    <!-- Logo pour retourner à l'accueil -->
    <div class="logo-container w3-bar-item">
        <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;">
    </div>

    <!-- Bouton burger pour petit écran -->
    <a href="javascript:void(0)" class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-16" onclick="toggleMenu()">☰</a>

    <!-- Catégories dans le header -->
    <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
        <a href="./chef_departement.html" class="w3-bar-item w3-button">Accueil</a>
        <a href="./gestion-heures-professeur.html" class="w3-bar-item w3-button">Professeurs</a>
        <a href="./vacataire.html" class="w3-bar-item w3-button">Vacation</a>
        <a href="./gestion-heures-formation.html" class="w3-bar-item w3-button">Formations</a>
        <a href="./paiement.html" class="w3-bar-item w3-button">Paiements</a>
        <a href="./budget.html" class="w3-bar-item w3-button">Budget</a>
        <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations</a>
    </div>

    <!-- Section utilisateur avec déconnexion -->
    <div class="user-section w3-right w3-hide-small w3-hide-medium">
        <div class="user-name">
            Florent MADELAINE
        </div>
        <div class="logout-container w3-bar-item">
            <a href="./notifications.html" title="Notifications">
                <img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
            </a>
            <a href="./settings.html" title="Paramètres">
                <img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
            </a>
            <a href="../../index.html" title="Se déconnecter">
                <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
            </a>
        </div>
    </div>

    <!-- Menu mobile caché au départ -->
    <div id="mobileMenu" class="w3-bar-block w3-hide w3-hide-large w3-dark-blue">
        <a href="./chef_departement.html" class="w3-bar-item w3-button">Accueil</a>
        <a href="./gestion-heures-professeur.html" class="w3-bar-item w3-button">Professeurs</a>
        <a href="./vacataire.html" class="w3-bar-item w3-button">Vacation</a>
        <a href="./gestion-heures-formation.html" class="w3-bar-item w3-button">Formations</a>
        <a href="./paiement.html" class="w3-bar-item w3-button">Paiements</a>
        <a href="./budget.html" class="w3-bar-item w3-button">Budget</a>
        <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations</a>

        <!-- Section utilisateur pour mobile -->
        <div class="w3-bar-item w3-border-top w3-margin-top">
            <div class="user-name">Florent MADELAINE</div>
            <a href="./notifications.html" title="Notifications">
                <img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
            </a>
            <a href="./settings.html" title="Paramètres">
                <img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
            </a>
            <a href="../../index.html" title="Se déconnecter">
                <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
            </a>
        </div>
    </div>
</div>