From a3f1d427a1142383da01cc8990f47b0f6dd60ac0 Mon Sep 17 00:00:00 2001
From: stiti <moncef.stiti@gmail.com>
Date: Fri, 18 Oct 2024 19:45:09 +0200
Subject: [PATCH] =?UTF-8?q?Modifications=20de=20tout=20!=20Sauf=20le=20che?=
 =?UTF-8?q?f=20de=20d=C3=A9partement=20pour=20le=20moment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 MaquetteWEB/html/FINANCE/finance.html         |  61 +++-
 .../html/FINANCE/historique_paiements.html    |  63 ++--
 .../html/FINANCE/mes_informations.html        |  59 ++--
 MaquetteWEB/html/FINANCE/notifications.html   | 177 ++++++++++++
 .../html/FINANCE/paiements_en_attente.html    | 161 ++++++-----
 .../html/FINANCE/rapports_financiers.html     |  57 +++-
 MaquetteWEB/html/FINANCE/settings.html        | 272 ++++++++++++++++++
 .../html/PROF/enseignant_permanent.html       |  50 +++-
 MaquetteWEB/html/PROF/mes-heures.html         |  47 ++-
 MaquetteWEB/html/PROF/mes-informations.html   |  47 ++-
 MaquetteWEB/html/PROF/notifications.html      |  48 +++-
 MaquetteWEB/html/PROF/paiements.html          |  47 ++-
 MaquetteWEB/html/PROF/settings.html           |  48 +++-
 MaquetteWEB/html/RH/candidature.html          |  51 +++-
 MaquetteWEB/html/RH/gestion-heures.html       |  60 ++--
 MaquetteWEB/html/RH/gestion_personnel.html    |  57 ++--
 MaquetteWEB/html/RH/mes-informations.html     |  57 ++--
 MaquetteWEB/html/RH/notifications.html        |  51 +++-
 MaquetteWEB/html/RH/rh.html                   |  51 +++-
 MaquetteWEB/html/RH/settings.html             |  51 +++-
 MaquetteWEB/html/VACATAIRE/mes-heures.html    |  51 +++-
 .../html/VACATAIRE/mes-informations.html      |  55 ++--
 MaquetteWEB/html/VACATAIRE/mon-contrat.html   |  55 ++--
 MaquetteWEB/html/VACATAIRE/notifications.html |  49 +++-
 MaquetteWEB/html/VACATAIRE/paiements.html     |  55 ++--
 MaquetteWEB/html/VACATAIRE/settings.html      |  49 +++-
 MaquetteWEB/html/VACATAIRE/vacataire.html     |  50 +++-
 27 files changed, 1471 insertions(+), 408 deletions(-)
 create mode 100644 MaquetteWEB/html/FINANCE/notifications.html
 create mode 100644 MaquetteWEB/html/FINANCE/settings.html

diff --git a/MaquetteWEB/html/FINANCE/finance.html b/MaquetteWEB/html/FINANCE/finance.html
index f545f1f..30f7c31 100644
--- a/MaquetteWEB/html/FINANCE/finance.html
+++ b/MaquetteWEB/html/FINANCE/finance.html
@@ -10,37 +10,70 @@
 </head>
 <body>
 
+
+    
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
             <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a>
-            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des transactions</a>
-            <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations et documents</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-bar-item w3-right">
-            <div class="user-name w3-padding-16">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
+            <div class="user-name">
                 Jean DUPONT
             </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:25px; height:25px;">
+                    <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="./finance.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
+            <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</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">Jean DUPONT</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>
 
+
+
     <div class="dashboard-container w3-content">
         <!-- Alertes et Notifications -->
         <div class="section-header w3-container w3-light-gray w3-border-left" style="border-left: 5px solid #20195e;">
@@ -187,13 +220,11 @@
 
     <script>
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/FINANCE/historique_paiements.html b/MaquetteWEB/html/FINANCE/historique_paiements.html
index fd560e3..8f8dbef 100644
--- a/MaquetteWEB/html/FINANCE/historique_paiements.html
+++ b/MaquetteWEB/html/FINANCE/historique_paiements.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Historique des Transactions</title>
+    <title>Historique des paiements</title>
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
     <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="../../css/FINANCE/finance.css">
@@ -38,29 +38,58 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
             <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a>
-            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des transactions</a>
-            <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations et documents</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-bar-item w3-right">
-            <div class="user-name w3-padding-16">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
+            <div class="user-name">
                 Jean DUPONT
             </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:25px; height:25px;">
+                    <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="./finance.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
+            <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</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">Jean DUPONT</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>
@@ -68,7 +97,7 @@
 
     <div class="dashboard-container w3-container">
         <div class="card w3-card">
-            <h2>Historique des Transactions</h2>
+            <h2>Historique des paiements</h2>
 
             <!-- Section de filtre -->
             <div class="filter-section w3-margin-bottom">
