feat: Réorganiser le layout avec un header fixe et un footer en bas de page

.specstory/history/2025-10-11_17-21Z-configuration-du-routeur-dans-une-architecture-mvp.md

@@ -1496,6 +1496,87 @@ Je veux fixer le header et le menu à gauche
 _**Assistant (copilot/grok-code-fast-1)**_
 
 
+```
+
+```
+✅ **Header et menu latéral fixés avec succès !**
+
+## Modifications apportées :
+
+**CSS ajouté dans `header.php` :**
+- **Header fixe** : `position: fixed` avec `top: 0`, `left: 0`, `right: 0` et `z-index: 1030`
+- **Ajustement du contenu** : `margin-top: 76px` pour le contenu principal (56px navbar + 20px padding)
+
+## Résultat :
+- 🔒 **Header** : Reste fixe en haut de la page lors du défilement
+- 🔒 **Menu latéral** : Reste fixe à gauche avec les outils de carte
+- 📄 **Contenu principal** : Défile normalement avec un espace réservé pour les éléments fixes
+
+L'application fonctionne toujours correctement (HTTP 200). Vous pouvez maintenant naviguer dans la page et voir que le header avec la navbar et le menu latéral restent visibles en permanence. Le contenu de l'éditeur de carte défilera indépendamment.
+
+---
+
+_**User (2025-10-11 18:26Z)**_
+
+le footer ne doit pas être floatant mais en bas du main. le menu de gauche est par dessus
+
+---
+
+_**Assistant (copilot/grok-code-fast-1)**_
+
+
+```
+
+```
+
+```
+
+```
+✅ **Footer repositionné avec succès !**
+
+## Modifications apportées :
+
+### 1. **Footer.php** - Retiré le positionnement fixe :
+- Supprimé `position: fixed; bottom: 0; left: 250px; right: 0; z-index: 1000;`
+- Ajouté `mt-auto` pour le pousser en bas avec flexbox
+
+### 2. **Header.php** - Nouveau layout flexbox :
+```css
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.main-content {
+    flex: 1; /* Prend tout l'espace disponible */
+    min-height: calc(100vh - 76px);
+}
+
+#global-footer {
+    margin-left: 250px; /* Même marge que le contenu */
+    margin-top: auto; /* Pousse le footer en bas */
+}
+```
+
+## Résultat :
+- 🔽 **Footer en bas du contenu** : Plus flottant, il suit maintenant le contenu principal
+- 📐 **Layout cohérent** : Header fixe en haut, sidebar fixe à gauche, contenu au centre, footer en bas
+- 🚫 **Plus de superposition** : Le menu latéral ne passe plus par-dessus le footer
+
+L'application fonctionne toujours correctement (HTTP 200). Le footer apparaît maintenant naturellement en bas de la page, après tout le contenu de l'éditeur de carte.
+
+---
+
+_**User (2025-10-11 18:27Z)**_
+
+Le fond du footer est transparant 
+
+---
+
+_**Assistant (copilot/grok-code-fast-1)**_
+
+
 ```
 
 ```

app/Views/partials/footer.php

@@ -1,5 +1,5 @@
-<footer id="global-footer" class="bg-dark text-center text-lg-start" style="position: fixed; bottom: 0; left: 250px; right: 0; z-index: 1000;">
-        <div class="text-center p-2" style="background-color: rgba(255, 255, 255, 0.1); color: white;">
+<footer id="global-footer" class="bg-dark text-center text-lg-start mt-auto">
+        <div class="text-center p-2" style="color: grey; background-color: none;">
             © 2025 Map Generator - Prêt à créer des cartes exceptionnelles
         </div>
     </footer>

app/Views/partials/header.php

@@ -6,7 +6,15 @@
     <title>Map Generator</title>
     <?php AssetLoader::loadCSS(['/assets/bootstrap.min.css', '/assets/bootstrap-icons.min.css']); ?>
     <style>
-        /* Header fixe */
+        /* Layout principal avec flexbox pour footer en bas */
+        body {
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+            margin: 0;
+            padding: 0;
+        }
+        
         #global-header {
             position: fixed;
             top: 0;
@@ -26,10 +34,17 @@
             overflow-y: auto;
             z-index: 1000;
         }
+        
         .main-content {
             margin-left: 250px;
-            margin-top: 76px; /* Espace pour le header fixe + padding */
+            margin-top: 15px; /* Espace pour le header fixe + padding */
             padding-top: 20px;
+            flex: 1; /* Prend tout l'espace disponible */
+        }
+        
+        #global-footer {
+            margin-left: 250px; /* Même marge que main-content */
+            margin-top: auto; /* Pousse le footer en bas */
         }
         .sidebar .nav-link {
             color: rgba(255, 255, 255, 0.75);