diff --git a/public/css/style.css b/public/css/style.css
index b3c1209..f23b155 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -120,6 +120,12 @@ nav#main-nav {
   color: var(--accent);
 }
 
+.nav-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .nav-toggle {
   display: none;
   background: transparent;
@@ -131,6 +137,15 @@ nav#main-nav {
   line-height: 1;
 }
 
+.nav-menu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
 .nav-links {
   display: flex;
   align-items: center;
@@ -1019,20 +1034,30 @@ a.back-link:hover { color: var(--accent); }
 
   .nav-toggle { display: inline-flex; }
 
-  .nav-links {
+  /* Only the brand + theme toggle + hamburger stay in the top row; the
+     rest (page links, account/profile/logout) collapses into one dropdown
+     so the bar doesn't get crowded on a phone-width screen. */
+  .nav-menu {
     order: 3;
     flex-basis: 100%;
     flex-direction: column;
-    align-items: flex-start;
-    gap: 0.1rem;
+    align-items: stretch;
+    gap: 0;
     max-height: 0;
     overflow: hidden;
-    transition: max-height 0.2s ease;
+    transition: max-height 0.25s ease;
   }
 
-  .nav-links.open {
-    max-height: 260px;
-    padding: 0.4rem 0 0.8rem;
+  .nav-menu.open {
+    max-height: 420px;
+    padding-bottom: 0.6rem;
+  }
+
+  .nav-links {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.1rem;
+    padding-top: 0.4rem;
   }
 
   .nav-links a {
@@ -1042,9 +1067,19 @@ a.back-link:hover { color: var(--accent); }
   }
 
   .nav-user {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
     margin-left: 0;
   }
 
+  .nav-user > a,
+  .nav-user > .nav-profile-link {
+    width: 100%;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--border);
+  }
+
   main { padding: 1.25rem 0.9rem 3rem; }
 
   .card-grid { grid-template-columns: 1fr; }
diff --git a/public/js/nav.js b/public/js/nav.js
index e73c2f3..7033a2c 100644
--- a/public/js/nav.js
+++ b/public/js/nav.js
@@ -24,29 +24,33 @@ async function initNav(activePage) {
   const nav = document.getElementById('main-nav');
   nav.innerHTML = `
     <a class="brand" href="/index.html"><span class="brand-dot">&#9835;</span> Octane</a>
-    <button type="button" class="nav-toggle" id="nav-toggle" aria-label="Menu">&#9776;</button>
-    <div class="nav-links" id="nav-links">
-      <a href="/index.html" class="${activePage === 'repertoire' ? 'active' : ''}">Répertoire</a>
-      <a href="/suggestions.html" class="${activePage === 'suggestions' ? 'active' : ''}">Suggestions</a>
-      <a href="/setlist.html" class="${activePage === 'setlist' ? 'active' : ''}">Prochain concert</a>
-      <a href="/calendar.html" class="${activePage === 'calendar' ? 'active' : ''}">Disponibilités</a>
-      <a href="/history.html" class="${activePage === 'history' ? 'active' : ''}">Historique</a>
+    <div class="nav-menu" id="nav-menu">
+      <div class="nav-links" id="nav-links">
+        <a href="/index.html" class="${activePage === 'repertoire' ? 'active' : ''}">Répertoire</a>
+        <a href="/suggestions.html" class="${activePage === 'suggestions' ? 'active' : ''}">Suggestions</a>
+        <a href="/setlist.html" class="${activePage === 'setlist' ? 'active' : ''}">Prochain concert</a>
+        <a href="/calendar.html" class="${activePage === 'calendar' ? 'active' : ''}">Disponibilités</a>
+        <a href="/history.html" class="${activePage === 'history' ? 'active' : ''}">Historique</a>
+      </div>
+      <div class="nav-user">
+        ${me.authentikAccountUrl ? `<a href="${escapeHtml(me.authentikAccountUrl)}" target="_blank" rel="noopener" title="Gérer mon compte Authentik (mot de passe, etc.)">Mon compte</a>` : ''}
+        <a class="nav-profile-link" href="/profile.html">
+          ${avatarHtml(me, 'avatar-sm')}
+          <span>${escapeHtml(me.name)}${me.isAdmin ? ' <span class="badge">admin</span>' : ''}</span>
+        </a>
+        <a href="/auth/logout">Se déconnecter</a>
+      </div>
     </div>
-    <div class="nav-user">
+    <div class="nav-controls">
       <button type="button" class="icon-btn secondary" id="theme-toggle" title="Changer de thème" aria-label="Changer de thème"></button>
-      ${me.authentikAccountUrl ? `<a href="${escapeHtml(me.authentikAccountUrl)}" target="_blank" rel="noopener" title="Gérer mon compte Authentik (mot de passe, etc.)">Mon compte</a>` : ''}
-      <a class="nav-profile-link" href="/profile.html">
-        ${avatarHtml(me, 'avatar-sm')}
-        <span>${escapeHtml(me.name)}${me.isAdmin ? ' <span class="badge">admin</span>' : ''}</span>
-      </a>
-      <a href="/auth/logout">Se déconnecter</a>
+      <button type="button" class="nav-toggle" id="nav-toggle" aria-label="Menu">&#9776;</button>
     </div>
   `;
 
   const toggle = document.getElementById('nav-toggle');
-  const links = document.getElementById('nav-links');
-  toggle.addEventListener('click', () => links.classList.toggle('open'));
-  links.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => links.classList.remove('open')));
+  const menu = document.getElementById('nav-menu');
+  toggle.addEventListener('click', () => menu.classList.toggle('open'));
+  menu.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => menu.classList.remove('open')));
 
   updateThemeToggleIcon();
   document.getElementById('theme-toggle').addEventListener('click', () => {