From dd9224e6859304dfca33640a96b2c15fbe2e4282 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Tue, 22 Sep 2026 21:24:54 -0400
Subject: [PATCH] fix: page Configurations inutilisable en mode mobile BUG-071

---
 .gitea/workflows/ci.yml               |   1 +
 CHANGELOG.md                          |  28 +++++-
 README.fr.md                          |   6 +-
 README.md                             |   6 +-
 VERSION                               |   2 +-
 desktop/Cargo.lock                    |   2 +-
 desktop/Cargo.toml                    |   2 +-
 desktop/tauri.conf.json               |   2 +-
 docs/ISSUES_TODOLIST.md               |   2 +
 docs/ROADMAP.md                       |   2 +-
 frontend/index.html                   |  12 +++
 frontend/js/config.js                 |  42 +++++++++
 frontend/js/i18n.js                   |  19 ++--
 frontend/locales/en.json              |   1 +
 frontend/locales/fr.json              |   1 +
 frontend/style.css                    |  76 +++++++++++++++
 package.json                          |   2 +-
 tests/frontend/config-mobile.test.mjs | 131 ++++++++++++++++++++++++++
 18 files changed, 318 insertions(+), 19 deletions(-)
 create mode 100644 tests/frontend/config-mobile.test.mjs

diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml
index ac364d1..346c177 100644
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -40,6 +40,7 @@ jobs:
           node tests/frontend/unit.test.mjs
           node tests/frontend/pdf-viewer.test.mjs
           node tests/frontend/forge-completion.test.mjs
