chore: Update header styles for sticky navigation

views/index.ejs

@@ -189,6 +189,27 @@
                 background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8) 50%, transparent);
             }
         }
+
+        .header-scrolled {
+            background-color: #1f2937; /* bg-gray-900 */
+            padding: 1rem; /* p-4 */
+            position: sticky;
+            top: 0; /* Collé en haut de la page */
+            z-index: 50; /* z-50 */
+            max-width: 40rem; /* max-w-xl */
+            border-radius: 9999px; /* rounded-full */
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-xl */
+            transition: transform 0.3s ease, padding 0.3s ease; /* Transition douce pour la transformation et le padding */
+            transform: scale(0.8); /* Réduction de la taille */
+            left: 50%; /* Alignement horizontal au milieu */
+            transform: translateX(-50%);
+        }
+
+        .header-scrolled:hover {
+            transform: translateX(-50%) scale(1); /* Agrandissement au survol */
+            padding: 2rem; /* Agrandissement du padding au survol */
+        }
+
     </style>
 </head>
 
@@ -425,6 +446,16 @@
         localStorage.setItem('language', selectedLanguage); // Store language preference
         applyTranslations(selectedLanguage);
     });
+    
+        window.addEventListener('scroll', function() {
+            const header = document.querySelector('header');
+            if (window.scrollY > 100) { // Commence à changer après 100px de défilement
+                header.classList.add('header-scrolled');
+            } else {
+                header.classList.remove('header-scrolled');
+            }
+        });
+
 </script>
 </body>