@@ -80,7 +109,7 @@
                 <button class="w3-button w3-blue" onclick="filterByStatus('Salaire payer')">Payé</button>
             </div>
 
-            <!-- Tableau des transactions -->
+            <!-- Tableau des paiements -->
             <table class="w3-table w3-bordered w3-striped w3-white">
                 <thead>
                     <tr class="w3-light-grey">
@@ -167,13 +196,11 @@
         }
 
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/FINANCE/mes_informations.html b/MaquetteWEB/html/FINANCE/mes_informations.html
index a8234e7..4075ee5 100644
--- a/MaquetteWEB/html/FINANCE/mes_informations.html
+++ b/MaquetteWEB/html/FINANCE/mes_informations.html
@@ -308,29 +308,58 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
             <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a>
-            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des transactions</a>
-            <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations et documents</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-bar-item w3-right">
-            <div class="user-name w3-padding-16">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
+            <div class="user-name">
                 Jean DUPONT
             </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:25px; height:25px;">
+                    <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="./finance.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
+            <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</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">Jean DUPONT</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>
@@ -575,15 +604,13 @@
     }
 
     function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
-    }
+        }
 
 </script>
 
diff --git a/MaquetteWEB/html/FINANCE/notifications.html b/MaquetteWEB/html/FINANCE/notifications.html
new file mode 100644
index 0000000..3376662
--- /dev/null
+++ b/MaquetteWEB/html/FINANCE/notifications.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Notifications</title>
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="../../css/FINANCE/finance.css">
+    
+    <style>
+        /* Ajout d'un style pour le conteneur des notifications */
+        #notifications-container {
+            border: 1px solid #ccc; /* Bordure autour du conteneur */
+            border-radius: 8px; /* Coins arrondis */
+            padding: 16px; /* Espacement intérieur */
+            margin-top: 16px; /* Espacement supérieur */
+            max-height: 300px; /* Hauteur maximale */
+            overflow-y: auto; /* Ajout de défilement si le contenu dépasse */
+            background-color: #f9f9f9; /* Couleur de fond */
+        }
+
+        /* Amélioration de l'apparence des notifications */
+        .alert, .success {
+            margin: 8px 0; /* Marge entre les notifications */
+        }
+    </style>
+</head>
+<body class="w3-light-grey">
+
+    <!-- Header -->
+    <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="./finance.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
+            <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</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">
+                Jean DUPONT
+            </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="./finance.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
+            <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</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">Jean DUPONT</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>
+
+    <!-- Alertes et Notifications -->
+    <div class="w3-container w3-white w3-card-4 w3-margin-bottom">
+        <h2 class="w3-text-dark-gray">Alertes et Notifications</h2>
+        <div id="notifications-container">
+            <!-- Notifications -->
+            <div class="w3-panel w3-red alert">
+                <span class="w3-closebtn close" onclick="removeNotification(this);">&times;</span>
+                <p><strong>Paiements en attente :</strong> Vous avez des paiements qui n'ont pas encore été traités. Merci de vérifier dans : <a href="paiements_en_attente.html">Paiements en attente</a>.</p>
+            </div>
+            <div class="w3-panel w3-green success">
+                <span class="w3-closebtn close" onclick="removeNotification(this);">&times;</span>
+                <p><strong>Rapport validé :</strong> Votre dernier rapport financier a été validé. Vous pouvez le consulter dans : <a href="rapports_financiers.html">Rapports Financiers</a>.</p>
+            </div>
+        </div>
+
+        <!-- Bouton pour tout effacer -->
+        <button id="clear-notifications" class="w3-button w3-dark-grey w3-margin-top w3-margin-bottom" onclick="clearAllNotifications();">Tout effacer</button>
+
+        <!-- Message quand aucune notification n'est présente -->
+        <div id="no-notifications-message" class="w3-hide w3-padding-16 w3-text-gray">
+            <p>Vous n'avez pas de notifications pour le moment !</p>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer id="footer" class="w3-center w3-padding w3-text-white footer" style="background-color: #20195e;">
+        <p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
+            <a href="../mentions_legales.html">Mentions légales</a>
+        </p>
+    </footer>
+
+    <script>
+        function removeNotification(element) {
+            // Supprime la notification
+            const notification = element.parentElement;
+            notification.style.display = 'none';
+
+            // Vérifier s'il reste des notifications
+            checkNotifications();
+        }
+
+        function clearAllNotifications() {
+            const notifications = document.getElementById('notifications-container');
+            let hasNotifications = false;
+
+            // Cacher toutes les notifications
+            Array.from(notifications.children).forEach(notification => {
+                if (notification.style.display !== 'none') {
+                    notification.style.display = 'none';
+                    hasNotifications = true; // Au moins une notification a été cachée
+                }
+            });
+
+            // Vérifier s'il reste des notifications
+            if (hasNotifications) {
+                checkNotifications(); // Vérifie les notifications restantes
+            }
+        }
+
+        function checkNotifications() {
+            const notifications = document.getElementById('notifications-container');
+            const noNotificationsMessage = document.getElementById('no-notifications-message');
+            const visibleNotifications = Array.from(notifications.children).some(notification => notification.style.display !== 'none');
+
+            if (!visibleNotifications) {
+                noNotificationsMessage.classList.remove('w3-hide');
+                document.getElementById('clear-notifications').style.display = 'none'; // Cacher le bouton "Tout effacer"
+            } else {
+                noNotificationsMessage.classList.add('w3-hide');
+                document.getElementById('clear-notifications').style.display = 'block'; // Montrer le bouton "Tout effacer"
+            }
+        }
+    </script>
+    <script>
+        function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
+        }
+    </script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/FINANCE/paiements_en_attente.html b/MaquetteWEB/html/FINANCE/paiements_en_attente.html
index ee9c52f..9d19ec9 100644
--- a/MaquetteWEB/html/FINANCE/paiements_en_attente.html
+++ b/MaquetteWEB/html/FINANCE/paiements_en_attente.html
@@ -74,29 +74,58 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
             <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a>
