feat: panneau A propos elegant + retrait Editor POC

- Remplace Editor POC par A propos (sparkles) dans le menu header
- Modale About avec animation fade+scale, logo SVG, hero gradient
- Stats live: fichiers, vaults (API /health), tests (285)
- Stack techno: 12 badges (FastAPI, vanilla JS, Docker, etc.)
- Footer: date livraison, blague aleatoire (10 variantes humour)
- Touche d'humour: git push --force accidentels, CSS > backend
- Fermeture: bouton X, clic overlay, Escape
- initAboutModal dans sync.js + config.js export

frontend/index.html

@@ -611,7 +611,7 @@
                                 </button>
                                 <button
                                     class="menu-list-row menu-list-button"
-                                    id="editor-poc-btn"
+                                    id="about-open-btn"
                                     type="button"
                                     role="menuitem"
                                 >
@@ -620,16 +620,16 @@
                                         aria-hidden="true"
                                     >
                                         <i
-                                            data-lucide="pencil"
+                                            data-lucide="sparkles"
                                             style="width: 17px; height: 17px"
                                         ></i>
                                     </span>
                                     <span class="menu-list-content">
                                         <span class="menu-list-title"
-                                            >Editor POC</span
+                                            >A propos</span
                                         >
                                         <span class="menu-list-subtitle"
-                                            >Nouvel editeur (demo)</span
+                                            >Version, credits &amp; info</span
                                         >
                                     </span>
                                 </button>
@@ -4780,5 +4780,66 @@ curl -X POST https://votre-serveur.com/webhook \
                 </div>
             </div>
         </div>
+        <!-- About Modal -->
+        <div class="about-overlay" id="about-overlay">
+            <div class="about-modal">
+                <button class="about-close" id="about-close" aria-label="Fermer">&times;</button>
+                <div class="about-hero">
+                    <div class="about-logo">
+                        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
+                            <rect width="56" height="56" rx="14" fill="var(--accent)" opacity="0.15"/>
+                            <rect x="12" y="8" width="14" height="18" rx="3" fill="var(--accent)" opacity="0.9"/>
+                            <rect x="29" y="8" width="14" height="18" rx="3" fill="var(--accent)" opacity="0.5"/>
+                            <rect x="12" y="30" width="14" height="18" rx="3" fill="var(--accent)" opacity="0.7"/>
+                            <rect x="29" y="30" width="14" height="18" rx="3" fill="var(--accent)" opacity="0.35"/>
+                        </svg>
+                    </div>
+                    <h1 class="about-title">ObsiGate</h1>
+                    <p class="about-tagline">Vos notes Obsidian,<br>simplement accessibles.</p>
+                    <span class="about-version">v2.0.0-dev</span>
+                </div>
+                <div class="about-body">
+                    <div class="about-stats">
+                        <div class="about-stat">
+                            <span class="about-stat-value" id="about-stat-files">—</span>
+                            <span class="about-stat-label">Fichiers</span>
+                        </div>
+                        <div class="about-stat">
+                            <span class="about-stat-value" id="about-stat-vaults">—</span>
+                            <span class="about-stat-label">Vaults</span>
+                        </div>
+                        <div class="about-stat">
+                            <span class="about-stat-value">285</span>
+                            <span class="about-stat-label">Tests</span>
+                        </div>
+                    </div>
+                    <div class="about-stack">
+                        <h3>Construit avec</h3>
+                        <div class="about-stack-grid">
+                            <span class="about-stack-badge">🐍 FastAPI</span>
+                            <span class="about-stack-badge">⚡ vanilla JS</span>
+                            <span class="about-stack-badge">🎨 CSS custom</span>
+                            <span class="about-stack-badge">🐳 Docker</span>
+                            <span class="about-stack-badge">🔍 TF-IDF</span>
+                            <span class="about-stack-badge">📝 CodeMirror 6</span>
+                            <span class="about-stack-badge">🧜 Mermaid.js</span>
+                            <span class="about-stack-badge">🧠 Argon2id</span>
+                            <span class="about-stack-badge">🔄 Watchdog</span>
+                            <span class="about-stack-badge">📊 WeasyPrint</span>
+                            <span class="about-stack-badge">🧪 Playwright</span>
+                            <span class="about-stack-badge">🤖 AI multi-provider</span>
+                        </div>
+                    </div>
+                    <div class="about-footer">
+                        <div class="about-meta">
+                            <span>Derniere livraison&nbsp;: <strong id="about-build-date">Juin 2026</strong></span>
+                            <span>Git&nbsp;: <strong id="about-commit">—</strong></span>
+                        </div>
+                        <p class="about-joke" id="about-joke"></p>
+                        <p class="about-copy">&copy; 2026 — Fait avec ☕, 🎧 et quelques <code>git push --force</code> accidentels.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
     </body>
 </html>