+          node tests/frontend/config-mobile.test.mjs
 
       - name: Frontend JSDOM tests (PaneManager + Excalidraw + Plugins + AI + SW + Collab + Mobile + Semantic + Desktop + Inline edition)
         run: |
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44f431f..43f9616 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ Format basé sur [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/),
 et [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 > **En cours de développement** : les changements à venir sont listés dans la section
-> [Unreleased](#unreleased). La dernière version livrée est **2.16.3**.
+> [Unreleased](#unreleased). La dernière version livrée est **2.16.4**.
 
 ---
 
@@ -14,6 +14,32 @@ et [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.16.4] — 2026-09-22
+
+### Corrigé
+
+- **BUG-071 - Page « Configurations » inutilisable en mode mobile** : trois
+  causes. (1) Le sommaire (`#config-nav`) partageait la règle `.help-nav`
+  qui le masque sous 768px, mais — contrairement au Guide — la modale
+  n'avait aucun bouton pour l'afficher : aucun moyen d'atteindre une section.
+  Nouvel hamburger `#config-hamburger` dans l'en-tête (même traitement
+  `.help-hamburger` que le Guide, libellé traduit `config.toc_toggle`
+  FR/EN). (2) Les liens du sommaire étaient des ancres brutes sans JS :
+  `config.js` les intercepte désormais (défilement doux vers la section dans
+  la modale, lien actif, repli automatique du sommaire sur mobile, réinit à
+  l'ouverture). (3) Les grilles 2 colonnes (fournisseur/modèle IA, clé/modèle
+  par fournisseur), les rangées d'ajout à largeurs fixes (jetons, webhooks)
+  et les lignes webhook/jeton/partage en flex une ligne débordaient en
+  360px : bloc CSS mobile scopé `#config-modal` (1 colonne, wrap, largeurs
+  inline neutralisées, cibles tactiles 44px, sommaire plafonné à 46vh).
+  `data-i18n-attr` accepte désormais plusieurs paires `attr:clé` séparées
+  par `;` (titre + aria-label traduits). Tests :
+  `tests/frontend/config-mobile.test.mjs` (nouveau, 11 — hamburger, i18n,
+  câblage JS, CSS mobile, garde-fou ancres mortes façon BUG-067),
+  enregistré dans le CI.
+
+---
+
 ## [2.16.3] — 2026-09-22
 
 ### Corrigé
diff --git a/README.fr.md b/README.fr.md
index e29b259..766b130 100644
--- a/README.fr.md
+++ b/README.fr.md
@@ -4,7 +4,7 @@
 
 **Porte d'entrée web ultra-léger pour vos vaults Obsidian** — Accédez, naviguez et recherchez dans toutes vos notes Obsidian depuis n'importe quel appareil via une interface web moderne et responsive.
 
-[![Version](https://img.shields.io/badge/Version-2.16.3-blue.svg)]()
+[![Version](https://img.shields.io/badge/Version-2.16.4-blue.svg)]()
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Docker](https://img.shields.io/badge/Docker-Ready-blue.svg)](https://www.docker.com/)
 [![Python](https://img.shields.io/badge/Python-3.11+-green.svg)](https://www.python.org/)
@@ -927,8 +927,8 @@ Ce projet est sous licence **MIT** — voir le fichier [LICENSE](LICENSE) pour l
 
 ## 📝 Changelog
 
-Consultez le [CHANGELOG.md](./CHANGELOG.md) pour l'historique complet de toutes les versions (v1.0.0 → v2.16.3).
+Consultez le [CHANGELOG.md](./CHANGELOG.md) pour l'historique complet de toutes les versions (v1.0.0 → v2.16.4).
 
 ---
 
-*Projet : ObsiGate | Version : 2.16.3 | Dernière mise à jour : Juin 2026*
+*Projet : ObsiGate | Version : 2.16.4 | Dernière mise à jour : Juin 2026*
diff --git a/README.md b/README.md
index 8ab6158..8183173 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 **Ultra-light web gateway for your Obsidian vaults** — Access, browse, and search all your Obsidian notes from any device via a modern, responsive web interface.
 
-[![Version](https://img.shields.io/badge/Version-2.16.3-blue.svg)]()
+[![Version](https://img.shields.io/badge/Version-2.16.4-blue.svg)]()
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Docker](https://img.shields.io/badge/Docker-Ready-blue.svg)](https://www.docker.com/)
 [![Python](https://img.shields.io/badge/Python-3.11+-green.svg)](https://www.python.org/)
@@ -1096,8 +1096,8 @@ This project is licensed under the **MIT License** - see the [LICENSE](LICENSE)
 
 ## 📝 Changelog
 
-See [CHANGELOG.md](./CHANGELOG.md) for the complete version history (v1.0.0 → v2.16.3).
+See [CHANGELOG.md](./CHANGELOG.md) for the complete version history (v1.0.0 → v2.16.4).
 
 ---
 
-*Project: ObsiGate | Version: 2.16.3 | Last updated: May 2026*
+*Project: ObsiGate | Version: 2.16.4 | Last updated: May 2026*
diff --git a/VERSION b/VERSION
index 37b36c1..99e60c0 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-2.16.3
+2.16.4
diff --git a/desktop/Cargo.lock b/desktop/Cargo.lock
index 6e888bb..7645128 100644
--- a/desktop/Cargo.lock
+++ b/desktop/Cargo.lock
@@ -2626,7 +2626,7 @@ dependencies = [
 
 [[package]]
 name = "obsigate-desktop"
-version = "2.16.3"
+version = "2.16.4"
 dependencies = [
  "chrono",
  "env_logger",
diff --git a/desktop/Cargo.toml b/desktop/Cargo.toml
index 8e0c74b..85eca45 100644
--- a/desktop/Cargo.toml
+++ b/desktop/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "obsigate-desktop"
-version = "2.16.3"
+version = "2.16.4"
 description = "ObsiGate Desktop — Porte d'entrée native pour vos vaults Obsidian"
 authors = ["Bruno Charest"]
 edition = "2021"
diff --git a/desktop/tauri.conf.json b/desktop/tauri.conf.json
index a20dc06..93f4dd3 100644
--- a/desktop/tauri.conf.json
+++ b/desktop/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/nicedoc/obsigate/main/desktop/tauri.conf.schema.json",
   "productName": "ObsiGate",
-  "version": "2.16.3",
+  "version": "2.16.4",
   "identifier": "com.obsigate.desktop",
   "build": {
     "frontendDist": "../frontend",
diff --git a/docs/ISSUES_TODOLIST.md b/docs/ISSUES_TODOLIST.md
index e990fca..0bd7637 100644
--- a/docs/ISSUES_TODOLIST.md
+++ b/docs/ISSUES_TODOLIST.md
@@ -179,6 +179,7 @@ Avant de corriger quoi que ce soit, un agent IA doit :
 | *BUG-068* | Configuration — section « 🔒 Sécurité du compte » inachevée : boutons hors thème, QR code invisible, fiabilité des fonctions à valider | 🟢 corrigé | P1 | 📱 frontend + ⚙️ backend | IA | `frontend/js/auth.js`, `frontend/style.css`, `backend/auth/router.py` | Configuration → 🔒 Sécurité du compte | `frontend/style.css` (+`config-btn-primary`/`danger` thème), `backend/auth/router.py` (`qr_data_url` segno local), `frontend/js/auth.js` (QR local + fallback, recovery WebAuthn, carte mot de passe, escapeHtml labels), locales FR/EN, `backend/requirements.txt` (+segno) ; tests `tests/test_mfa.py` (+1) + `tests/frontend/mfa-settings.test.mjs` (nouveau, 9) | pytest 1241 passed / 6 skipped, ruff 0, mypy 0, frontend unit + validate-imports verts |
 | *BUG-069* | Login 2FA bloqué sans erreur : après user+pwd corrects, la page de login reste affichée et le challenge MFA n'apparaît jamais | 🟢 corrigé | P0 | 📱 frontend | IA | `frontend/js/auth.js`, `frontend/index.html` | Activer 2FA → logout → login (bon user+pwd) | `frontend/js/auth.js` (`showMfaChallenge` → `.login-card` + erreur `mfa.challenge_unavailable` si montage impossible), locales FR/EN ; tests `tests/frontend/mfa-settings.test.mjs` (+2) | Reproduit au navigateur avant correctif (challenge jamais affiché), vérifié après : challenge affiché, code erroné → erreur, code valide (200) → app ; frontend mfa-settings 11/11, unit + validate-imports verts |
 | *BUG-070* | Activation clé physique WebAuthn impossible : « Validation du credential WebAuthn échouée » à chaque tentative | 🟢 corrigé | P0 | ⚙️ backend | IA | `backend/auth/webauthn_mfa.py`, `backend/auth/router.py` | Config → Sécurité → Ajouter une clé → cérémonie navigateur → 400 | `resolve_relying_party()` (rp_id/origines dérivés de la requête, config explicite prioritaire, forwarded si TRUST_PROXY) sur les 4 endpoints ; challenges multiples (5 derniers) acceptés ; `.env.example` ; tests `tests/test_webauthn.py` (+8) | Logs : origin `http://localhost:2020` rejetée + challenge mismatch au retry. Vérifié navigateur (authentificateur virtuel CDP) : register 200 + clé listée, clé de test retirée (admin de nouveau TOTP seul) ; pytest 1249 passed, ruff/mypy 0 |
+| *BUG-071* | Configuration « Configurations » inutilisable en mode mobile : sommaire masqué sans bouton d'accès, navigation par ancre sans JS, grilles 2 colonnes et rangées d'ajout qui débordent (≤768px) | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/index.html`, `frontend/js/config.js`, `frontend/js/i18n.js`, `frontend/style.css`, `frontend/locales/{fr,en}.json` | Mobile (≤768px) : ouvrir Configurations → aucun sommaire ni moyen d'atteindre une section ; champs « Clés IA » / jetons / webhooks débordent | `index.html` (+`#config-hamburger` `.help-hamburger`, `config.toc_toggle` FR/EN) ; `config.js` (toggle, scroll doux + actif + repli auto mobile, reset à l'ouverture) ; `i18n.js` (`data-i18n-attr` multi-paires `;`) ; `style.css` (bloc mobile `#config-modal` : sommaire haut 46vh, grilles 1fr, add-rows wrap + `!important`, items wrap, 44px) ; tests `tests/frontend/config-mobile.test.mjs` (nouveau, 11) + CI | pytest 1249 passed / 6 skipped, ruff 0, mypy 0, validate-imports 39 modules, unit 10/10, JSDOM ai 93/93 + sidebar 6/6 + mobile 35/35 + ai-keys 7/7 |
 |  | | | | | | | | | | |
 
 ### TODOs techniques (améliorations / nouvelles tâches)
@@ -255,6 +256,7 @@ Avant de corriger quoi que ce soit, un agent IA doit :
 | 2026-09-22 | BUG-068 | Correction | `backend/auth/router.py`, `backend/requirements.txt`, `frontend/js/auth.js`, `frontend/style.css`, `frontend/locales/{fr,en}.json`, `tests/test_mfa.py`, `tests/frontend/mfa-settings.test.mjs` (nouveau), `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **BUG-068** : section « 🔒 Sécurité du compte » finalisée. (1) Boutons hors thème : `config-btn-primary`/`config-btn-danger` n'existaient pas en CSS → définis depuis les variables du thème (+ états disabled). (2) QR invisible : l'image tierce était bloquée par la CSP (`img-src 'self' data: blob:`) et exposait le secret TOTP → QR SVG `data:` généré en local par le backend (`qr_data_url`, segno) avec repli saisie manuelle. (3) Codes de récupération perdus à la 1re activation WebAuthn → `_showRecoveryCodes(codes, targetId)` avec repli `webauthn-flow-area`. (4) Carte « Mot de passe » ajoutée (endpoint `change-password` existant, jusque-là sans UI) + échappement des libellés de clés WebAuthn. Vérifié : pytest 1241 passed / 6 skipped, ruff 0, mypy 0 (78 fichiers), `mfa-settings.test.mjs` 9/9, unit 10/10, validate-imports 39 modules. | 🟢 corrigé (en attente vérif utilisateur) |
 | 2026-09-23 | BUG-069 | Correction | `frontend/js/auth.js`, `frontend/locales/{fr,en}.json`, `tests/frontend/mfa-settings.test.mjs`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **BUG-069** : login 2FA bloqué sans erreur — après user+pwd corrects, `showMfaChallenge` cherchait `.login-box` (inexistant dans `index.html`, marquage réel `#login-screen > .login-card`) et faisait un `return` silencieux : page de login figée, aucune erreur. Correctif : montage dans `.login-card` (repli `#login-screen`) + erreur visible `mfa.challenge_unavailable` (FR/EN) si le point de montage manque. **Reproduit au navigateur** (Playwright, instance Docker `obsigate-test`, compte jetable avec TOTP) : avant → challenge jamais affiché ; après → challenge affiché, code erroné → erreur, code valide (verify 200) → app. Tests : `mfa-settings.test.mjs` 11/11 (+2 ancrage DOM), unit 10/10, validate-imports 39 modules. | 🟢 corrigé (en attente vérif utilisateur) |
 | 2026-09-23 | BUG-070 | Correction | `backend/auth/webauthn_mfa.py`, `backend/auth/router.py`, `.env.example`, `tests/test_webauthn.py`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **BUG-070** : activation WebAuthn rejetée en 400. (1) Défauts `localhost` sans port → `resolve_relying_party()` dérive rp_id/origines de la requête (config explicite prioritaire, forwarded sous TRUST_PROXY), appliqué aux endpoints register + login. (2) Challenge single-use → 5 derniers conservés, vérification contre le challenge de la cérémonie en cours. **Vérifié au navigateur** (authentificateur virtuel CDP, instance Docker) : register 200, clé listée, clé de test retirée. Tests : `test_webauthn.py` 19/19 (+8), suite complète 1249 passed / 6 skipped, ruff/mypy 0. | 🟢 corrigé (en attente vérif utilisateur) |
+| 2026-09-23 | BUG-071 | Correction | `frontend/index.html`, `frontend/js/config.js`, `frontend/js/i18n.js`, `frontend/style.css`, `frontend/locales/{fr,en}.json`, `tests/frontend/config-mobile.test.mjs` (nouveau), `.gitea/workflows/ci.yml`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **BUG-071** : page « Configurations » inutilisable en mobile. (1) `#config-nav` masquée sous 768px sans toggle → hamburger `#config-hamburger` ajouté à l'en-tête (`.help-hamburger`, libellé `config.toc_toggle` FR/EN). (2) Ancres brutes sans JS → interception en `config.js` (scroll doux, lien actif, repli auto mobile, reset à l'ouverture). (3) Débordements 360px → bloc CSS mobile `#config-modal` (sommaire haut 46vh, grilles 1fr, add-rows wrap + largeurs inline neutralisées, items wrap, cibles 44px). `data-i18n-attr` multi-paires (`;`). Vérifié : `config-mobile.test.mjs` 11/11 (nouveau, au CI), pytest 1249 passed / 6 skipped, ruff/mypy 0, validate-imports 39 modules, unit 10/10, JSDOM ai 93/93 + ai-sidebar 6/6 + sidebar-filters 8/8 + mobile-editor 35/35 + config-ai-keys 7/7. | 🟢 corrigé (en attente vérif utilisateur) |
 
 ---
 
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index ea599d6..d0864d6 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -1,6 +1,6 @@
 # ObsiGate — Roadmap
 
-> **Version :** 2.16.3 | **Dernière mise à jour :** 2026-09-22
+> **Version :** 2.16.4 | **Dernière mise à jour :** 2026-09-22
 > **Ce fichier ne contient que le travail à venir** (🔵 En cours + ⚪ Backlog) et un index compact
 > vers les fonctionnalités livrées.
 > - **Méthode de livraison à appliquer pour toute tâche : [DELIVERY_WORKFLOW.md](./DELIVERY_WORKFLOW.md)**
diff --git a/frontend/index.html b/frontend/index.html
index 2a71f2c..662c10c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1486,6 +1486,18 @@
         <div class="editor-modal" id="config-modal">
             <div class="editor-container">
                 <div class="editor-header">
+                    <button
+                        class="help-hamburger"
+                        id="config-hamburger"
+                        data-i18n-attr="title:config.toc_toggle;aria-label:config.toc_toggle"
+                        title="Afficher le sommaire"
+                        aria-label="Afficher le sommaire"
+                    >
+                        <i
+                            data-lucide="menu"
+                            style="width: 18px; height: 18px"
+                        ></i>
+                    </button>
                     <div class="editor-title" data-i18n="header.menu_config">Configurations</div>
                     <div class="editor-actions">
                         <button
diff --git a/frontend/js/config.js b/frontend/js/config.js
index 8daf87e..edf7637 100644
--- a/frontend/js/config.js
+++ b/frontend/js/config.js
@@ -767,6 +767,10 @@ function initConfigModal() {
   openBtn.addEventListener("click", async () => {
     modal.classList.add("active");
     closeHeaderMenu();
+    // BUG-071: reset the TOC to the CSS default (mobile: hidden, desktop:
+    // visible) like the help modal does on open.
+    var configNavOnOpen = document.getElementById("config-nav");
+    if (configNavOnOpen) configNavOnOpen.style.display = '';
     renderConfigFilters();
     loadConfigFields();
     loadDiagnostics();
@@ -886,6 +890,44 @@ function initConfigModal() {
     });
   }
 
+  // BUG-071: mobile table of contents. #config-nav shares the .help-nav
+  // rule that hides it below 768px, but — unlike the help modal — the config
+  // modal had no toggle to reveal it, leaving mobile users with no way to
+  // reach a section. The header hamburger opens it as a top block; picking
+  // a section smooth-scrolls inside the modal and collapses it on mobile.
+  var configNav = document.getElementById("config-nav");
+  var configHamburger = document.getElementById("config-hamburger");
+  function _isConfigMobile() { return window.innerWidth <= 768; }
+  function _setConfigNav(open) {
+    if (!configNav) return;
+    configNav.style.display = open ? "flex" : "none";
+    if (configHamburger) configHamburger.classList.toggle("active", !!open);
+  }
+  if (configHamburger) {
+    configHamburger.addEventListener("click", function(e) {
+      e.stopPropagation();
+      var hidden = !configNav || configNav.style.display === "none" || configNav.style.display === "";
+      _setConfigNav(hidden);
+    });
+  }
+  if (configNav) {
+    configNav.querySelectorAll(".help-nav-link").forEach(function(a) {
+      a.addEventListener("click", function(e) {
+        var hash = a.getAttribute("href");
+        if (!hash || hash.charAt(0) !== "#") return;
+        var target = document.getElementById(hash.slice(1));
+        if (!target) return;
+        e.preventDefault();
+        configNav.querySelectorAll(".help-nav-link").forEach(function(o) { o.classList.remove("active"); });
+        a.classList.add("active");
+        if (typeof target.scrollIntoView === "function") {
+          target.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+        if (_isConfigMobile()) _setConfigNav(false);
+      });
+    });
+  }
+
   document.addEventListener("keydown", (e) => {
     if (e.key === "Escape" && modal.classList.contains("active")) {
       closeConfigModal();
diff --git a/frontend/js/i18n.js b/frontend/js/i18n.js
index 60a07ee..f9ce90e 100644
--- a/frontend/js/i18n.js
+++ b/frontend/js/i18n.js
@@ -5,6 +5,7 @@
  *   Static DOM:  data-i18n="key"             → textContent
  *                data-i18n-placeholder="key"  → placeholder
  *                data-i18n-attr:title="key"    → title attribute
+ *                data-i18n-attr="a:k1;b:k2"    → several attributes (";"-separated)
  *                data-i18n-html="key"         → innerHTML (use sparingly)
  *   Dynamic JS:  import { t } from './i18n.js';  t('key', {param: 'val'})
  *   Live reload: setLocale('en') updates every data-i18n element instantly.
@@ -183,13 +184,19 @@ function _applyDOM() {
     el.innerHTML = t(key);
   });
 
-  // data-i18n-attr:TITLE → sets any attribute
+  // data-i18n-attr:ATTR:key[;ATTR:key…] → sets any attribute(s).
+  // Single-pair form (data-i18n-attr="title:key") is preserved; multiple
+  // pairs are separated with ";" (BUG-071: the config TOC toggle needs both
+  // title and aria-label translated).
   document.querySelectorAll('[data-i18n-attr]').forEach(function (el) {
     const raw = el.getAttribute('data-i18n-attr');
-    const colon = raw.indexOf(':');
-    if (colon === -1) return;
-    const attr = raw.substring(0, colon);
-    const key = raw.substring(colon + 1);
-    el.setAttribute(attr, t(key));
+    raw.split(';').forEach(function (pair) {
+      const colon = pair.indexOf(':');
+      if (colon === -1) return;
+      const attr = pair.substring(0, colon).trim();
+      const key = pair.substring(colon + 1).trim();
+      if (!attr || !key) return;
+      el.setAttribute(attr, t(key));
+    });
   });
 }
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index abcf9a2..79fedc3 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -569,6 +569,7 @@
   "config.test": "Test",
   "config.timeout_label": "Search timeout (ms)",
   "config.title": "Settings",
+  "config.toc_toggle": "Show contents",
   "config.title_boost": "Title boost",
   "config.title_boost_hint": "Relevance multiplier for title matches",
   "config.title_boost_label": "Title boost",
diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
index f2a7b38..7754a16 100644
--- a/frontend/locales/fr.json
+++ b/frontend/locales/fr.json
@@ -569,6 +569,7 @@
   "config.test": "Tester",
   "config.timeout_label": "Timeout recherche (ms)",
   "config.title": "Configuration",
+  "config.toc_toggle": "Afficher le sommaire",
   "config.title_boost": "Boost titre",
   "config.title_boost_hint": "Multiplicateur de pertinence pour les correspondances dans le titre",
   "config.title_boost_label": "Boost titre",
diff --git a/frontend/style.css b/frontend/style.css
index bdb09ca..f969c8b 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -4723,6 +4723,82 @@ body.resizing-v {
   }
 }
 
+/* BUG-071: Configurations modal — mobile usability (viewport ≤ 768px).
+   #config-nav shares the .help-nav rule that hides it, but the config modal
+   had no toggle (unlike the help modal): the header hamburger
+   (#config-hamburger, same .help-hamburger treatment) reveals it as a
+   collapsible top block. Two-column grids and fixed-width add-rows are
+   stacked/wrapped so nothing overflows a 360px viewport. */
+@media (max-width: 768px) {
+  /* TOC as a collapsible top block (JS toggles inline display flex/none,
+     which wins over the hiding rule); the list scrolls within a capped nav. */
+  #config-modal #config-nav {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    max-height: 46vh;
+  }
+  /* Two-column grids → single column. */
+  #config-modal .ai-default-grid,
+  #config-modal .ai-provider-fields {
+    grid-template-columns: 1fr;
+  }
+  /* Add-rows (tokens, webhooks, tag filters) wrap instead of overflowing. */
+  #config-modal .config-add-row,
+  #config-modal .config-add-pattern {
+    flex-wrap: wrap;
+  }
+  #config-modal .config-add-row .config-input,
+  #config-modal .config-add-pattern .config-input,
+  #config-modal .config-add-row .config-select {
+    flex: 1 1 140px;
+    width: auto !important; /* override fixed inline widths (180/140/100px) */
+    min-width: 0;
+  }
+  #config-modal .config-add-row .config-btn-add,
+  #config-modal .config-add-pattern .config-btn-add {
+    flex: 1 1 auto;
+    min-height: 44px;
+  }
+  /* Webhook / token / share rows wrap; long URLs and meta take their own
+     line instead of squeezing the delete control off-screen. */
+  #config-modal .webhook-item,
+  #config-modal .token-item,
+  #config-modal .share-item {
+    flex-wrap: wrap;
+  }
+  #config-modal .webhook-url,
+  #config-modal .token-meta,
+  #config-modal .share-url {
+    flex: 1 1 100%;
+    min-width: 0;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+  #config-modal .webhook-delete,
+  #config-modal .token-delete,
+  #config-modal .share-revoke {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  /* Sticky AI-keys footer: full-width touch-friendly buttons. */
+  #config-modal .ai-keys-footer .config-btn-save,
+  #config-modal .ai-keys-footer .config-btn-secondary {
+    flex: 1 1 100%;
+    min-height: 44px;
+  }
+  /* Long inline code in tips (ex. MCP usage snippet) must wrap. */
+  #config-modal .qh-tip {
+    flex-wrap: wrap;
+  }
+  #config-modal .qh-tip span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+}
+
 /* --- Toast notifications --- */
 .toast-container {
   position: fixed;
diff --git a/package.json b/package.json
index b37730b..e8b9254 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "obsigate",
-  "version": "2.16.3",
+  "version": "2.16.4",
   "description": "**Porte d'entrée web ultra-léger pour vos vaults Obsidian** — Accédez, naviguez et recherchez dans toutes vos notes Obsidian depuis n'importe quel appareil via une interface web moderne et responsive.",
   "main": "patch.js",
   "directories": {
diff --git a/tests/frontend/config-mobile.test.mjs b/tests/frontend/config-mobile.test.mjs
new file mode 100644
index 0000000..28c2062
--- /dev/null
+++ b/tests/frontend/config-mobile.test.mjs
@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+/**
+ * ObsiGate — Configurations modal mobile usability non-regression tests (BUG-071).
+ *
+ * Static checks (no jsdom needed — runs in the "Frontend unit tests" CI step):
+ *  - BUG-071a: #config-nav shared the .help-nav rule that hides it below
+ *    768px, but the config modal had no toggle (the help modal has
+ *    #help-hamburger) → the table of contents was unreachable on mobile.
+ *    The header must carry #config-hamburger (same .help-hamburger
+ *    treatment: hidden on desktop, visible on mobile) wired in config.js.
+ *  - BUG-071b: the TOC links were bare anchors with no JS — no active state,
+ *    no auto-collapse on mobile, unreliable scrolling inside the modal.
+ *    config.js must smooth-scroll to the section, mark it active and collapse
+ *    the nav on mobile, and reset the nav on open.
+ *  - BUG-071c: two-column grids (.ai-default-grid, .ai-provider-fields),
+ *    fixed-width add-rows (.config-add-row, 180/140/100px inline widths) and
+ *    single-line webhook/token/share items overflowed a 360px viewport.
+ *    style.css must stack/wrap them below 768px with 44px touch targets.
+ *  - BUG-071d: every #config-nav link target must exist (dead-anchor guard,
+ *    same class of bug as BUG-067 for the help modal).
+ *  - BUG-071e: data-i18n-attr supports several "attr:key" pairs (";"-
+ *    separated) so the toggle carries translated title AND aria-label.
+ *
+ * Usage: node tests/frontend/config-mobile.test.mjs
+ */
+
+import { strict as assert } from "node:assert";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.join(__dirname, "..", "..");
+
+const indexHtml = readFileSync(path.join(ROOT, "frontend", "index.html"), "utf8");
+const configJs = readFileSync(path.join(ROOT, "frontend", "js", "config.js"), "utf8");
+const i18nJs = readFileSync(path.join(ROOT, "frontend", "js", "i18n.js"), "utf8");
+const css = readFileSync(path.join(ROOT, "frontend", "style.css"), "utf8");
+const fr = JSON.parse(readFileSync(path.join(ROOT, "frontend", "locales", "fr.json"), "utf8"));
+const en = JSON.parse(readFileSync(path.join(ROOT, "frontend", "locales", "en.json"), "utf8"));
+
+function test(label, fn) {
+  try {
+    fn();
+    console.log("  ✓ " + label);
+  } catch (err) {
+    console.error("  ✗ " + label + "\n    " + err.message);
+    process.exitCode = 1;
+  }
+}
+
+// ── BUG-071a: header TOC toggle ─────────────────────────────────────────────
+test("index.html — #config-hamburger exists in the config modal header", () => {
+  const modal = indexHtml.match(/<div class="editor-modal" id="config-modal">([\s\S]*?)<div class="editor-body help-body" id="config-body">/);
+  assert.ok(modal, "#config-modal with #config-body not found");
+  const header = modal[1].match(/<div class="editor-header">([\s\S]*?)<\/div>\s*<\/div>/);
+  assert.ok(header, "config modal .editor-header not found");
+  assert.match(header[1], /id="config-hamburger"/, "no #config-hamburger in the config header — TOC unreachable on mobile");
+  assert.match(header[1], /help-hamburger/, "the toggle must reuse .help-hamburger (desktop-hidden, mobile-visible)");
+  assert.match(header[1], /aria-label/, "the toggle needs an accessible label");
+  assert.match(header[1], /config\.toc_toggle/, "the toggle label must use the i18n key config.toc_toggle");
+});
+
+test("i18n — config.toc_toggle exists in FR and EN", () => {
+  assert.ok(fr["config.toc_toggle"], "fr.json missing config.toc_toggle");
+  assert.ok(en["config.toc_toggle"], "en.json missing config.toc_toggle");
+  assert.notEqual(fr["config.toc_toggle"], "config.toc_toggle", "FR value must be translated");
+  assert.notEqual(en["config.toc_toggle"], "config.toc_toggle", "EN value must be translated");
+});
+
+// ── BUG-071b: TOC behaviour in config.js ────────────────────────────────────
+test("config.js — hamburger toggles #config-nav", () => {
+  assert.match(configJs, /getElementById\("config-hamburger"\)/, "no binding on #config-hamburger");
+  assert.match(configJs, /_setConfigNav\(/, "TOC open/close helper missing");
+});
+
+test("config.js — TOC links smooth-scroll, mark active, collapse on mobile", () => {
+  assert.match(configJs, /#config-nav[\s\S]{0,400}?help-nav-link/, "no handler on the #config-nav links");
+  assert.match(configJs, /scrollIntoView/, "section scroll must use scrollIntoView inside the modal");
+  assert.match(configJs, /innerWidth <= 768/, "the nav must auto-collapse on mobile viewports only");
+});
+
+test("config.js — TOC display reset when the modal opens", () => {
+  assert.match(configJs, /configNavOnOpen[\s\S]{0,120}?style\.display = ''/, "stale inline display would stick across sessions");
+});
+
+// ── BUG-071c: mobile CSS ────────────────────────────────────────────────────
+test("style.css — config TOC becomes a capped top block on mobile", () => {
+  assert.match(css, /#config-modal #config-nav/, "no mobile rule scoped to #config-modal #config-nav");
+  assert.match(css, /#config-modal #config-nav[\s\S]{0,400}?max-height/, "the opened TOC must be height-capped so content stays reachable");
+});
+
+test("style.css — two-column config grids stack on mobile", () => {
+  assert.match(css, /#config-modal \.ai-default-grid/, ".ai-default-grid still 2 columns on mobile");
+  assert.match(css, /#config-modal \.ai-provider-fields/, ".ai-provider-fields still 3fr/2fr on mobile");
+  assert.match(css, /grid-template-columns: 1fr;/, "mobile grids must collapse to a single column");
+});
+
+test("style.css — add-rows wrap and fixed inline widths are neutralised", () => {
+  assert.match(css, /#config-modal \.config-add-row/, "no mobile rule for .config-add-row (token/webhook rows overflow)");
+  assert.match(css, /width: auto !important/, "fixed inline widths (180/140/100px) must be overridden on mobile");
+  assert.match(css, /min-height: 44px/, "mobile action controls need 44px touch targets");
+});
+
+test("style.css — webhook/token/share rows wrap on mobile", () => {
+  for (const cls of ["webhook-item", "token-item", "share-item"]) {
+    assert.match(css, new RegExp("#config-modal \\." + cls), `.${cls} has no mobile wrap rule`);
+  }
+});
+
+// ── BUG-071d: dead-anchor guard ─────────────────────────────────────────────
+test("index.html — every #config-nav link resolves to an element id", () => {
+  const nav = indexHtml.match(/<nav class="help-nav" id="config-nav">([\s\S]*?)<\/nav>/);
+  assert.ok(nav, "#config-nav not found");
+  const hrefs = [...nav[1].matchAll(/href="(#[^"]+)"/g)].map((m) => m[1].slice(1));
+  assert.ok(hrefs.length > 0, "no links in #config-nav");
+  const missing = hrefs.filter((id) => !indexHtml.includes(`id="${id}"`));
+  assert.deepEqual(missing, [], `dead TOC anchors (cf. BUG-067): ${missing.join(", ")}`);
+});
+
+// ── BUG-071e: multi-pair data-i18n-attr ─────────────────────────────────────
+test("i18n.js — data-i18n-attr supports several attr:key pairs", () => {
+  assert.match(i18nJs, /split\(['"];/, "pairs must be split on ';'");
+  assert.match(i18nJs, /el\.setAttribute\(attr, t\(key\)\)/, "each pair must set its attribute");
+});
+
+if (process.exitCode) {
+  console.error("\nConfig mobile tests FAILED");
+} else {
+  console.log("\nAll config mobile tests passed.");
+}