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/document-editor.css

@@ -2276,3 +2276,122 @@ img.docImage {
     flex-direction: column;
   }
 }
+
+/* ---- Modale "Utiliser un modèle" (voir static/document/js/
+   document-editor.js, forgeDocOpenTemplateModal) : liste des thèmes du
+   catalogue à gauche, aperçu RÉEL du thème sélectionné (chargé dans un
+   <iframe> pointant sur /document/<slug>/theme/<id>/preview, jamais un
+   style recopié à la main) à droite. Plus large que la modale générique
+   par défaut (comme #docScenarioTreeModal ci-dessus), pour laisser de
+   la place à l'aperçu. ---- */
+.docModalDialog--wide {
+  width: min(980px, 95vw);
+  max-height: min(85vh, 760px);
+}
+
+.docTemplateModalBody {
+  display: flex;
+  gap: 0;
+  padding: 0;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.docTemplateList {
+  width: 260px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--doc-border);
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.docTemplateCard {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: 1px solid var(--doc-border);
+  border-radius: 10px;
+  background: var(--doc-card);
+  color: var(--doc-text);
+  padding: 10px 12px;
+  cursor: pointer;
+}
+
+.docTemplateCard.is-active {
+  border-color: var(--doc-accent);
+  box-shadow: 0 0 0 1px var(--doc-accent);
+}
+
+.docTemplateCardName {
+  font-size: 13.5px;
+  font-weight: 700;
+}
+
+.docTemplateCardCategory {
+  font-size: 11.5px;
+  color: var(--doc-muted);
+  margin-top: 2px;
+}
+
+.docTemplatePreviewPane {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--doc-bg);
+}
+
+.docTemplatePreviewFrame {
+  flex: 1;
+  min-height: 0;
+  border: none;
+  display: none;
+}
+
+.docTemplatePreviewFrame.is-visible {
+  display: block;
+}
+
+.docTemplatePreviewEmpty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--doc-muted);
+  font-size: 13px;
+  text-align: center;
+  padding: 24px;
+}
+
+.docTemplatePreviewActions {
+  flex-shrink: 0;
+  display: flex;
+  gap: 10px;
+  padding: 14px 16px;
+  border-top: 1px solid var(--doc-border);
+}
+
+.docTemplatePreviewActions[hidden] {
+  display: none;
+}
+
+.docTemplatePreviewActions .docBtnSecondary {
+  flex: 1;
+  justify-content: center;
+}
+
+@media (width <= 720px) {
+  .docTemplateModalBody {
+    flex-direction: column;
+  }
+
+  .docTemplateList {
+    width: 100%;
+    max-height: 160px;
+    border-right: none;
+    border-bottom: 1px solid var(--doc-border);
+  }
+}