-            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des transactions</a>
-            <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations et documents</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-bar-item w3-right">
-            <div class="user-name w3-padding-16">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
+            <div class="user-name">
                 Jean DUPONT
             </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:25px; height:25px;">
+                    <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="./finance.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
+            <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</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">Jean DUPONT</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>
@@ -105,58 +134,62 @@
     <div class="w3-container dashboard-container w3-margin-top">
         <div class="w3-card w3-white w3-padding">
             <h2>Liste des paiements en attente de traitement</h2>
-            <table class="w3-table w3-bordered w3-striped w3-white w3-hoverable">
-                <thead>
-                    <tr class="w3-light-grey">
-                        <th>ID Paiement</th>
-                        <th>Nom du Bénéficiaire</th>
-                        <th>Montant (€)</th>
-                        <th>Status</th>
-                        <th>Actions</th>
-                    </tr>
-                </thead>
-                <tbody id="paymentTableBody">
-                    <tr>
-                        <td>002</td>
-                        <td>Maxime Menault (vacataire)</td>
-                        <td>1200,00</td>
-                        <td id="status-2">En attente</td>
-                        <td>
-                            <button class="w3-button w3-red" onclick="openPopup('bloquer', 2)">Bloquer</button>
-                            <button class="w3-button w3-orange" onclick="openPopup('annuler', 2)">Annuler</button>
-                            <button class="w3-button w3-green" onclick="openPopup('débloquer', 2)">Débloquer</button>
-                            <button class="w3-button w3-blue" onclick="openPopup('envoyer', 2)">Payer</button>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>003</td>
-                        <td>Denis Monnerat (permanent)</td>
-                        <td>1800,00</td>
-                        <td id="status-3">En attente</td>
-                        <td>
-                            <button class="w3-button w3-red" onclick="openPopup('bloquer', 3)">Bloquer</button>
-                            <button class="w3-button w3-orange" onclick="openPopup('annuler', 3)">Annuler</button>
-                            <button class="w3-button w3-green" onclick="openPopup('débloquer', 3)">Débloquer</button>
-                            <button class="w3-button w3-blue" onclick="openPopup('envoyer', 3)">Payer</button>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>004</td>
-                        <td>Sophie Bernard (vacataire)</td>
-                        <td>1350,00</td>
-                        <td id="status-4">En attente</td>
-                        <td>
-                            <button class="w3-button w3-red" onclick="openPopup('bloquer', 4)">Bloquer</button>
-                            <button class="w3-button w3-orange" onclick="openPopup('annuler', 4)">Annuler</button>
-                            <button class="w3-button w3-green" onclick="openPopup('débloquer', 4)">Débloquer</button>
-                            <button class="w3-button w3-blue" onclick="openPopup('envoyer', 4)">Payer</button>
-                        </td>
-                    </tr>
-                    <!-- Ajouter plus de lignes ici -->
-                </tbody>
-            </table>
+            
+            <!-- Table responsive -->
+            <div class="w3-responsive">
+                <table class="w3-table w3-bordered w3-striped w3-white w3-hoverable">
+                    <thead>
+                        <tr class="w3-light-grey">
+                            <th>ID Paiement</th>
+                            <th>Nom du Bénéficiaire</th>
+                            <th>Montant (€)</th>
+                            <th>Status</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="paymentTableBody">
+                        <tr>
+                            <td>002</td>
+                            <td>Maxime Menault (vacataire)</td>
+                            <td>1200,00</td>
+                            <td id="status-2">En attente</td>
+                            <td>
+                                <button class="w3-button w3-red w3-small" onclick="openPopup('bloquer', 2)">Bloquer</button>
+                                <button class="w3-button w3-orange w3-small" onclick="openPopup('annuler', 2)">Annuler</button>
+                                <button class="w3-button w3-green w3-small" onclick="openPopup('débloquer', 2)">Débloquer</button>
+                                <button class="w3-button w3-blue w3-small" onclick="openPopup('envoyer', 2)">Payer</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>003</td>
+                            <td>Denis Monnerat (permanent)</td>
+                            <td>1800,00</td>
+                            <td id="status-3">En attente</td>
+                            <td>
+                                <button class="w3-button w3-red w3-small" onclick="openPopup('bloquer', 3)">Bloquer</button>
+                                <button class="w3-button w3-orange w3-small" onclick="openPopup('annuler', 3)">Annuler</button>
+                                <button class="w3-button w3-green w3-small" onclick="openPopup('débloquer', 3)">Débloquer</button>
+                                <button class="w3-button w3-blue w3-small" onclick="openPopup('envoyer', 3)">Payer</button>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>004</td>
+                            <td>Sophie Bernard (vacataire)</td>
+                            <td>1350,00</td>
+                            <td id="status-4">En attente</td>
+                            <td>
+                                <button class="w3-button w3-red w3-small" onclick="openPopup('bloquer', 4)">Bloquer</button>
+                                <button class="w3-button w3-orange w3-small" onclick="openPopup('annuler', 4)">Annuler</button>
+                                <button class="w3-button w3-green w3-small" onclick="openPopup('débloquer', 4)">Débloquer</button>
+                                <button class="w3-button w3-blue w3-small" onclick="openPopup('envoyer', 4)">Payer</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
+    
 
     <div class="w3-center w3-padding-16 w3-text-white" style="background-color: #20195e;">
         <p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés | 
