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>

templates/document/document_edit.html

@@ -5,6 +5,13 @@
 {% block extra_head %}
   <link rel="stylesheet"
         href="{{ url_for('static', filename='document/document-editor.css') }}">
+  {% if active_theme %}
+    {% if active_theme.font_url %}
+      <link rel="stylesheet" href="{{ active_theme.font_url }}">
+    {% endif %}
+    <link rel="stylesheet"
+          href="{{ url_for('static', filename=active_theme.css_path) }}">
+  {% endif %}
 {% endblock %}
 {% block content %}
   <div class="docEditor3" id="docEditor3" data-slug="{{ support.slug }}">
@@ -76,6 +83,23 @@
             <circle cx="12" cy="12" r="3" />
           </svg><span class="docBtnLabel">Aperçu</span>
         </button>
+        <button type="button"
+                class="docBtnSecondary"
+                id="docTemplateBtn">
+          <svg width="16"
+               height="16"
+               viewBox="0 0 24 24"
+               fill="none"
+               stroke="currentColor"
+               stroke-width="1.8"
+               stroke-linecap="round"
+               stroke-linejoin="round">
+            <rect x="3" y="3" width="7" height="7" rx="1" />
+            <rect x="14" y="3" width="7" height="7" rx="1" />
+            <rect x="3" y="14" width="7" height="7" rx="1" />
+            <rect x="14" y="14" width="7" height="7" rx="1" />
+          </svg><span class="docBtnLabel">Utiliser un modèle</span>
+        </button>
         <div class="docDividerV"></div>
         <div class="docWidthPicker"
              id="docWidthPicker"
@@ -226,13 +250,42 @@
       <div class="docModalBody" id="docScenarioTreeModalBody"></div>
     </div>
   </div>
+  <div class="docModalBackdrop" id="docTemplateModal">
+    <div class="docModalDialog docModalDialog--wide">
+      <div class="docModalHeader">
+        <span class="docModalTitle">Utiliser un modèle</span>
+        <button type="button"
+                class="docModalCloseBtn"
+                id="docTemplateModalClose"
+                aria-label="Fermer">✕</button>
+      </div>
+      <div class="docModalBody docTemplateModalBody">
+        <div class="docTemplateList" id="docTemplateList"></div>
+        <div class="docTemplatePreviewPane">
+          <iframe class="docTemplatePreviewFrame"
+                  id="docTemplatePreviewFrame"
+                  title="Aperçu du modèle"></iframe>
+          <div class="docTemplatePreviewEmpty"
+               id="docTemplatePreviewEmpty">Sélectionnez un modèle pour le visualiser.</div>
+          <div class="docTemplatePreviewActions"
+               id="docTemplatePreviewActions"
+               hidden>
+            <button type="button" class="docBtnSecondary" id="docTemplateKeepContentBtn">Utiliser mon contenu actuel</button>
+            <button type="button" class="docBtnSecondary docBtnPrimary" id="docTemplateUseContentBtn">Utiliser le contenu du modèle</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <script>
 window.FORGE_DOCUMENT = {
   slug: {{ support.slug|tojson }},
   elements: {{ elements|tojson }},
   elementKindLabels: {{ element_kind_labels|tojson }},
   pages: {{ pages|tojson }},
-  activePageId: {{ active_page.id|tojson }}
+  activePageId: {{ active_page.id|tojson }},
+  themes: {{ document_themes|tojson }},
+  activeThemeId: {{ support.theme|tojson }}
 };
   </script>
   <script src="{{ url_for('static', filename='document/js/document-editor.js') }}"></script>

templates/document/document_theme_preview.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Aperçu — {{ theme.name }}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="{{ url_for('static', filename='document/document-editor.css') }}">
+  {% if theme.font_url %}
+  <link rel="stylesheet" href="{{ theme.font_url }}">
+  {% endif %}
+  <link rel="stylesheet" href="{{ url_for('static', filename=theme.css_path) }}">
+  <style>
+    html, body {
+      margin: 0;
+      padding: 16px;
+      background: #efece4;
+      display: flex;
+      justify-content: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="docPage">
+    <div class="docPageContent">
+      {{ rendered_page | safe }}
+    </div>
+  </div>
+</body>
+</html>