Modale "Utiliser un modèle" en plein écran, deux colonnes égales

Demande explicite : la modale occupe maintenant tout l'écran (100vw/
100vh, plus de padding/coins arrondis hérités de la modale générique),
divisée en deux colonnes strictement égales (grid-template-columns:
1fr 1fr) — la liste des thèmes devient une grille de cartes à gauche,
l'aperçu occupe toute la colonne de droite.

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

static/document/document-editor.css

@@ -2281,55 +2281,60 @@ img.docImage {
 }
 
 /* ---- Modale "Utiliser un modèle" (voir static/document/js/
-   document-editor.js, forgeDocOpenTemplateModal) : liste des thèmes du
+   document-editor.js, forgeDocOpenTemplateModal) : PLEIN ÉCRAN (retour
-   catalogue à gauche, aperçu RÉEL du thème sélectionné (chargé dans un
+   utilisateur du 24/09/2026 : "la modale dois occuper tous l'écran"),
-   <iframe> pointant sur /document/<slug>/theme/<id>/preview, jamais un
+   divisée en deux colonnes STRICTEMENT ÉGALES — à gauche une grille de
-   style recopié à la main) à droite. Plus large que la modale générique
+   cartes (une par thème du catalogue), à droite l'aperçu RÉEL du thème
-   par défaut (comme #docScenarioTreeModal ci-dessus), pour laisser de
+   sélectionné (chargé dans un <iframe> pointant sur
-   la place à l'aperçu. ---- */
+   /document/<slug>/theme/<id>/preview, jamais un style recopié à la
-.docModalDialog--wide {
+   main). #docTemplateModal remplace ici .docModalBackdrop/.docModalDialog
-  width: min(980px, 95vw);
+   par sa propre géométrie plutôt que la modale générique centrée/à
+   padding fixe (voir .docModalBackdrop/.docModalDialog de base
+   ci-dessus, toujours utilisées telles quelles par #docScenarioTreeModal). ---- */
+#docTemplateModal.docModalBackdrop {
+  padding: 0;
+}
 
-  /* height explicite, pas seulement max-height (comme la base
+.docModalDialog--wide {
-     .docModalDialog) : sans elle, le dialogue flex se limite à la
+  width: 100vw;
-     hauteur naturelle de son contenu et l'iframe d'aperçu (flex:1 dans
+  height: 100vh;
-     .docTemplatePreviewPane) n'a plus aucune hauteur de référence pour
+  max-height: 100vh;
-     se déployer — elle retombe à sa hauteur intrinsèque minuscule (bug
+  border-radius: 0;
-     réel constaté le 24/09/2026, capture à l'appui : "container trop
-     petit"). */
-  height: min(85vh, 760px);
-  max-height: min(85vh, 760px);
 }
 
 .docTemplateModalBody {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 0;
   padding: 0;
   overflow: hidden;
   min-height: 0;
+  flex: 1;
 }
 
 .docTemplateList {
-  width: 260px;
+  min-height: 0;
-  flex-shrink: 0;
-  border-right: 1px solid var(--doc-border);
   overflow-y: auto;
-  padding: 12px;
+  padding: 24px;
-  display: flex;
+  border-right: 1px solid var(--doc-border);
-  flex-direction: column;
+  display: grid;
-  gap: 6px;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  align-content: start;
+  gap: 16px;
 }
 
 .docTemplateCard {
-  display: block;
+  display: flex;
-  width: 100%;
+  flex-direction: column;
+  gap: 6px;
   text-align: left;
   border: 1px solid var(--doc-border);
-  border-radius: 10px;
+  border-radius: 12px;
   background: var(--doc-card);
   color: var(--doc-text);
-  padding: 10px 12px;
+  padding: 18px;
   cursor: pointer;
+  min-height: 100px;
 }
 
 .docTemplateCard.is-active {
@@ -2338,19 +2343,18 @@ img.docImage {
 }
 
 .docTemplateCardName {
-  font-size: 13.5px;
+  font-size: 15px;
   font-weight: 700;
 }
 
 .docTemplateCardCategory {
-  font-size: 11.5px;
+  font-size: 12px;
   color: var(--doc-muted);
-  margin-top: 2px;
 }
 
 .docTemplatePreviewPane {
-  flex: 1;
   min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   background: var(--doc-bg);
@@ -2397,12 +2401,12 @@ img.docImage {
 
 @media (width <= 720px) {
   .docTemplateModalBody {
-    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
   }
 
   .docTemplateList {
-    width: 100%;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    max-height: 160px;
     border-right: none;
     border-bottom: 1px solid var(--doc-border);
   }