@@ -232,13 +265,11 @@
         document.querySelector('.confirm').addEventListener('click', confirmAction);
 
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/FINANCE/rapports_financiers.html b/MaquetteWEB/html/FINANCE/rapports_financiers.html
index bba1981..dc768dd 100644
--- a/MaquetteWEB/html/FINANCE/rapports_financiers.html
+++ b/MaquetteWEB/html/FINANCE/rapports_financiers.html
@@ -74,29 +74,58 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
             <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a>
-            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des transactions</a>
-            <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations et documents</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-bar-item w3-right">
-            <div class="user-name w3-padding-16">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
+            <div class="user-name">
                 Jean DUPONT
             </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:25px; height:25px;">
+                    <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="./finance.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
+            <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</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">Jean DUPONT</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>
@@ -164,13 +193,11 @@
         });
 
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/FINANCE/settings.html b/MaquetteWEB/html/FINANCE/settings.html
new file mode 100644
index 0000000..e231097
--- /dev/null
+++ b/MaquetteWEB/html/FINANCE/settings.html
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Paramètres Utilisateur</title>
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="../../css/FINANCE/style.css">
+    <style>
+        .header {
+            background-color: #20195e; /* Couleur par défaut */
+            color: white;
+        }
+        footer {
+            background-color: #20195e; /* Couleur par défaut */
+            color: white;
+        }   
+        .logo-container img {
+            width: 200px;
+            height: 50px;
+        }
+        .categories a {
+            font-weight: bold;
+        }
+        .btn {
+            background-color: #20195e;
+        }
+        .btn:hover {
+            background-color: #151044;
+        }
+        /* Style par défaut */
+        body {
+            font-family: Arial, sans-serif;
+        }
+
+        /* Mode Daltonien et autres troubles visuels */
+        body.daltonien {
+            background-color: #e8f4ff; /* Meilleure visibilité pour le texte */
+            color: #2c2c2c;
+        }
+        .header {
+            background-color: #20195e; /* Couleur par défaut */
+        }
+
+        body.daltonien .header {
+            background-color: #3b3a3a; /* Couleur plus neutre */
+        }
+
+        /* Couleur du footer en mode daltonien */
+        body.daltonien #footer {
+            background-color: #3b3a3a; /* Couleur plus neutre */
+        }
+
+        .daltonien .btn {
+            background-color: #31302d; /* Couleur facilement visible */
+        }
+
+        .daltonien .btn:hover {
+            background-color: #242321;
+        }
+
+        /* Grossissement des textes */
+        body.large-text {
+            font-size: 1.2em;
+        }
+        body.xlarge-text {
+            font-size: 1.5em;
+        }
+    </style>
+</head>
+<body class="w3-light-grey" id="main-body">
+
+    <!-- Header -->
+    <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="./finance.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
+            <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</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">
+                Jean DUPONT
+            </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="./finance.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a>
+            <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a>
+            <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</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">Jean DUPONT</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>
+
+    <!-- Paramètres de l'utilisateur -->
+    <div class="w3-content w3-padding-16">
+        <div class="w3-container w3-white w3-card-4 w3-padding-large">
+            <h2 class="w3-text-dark-gray">Paramètres de communication et d'accessibilité</h2>
+
+            <form class="w3-container w3-padding-16">
+                <!-- Notifications par Email -->
+                <div class="w3-section">
+                    <label class="w3-text-dark-gray"><b>Notifications par Email</b></label>
+                    <p>Recevez des notifications par e-mail concernant les heures, paiements, et plus.</p>
+                    <input class="w3-check" type="checkbox" id="email-notifications" checked>
+                    <label for="email-notifications">Activer les notifications par email</label>
+                </div>
+
+                <hr class="w3-divider"> <!-- Séparation -->
+                
+                <!-- Notifications par SMS -->
+                <div class="w3-section">
+                    <label class="w3-text-dark-gray"><b>Notifications par SMS</b></label>
+                    <p>Recevez des notifications par SMS sur votre téléphone mobile.</p>
+                    <input class="w3-check" type="checkbox" id="sms-notifications">
+                    <label for="sms-notifications">Activer les notifications par SMS</label>
+                </div>
+
+                <hr class="w3-divider"> <!-- Séparation -->
+
+                <!-- Préférences de Langue -->
+                <div class="w3-section">
+                    <label class="w3-text-dark-gray"><b>Langue de Communication</b></label>
+                    <select class="w3-select" name="language" id="language">
+                        <option value="fr" selected>Français</option>
+                        <option value="en">Anglais</option>
+                    </select>
+                </div>
+
+                <hr class="w3-divider"> <!-- Séparation -->
+
+                <!-- Fréquence de réception des emails -->
+                <div class="w3-section">
+                    <label class="w3-text-dark-gray"><b>Fréquence des emails de notification</b></label>
+                    <select class="w3-select" name="email-frequency" id="email-frequency">
+                        <option value="instant">Immédiatement</option>
+                        <option value="daily">Quotidiennement</option>
+                        <option value="weekly" selected>Hebdomadairement</option>
+                    </select>
+                </div>
+
+                <hr class="w3-divider"> <!-- Séparation -->
+
+                <!-- Mode Daltonien -->
+                <div class="w3-section">
+                    <label class="w3-text-dark-gray"><b>Mode Daltonien</b></label>
+                    <p>Améliore les contrastes et les couleurs pour mieux correspondre aux besoins des personnes atteintes de troubles visuels.</p>
+                    <input class="w3-check" type="checkbox" id="daltonien-mode" onchange="toggleDaltonienMode()">
+                    <label for="daltonien-mode">Activer le mode Daltonien</label>
+                </div>
+
+                <hr class="w3-divider"> <!-- Séparation -->
+
+                <!-- Changer la police -->
+                <div class="w3-section">
+                    <label class="w3-text-dark-gray"><b>Changer la police</b></label>
+                    <select class="w3-select" name="font" id="font" onchange="changeFont()">
+                        <option value="Arial" selected>Arial</option>
+                        <option value="Verdana">Verdana</option>
+                        <option value="Georgia">Georgia</option>
+                        <option value="Tahoma">Tahoma</option>
+                    </select>
+                </div>
+
+                <hr class="w3-divider"> <!-- Séparation -->
+
+                <!-- Grossir le texte -->
+                <div class="w3-section">
+                    <label class="w3-text-dark-gray"><b>Agrandir le texte</b></label>
+                    <select class="w3-select" name="text-size" id="text-size" onchange="changeTextSize()">
+                        <option value="normal" selected>Normal</option>
+                        <option value="large">Grand</option>
+                        <option value="xlarge">Très Grand</option>
+                    </select>
+                </div>
+
+                <hr class="w3-divider"> <!-- Séparation -->
+
+                <!-- Sauvegarder les modifications -->
+                <button type="submit" class="w3-button w3-round w3-margin-top btn w3-text-white" style="background-color: #20195e;">Sauvegarder les modifications</button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer id="footer" class="w3-center w3-padding w3-text-white footer">
+        <p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
+            <a href="../mentions_legales.html">Mentions légales</a>
+        </p>
+    </footer>
+
+    <!-- Script pour changer la police et la taille du texte -->
+    <script>
+        function toggleDaltonienMode() {
+            const body = document.getElementById('main-body');
+            const daltonienMode = document.getElementById('daltonien-mode').checked;
+            if (daltonienMode) {
+                body.classList.add('daltonien');
+            } else {
+                body.classList.remove('daltonien');
+            }
+        }
+
+
+        function changeFont() {
+            const selectedFont = document.getElementById('font').value;
+            document.body.style.fontFamily = selectedFont;
+        }
+
+        function changeTextSize() {
+            const textSize = document.getElementById('text-size').value;
+            document.body.classList.remove('large-text', 'xlarge-text');
+            if (textSize === 'large') {
+                document.body.classList.add('large-text');
+            } else if (textSize === 'xlarge') {
+                document.body.classList.add('xlarge-text');
+            }
+        }
+    </script>
+    <script>
+        function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
+        }
+    </script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/PROF/enseignant_permanent.html b/MaquetteWEB/html/PROF/enseignant_permanent.html
index 59290c1..506e539 100644
--- a/MaquetteWEB/html/PROF/enseignant_permanent.html
+++ b/MaquetteWEB/html/PROF/enseignant_permanent.html
@@ -13,14 +13,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -28,19 +28,41 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Denis MONNERAT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Denis MONNERAT</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>
@@ -124,5 +146,17 @@
     </p>
 </div>
 
