feat(auth): v2.1.0 - MFA TOTP avec QR code, recovery codes

- backend/auth/mfa.py: TOTP (pyotp), recovery codes SHA-256
- Login flow: mfa_required → totp/verify → token (ou recovery)
- 6 nouveaux endpoints /api/auth/mfa/*
- Frontend: QR code setup, 6-digit auto-submit, recovery codes
- Settings: section Sécurité avec enable/disable MFA
- CSS: mfa-challenge, setup-card, recovery-list, badges
- i18n: 36 nouvelles clés EN/FR
- pyotp ajouté aux dépendances
- 30 tests (TOTP, recovery, API endpoints, login flow)
- 439 tests passent au total

frontend/index.html

@@ -1448,6 +1448,7 @@
 <li><a href="#cfg-ai" class="help-nav-link" data-i18n="settings.ai"></a></li>
 <li><a href="#cfg-themes" class="help-nav-link" data-i18n="settings.themes"></a></li>
 <li><a href="#cfg-profile" class="help-nav-link" data-i18n="settings.profile"></a></li>
+<li><a href="#cfg-security" class="help-nav-link" data-i18n="settings.security"></a></li>
 <li><a href="#cfg-about" class="help-nav-link" data-i18n="settings.about"></a></li>
 <li><a href="#cfg-webhooks" class="help-nav-link" data-i18n="config.section_webhooks"></a></li>
 <li><a href="#cfg-partages-publics" class="help-nav-link" data-i18n="config.section_shares"></a></li>
@@ -2042,7 +2043,7 @@
                                 <h2 data-i18n="auto.c14b5603">🎨 Thèmes</h2>
                                 <p class="config-description" data-i18n="auto.caac40b9">
                                     Choisissez un thème visuel. Chaque thème
-                                    offre un mode sombre et clair.
+                                    offre un mode sombre, clair, contraste élevé et sépia.
                                 </p>
                                 <div class="theme-grid" id="theme-grid">
                                     <div class="config-diag-loading" data-i18n="common.loading">Chargement...</div>
@@ -2080,6 +2081,26 @@
                                 </div>
                             </section>
 
+                            <!-- Sécurité du compte (MFA) -->
+                            <section
+                                class="config-section help-section"
+                                id="cfg-security"
+                            >
+                                <h2 data-i18n="settings.security">🔒 Sécurité du compte</h2>
+                                <p class="config-description" data-i18n="settings.security_desc">
+                                    Activez l'authentification à deux facteurs (2FA) pour renforcer la sécurité de votre compte.
+                                </p>
+                                <div id="mfa-settings">
+                                    <div id="mfa-status" class="mfa-status-section">
+                                        <div class="mfa-status-row">
+                                            <span class="mfa-status-label" data-i18n="mfa.status_label">Authentification 2FA</span>
+                                            <span id="mfa-status-badge" class="mfa-badge mfa-badge-off" data-i18n="mfa.disabled">Désactivée</span>
+                                        </div>
+                                        <div id="mfa-setup-area"></div>
+                                    </div>
+                                </div>
+                            </section>
+
                             <!-- À propos -->
                             <section
                                 class="config-section help-section"

frontend/js/auth.js

@@ -139,10 +139,71 @@ const AuthManager = {
       throw new Error(err.detail || "Erreur de connexion");
     }
     const data = await response.json();
+    // If MFA is required, return the MFA challenge instead of saving token
+    if (data.mfa_required) {
+      return data;
+    }
     this.saveToken(data);
     return data.user;
   },
 
+  async verifyMfa(username, code, rememberMe) {
+    const response = await fetch("/api/auth/mfa/totp/verify", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify({ username, code, remember_me: rememberMe || false }),
+    });
+    if (!response.ok) {
+      const err = await response.json();
+      throw new Error(err.detail || "Code invalide");
+    }
+    const data = await response.json();
+    this.saveToken(data);
+    return data.user;
+  },
+
+  async verifyRecovery(username, recoveryCode) {
+    const response = await fetch("/api/auth/mfa/recovery", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify({ username, recovery_code: recoveryCode }),
+    });
+    if (!response.ok) {
+      const err = await response.json();
+      throw new Error(err.detail || "Code invalide");
+    }
+    const data = await response.json();
+    this.saveToken(data);
+    return data.user;
+  },
+
+  // ── MFA Setup API calls ──────────────────────────────────────────
+
+  async getMfaStatus() {
+    const resp = await api("/api/auth/mfa/status");
+    return resp;
+  },
+
+  async mfaSetup() {
+    return await api("/api/auth/mfa/totp/setup", { method: "POST" });
+  },
+
+  async mfaEnable(code) {
+    return await api("/api/auth/mfa/totp/enable", {
+      method: "POST",
+      body: JSON.stringify({ code }),
+    });
+  },
+
+  async mfaDisable(password, code) {
+    return await api("/api/auth/mfa/totp/disable", {
+      method: "POST",
+      body: JSON.stringify({ password, code }),
+    });
+  },
+
   async logout() {
     try {
       const token = this.getToken();
@@ -278,6 +339,207 @@ const AuthManager = {
 };
 
 
+// ---------------------------------------------------------------------------
+// Post-login setup (shared between normal login and MFA login)
+// ---------------------------------------------------------------------------
+
+async function _onLoginSuccess() {
+  AuthManager.showApp();
+
+  // Re-sync language from server now that we're authenticated
+  try {
+    const resp = await fetch('/api/auth/me', { credentials: 'include' });
+    if (resp.ok) {
+      const user = await resp.json();
+      if (user.language && user.language !== getLocale()) {
+        await setLocale(user.language);
+      }
+    }
+  } catch (e) { /* non-bloquant */ }
+
+  // Load app data after successful login
+  try {
+    const { loadVaults, loadTags } = await import('./sidebar.js');
+    await Promise.all([loadVaults(), loadTags()]);
+    const { IndexUpdateManager } = await import('./sync.js');
+    IndexUpdateManager.connect();
+    const { syncFileIndexFromServer } = await import('./offline.js');
+    syncFileIndexFromServer();
+    showWelcome();
+  } catch (err) {
+    console.error("Failed to load data after login:", err);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+// MFA Challenge UI (TOTP code input during login)
+// ---------------------------------------------------------------------------
+
+function showMfaChallenge(username, rememberMe, loginBtn, loginErrorEl) {
+  const loginBox = document.querySelector(".login-box");
+  if (!loginBox) return;
+
+  // Hide the normal login form
+  const loginForm = document.getElementById("login-form");
+  if (loginForm) loginForm.classList.add("hidden");
+
+  // Create MFA challenge UI
+  let mfaSection = document.getElementById("mfa-challenge");
+  if (!mfaSection) {
+    mfaSection = document.createElement("div");
+    mfaSection.id = "mfa-challenge";
+    mfaSection.className = "mfa-challenge";
+    loginBox.appendChild(mfaSection);
+  }
+
+  mfaSection.innerHTML = `
+    <div class="mfa-icon">🔐</div>
+    <h3>${t('mfa.title')}</h3>
+    <p class="mfa-subtitle">${t('mfa.subtitle')}</p>
+    <form id="mfa-form">
+      <div class="mfa-code-input-group">
+        <input type="text" id="mfa-code" class="mfa-code-input" maxlength="6"
+               pattern="[0-9]{6}" inputmode="numeric" autocomplete="one-time-code"
+               placeholder="000000" autofocus required>
+      </div>
+      <p class="mfa-error hidden" id="mfa-error"></p>
+      <button type="submit" class="btn-login" id="mfa-verify-btn">
+        <span class="btn-text">${t('mfa.verify')}</span>
+        <span class="btn-spinner hidden">⏳</span>
+      </button>
+    </form>
+    <div class="mfa-actions">
+      <button type="button" class="mfa-link-btn" id="mfa-use-recovery">${t('mfa.use_recovery')}</button>
+      <button type="button" class="mfa-link-btn" id="mfa-back-login">${t('mfa.back_to_login')}</button>
+    </div>
+  `;
+  mfaSection.classList.remove("hidden");
+
+  const codeInput = document.getElementById("mfa-code");
+  codeInput.focus();
+
+  // Auto-submit when 6 digits entered
+  codeInput.addEventListener("input", () => {
+    codeInput.value = codeInput.value.replace(/[^0-9]/g, "");
+    if (codeInput.value.length === 6) {
+      document.getElementById("mfa-verify-btn").click();
+    }
+  });
+
+  // Handle MFA form submit
+  document.getElementById("mfa-form").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const code = codeInput.value.trim();
+    if (code.length !== 6) return;
+
+    const btn = document.getElementById("mfa-verify-btn");
+    const errorEl = document.getElementById("mfa-error");
+    btn.disabled = true;
+    btn.querySelector(".btn-spinner").classList.remove("hidden");
+    btn.querySelector(".btn-text").textContent = t('mfa.verifying');
+    errorEl.classList.add("hidden");
+
+    try {
+      await AuthManager.verifyMfa(username, code, rememberMe);
+      mfaSection.classList.add("hidden");
+      if (loginForm) loginForm.classList.remove("hidden");
+      await _onLoginSuccess();
+    } catch (err) {
+      errorEl.textContent = err.message;
+      errorEl.classList.remove("hidden");
+      codeInput.value = "";
+      codeInput.focus();
+    } finally {
+      btn.disabled = false;
+      btn.querySelector(".btn-spinner").classList.add("hidden");
+      btn.querySelector(".btn-text").textContent = t('mfa.verify');
+    }
+  });
+
+  // Switch to recovery code input
+  document.getElementById("mfa-use-recovery").addEventListener("click", () => {
+    showRecoveryChallenge(username, rememberMe, loginForm, mfaSection);
+  });
+
+  // Back to login
+  document.getElementById("mfa-back-login").addEventListener("click", () => {
+    mfaSection.classList.add("hidden");
+    if (loginForm) loginForm.classList.remove("hidden");
+  });
+}
+
+
+function showRecoveryChallenge(username, rememberMe, loginForm, mfaSection) {
+  mfaSection.innerHTML = `
+    <div class="mfa-icon">🔑</div>
+    <h3>${t('mfa.recovery_title')}</h3>
+    <p class="mfa-subtitle">${t('mfa.recovery_subtitle')}</p>
+    <form id="recovery-form">
+      <div class="mfa-code-input-group">
+        <input type="text" id="recovery-code" class="mfa-code-input recovery-input" maxlength="9"
+               autocomplete="off" placeholder="XXXX-XXXX" autofocus required>
+      </div>
+      <p class="mfa-error hidden" id="recovery-error"></p>
+      <button type="submit" class="btn-login" id="recovery-verify-btn">
+        <span class="btn-text">${t('mfa.verify')}</span>
+        <span class="btn-spinner hidden">⏳</span>
+      </button>
+    </form>
+    <div class="mfa-actions">
+      <button type="button" class="mfa-link-btn" id="recovery-use-totp">${t('mfa.use_totp')}</button>
+      <button type="button" class="mfa-link-btn" id="recovery-back-login">${t('mfa.back_to_login')}</button>
+    </div>
+  `;
+
+  const codeInput = document.getElementById("recovery-code");
+  codeInput.focus();
+
+  // Auto-format: insert dash after 4 chars
+  codeInput.addEventListener("input", () => {
+    let v = codeInput.value.replace(/[^a-zA-Z0-9]/g, "").toUpperCase();
+    if (v.length > 4) v = v.slice(0, 4) + "-" + v.slice(4, 8);
+    codeInput.value = v;
+  });
+
+  document.getElementById("recovery-form").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const code = codeInput.value.trim();
+    const btn = document.getElementById("recovery-verify-btn");
+    const errorEl = document.getElementById("recovery-error");
+    btn.disabled = true;
+    btn.querySelector(".btn-spinner").classList.remove("hidden");
+    btn.querySelector(".btn-text").textContent = t('mfa.verifying');
+    errorEl.classList.add("hidden");
+
+    try {
+      await AuthManager.verifyRecovery(username, code);
+      mfaSection.classList.add("hidden");
+      if (loginForm) loginForm.classList.remove("hidden");
+      await _onLoginSuccess();
+    } catch (err) {
+      errorEl.textContent = err.message;
+      errorEl.classList.remove("hidden");
+      codeInput.value = "";
+      codeInput.focus();
+    } finally {
+      btn.disabled = false;
+      btn.querySelector(".btn-spinner").classList.add("hidden");
+      btn.querySelector(".btn-text").textContent = t('mfa.verify');
+    }
+  });
+
+  document.getElementById("recovery-use-totp").addEventListener("click", () => {
+    showMfaChallenge(username, rememberMe, null, null);
+  });
+
+  document.getElementById("recovery-back-login").addEventListener("click", () => {
+    mfaSection.classList.add("hidden");
+    if (loginForm) loginForm.classList.remove("hidden");
+  });
+}
+
+
 // ---------------------------------------------------------------------------
 // Login form handler
 // ---------------------------------------------------------------------------