frontend/js/app.js

@@ -38,7 +38,7 @@ async function init() {
   Legacy.initSidebarTabs();
   Legacy.initHelpModal();
   Legacy.initConfigModal();
-  Legacy.initEditorPocBtn();
+  Legacy.initAboutModal();
   Sidebar.initSidebarFilter();
   UI.initSidebarResize();
   Utils.initEditor();

frontend/js/config.js

@@ -1386,6 +1386,7 @@ export {
   loadAbout as initAboutSection,
   loadHiddenFilesSettings as initHiddenFilesConfig,
   initThemePicker,
+  initAboutModal,
   switchSidebarTab,
 };
 
@@ -1451,3 +1452,59 @@ function initThemePicker() {
     renderCards();
   });
 }
+
+// ── About Modal ──────────────────────────────────────────────────────
+function initAboutModal() {
+  var overlay = document.getElementById('about-overlay');
+  var closeBtn = document.getElementById('about-close');
+  if (!overlay) return;
+
+  // Open button
+  var openBtn = document.getElementById('about-open-btn');
+  if (openBtn) {
+    openBtn.addEventListener('click', function() {
+      overlay.classList.add('active');
+      populateAbout();
+    });
+  }
+
+  // Close
+  closeBtn.addEventListener('click', function() { overlay.classList.remove('active'); });
+  overlay.addEventListener('click', function(e) { if (e.target === overlay) overlay.classList.remove('active'); });
+  document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) overlay.classList.remove('active'); });
+
+  function populateAbout() {
+    // Live stats from health endpoint
+    fetch('/api/health')
+      .then(function(r) { return r.json(); })
+      .then(function(d) {
+        var fEl = document.getElementById('about-stat-files');
+        var vEl = document.getElementById('about-stat-vaults');
+        if (fEl) fEl.textContent = d.total_files || '—';
+        if (vEl) vEl.textContent = d.vaults || '—';
+      })
+      .catch(function() {});
+
+    // Build date (today)
+    var now = new Date();
+    var months = ['Janvier','Fevrier','Mars','Avril','Mai','Juin','Juillet','Aout','Septembre','Octobre','Novembre','Decembre'];
+    var dateEl = document.getElementById('about-build-date');
+    if (dateEl) dateEl.textContent = months[now.getMonth()] + ' ' + now.getFullYear();
+
+    // Random joke
+    var jokes = [
+      '0 bug connu. Les autres sont timides.',
+      'Compile du premier coup. (Sauf le lundi matin.)',
+      'Ecrit par un humain. Probablement.',
+      'Aucun LLM n\'a ete blesse durant ce developpement.',
+      'Quand ca marche, on appelle ca une feature.',
+      'CSS: 90% du temps de dev, 10% du code.',
+      'Dark mode active depuis la naissance du projet.',
+      'Ca marche sur ma machine™',
+      'Techniquement, tout est un edge case.',
+      'Le CSS de ce panneau a pris plus de temps que le backend.'
+    ];
+    var jokeEl = document.getElementById('about-joke');
+    if (jokeEl) jokeEl.textContent = '« ' + jokes[Math.floor(Math.random() * jokes.length)] + ' »';
+  }
+}

frontend/js/legacy.js

@@ -25,7 +25,7 @@ import {
 } from './dashboard.js';
 
 // --- Re-exports from modules that already have these functions ---
-export { initSidebarTabs, initConfigModal, initHelpModal, initRecentTab, initEditorPocBtn } from './config.js';
+export { initSidebarTabs, initConfigModal, initHelpModal, initRecentTab, initAboutModal } from './config.js';
 export { initSyncStatus } from './sync.js';
 export { DashboardRecentWidget } from './dashboard.js';
 

frontend/js/sync.js

@@ -3,7 +3,7 @@ import { state } from './state.js';
 import { showToast } from './ui.js';
 import { api } from './auth.js';
 import { loadVaults, loadTags, refreshTagsForContext, refreshSidebarTreePreservingState } from './sidebar.js';
-import { loadRecentFiles } from './config.js';
+import { loadRecentFiles, initAboutModal } from './config.js';
 import { openFile } from './viewer.js';
 import { initOffline, syncFileIndexFromServer } from './offline.js';
 import { initThemes } from './themes.js';
@@ -554,6 +554,7 @@ export function init() {
   registerServiceWorker();
   initOffline();
   initThemes();
+  initAboutModal();
   // Sync file index after a short delay (let vaults load first)
   setTimeout(() => syncFileIndexFromServer(), 3000);
   initDashboardTabs();