Ajoute le système de modèles/thèmes de document ("Utiliser un modèle")

Nouveau bouton dans le topbar de l'éditeur, à côté d'Aperçu, qui ouvre
une modale listant les thèmes du catalogue (document_engine/themes/).
Cliquer un thème charge un VRAI aperçu (rendu serveur réel dans un
iframe, jamais une resucée CSS côté client) avec le choix de garder le
contenu actuel ou de le remplacer par le contenu de démonstration du
modèle.

Architecture pensée pour une centaine de thèmes futurs : chaque thème
est une feuille de style externe (static/document/themes/<id>.css) qui
habille les classes fixes du moteur, jamais du code qui en changerait
la structure. Premier thème implémenté pour valider le mécanisme :
"Sécurité Incendie" (6 pages de contenu réel, quiz inclus).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

static/document/js/document-editor.js

@@ -2839,6 +2839,107 @@ function forgeDocBindScenarioTreeModal() {
   });
 }
 
+/* ---------------------------------------------------------------------
+ * Modale "Utiliser un modèle" — liste les thèmes du catalogue (voir
+ * document_engine/themes/theme_catalog.py, transmis tel quel via
+ * FORGE_DOCUMENT.themes) et prévisualise RÉELLEMENT le thème sélectionné
+ * dans un <iframe> pointant sur /document/<slug>/theme/<id>/preview
+ * (jamais un style recopié à la main côté client — ce qui est
+ * prévisualisé est exactement ce qui s'affichera une fois appliqué).
+ * ------------------------------------------------------------------- */
+
+// eslint-disable-next-line no-var, vars-on-top
+var forgeDocSelectedTemplateId = null;
+
+function forgeDocRenderTemplateList() {
+  const list = document.getElementById('docTemplateList');
+  const themes = window.FORGE_DOCUMENT.themes || [];
+  if (!themes.length) {
+    list.innerHTML = '<div class="docEmptyState">Aucun modèle disponible pour le moment.</div>';
+    return;
+  }
+  list.innerHTML = themes.map((t) => `
+    <button type="button" class="docTemplateCard ${t.id === forgeDocSelectedTemplateId ? 'is-active' : ''}" data-theme-id="${t.id}">
+      <div class="docTemplateCardName">${forgeDocEscapeHtml(t.name)}</div>
+      <div class="docTemplateCardCategory">${forgeDocEscapeHtml(t.category)}</div>
+    </button>
+  `).join('');
+  list.querySelectorAll('.docTemplateCard').forEach((btn) => {
+    btn.addEventListener('click', () => forgeDocSelectTemplate(btn.dataset.themeId));
+  });
+}
+
+function forgeDocSelectTemplate(themeId) {
+  forgeDocSelectedTemplateId = themeId;
+  forgeDocRenderTemplateList();
+  const frame = document.getElementById('docTemplatePreviewFrame');
+  const empty = document.getElementById('docTemplatePreviewEmpty');
+  const actions = document.getElementById('docTemplatePreviewActions');
+  frame.src = `/document/${window.forgeDocState.slug}/theme/${themeId}/preview`;
+  frame.classList.add('is-visible');
+  empty.hidden = true;
+  actions.hidden = false;
+}
+
+function forgeDocApplyTemplate(mode) {
+  if (!forgeDocSelectedTemplateId) return;
+  if (mode === 'template_content') {
+    const confirmed = window.confirm( // eslint-disable-line no-alert
+      'Remplacer tout le contenu actuel du document par le contenu de démonstration de ce modèle ? Cette action est irréversible.',
+    );
+    if (!confirmed) return;
+  }
+  fetch(`/document/${window.forgeDocState.slug}/theme/apply`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ theme_id: forgeDocSelectedTemplateId, mode }),
+  }).then((r) => r.json()).then((result) => {
+    if (result.error) { alert(result.error); return; } // eslint-disable-line no-alert
+    // Le thème change le CSS chargé en <head> (voir templates/document/
+    // document_edit.html, extra_head) et potentiellement tout le contenu
+    // (mode "template_content") — un rechargement complet est le seul
+    // moyen simple de rester synchronisé avec la vérité serveur, jamais
+    // une resynchronisation partielle de l'état client ici.
+    window.location.reload();
+  });
+}
+
+function forgeDocOpenTemplateModal() {
+  document.getElementById('docTemplateModal').classList.add('is-open');
+  forgeDocSelectedTemplateId = window.FORGE_DOCUMENT.activeThemeId || null;
+  forgeDocRenderTemplateList();
+  const frame = document.getElementById('docTemplatePreviewFrame');
+  const empty = document.getElementById('docTemplatePreviewEmpty');
+  const actions = document.getElementById('docTemplatePreviewActions');
+  if (forgeDocSelectedTemplateId) {
+    forgeDocSelectTemplate(forgeDocSelectedTemplateId);
+  } else {
+    frame.classList.remove('is-visible');
+    frame.src = 'about:blank';
+    empty.hidden = false;
+    actions.hidden = true;
+  }
+}
+
+function forgeDocCloseTemplateModal() {
+  document.getElementById('docTemplateModal').classList.remove('is-open');
+  document.getElementById('docTemplatePreviewFrame').src = 'about:blank';
+}
+
+function forgeDocBindTemplateModal() {
+  document.getElementById('docTemplateBtn').addEventListener('click', forgeDocOpenTemplateModal);
+  document.getElementById('docTemplateModalClose').addEventListener('click', forgeDocCloseTemplateModal);
+  document.getElementById('docTemplateModal').addEventListener('click', (e) => {
+    if (e.target.id === 'docTemplateModal') forgeDocCloseTemplateModal();
+  });
+  document.getElementById('docTemplateKeepContentBtn').addEventListener('click', () => forgeDocApplyTemplate('keep_content'));
+  document.getElementById('docTemplateUseContentBtn').addEventListener('click', () => forgeDocApplyTemplate('template_content'));
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    if (document.getElementById('docTemplateModal').classList.contains('is-open')) forgeDocCloseTemplateModal();
+  });
+}
+
 function forgeDocRenderProps(el) {
   const panel = document.getElementById('docPropsPanel');
   if (!el) {
@@ -3032,6 +3133,7 @@ function forgeDocInit() {
   forgeDocBindMobileNav();
   forgeDocBindKeyboardShortcuts();
   forgeDocBindScenarioTreeModal();
+  forgeDocBindTemplateModal();
   forgeDocBindSidebarTabs();
   forgeDocRenderPageManagerList();
   forgeDocBindPageManagerDrag();