From bd8f1d4b1e78cade9a8c8f4d4312589eed2103d2 Mon Sep 17 00:00:00 2001
From: william <you@example.com>
Date: Thu, 24 Sep 2026 09:43:22 +0200
Subject: [PATCH] =?UTF-8?q?Modale=20"Utiliser=20un=20mod=C3=A8le"=20en=20p?=
 =?UTF-8?q?lein=20=C3=A9cran,=20deux=20colonnes=20=C3=A9gales?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 76 +++++++++++++++--------------
 1 file changed, 40 insertions(+), 36 deletions(-)

diff --git a/static/document/document-editor.css b/static/document/document-editor.css
index 352a2587..70b1079d 100644
--- a/static/document/document-editor.css
+++ b/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
-   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);
+   document-editor.js, forgeDocOpenTemplateModal) : PLEIN ÉCRAN (retour
+   utilisateur du 24/09/2026 : "la modale dois occuper tous l'écran"),
+   divisée en deux colonnes STRICTEMENT ÉGALES — à gauche une grille de
+   cartes (une par thème du catalogue), à droite l'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). #docTemplateModal remplace ici .docModalBackdrop/.docModalDialog
+   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) : sans elle, le dialogue flex se limite à la
-     hauteur naturelle de son contenu et l'iframe d'aperçu (flex:1 dans
-     .docTemplatePreviewPane) n'a plus aucune hauteur de référence pour
-     se déployer — elle retombe à sa hauteur intrinsèque minuscule (bug
-     réel constaté le 24/09/2026, capture à l'appui : "container trop
-     petit"). */
-  height: min(85vh, 760px);
-  max-height: min(85vh, 760px);
+.docModalDialog--wide {
+  width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
 }
 
 .docTemplateModalBody {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 0;
   padding: 0;
   overflow: hidden;
   min-height: 0;
+  flex: 1;
 }
 
 .docTemplateList {
-  width: 260px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--doc-border);
+  min-height: 0;
   overflow-y: auto;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+  padding: 24px;
+  border-right: 1px solid var(--doc-border);
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  align-content: start;
+  gap: 16px;
 }
 
 .docTemplateCard {
-  display: block;
-  width: 100%;
+  display: flex;
+  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%;
-    max-height: 160px;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     border-right: none;
     border-bottom: 1px solid var(--doc-border);
   }