+
+<script>
+        function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
+        }
+</script>
+
 </body>
 </html>
diff --git a/MaquetteWEB/html/PROF/mes-heures.html b/MaquetteWEB/html/PROF/mes-heures.html
index 0f32285..1c1e952 100644
--- a/MaquetteWEB/html/PROF/mes-heures.html
+++ b/MaquetteWEB/html/PROF/mes-heures.html
@@ -11,18 +11,17 @@
 </head>
 <body>
 
-
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -30,19 +29,41 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Denis MONNERAT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Denis MONNERAT</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>
@@ -642,6 +663,14 @@ function updateDeclaredHoursSectionVisibility() {
     }
 }
 
+function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
+        }
 
     </script>
 </body>
diff --git a/MaquetteWEB/html/PROF/mes-informations.html b/MaquetteWEB/html/PROF/mes-informations.html
index 9e300cb..5d1a891 100644
--- a/MaquetteWEB/html/PROF/mes-informations.html
+++ b/MaquetteWEB/html/PROF/mes-informations.html
@@ -13,14 +13,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -28,19 +28,41 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Denis MONNERAT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Denis MONNERAT</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>
@@ -281,6 +303,15 @@
         document.getElementById('popup').style.display = 'none';
     }
 
+    function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
+        }
+
 </script>
 
 </body>
diff --git a/MaquetteWEB/html/PROF/notifications.html b/MaquetteWEB/html/PROF/notifications.html
index 9e14c1a..978fd69 100644
--- a/MaquetteWEB/html/PROF/notifications.html
+++ b/MaquetteWEB/html/PROF/notifications.html
@@ -31,14 +31,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -46,19 +46,41 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Denis MONNERAT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Denis MONNERAT</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>
@@ -139,13 +161,11 @@
     </script>
     <script>
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/PROF/paiements.html b/MaquetteWEB/html/PROF/paiements.html
index 3ef3ca2..450fd50 100644
--- a/MaquetteWEB/html/PROF/paiements.html
+++ b/MaquetteWEB/html/PROF/paiements.html
@@ -15,14 +15,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -30,19 +30,41 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Denis MONNERAT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Denis MONNERAT</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>
@@ -407,6 +429,15 @@ function isDate(dateString) {
     return !isNaN(Date.parse(dateString));
 }
 
+function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
+}
+
 </script>
 
 </body>
diff --git a/MaquetteWEB/html/PROF/settings.html b/MaquetteWEB/html/PROF/settings.html
index 47b21c3..e17de21 100644
--- a/MaquetteWEB/html/PROF/settings.html
+++ b/MaquetteWEB/html/PROF/settings.html
@@ -75,14 +75,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -90,19 +90,41 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Denis MONNERAT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Denis MONNERAT</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>
@@ -235,13 +257,11 @@
     </script>
     <script>
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/RH/candidature.html b/MaquetteWEB/html/RH/candidature.html
index 22e2f1c..af26460 100644
--- a/MaquetteWEB/html/RH/candidature.html
+++ b/MaquetteWEB/html/RH/candidature.html
@@ -16,14 +16,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
             <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
@@ -32,19 +32,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
-               Alice BERGER
+                Alice BERGER
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./rh.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
+            <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Alice BERGER</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>
@@ -246,13 +269,11 @@
         };
 
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/RH/gestion-heures.html b/MaquetteWEB/html/RH/gestion-heures.html
index 915c3b4..8e49baa 100644
--- a/MaquetteWEB/html/RH/gestion-heures.html
+++ b/MaquetteWEB/html/RH/gestion-heures.html
@@ -97,14 +97,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
             <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
@@ -113,27 +113,47 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
-               Alice BERGER
+                Alice BERGER
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./rh.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
+            <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Alice BERGER</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>
 
-
-
-
     <div class="container">
 
         <input type="text" id="searchBar" class="search-bar" placeholder="Rechercher un professeur..." onkeyup="searchProfessor()">
@@ -700,16 +720,14 @@ function deleteVacationOffer(button) {
 
 </script>
 <script>
-    function toggleMenu() {
-        var menu = document.getElementById('menu');
-        var nom = document.getElementById('user-section');
-        if (menu.classList.contains('w3-hide-small')) {
-            menu.classList.remove('w3-hide-small');
-            menu.classList.remove('user-section');
-        } else {
-            menu.classList.add('w3-hide-small');
+        function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
         }
-    }
 </script>
 </body>
 
diff --git a/MaquetteWEB/html/RH/gestion_personnel.html b/MaquetteWEB/html/RH/gestion_personnel.html
index 9d67593..fdaad7f 100644
--- a/MaquetteWEB/html/RH/gestion_personnel.html
+++ b/MaquetteWEB/html/RH/gestion_personnel.html
@@ -133,14 +133,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
             <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
@@ -149,19 +149,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
-               Alice BERGER
+                Alice BERGER
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./rh.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
+            <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Alice BERGER</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>
@@ -727,16 +750,14 @@
     }
 </script>
 <script>