@@ -300,36 +562,14 @@ function initLoginForm() {
     errorEl.classList.add("hidden");
 
     try {
-      await AuthManager.login(username, password, rememberMe);
-      AuthManager.showApp();
-
-      // Re-sync language from server now that we're authenticated
-      try {
-        const resp = await fetch('/api/auth/me', { credentials: 'include' });
-        if (resp.ok) {
-          const user = await resp.json();
-          if (user.language && user.language !== getLocale()) {
-            await setLocale(user.language);
-          }
-        }
-      } catch (e) { /* non-bloquant */ }
-
-      // Load app data after successful login
-      try {
-        // Dynamic imports to avoid circular dependency with sidebar.js
-        const { loadVaults, loadTags } = await import('./sidebar.js');
-        await Promise.all([loadVaults(), loadTags()]);
-        // Start SSE sync now that auth cookie is set (dynamic import to avoid circular dep)
-        const { IndexUpdateManager } = await import('./sync.js');
-        IndexUpdateManager.connect();
-        // Sync offline file index now that we're authenticated
-        const { syncFileIndexFromServer } = await import('./offline.js');
-        syncFileIndexFromServer();
-        // Show dashboard
-        showWelcome();
-      } catch (err) {
-        console.error("Failed to load data after login:", err);
+      const result = await AuthManager.login(username, password, rememberMe);
+      // Check if MFA is required
+      if (result && result.mfa_required) {
+        showMfaChallenge(result.username, rememberMe, btn, errorEl);
+        return;
       }
+      // Normal login success
+      await _onLoginSuccess();
       safeCreateIcons();
     } catch (err) {
       errorEl.textContent = err.message;
@@ -576,4 +816,215 @@ const AdminPanel = {
 };
 
 
-export { api, AuthManager, initLoginForm, AdminPanel };
+// ---------------------------------------------------------------------------
+// MFA Settings — Setup/Disable UI in the settings panel
+// ---------------------------------------------------------------------------
+
+async function initMfaSettings() {
+  const area = document.getElementById("mfa-setup-area");
+  const badge = document.getElementById("mfa-status-badge");
+  if (!area || !badge) return;
+
+  // Check current MFA status
+  let mfaEnabled = false;
+  try {
+    const status = await AuthManager.getMfaStatus();
+    mfaEnabled = status.mfa_enabled;
+  } catch (e) {
+    // Not logged in or error
+    return;
+  }
+
+  if (mfaEnabled) {
+    badge.textContent = t("mfa.enabled");
+    badge.className = "mfa-badge mfa-badge-on";
+    area.innerHTML = `
+      <p class="mfa-info-text" data-i18n="mfa.enabled_desc">${t("mfa.enabled_desc")}</p>
+      <button class="config-btn-secondary" id="mfa-disable-btn">${t("mfa.disable_btn")}</button>
+      <div id="mfa-disable-form-area"></div>
+    `;
+    document.getElementById("mfa-disable-btn").addEventListener("click", () => {
+      _showDisableMfaForm();
+    });
+  } else {
+    badge.textContent = t("mfa.disabled");
+    badge.className = "mfa-badge mfa-badge-off";
+    area.innerHTML = `
+      <p class="mfa-info-text" data-i18n="mfa.setup_desc">${t("mfa.setup_desc")}</p>
+      <button class="config-btn-primary" id="mfa-enable-btn">${t("mfa.enable_btn")}</button>
+      <div id="mfa-setup-flow-area"></div>
+    `;
+    document.getElementById("mfa-enable-btn").addEventListener("click", () => {
+      _startMfaSetup();
+    });
+  }
+}
+
+
+async function _startMfaSetup() {
+  const flowArea = document.getElementById("mfa-setup-flow-area");
+  if (!flowArea) return;
+
+  try {
+    const data = await AuthManager.mfaSetup();
+    flowArea.innerHTML = `
+      <div class="mfa-setup-card">
+        <h4>${t("mfa.scan_qr")}</h4>
+        <div class="mfa-qr-container">
+          <img id="mfa-qr-img" alt="QR Code" class="mfa-qr-code"
+               src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(data.otpauth_uri)}">
+        </div>
+        <details class="mfa-secret-details">
+          <summary>${t("mfa.manual_entry")}</summary>
+          <code class="mfa-secret-code">${data.secret}</code>
+        </details>
+        <div class="mfa-verify-section">
+          <label>${t("mfa.enter_code")}</label>
+          <input type="text" id="mfa-enable-code" class="mfa-code-input" maxlength="6"
+                 pattern="[0-9]{6}" inputmode="numeric" placeholder="000000" autocomplete="one-time-code">
+          <button class="config-btn-primary" id="mfa-confirm-btn">${t("mfa.confirm_enable")}</button>
+          <p class="mfa-error hidden" id="mfa-enable-error"></p>
+        </div>
+      </div>
+    `;
+
+    const codeInput = document.getElementById("mfa-enable-code");
+    codeInput.addEventListener("input", () => {
+      codeInput.value = codeInput.value.replace(/[^0-9]/g, "");
+    });
+
+    document.getElementById("mfa-confirm-btn").addEventListener("click", async () => {
+      const code = codeInput.value.trim();
+      if (code.length !== 6) return;
+
+      const btn = document.getElementById("mfa-confirm-btn");
+      const errorEl = document.getElementById("mfa-enable-error");
+      btn.disabled = true;
+      btn.textContent = t("mfa.verifying");
+      errorEl.classList.add("hidden");
+
+      try {
+        const result = await AuthManager.mfaEnable(code);
+        // Show recovery codes
+        _showRecoveryCodes(result.recovery_codes);
+      } catch (err) {
+        errorEl.textContent = err.message;
+        errorEl.classList.remove("hidden");
+        codeInput.value = "";
+        codeInput.focus();
+      } finally {
+        btn.disabled = false;
+        btn.textContent = t("mfa.confirm_enable");
+      }
+    });
+  } catch (err) {
+    flowArea.innerHTML = `<p class="mfa-error">${err.message}</p>`;
+  }
+}
+
+
+function _showRecoveryCodes(codes) {
+  const flowArea = document.getElementById("mfa-setup-flow-area");
+  const area = document.getElementById("mfa-setup-area");
+  if (!flowArea) return;
+
+  const codesHtml = codes.map(c => `<code class="mfa-recovery-code">${c}</code>`).join("\n");
+  flowArea.innerHTML = `
+    <div class="mfa-recovery-card">
+      <h4>🔑 ${t("mfa.recovery_codes_title")}</h4>
+      <p class="mfa-warning">${t("mfa.recovery_codes_warning")}</p>
+      <div class="mfa-recovery-list" id="mfa-recovery-list">
+        ${codesHtml}
+      </div>
+      <div class="mfa-recovery-actions">
+        <button class="config-btn-secondary" id="mfa-copy-codes">${t("mfa.copy_codes")}</button>
+        <button class="config-btn-secondary" id="mfa-download-codes">${t("mfa.download_codes")}</button>
+        <button class="config-btn-primary" id="mfa-codes-done">${t("mfa.done")}</button>
+      </div>
+    </div>
+  `;
+
+  document.getElementById("mfa-copy-codes").addEventListener("click", () => {
+    navigator.clipboard.writeText(codes.join("\n")).then(() => {
+      showToast(t("mfa.codes_copied"), "success");
+    });
+  });
+
+  document.getElementById("mfa-download-codes").addEventListener("click", () => {
+    const blob = new Blob([codes.join("\n")], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "obsigate-recovery-codes.txt";
+    a.click();
+    URL.revokeObjectURL(url);
+  });
+
+  document.getElementById("mfa-codes-done").addEventListener("click", () => {
+    // Refresh MFA settings display
+    initMfaSettings();
+  });
+}
+
+
+function _showDisableMfaForm() {
+  const formArea = document.getElementById("mfa-disable-form-area");
+  if (!formArea) return;
+
+  formArea.innerHTML = `
+    <div class="mfa-disable-card">
+      <h4>${t("mfa.disable_confirm_title")}</h4>
+      <p>${t("mfa.disable_confirm_desc")}</p>
+      <div class="form-group">
+        <label>${t("mfa.password_label")}</label>
+        <input type="password" id="mfa-disable-password" class="config-input" placeholder="${t('mfa.password_placeholder')}">
+      </div>
+      <div class="form-group">
+        <label>${t("mfa.totp_code_label")}</label>
+        <input type="text" id="mfa-disable-code" class="mfa-code-input" maxlength="6"
+               pattern="[0-9]{6}" inputmode="numeric" placeholder="000000">
+      </div>
+      <div class="mfa-disable-actions">
+        <button class="config-btn-secondary" id="mfa-disable-cancel">${t("common.cancel")}</button>
+        <button class="config-btn-danger" id="mfa-disable-confirm">${t("mfa.disable_confirm_btn")}</button>
+      </div>
+      <p class="mfa-error hidden" id="mfa-disable-error"></p>
+    </div>
+  `;
+
+  document.getElementById("mfa-disable-cancel").addEventListener("click", () => {
+    formArea.innerHTML = "";
+  });
+
+  document.getElementById("mfa-disable-confirm").addEventListener("click", async () => {
+    const password = document.getElementById("mfa-disable-password").value;
+    const code = document.getElementById("mfa-disable-code").value.trim();
+    const errorEl = document.getElementById("mfa-disable-error");
+    const btn = document.getElementById("mfa-disable-confirm");
+
+    if (!password || code.length !== 6) {
+      errorEl.textContent = t("mfa.fill_all_fields");
+      errorEl.classList.remove("hidden");
+      return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = t("mfa.verifying");
+    errorEl.classList.add("hidden");
+
+    try {
+      await AuthManager.mfaDisable(password, code);
+      showToast(t("mfa.disabled_success"), "success");
+      initMfaSettings();
+    } catch (err) {
+      errorEl.textContent = err.message;
+      errorEl.classList.remove("hidden");
+    } finally {
+      btn.disabled = false;
+      btn.textContent = t("mfa.disable_confirm_btn");
+    }
+  });
+}
+
+
+export { api, AuthManager, initLoginForm, AdminPanel, initMfaSettings };

frontend/js/config.js

@@ -1,5 +1,5 @@
 // config.js — extracted from app.js (3872-4865)
-import { api, AuthManager } from './auth.js';
+import { api, AuthManager, initMfaSettings } from './auth.js';
 import { state } from './state.js';
 import { el, icon, openFile } from './viewer.js';
 import { syncVaultSelectors, setSelectedVaultContext, refreshSidebarForContext, loadVaults, loadVaultSettings, loadTags, TagFilterService, refreshSidebarTreePreservingState } from './sidebar.js';
@@ -663,6 +663,9 @@ function initConfigModal() {
 
   // Init profile
   initProfile();
+
+  // Init MFA settings (security tab)
+  initMfaSettings();
 }
 
 function closeConfigModal() {
@@ -1414,25 +1417,40 @@ export {
 function initThemePicker() {
   import('./themes.js').then(function(mod) {
     var THEMES = mod.THEMES;
+    var AVAILABLE_MODES = mod.AVAILABLE_MODES;
     var applyTheme = mod.applyTheme;
     var getCurrentTheme = mod.getCurrentTheme;
     var getCurrentMode = mod.getCurrentMode;
+    var exportAllThemes = mod.exportAllThemes;
+    var importTheme = mod.importTheme;
+    var deleteCustomTheme = mod.deleteCustomTheme;
+    var loadCustomThemes = mod.loadCustomThemes;
 
     var grid = document.getElementById('theme-grid');
     if (!grid) return;
 
-    var themeKeys = Object.keys(THEMES);
+    // Mode label map (uses i18n t() when available, fallback to English)
+    var modeLabels = {
+      'dark': function() { return t('theme.dark'); },
+      'light': function() { return t('theme.light'); },
+      'high-contrast': function() { return t('theme.high_contrast'); },
+      'sepia': function() { return t('theme.sepia'); }
+    };
 
     function renderCards() {
+      var themeKeys = Object.keys(THEMES);
       var current = getCurrentTheme();
       var mode = getCurrentMode();
       grid.innerHTML = '';
+
       themeKeys.forEach(function(key) {
-        var t = THEMES[key];
-        var v = t.modes[mode];
+        var th = THEMES[key];
+        // Use dark mode for preview if mode not resolved yet
+        var v = th.modes[mode] || th.modes.dark || th.modes.light;
         if (!v) return;
         var card = document.createElement('div');
         card.className = 'theme-card' + (key === current ? ' active' : '');
+        var isCustom = th.desc === 'Custom theme';
         card.innerHTML =
           '<div class="theme-card-preview">' +
             '<div class="theme-card-preview-bar" style="background:' + (v['--bg-sidebar'] || v['--bg-primary']) + '"></div>' +
@@ -1440,33 +1458,101 @@ function initThemePicker() {
               '<div class="theme-card-preview-btn" style="background:' + (v['--accent'] || '#58a6ff') + '"></div>' +
             '</div>' +
           '</div>' +
-          '<div class="theme-card-name">' + t.name + '</div>' +
-          '<div class="theme-card-desc">' + t.desc + '</div>';
+          '<div class="theme-card-name">' + th.name + (isCustom ? ' <span class="theme-custom-badge">✦</span>' : '') + '</div>' +
+          '<div class="theme-card-desc">' + th.desc + '</div>';
         card.addEventListener('click', function() {
           applyTheme(key, mode);
           renderCards();
         });
+        // Right-click to delete custom themes
+        if (isCustom) {
+          card.addEventListener('contextmenu', function(e) {
+            e.preventDefault();
+            if (confirm(t('theme.delete_confirm'))) {
+              deleteCustomTheme(key);
+              renderCards();
+            }
+          });
+        }
         grid.appendChild(card);
       });
-      // Mode toggle
+
+      // Mode toggle — 4 modes
       var toggle = document.createElement('div');
       toggle.className = 'theme-mode-toggle';
-      var dBtn = elBtn(t('theme.dark'), 'dark', mode);
-      var lBtn = elBtn(t('theme.light'), 'light', mode);
-      toggle.appendChild(dBtn);
-      toggle.appendChild(lBtn);
-      grid.appendChild(toggle);
-    }
-
-    function elBtn(label, m, currentMode) {
-      var btn = document.createElement('button');
-      btn.className = 'theme-mode-btn' + (m === currentMode ? ' active' : '');
-      btn.textContent = label;
-      btn.addEventListener('click', function() {
-        applyTheme(getCurrentTheme(), m);
-        renderCards();
+      AVAILABLE_MODES.forEach(function(m) {
+        var btn = document.createElement('button');
+        btn.className = 'theme-mode-btn' + (m === mode ? ' active' : '');
+        btn.textContent = (modeLabels[m] || function() { return m; })();
+        btn.addEventListener('click', function() {
+          applyTheme(getCurrentTheme(), m);
+          renderCards();
+        });
+        toggle.appendChild(btn);
       });
-      return btn;
+      grid.appendChild(toggle);
+
+      // Import/Export buttons
+      var actions = document.createElement('div');
+      actions.className = 'theme-actions';
+
+      var exportBtn = document.createElement('button');
+      exportBtn.className = 'theme-action-btn';
+      exportBtn.textContent = t('theme.export_all');
+      exportBtn.addEventListener('click', function() {
+        var json = exportAllThemes();
+        var blob = new Blob([json], { type: 'application/json' });
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement('a');
+        a.href = url; a.download = 'obsigate-themes.json'; a.click();
+        URL.revokeObjectURL(url);
+      });
+
+      var importBtn = document.createElement('button');
+      importBtn.className = 'theme-action-btn';
+      importBtn.textContent = t('theme.import');
+      importBtn.addEventListener('click', function() {
+        var input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+        input.addEventListener('change', function(e) {
+          var file = e.target.files[0];
+          if (!file) return;
+          var reader = new FileReader();
+          reader.onload = function(ev) {
+            var content = ev.target.result;
+            // Support single theme or all-themes format
+            try {
+              var data = JSON.parse(content);
+              if (data.themes) {
+                // Multi-theme export: import each
+                var count = 0;
+                Object.keys(data.themes).forEach(function(k) {
+                  var res = importTheme(JSON.stringify(data.themes[k]));
+                  if (res.ok) count++;
+                });
+                alert(t('theme.import_success', { count: count }));
+              } else {
+                var res = importTheme(content);
+                if (res.ok) {
+                  alert(t('theme.import_success', { count: 1 }));
+                } else {
+                  alert(t('theme.import_error') + ': ' + res.error);
+                }
+              }
+            } catch(ex) {
+              alert(t('theme.import_error') + ': ' + ex.message);
+            }
+            renderCards();
+          };
+          reader.readAsText(file);
+        });
+        input.click();
+      });
+
+      actions.appendChild(exportBtn);
+      actions.appendChild(importBtn);
+      grid.appendChild(actions);
     }
 
     renderCards();

frontend/locales/en.json

@@ -1377,7 +1377,14 @@
   "theme.change": "Change theme",
   "theme.dark": "Dark",
   "theme.light": "Light",
+  "theme.high_contrast": "High Contrast",
+  "theme.sepia": "Sepia",
   "theme.title": "Theme",
+  "theme.export_all": "Export Themes",
+  "theme.import": "Import Theme",
+  "theme.import_success": "{count} theme(s) imported",
+  "theme.import_error": "Import error",
+  "theme.delete_confirm": "Delete this custom theme?",
   "themes.name_gradients": "Subtle gradients",
   "themes.name_terminal": "Pure black & green",
   "toast.ai_keys_saved": "API keys saved",
@@ -1465,6 +1472,14 @@
   "viewer.download_pdf": "Download as PDF",
   "viewer.edit": "Edit",
   "viewer.error": "Loading error",
+  "viewer.export": "Export",
+  "viewer.export_done": "Export complete",
+  "viewer.export_epub": "Export as ePub",
+  "viewer.export_error": "Export error:",
+  "viewer.export_html": "Export as HTML",
+  "viewer.export_md_bundle": "Export as Markdown bundle (.zip)",
+  "viewer.export_start": "Exporting...",
+  "viewer.export_title": "Export document",
   "viewer.forge_brand": "Forge",
   "viewer.forge_title": "Forge (new editor)",
   "viewer.index_start": "Starting index...",
@@ -1495,5 +1510,41 @@
   "webhook.trigger_dir_create": "Directory creation via API",
   "webhook.trigger_dir_delete": "Directory deletion via API",
   "webhook.trigger_dir_rename": "Directory rename via API",
-  "webhook.trigger_rename": "Rename via API"
+  "webhook.trigger_rename": "Rename via API",
+  "settings.security": "🔒 Account Security",
+  "settings.security_desc": "Enable two-factor authentication (2FA) to strengthen your account security.",
+  "mfa.title": "Two-Factor Authentication",
+  "mfa.subtitle": "Enter the 6-digit code from your authenticator app.",
+  "mfa.verify": "Verify",
+  "mfa.verifying": "Verifying...",
+  "mfa.use_recovery": "Use a recovery code",
+  "mfa.back_to_login": "Back to login",
+  "mfa.recovery_title": "Recovery Code",
+  "mfa.recovery_subtitle": "Enter one of your recovery codes (format: XXXX-XXXX).",
+  "mfa.use_totp": "Use authenticator code",
+  "mfa.status_label": "Two-Factor Authentication",
+  "mfa.enabled": "Enabled",
+  "mfa.disabled": "Disabled",
+  "mfa.enabled_desc": "Your account is protected by two-factor authentication.",
+  "mfa.setup_desc": "Add an extra layer of security to your account with TOTP.",
+  "mfa.enable_btn": "Enable 2FA",
+  "mfa.disable_btn": "Disable 2FA",
+  "mfa.scan_qr": "Scan this QR code with your authenticator app",
+  "mfa.manual_entry": "Manual entry (if you can't scan)",
+  "mfa.enter_code": "Enter the 6-digit code to confirm",
+  "mfa.confirm_enable": "Confirm & Enable",
+  "mfa.recovery_codes_title": "Recovery Codes",
+  "mfa.recovery_codes_warning": "Save these codes in a secure place. Each code can only be used once.",
+  "mfa.copy_codes": "Copy",
+  "mfa.download_codes": "Download",
+  "mfa.done": "Done",
+  "mfa.codes_copied": "Recovery codes copied!",
+  "mfa.disable_confirm_title": "Disable 2FA",
+  "mfa.disable_confirm_desc": "Enter your password and a valid TOTP code to disable two-factor authentication.",
+  "mfa.password_label": "Password",
+  "mfa.password_placeholder": "Your current password",
+  "mfa.totp_code_label": "TOTP Code",
+  "mfa.disable_confirm_btn": "Disable 2FA",
+  "mfa.disabled_success": "2FA has been disabled.",
+  "mfa.fill_all_fields": "Please fill in all fields."
 }

frontend/locales/fr.json

@@ -1377,7 +1377,14 @@
   "theme.change": "Changer le thème",
   "theme.dark": "Sombre",
   "theme.light": "Clair",
+  "theme.high_contrast": "Contraste élevé",
+  "theme.sepia": "Sépia",
   "theme.title": "Thème",
+  "theme.export_all": "Exporter les thèmes",
+  "theme.import": "Importer un thème",
+  "theme.import_success": "{count} thème(s) importé(s)",
+  "theme.import_error": "Erreur d'importation",
+  "theme.delete_confirm": "Supprimer ce thème personnalisé ?",
   "themes.name_gradients": "Degrades subtils",
   "themes.name_terminal": "Noir pur & vert",
   "toast.ai_keys_saved": "Clés API sauvegardées",
@@ -1465,6 +1472,14 @@
   "viewer.download_pdf": "Télécharger en PDF",
   "viewer.edit": "Éditer",
   "viewer.error": "Erreur de chargement",
+  "viewer.export": "Exporter",
+  "viewer.export_done": "Export terminé",
+  "viewer.export_epub": "Exporter en ePub",
+  "viewer.export_error": "Erreur d'export :",
+  "viewer.export_html": "Exporter en HTML",
+  "viewer.export_md_bundle": "Exporter en bundle Markdown (.zip)",
+  "viewer.export_start": "Export en cours...",
+  "viewer.export_title": "Exporter le document",
   "viewer.forge_brand": "Forge",
   "viewer.forge_title": "Forge (nouvel éditeur)",
   "viewer.index_start": "Démarrage index.",
@@ -1495,5 +1510,41 @@
   "webhook.trigger_dir_create": "Création de dossier via API",
   "webhook.trigger_dir_delete": "Suppression de dossier via l'API",
   "webhook.trigger_dir_rename": "Renommage de dossier via l'API",
-  "webhook.trigger_rename": "Renommage via l'API"
+  "webhook.trigger_rename": "Renommage via l'API",
+  "settings.security": "🔒 Sécurité du compte",
+  "settings.security_desc": "Activez l'authentification à deux facteurs (2FA) pour renforcer la sécurité de votre compte.",
+  "mfa.title": "Authentification à deux facteurs",
+  "mfa.subtitle": "Entrez le code à 6 chiffres de votre application d'authentification.",
+  "mfa.verify": "Vérifier",
+  "mfa.verifying": "Vérification...",
+  "mfa.use_recovery": "Utiliser un code de récupération",
+  "mfa.back_to_login": "Retour à la connexion",
+  "mfa.recovery_title": "Code de récupération",
+  "mfa.recovery_subtitle": "Entrez l'un de vos codes de récupération (format : XXXX-XXXX).",
+  "mfa.use_totp": "Utiliser le code authenticator",
+  "mfa.status_label": "Authentification à deux facteurs",
+  "mfa.enabled": "Activée",
+  "mfa.disabled": "Désactivée",
+  "mfa.enabled_desc": "Votre compte est protégé par l'authentification à deux facteurs.",
+  "mfa.setup_desc": "Ajoutez une couche de sécurité supplémentaire à votre compte avec le TOTP.",
+  "mfa.enable_btn": "Activer la 2FA",
+  "mfa.disable_btn": "Désactiver la 2FA",
+  "mfa.scan_qr": "Scannez ce QR code avec votre application d'authentification",
+  "mfa.manual_entry": "Saisie manuelle (si vous ne pouvez pas scanner)",
+  "mfa.enter_code": "Entrez le code à 6 chiffres pour confirmer",
+  "mfa.confirm_enable": "Confirmer et activer",
+  "mfa.recovery_codes_title": "Codes de récupération",
+  "mfa.recovery_codes_warning": "Enregistrez ces codes dans un endroit sûr. Chaque code ne peut être utilisé qu'une seule fois.",
+  "mfa.copy_codes": "Copier",
+  "mfa.download_codes": "Télécharger",
+  "mfa.done": "Terminé",
+  "mfa.codes_copied": "Codes de récupération copiés !",
+  "mfa.disable_confirm_title": "Désactiver la 2FA",
+  "mfa.disable_confirm_desc": "Entrez votre mot de passe et un code TOTP valide pour désactiver l'authentification à deux facteurs.",
+  "mfa.password_label": "Mot de passe",
+  "mfa.password_placeholder": "Votre mot de passe actuel",
+  "mfa.totp_code_label": "Code TOTP",
+  "mfa.disable_confirm_btn": "Désactiver la 2FA",
+  "mfa.disabled_success": "La 2FA a été désactivée.",
+  "mfa.fill_all_fields": "Veuillez remplir tous les champs."
 }

frontend/style.css

@@ -2398,6 +2398,34 @@ select {
   background: var(--accent);
   color: #fff;
 }
+/* Theme import/export actions */
+.theme-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+.theme-action-btn {
+  padding: 5px 14px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.theme-action-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.theme-custom-badge {
+  font-size: 0.6rem;
+  color: var(--accent);
+  margin-left: 2px;
+}
 /* Profile section */
 .profile-form { max-width: 420px; }
 .profile-field { margin-bottom: 14px; }
@@ -8878,3 +8906,103 @@ body.popup-mode .content-area {
     right: 4px;
   }
 }
+
+/* ── MFA (Multi-Factor Authentication) ────────────────────────────────── */
+
+.mfa-challenge {
+  margin-top: 20px;
+  padding: 24px;
+  border-radius: 12px;
+  background: var(--surface, #1a1a2e);
+  border: 1px solid var(--border, #333);
+  text-align: center;
+}
+.mfa-challenge .mfa-icon { font-size: 48px; margin-bottom: 12px; }
+.mfa-challenge h3 { margin: 0 0 8px; color: var(--text, #fff); }
+.mfa-challenge p { color: var(--muted, #999); margin: 0 0 16px; }
+.mfa-code-input {
+  width: 180px;
+  font-size: 28px;
+  text-align: center;
+  letter-spacing: 12px;
+  padding: 12px;
+  border: 2px solid var(--border, #444);
+  border-radius: 8px;
+  background: var(--bg, #0d0d1a);
+  color: var(--text, #fff);
+  font-family: monospace;
+  outline: none;
+}
+.mfa-code-input:focus { border-color: var(--accent, #7C3AED); }
+.mfa-code-input-group { display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 12px; }
+.mfa-code-input-group span { color: var(--muted, #999); font-size: 24px; }
+.mfa-link-btn {
+  background: none; border: none; color: var(--accent, #7C3AED);
+  cursor: pointer; font-size: 13px; text-decoration: underline;
+}
+.mfa-link-btn:hover { opacity: 0.8; }
+.mfa-error { color: #e74c3c; font-size: 13px; margin-top: 8px; }
+.mfa-recovery-input { width: 200px; font-size: 20px; letter-spacing: 4px; }
+
+/* MFA Settings (Security tab) */
+.mfa-status-section { padding: 16px 0; }
+.mfa-status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.mfa-badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600;
+}
+.mfa-badge-on { background: #1a3a2a; color: #4ade80; }
+.mfa-badge-off { background: #3a2a1a; color: #f59e0b; }
+.mfa-status-label { color: var(--text, #fff); font-weight: 500; }
+
+/* MFA Setup card */
+.mfa-setup-card {
+  padding: 20px; border-radius: 10px;
+  background: var(--surface2, #1e1e3a); border: 1px solid var(--border, #333);
+}
+.mfa-setup-card h4 { margin: 0 0 12px; color: var(--text, #fff); }
+.mfa-qr-container { text-align: center; margin: 16px 0; }
+.mfa-qr-code img, .mfa-qr-code canvas { max-width: 200px; border-radius: 8px; }
+.mfa-secret-details { margin-top: 12px; }
+.mfa-secret-code {
+  font-family: monospace; font-size: 14px; padding: 8px 12px;
+  background: var(--bg, #0d0d1a); border-radius: 6px;
+  color: var(--accent, #7C3AED); cursor: pointer; user-select: all;
+  display: inline-block;
+}
+.mfa-info-text { color: var(--muted, #999); font-size: 13px; margin: 8px 0; }
+.mfa-subtitle { color: var(--muted, #999); font-size: 13px; margin: 0 0 16px; }
+.mfa-verify-section { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
+.mfa-actions { margin-top: 16px; }
+
+/* MFA Recovery codes display */
+.mfa-recovery-card {
+  padding: 20px; border-radius: 10px;
+  background: var(--surface2, #1e1e3a); border: 1px solid var(--border, #333);
+  margin-top: 16px;
+}
+.mfa-recovery-card h4 { margin: 0 0 8px; color: var(--text, #fff); }
+.mfa-recovery-list {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px;
+  margin: 12px 0; list-style: none; padding: 0;
+}
+.mfa-recovery-code {
+  font-family: monospace; font-size: 14px; padding: 4px 8px;
+  background: var(--bg, #0d0d1a); border-radius: 4px;
+  color: var(--text, #fff); letter-spacing: 1px;
+}
+.mfa-recovery-actions { display: flex; gap: 8px; margin-top: 12px; }
+
+/* MFA Disable card */
+.mfa-disable-card {
+  padding: 16px; border-radius: 10px;
+  background: var(--surface2, #1e1e3a); border: 1px solid #e74c3c33;
+  margin-top: 16px;
+}
+.mfa-disable-card h4 { margin: 0 0 8px; color: #e74c3c; }
+.mfa-disable-actions { display: flex; gap: 8px; margin-top: 12px; }
+
+.mfa-warning {
+  color: #f59e0b; font-size: 13px; padding: 8px 12px;
+  background: #3a2a1a; border-radius: 6px; margin-top: 8px;
+}