From 7730b3688f67d35cacd2baf0d6ad92942546f681 Mon Sep 17 00:00:00 2001
From: william <you@example.com>
Date: Thu, 24 Sep 2026 09:58:31 +0200
Subject: [PATCH] =?UTF-8?q?Corrige=20la=20modale=20"Utiliser=20un=20mod?=
 =?UTF-8?q?=C3=A8le"=20:=20aucune=20s=C3=A9lection=20par=20d=C3=A9faut,=20?=
 =?UTF-8?q?aper=C3=A7u=20plein=20espace,=20navigation=20entre=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Trois retours distincts :
- Plus de présélection du thème déjà appliqué à l'ouverture — un choix
  toujours explicite de l'utilisateur.
- L'état vide (.docTemplatePreviewEmpty) restait visible EN MÊME TEMPS
  que l'iframe une fois un thème sélectionné : `display:flex` posé
  directement dessus battait le `display:none` natif de [hidden]
  (même bug déjà rencontré pour .docSidebarTabPanel[hidden] plus tôt
  dans le projet) — les deux se partageaient flex:1, coupant l'aperçu
  en deux au lieu de lui laisser tout l'espace.
- L'aperçu ne montrait que la première page du modèle sans aucun moyen
  d'en voir les autres : la route /document/<slug>/theme/<id>/preview
  rend désormais TOUTES les pages, une barre Précédent/Suivant
  (entièrement côté client, aucun aller-retour serveur supplémentaire)
  permet de naviguer entre elles.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 routes/document/document_theme_preview.py     | 23 +++--
 static/document/document-editor.css           | 11 +++
 static/document/js/document-editor.js         | 18 ++--
 .../document/document_theme_preview.html      | 89 ++++++++++++++++++-
 tests/document/test_document_routes.py        | 13 ++-
 5 files changed, 131 insertions(+), 23 deletions(-)