-    function toggleMenu() {
-        var menu = document.getElementById('menu');
-        var nom = document.getElementById('user-section');
-        if (menu.classList.contains('w3-hide-small')) {
-            menu.classList.remove('w3-hide-small');
-            menu.classList.remove('user-section');
-        } else {
-            menu.classList.add('w3-hide-small');
+        function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
         }
-    }
 </script>
 
 </body>
diff --git a/MaquetteWEB/html/RH/mes-informations.html b/MaquetteWEB/html/RH/mes-informations.html
index 68a4b54..3c32fe9 100644
--- a/MaquetteWEB/html/RH/mes-informations.html
+++ b/MaquetteWEB/html/RH/mes-informations.html
@@ -255,14 +255,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
             <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
@@ -271,19 +271,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
-               Alice BERGER
+                Alice BERGER
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./rh.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
+            <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Alice BERGER</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>
@@ -530,16 +553,14 @@
 
 </script>
 <script>
-    function toggleMenu() {
-        var menu = document.getElementById('menu');
-        var nom = document.getElementById('user-section');
-        if (menu.classList.contains('w3-hide-small')) {
-            menu.classList.remove('w3-hide-small');
-            menu.classList.remove('user-section');
-        } else {
-            menu.classList.add('w3-hide-small');
+        function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
         }
-    }
 </script>
 
 </body>
diff --git a/MaquetteWEB/html/RH/notifications.html b/MaquetteWEB/html/RH/notifications.html
index 24d9c6f..4ac3c8b 100644
--- a/MaquetteWEB/html/RH/notifications.html
+++ b/MaquetteWEB/html/RH/notifications.html
@@ -32,14 +32,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
             <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
@@ -48,19 +48,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
-               Alice BERGER
+                Alice BERGER
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./rh.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
+            <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Alice BERGER</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>
@@ -141,13 +164,11 @@
     </script>
     <script>
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/RH/rh.html b/MaquetteWEB/html/RH/rh.html
index c4ae47b..6c5eb99 100644
--- a/MaquetteWEB/html/RH/rh.html
+++ b/MaquetteWEB/html/RH/rh.html
@@ -51,14 +51,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
             <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
@@ -67,19 +67,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
-               Alice BERGER
+                Alice BERGER
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./rh.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
+            <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Alice BERGER</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>
@@ -145,13 +168,11 @@
 
     <script>
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/RH/settings.html b/MaquetteWEB/html/RH/settings.html
index ae8b7e6..27d4751 100644
--- a/MaquetteWEB/html/RH/settings.html
+++ b/MaquetteWEB/html/RH/settings.html
@@ -75,14 +75,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
             <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
@@ -91,19 +91,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
-               Alice BERGER
+                Alice BERGER
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./rh.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
+            <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Alice BERGER</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>
@@ -236,13 +259,11 @@
     </script>
     <script>
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/VACATAIRE/mes-heures.html b/MaquetteWEB/html/VACATAIRE/mes-heures.html
index dd07c67..6b94037 100644
--- a/MaquetteWEB/html/VACATAIRE/mes-heures.html
+++ b/MaquetteWEB/html/VACATAIRE/mes-heures.html
@@ -14,14 +14,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -30,23 +30,48 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Maxime MENAULT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Maxime MENAULT</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>
+
+    
     <div class="w3-container dashboard-container">
         <div class="section-header w3-border-bottom w3-padding">
             <h2>Offres de vacation</h2>
@@ -527,13 +552,11 @@
 
     <script>
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/VACATAIRE/mes-informations.html b/MaquetteWEB/html/VACATAIRE/mes-informations.html
index 1474a52..505d38b 100644
--- a/MaquetteWEB/html/VACATAIRE/mes-informations.html
+++ b/MaquetteWEB/html/VACATAIRE/mes-informations.html
@@ -276,14 +276,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -292,19 +292,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Maxime MENAULT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Maxime MENAULT</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>
@@ -558,16 +581,14 @@
 </script>
 
 <script>
-    function toggleMenu() {
-        var menu = document.getElementById('menu');
-        var nom = document.getElementById('user-section');
-        if (menu.classList.contains('w3-hide-small')) {
-            menu.classList.remove('w3-hide-small');
-            menu.classList.remove('user-section');
-        } else {
-            menu.classList.add('w3-hide-small');
+        function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
         }
-    }
 </script>
 
 </body>
