feat(mobile): side-nav settings + scroll drawer + aide refondue settings-style (v7.59.0)

- Sidebar mobile: display:block du breakpoint ≤768px cassait flex:1 de
  .sidebar-scroll → molette/touch incapables de scroller le drawer. Flex
  restauré. Gate: wheel scroll scrollTop > 0.
- Settings mobile: nav horizontale remplacée par une side-navigation gauche
  drawer (hamburger .settings-menu-btn + backdrop, fermeture auto au choix).
  Squelette panneau extrait vers static/css/settings.css (partagé).
- /help refaite au complet: template help.html (13 sections couvrant toute
  l'app — éditeur, databases/vues, tâches, workspaces, collab, agent IA,
  API v2, PWA, SSO, raccourcis, tips) avec le même panneau 2 colonnes +
  drawer mobile; route réduite à un render; help.js (Alpine.data helpInit).

E2E mobile_regression 6/6 + smoke 2/2 · pytest app+pwa 230/230

app/templates/settings.html

@@ -11,16 +11,6 @@
 
 {% block content %}
 <style>
-.settings-overlay{position:fixed;inset:0;z-index:500;display:flex;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);}
-.settings-panel{display:flex;width:1050px;max-width:98vw;height:85vh;margin:auto;background:var(--bg-primary);border:1px solid var(--border-strong);border-radius:14px;box-shadow:var(--shadow-modal);overflow:hidden;}
-.settings-nav{width:200px;min-width:200px;background:var(--bg-sidebar);border-right:1px solid var(--border);padding:8px 0;overflow-y:auto;}
-.settings-nav-header{padding:12px 16px;font-size:13px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}
-.settings-nav-item{display:flex;align-items:center;gap:8px;padding:6px 16px;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:background 100ms;border-radius:0;}
-.settings-nav-item:hover{background:var(--bg-hover);}
-.settings-nav-item.active{background:rgba(35,131,226,.12);color:var(--text);font-weight:500;}
-.settings-content{flex:1;overflow-y:auto;padding:24px 32px;}
-.settings-content h2{font-size:18px;font-weight:600;margin-bottom:4px;}
-.settings-content .section-desc{font-size:12px;color:var(--text-dim);margin-bottom:24px;}
 .setting-group{margin-bottom:28px;}
 .setting-group h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border);}
 .setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
@@ -69,9 +59,7 @@
 .status-dot.active{background:var(--toast-success-bg);}
 .status-dot.inactive{background:var(--danger);}
 
-/* Close button */
-.settings-close{position:absolute;top:12px;right:12px;width:32px;height:32px;background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;}
-.settings-close:hover{background:var(--bg-hover);color:var(--text);}
+/* Close button — shared styles in /static/css/settings.css */
 
 /* Agent & IA — status summary + provider cards */
 .llm-summary{display:flex;gap:14px;align-items:flex-start;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:22px;flex-wrap:wrap;}
@@ -126,28 +114,19 @@
 .llm-detail-empty{display:flex;align-items:center;justify-content:center;height:260px;font-size:13px;color:var(--text-dim);text-align:center;padding:0 20px;}
 @media (max-width:760px){.llm-layout{grid-template-columns:1fr;}.llm-list{max-height:220px;}}
 
-/* ── Mobile: full-screen panel + horizontal nav tabs ── */
-@media (max-width:768px){
-  .settings-overlay{background:var(--bg-primary);backdrop-filter:none;}
-  .settings-panel{flex-direction:column;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:none;border-radius:0;box-shadow:none;}
-  .settings-nav{width:auto;min-width:0;flex-direction:row;flex-shrink:0;display:flex;align-items:center;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:6px 8px;gap:4px;overscroll-behavior-x:contain;}
-  .settings-nav-header{display:none;}
-  .settings-nav-item{white-space:nowrap;padding:8px 12px;border-radius:8px;flex-shrink:0;}
-  .settings-content{padding:16px;}
-  .settings-close{top:8px;right:8px;width:44px;height:44px;background:var(--bg-tertiary);}
-  .setting-row{flex-wrap:wrap;}
-  .setting-control{margin-left:0;width:100%;}
-  .prov-grid{grid-template-columns:1fr;}
-  .avatar-section{gap:10px;}
-}
+/* ── Mobile side-nav drawer: shared settings.css handles overlay/nav/panel ── */
 </style>
 
-<div class="settings-overlay" x-data="settingsInit()" @keydown.escape="historyBack()">
-  <div class="settings-panel" style="position:relative;">
+<div class="settings-overlay" x-data="settingsInit()">
+  <div class="settings-panel" style="position:relative;" @keydown.escape="historyBack()">
+    <button class="settings-menu-btn" @click="navOpen = !navOpen" title="Sections" aria-label="Open sections menu">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+    </button>
     <button class="settings-close" @click="closeSettings()" title="Close">×</button>
 
-    <!-- Left navigation -->
-    <div class="settings-nav">
+    <!-- Left navigation (mobile: side-navigation drawer via hamburger + backdrop) -->
+    <div class="settings-nav-backdrop" x-show="navOpen" x-cloak @click="navOpen = false"></div>
+    <div class="settings-nav" :class="{ 'nav-open': navOpen }" @click.capture="closeNavOnMobile()">
       <div class="settings-nav-header">Account</div>
       <div class="settings-nav-item" :class="{ active: activeSection==='account' }" @click="activeSection='account'"><span class="nav-icon-inline">{{ fd_icon("user",14) }}</span> My account</div>
       <div class="settings-nav-item" :class="{ active: activeSection==='notifications' }" @click="activeSection='notifications'"><span class="nav-icon-inline">{{ fd_icon("bell",14) }}</span> Notifications</div>