Header : menu hamburger déroulant sur mobile

Sous 700px les liens de navigation étaient entassés/rognés dans le
bandeau ; ils passent maintenant dans un panneau déroulant ouvert par
un bouton ☰, sans rien changer à l'affichage desktop (les liens
restent des enfants flex directs de <nav> via display:contents).

app/templates/base.html

@@ -42,14 +42,14 @@
 
     /* ── Nav ── */
     nav {
+      position: relative;
       background: var(--nav-bg);
       color: var(--ground);
-      min-height: 50px;
+      height: 50px;
-      padding: .5rem 2rem;
+      padding: 0 2rem;
       display: flex;
       align-items: center;
-      flex-wrap: wrap;
+      gap: 2rem;
-      gap: .6rem 2rem;
       border-bottom: 3px solid var(--accent-2);
     }
     .nav-brand {
@@ -88,9 +88,57 @@
     }
     .nav-logout { opacity: .6; font-size: 11px; }
 
+    /* Sur desktop les liens restent des enfants flex directs de <nav> (display:contents
+       les rend "transparents" au layout) ; sur mobile ils deviennent un panneau
+       déroulant contrôlé par le bouton hamburger. */
+    .nav-links { display: contents; }
+    .nav-burger {
+      display: none;
+      flex-direction: column;
+      justify-content: center;
+      gap: 4px;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      background: none;
+      border: none;
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+    .nav-burger-bar {
+      display: block;
+      width: 20px;
+      height: 2px;
+      background: var(--ground);
+      transition: transform .15s, opacity .15s;
+    }
+    .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+    .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
+    .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
+
     @media (max-width: 700px) {
-      nav { padding: .5rem 1rem; gap: .5rem 1rem; }
+      nav { padding: 0 1rem; }
-      nav .spacer { flex-basis: 100%; height: 0; }
+      .nav-burger { display: flex; }
+      .nav-links {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0;
+        background: var(--nav-bg);
+        border-bottom: 3px solid var(--accent-2);
+        padding: .5rem 0;
+        z-index: 200;
+      }
+      .nav-links.open { display: flex; }
+      .nav-links a.nav-link, .nav-links .nav-user {
+        padding: .75rem 1.25rem;
+        width: 100%;
+      }
+      .nav-links .nav-user { display: block; }
     }
 
     /* ── Layout ── */
@@ -1116,6 +1164,11 @@
     <a href="/" class="nav-brand"><span class="nav-dot"></span>Décompte Horaire</a>
     <span class="spacer"></span>
     {% if current_user is defined and current_user %}
+    <button type="button" class="nav-burger" id="nav-burger" aria-expanded="false"
+            aria-controls="nav-links" aria-label="Menu" onclick="toggleNavMenu()">
+      <span class="nav-burger-bar"></span><span class="nav-burger-bar"></span><span class="nav-burger-bar"></span>
+    </button>
+    <div class="nav-links" id="nav-links">
       <a href="/" class="nav-link">Semaine courante</a>
       <a href="/stats" class="nav-link">Statistiques</a>
       <a href="/logs" class="nav-link">Journaux</a>
@@ -1123,10 +1176,29 @@
       <a href="/aide" class="nav-link">Aide</a>
       <span class="nav-user">{{ current_user }}</span>
       <a href="/logout" class="nav-link nav-logout">Déconnexion</a>
+    </div>
     {% endif %}
   </nav>
   <div class="container">
     {% block content %}{% endblock %}
   </div>
+  <script>
+    function toggleNavMenu() {
+      var links = document.getElementById('nav-links');
+      var btn = document.getElementById('nav-burger');
+      var open = !links.classList.contains('open');
+      links.classList.toggle('open', open);
+      btn.setAttribute('aria-expanded', String(open));
+    }
+    document.addEventListener('click', function (e) {
+      var nav = document.querySelector('nav');
+      if (nav && !nav.contains(e.target)) {
+        var links = document.getElementById('nav-links');
+        var btn = document.getElementById('nav-burger');
+        if (links) links.classList.remove('open');
+        if (btn) btn.setAttribute('aria-expanded', 'false');
+      }
+    });
+  </script>
 </body>
 </html>