diff --git a/MaquetteWEB/html/VACATAIRE/mon-contrat.html b/MaquetteWEB/html/VACATAIRE/mon-contrat.html
index 450b8f2..0071ee6 100644
--- a/MaquetteWEB/html/VACATAIRE/mon-contrat.html
+++ b/MaquetteWEB/html/VACATAIRE/mon-contrat.html
@@ -12,14 +12,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -28,19 +28,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Maxime MENAULT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Maxime MENAULT</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>
@@ -78,16 +101,14 @@
 </div>
 
 <script>
-    function toggleMenu() {
-        var menu = document.getElementById('menu');
-        var nom = document.getElementById('user-section');
-        if (menu.classList.contains('w3-hide-small')) {
-            menu.classList.remove('w3-hide-small');
-            menu.classList.remove('user-section');
-        } else {
-            menu.classList.add('w3-hide-small');
+        function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
         }
-    }
 </script>
 
 </body>
diff --git a/MaquetteWEB/html/VACATAIRE/notifications.html b/MaquetteWEB/html/VACATAIRE/notifications.html
index baea7e6..1d5a324 100644
--- a/MaquetteWEB/html/VACATAIRE/notifications.html
+++ b/MaquetteWEB/html/VACATAIRE/notifications.html
@@ -30,14 +30,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -46,19 +46,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Maxime MENAULT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Maxime MENAULT</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>
@@ -139,13 +162,11 @@
     </script>
     <script>
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/VACATAIRE/paiements.html b/MaquetteWEB/html/VACATAIRE/paiements.html
index 4d5e5f7..3ac1eac 100644
--- a/MaquetteWEB/html/VACATAIRE/paiements.html
+++ b/MaquetteWEB/html/VACATAIRE/paiements.html
@@ -13,14 +13,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -29,19 +29,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Maxime MENAULT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Maxime MENAULT</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>
@@ -408,16 +431,14 @@ function isDate(dateString) {
 
 </script>
 <script>
-    function toggleMenu() {
-        var menu = document.getElementById('menu');
-        var nom = document.getElementById('user-section');
-        if (menu.classList.contains('w3-hide-small')) {
-            menu.classList.remove('w3-hide-small');
-            menu.classList.remove('user-section');
-        } else {
-            menu.classList.add('w3-hide-small');
+        function toggleMenu() {
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
+            } else {
+                x.className = x.className.replace(" w3-show", "");
+            }
         }
-    }
 </script>
 
 </body>
diff --git a/MaquetteWEB/html/VACATAIRE/settings.html b/MaquetteWEB/html/VACATAIRE/settings.html
index 8cd4b0f..c339ecd 100644
--- a/MaquetteWEB/html/VACATAIRE/settings.html
+++ b/MaquetteWEB/html/VACATAIRE/settings.html
@@ -74,14 +74,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -90,19 +90,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Maxime MENAULT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Maxime MENAULT</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>
@@ -235,13 +258,11 @@
     </script>
     <script>
         function toggleMenu() {
-            var menu = document.getElementById('menu');
-            var nom = document.getElementById('user-section');
-            if (menu.classList.contains('w3-hide-small')) {
-                menu.classList.remove('w3-hide-small');
-                menu.classList.remove('user-section');
+            var x = document.getElementById("mobileMenu");
+            if (x.className.indexOf("w3-show") == -1) {
+                x.className += " w3-show";
             } else {
-                menu.classList.add('w3-hide-small');
+                x.className = x.className.replace(" w3-show", "");
             }
         }
     </script>
diff --git a/MaquetteWEB/html/VACATAIRE/vacataire.html b/MaquetteWEB/html/VACATAIRE/vacataire.html
index 8ab49eb..dc7a867 100644
--- a/MaquetteWEB/html/VACATAIRE/vacataire.html
+++ b/MaquetteWEB/html/VACATAIRE/vacataire.html
@@ -13,14 +13,14 @@
     <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:200px; height:50px;">
+            <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-bar-item">
+        <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
             <a href="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
             <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
             <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
@@ -29,19 +29,42 @@
         </div>
     
         <!-- Section utilisateur avec déconnexion -->
-        <div class="user-section w3-bar-item w3-right">
+        <div class="user-section w3-right w3-hide-small w3-hide-medium">
             <div class="user-name">
                 Maxime MENAULT
             </div>
             <div class="logout-container w3-bar-item">
                 <a href="./notifications.html" title="Notifications">
-                    <img src="../../media/img/notifs.png" alt="Logo notification">
+                    <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">
+                    <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">
+                    <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="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
+            <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+            <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
+            <a href="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</a>
+            <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
+    
+            <!-- Section utilisateur pour mobile -->
+            <div class="w3-bar-item w3-border-top w3-margin-top">
+                <div class="user-name">Maxime MENAULT</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>
@@ -125,5 +148,16 @@
     </p>
 </div>
 
+<script>
+    function toggleMenu() {
+        var x = document.getElementById("mobileMenu");
+        if (x.className.indexOf("w3-show") == -1) {
+            x.className += " w3-show";
+        } else {
+            x.className = x.className.replace(" w3-show", "");
+        }
+    }    
+</script>
+
 </body>
 </html>