Aperçu en plein écran réel, sans espace autour du mini-jeu, contenu aligné en haut

- Mode Aperçu bascule désormais en VRAI plein écran (Fullscreen API,
  forgeDocSetPreviewMode) au lieu d'un simple agrandissement CSS —
  contourne d'un coup le clipping par overflow:hidden de main.content
  documenté ailleurs dans ce fichier. .docTopbar est masqué comme le
  reste du chrome ; un nouveau bouton flottant .docPreviewExitBtn
  (visible seulement en Aperçu) permet de revenir à l'éditeur, en plus
  d'Échap (natif, resynchronisé via fullscreenchange).
- .docCanvasArea perd son padding et .docPage abandonne son format A4
  fixe en Aperçu (width/height:100%, aspect-ratio:unset) — le mini-jeu
  remplit tout l'écran, sans bordure vide autour (retour utilisateur
  du 23/09/2026 : "il doit prendre toute la place").
- Le contenu des cartes de mini-jeu (.docQuizCard/.docAssocCard/
  .docMemoryCardWrap) passe de justify-content:center à flex-start —
  aligné en haut, pas centré verticalement (retour utilisateur du
  23/09/2026 : "le contenu aligner en haut").

Vérifié par getComputedStyle dans les deux modes (padding/aspect-ratio
de la page, visibilité du bouton de sortie et du bandeau, alignement
du contenu, gating pointer-events des mini-jeux — tout reste cohérent
simultanément).

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

static/document/document-editor.css

@@ -598,13 +598,13 @@ img.docImage {
   /* Toute la hauteur/largeur du DOCUMENT (retour utilisateur du
      23/09/2026), pas juste une carte confortable centrée : la carte
      elle-même (fond/bordure) couvre désormais toute la page ;
-     display:flex + justify-content:center centre son CONTENU à
+     display:flex + justify-content:flex-start ALIGNE SON CONTENU EN
-     l'intérieur de cette grande surface, plutôt que de le laisser
+     HAUT de cette grande surface (retour utilisateur du 23/09/2026 :
-     collé en haut ou étiré verticalement de façon disgracieuse. */
+     "le contenu aligner en haut", pas centré verticalement). */
   width: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
   border: 1px solid var(--doc-border);
   border-radius: 16px;
@@ -812,7 +812,7 @@ img.docImage {
   width: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
   border: 1px solid var(--doc-border);
   border-radius: 16px;
@@ -968,7 +968,7 @@ img.docImage {
   width: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
   border: 1px solid var(--doc-border);
   border-radius: 16px;
@@ -1705,7 +1705,12 @@ img.docImage {
   display: none;
 }
 
-/* ===== MODE APERÇU : masque tout le chrome d'édition ===== */
+/* ===== MODE APERÇU : plein écran RÉEL (Fullscreen API, voir
+   forgeDocSetPreviewMode), tout le chrome d'édition masqué — y compris
+   .docTopbar désormais (retour utilisateur du 23/09/2026 : "en mode
+   apercu en plein ecrant"), avec .docPreviewExitBtn comme seul moyen
+   de revenir à l'éditeur. ===== */
+.docEditor3.docEditor3--preview .docTopbar,
 .docEditor3.docEditor3--preview .docSidebarLeft,
 .docEditor3.docEditor3--preview .docSidebarRight,
 .docEditor3.docEditor3--preview .docBottomNav,
@@ -1724,8 +1729,50 @@ img.docImage {
   outline: none;
 }
 
+/* Aucun espace autour du mini-jeu en Aperçu (retour utilisateur du
+   23/09/2026 : "pourquoi je voi de l'espace autour du composant mini
+   jeu en apercu ? il doit prendre toute la place") — la page elle-même
+   abandonne son format A4 fixe pour remplir tout l'écran plein écran,
+   plutôt qu'un rectangle A4 plus petit flottant avec des bords vides
+   autour. */
 .docEditor3.docEditor3--preview .docCanvasArea {
-  padding: 40px;
+  padding: 0;
+}
+
+.docEditor3.docEditor3--preview .docPage {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: unset;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.docPreviewExitBtn {
+  display: none;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 50;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 16px;
+  border: 1px solid var(--doc-border);
+  border-radius: 10px;
+  background: var(--doc-bg-2);
+  color: var(--doc-text);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.docPreviewExitBtn:hover {
+  border-color: var(--doc-accent);
+}
+
+.docEditor3.docEditor3--preview .docPreviewExitBtn {
+  display: flex;
 }
 
 /* ---- Modale générique (utilisée aujourd'hui par l'éditeur d'arbre du

static/document/js/document-editor.js

@@ -2726,11 +2726,38 @@ function forgeDocBindWidthPicker() {
   });
 }
 
+function forgeDocSetPreviewMode(enabled) {
+  // Mode Aperçu = plein écran RÉEL, pas un simple agrandissement CSS
+  // (retour utilisateur du 23/09/2026 : "en mode apercu en plein
+  // ecrant avec possibilité de retourner à l'éditeur") — la Fullscreen
+  // API contourne d'un coup toute la question de clipping par
+  // overflow:hidden sur main.content (voir les commentaires CSS sur
+  // .docEditor3/la modale Scénario) : l'élément quitte entièrement le
+  // rendu normal de la page, plus de souci d'ancêtre.
+  window.forgeDocState.previewMode = enabled;
+  const editor = document.getElementById('docEditor3');
+  editor.classList.toggle('docEditor3--preview', enabled);
+  forgeDocUpdatePageNavPill();
+  if (enabled) {
+    if (editor.requestFullscreen) editor.requestFullscreen().catch(() => {});
+  } else if (document.fullscreenElement) {
+    document.exitFullscreen().catch(() => {});
+  }
+}
+
 function forgeDocBindPreviewToggle() {
   document.getElementById('docPreviewBtn').addEventListener('click', () => {
-    window.forgeDocState.previewMode = !window.forgeDocState.previewMode;
+    forgeDocSetPreviewMode(!window.forgeDocState.previewMode);
-    document.getElementById('docEditor3').classList.toggle('docEditor3--preview', window.forgeDocState.previewMode);
+  });
-    forgeDocUpdatePageNavPill();
+  document.getElementById('docPreviewExitBtn').addEventListener('click', () => forgeDocSetPreviewMode(false));
+  // Synchronise l'état si le créateur quitte le plein écran nativement
+  // (Échap, F11...) sans passer par nos boutons — sinon previewMode
+  // resterait vrai (mini-jeux "jouables") alors que l'écran normal de
+  // l'éditeur est revenu.
+  document.addEventListener('fullscreenchange', () => {
+    if (!document.fullscreenElement && window.forgeDocState.previewMode) {
+      forgeDocSetPreviewMode(false);
+    }
   });
 }
 

templates/document/document_edit.html

@@ -184,6 +184,11 @@
           <div class="docPageContent" id="docPageContent">{{ rendered_document|safe }}</div>
           {# //NOSONAR S5247 - rendered_document vient de document_engine.render_document, qui échappe (html.escape) tout contenu utilisateur avant interpolation (voir document_engine/rendering/render_document_element.py) ; jamais de HTML brut non échappé ici #}
         </div>
+        <button type="button"
+                class="docPreviewExitBtn"
+                id="docPreviewExitBtn"
+                aria-label="Retour à l'éditeur"
+                title="Retour à l'éditeur">✕ Retour à l'éditeur</button>
         <div class="docZoomPill">
           <button type="button" id="docZoomOut" aria-label="Zoom -">−</button>
           <span id="docZoomVal">100%</span>