diff --git a/routes/document/document_theme_preview.py b/routes/document/document_theme_preview.py
index 63c090ac..c4bf0a7d 100644
--- a/routes/document/document_theme_preview.py
+++ b/routes/document/document_theme_preview.py
@@ -8,16 +8,23 @@ from core.flask_app import app
 @app.route("/document/<slug>/theme/<theme_id>/preview")
 def document_theme_preview(slug: str, theme_id: str) -> str:
     """Aperçu isolé (destiné à un <iframe>, voir la modale "Utiliser un
-    modèle" dans static/document/js/document-editor.js) de la première
-    page de démonstration d'un thème — RÉELLEMENT rendue par le moteur
+    modèle" dans static/document/js/document-editor.js) de TOUTES les
+    pages de démonstration d'un thème — RÉELLEMENT rendues par le moteur
     (document_engine.render_document), jamais une image statique ou une
     resucée manuelle du CSS : ce qui est prévisualisé est EXACTEMENT ce
-    qui s'affichera une fois le thème appliqué. `slug` sert uniquement à
-    la garde de propriété (core/auth_guard.py, générique sur toute route
-    <slug>) — l'aperçu ne dépend d'aucune donnée de CE support."""
+    qui s'affichera une fois le thème appliqué. La navigation entre pages
+    (retour utilisateur du 24/09/2026 : "je dois pouvoir naviguer dans
+    l'aperçu pour voir toutes les pages") se fait entièrement côté
+    client dans le template, jamais par un nouvel aller-retour serveur —
+    toutes les pages sont déjà rendues ici en une fois. `slug` sert
+    uniquement à la garde de propriété (core/auth_guard.py, générique
+    sur toute route <slug>) — l'aperçu ne dépend d'aucune donnée de CE
+    support."""
     theme = document_engine.get_document_theme_entry(theme_id)
     if theme is None:
         raise NotFound
-    elements = document_engine.seed_blocks_to_elements(theme["seed_pages"][0])
-    rendered_page = document_engine.render_document(elements)
-    return render_template("document/document_theme_preview.html", theme=theme, rendered_page=rendered_page)
+    rendered_pages = [
+        document_engine.render_document(document_engine.seed_blocks_to_elements(page_blocks))
+        for page_blocks in theme["seed_pages"]
+    ]
+    return render_template("document/document_theme_preview.html", theme=theme, rendered_pages=rendered_pages)
diff --git a/static/document/document-editor.css b/static/document/document-editor.css
index 70b1079d..8d467716 100644
--- a/static/document/document-editor.css
+++ b/static/document/document-editor.css
@@ -2382,6 +2382,17 @@ img.docImage {
   padding: 24px;
 }
 
+/* `display: flex` ci-dessus est une règle AUTEUR, qui bat TOUJOURS le
+   `display: none` d'origine UA de [hidden] quelle que soit la
+   spécificité/l'ordre (même bug déjà rencontré pour
+   .docSidebarTabPanel[hidden]) — sans cet override explicite, l'état
+   vide et l'iframe restent visibles SIMULTANÉMENT, chacun prenant
+   flex:1, ce qui coupe l'aperçu en deux au lieu de lui laisser toute la
+   place (bug réel constaté le 24/09/2026, capture à l'appui). */
+.docTemplatePreviewEmpty[hidden] {
+  display: none;
+}
+
 .docTemplatePreviewActions {
   flex-shrink: 0;
   display: flex;
diff --git a/static/document/js/document-editor.js b/static/document/js/document-editor.js
index ea4f9b90..0e672853 100644
--- a/static/document/js/document-editor.js
+++ b/static/document/js/document-editor.js
@@ -2906,19 +2906,19 @@ function forgeDocApplyTemplate(mode) {
 
 function forgeDocOpenTemplateModal() {
   document.getElementById('docTemplateModal').classList.add('is-open');
-  forgeDocSelectedTemplateId = window.FORGE_DOCUMENT.activeThemeId || null;
+  // Toujours vide à l'ouverture (retour utilisateur du 24/09/2026 :
+  // "aucun template ne dois etre sélectionner de base") — même si un
+  // thème est déjà appliqué à ce support, le choisir ici reste une
+  // action explicite de l'utilisateur, jamais présélectionnée.
+  forgeDocSelectedTemplateId = 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;
-  }
+  frame.classList.remove('is-visible');
+  frame.src = 'about:blank';
+  empty.hidden = false;
+  actions.hidden = true;
 }
 
 function forgeDocCloseTemplateModal() {
diff --git a/templates/document/document_theme_preview.html b/templates/document/document_theme_preview.html
index 9be0b7a0..0535e478 100644
--- a/templates/document/document_theme_preview.html
+++ b/templates/document/document_theme_preview.html
@@ -12,18 +12,99 @@
   <style>
     html, body {
       margin: 0;
-      padding: 16px;
+      padding: 0;
+      height: 100%;
       background: #efece4;
       display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .previewPages {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      align-items: center;
       justify-content: center;
+      padding: 16px;
+      overflow: auto;
+    }
+
+    .previewPages .docPage[hidden] {
+      display: none;
+    }
+
+    .previewNav {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 14px;
+      padding: 10px;
+      background: #1a1b20;
+      color: #fff;
+      font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    }
+
+    .previewNav button {
+      border: none;
+      background: #2a2c33;
+      color: #fff;
+      border-radius: 6px;
+      padding: 6px 12px;
+      cursor: pointer;
+      font: inherit;
+    }
+
+    .previewNav button:disabled {
+      opacity: 0.4;
+      cursor: default;
     }
   </style>
 </head>
 <body>
-  <div class="docPage">
-    <div class="docPageContent">
-      {{ rendered_page | safe }}
+  <div class="previewPages">
+    {% for rendered_page in rendered_pages %}
+    <div class="docPage" data-page-index="{{ loop.index0 }}" {% if not loop.first %}hidden{% endif %}>
+      <div class="docPageContent">
+        {{ rendered_page | safe }}
+      </div>
     </div>
+    {% endfor %}
   </div>
+  {% if rendered_pages|length > 1 %}
+  <div class="previewNav">
+    <button type="button" id="previewPrevBtn">‹ Précédent</button>
+    <span id="previewPageLabel"></span>
+    <button type="button" id="previewNextBtn">Suivant ›</button>
+  </div>
+  {% endif %}
+  <script>
+(function previewPageNav() {
+  var pages = Array.prototype.slice.call(document.querySelectorAll('.previewPages .docPage'));
+  if (pages.length <= 1) return;
+  var current = 0;
+  var prevBtn = document.getElementById('previewPrevBtn');
+  var nextBtn = document.getElementById('previewNextBtn');
+  var label = document.getElementById('previewPageLabel');
+
+  function render() {
+    pages.forEach(function pageAt(page, index) {
+      page.hidden = index !== current;
+    });
+    label.textContent = 'Page ' + (current + 1) + ' / ' + pages.length;
+    prevBtn.disabled = current === 0;
+    nextBtn.disabled = current === pages.length - 1;
+  }
+
+  prevBtn.addEventListener('click', function goPrev() {
+    if (current > 0) { current -= 1; render(); }
+  });
+  nextBtn.addEventListener('click', function goNext() {
+    if (current < pages.length - 1) { current += 1; render(); }
+  });
+  render();
+}());
+  </script>
 </body>
 </html>
diff --git a/tests/document/test_document_routes.py b/tests/document/test_document_routes.py
index a2838a63..c5f5ea0e 100644
--- a/tests/document/test_document_routes.py
+++ b/tests/document/test_document_routes.py
@@ -454,10 +454,19 @@ def test_document_theme_apply_template_content_replaces_everything(client: Flask
     assert len(pages) == len(theme["seed_pages"])
 
 
-def test_document_theme_preview_renders_the_first_seed_page(client: FlaskClient, support: str) -> None:
+def test_document_theme_preview_renders_every_seed_page_with_navigation(client: FlaskClient, support: str) -> None:
     resp = client.get(f"/document/{support}/theme/securite-incendie/preview")
     assert resp.status_code == 200
-    assert "docPage" in resp.get_data(as_text=True)
+    html = resp.get_data(as_text=True)
+    theme = document_engine.get_document_theme_entry("securite-incendie")
+    assert theme is not None
+    page_count = len(theme["seed_pages"])
+    assert html.count('class="docPage"') == page_count
+    # Une seule page visible au chargement (les autres portent `hidden`,
+    # navigation gérée côté client — voir templates/document/
+    # document_theme_preview.html).
+    assert html.count("hidden>") == page_count - 1
+    assert "previewNav" in html
 
 
 def test_document_theme_preview_404s_for_an_unknown_theme(client: FlaskClient, support: str) -> None: