From 82223171a941a8db1afa537122485010b231726c Mon Sep 17 00:00:00 2001
From: william <you@example.com>
Date: Wed, 23 Sep 2026 10:58:46 +0200
Subject: [PATCH] =?UTF-8?q?Centre=20le=20contenu=20des=20mini-jeux=20plein?=
 =?UTF-8?q?-page=20au=20lieu=20de=20le=20laisser=20tass=C3=A9=20en=20haut?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le joueur (.docQuizPlayer/.docAssocPlayer/.docMemoryPlayer/
.docMotsPlayer/.docScenarioPlayer) remplissait déjà toute la hauteur
de la page (flex:1) mais sa carte interne restait en flux normal,
collée en haut-gauche — passage du joueur en display:flex + centrage,
avec une largeur confortable (max-width) sur les cartes internes
plutôt qu'un étirement bord à bord. Vérifié par getComputedStyle
(display:flex/centrage du joueur, max-width de la carte, gating
pointer-events et plein-cadre de la page toujours corrects).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 static/document/document-editor.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/static/document/document-editor.css b/static/document/document-editor.css
index 989a253f..215a721a 100644
--- a/static/document/document-editor.css
+++ b/static/document/document-editor.css
@@ -537,12 +537,25 @@ img.docImage {
    (répondre/glisser/retourner une carte) reste réservée au Mode
    Aperçu, via pointer-events ci-dessous (jamais via display:none,
    sinon rien ne serait visible en édition). ---- */
+
+/* Le joueur remplit TOUTE la hauteur/largeur disponible (voir
+   [class$="Player"] plus haut, flex:1 dans .docMinigame:only-child)
+   mais sa CARTE interne (.docQuizCard, .docAssocCard,
+   .docMemoryCardWrap...) garde sa taille naturelle — sans ce
+   display:flex + centrage, elle restait tassée en haut-gauche de cette
+   grande boîte au lieu d'occuper visuellement l'espace (retour
+   utilisateur du 23/09/2026 : "un mini jeu prend toute la place et est
+   centrer pas aligner en haut"). */
 .docQuizPlayer,
 .docAssocPlayer,
 .docMemoryPlayer,
 .docMotsPlayer,
 .docScenarioPlayer {
   pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
 }
 
 .docEditor3.docEditor3--preview [data-kind="quiz"],
@@ -577,6 +590,8 @@ img.docImage {
 
 .docQuizCard,
 .docQuizResultCard {
+  width: 100%;
+  max-width: 640px;
   background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
   border: 1px solid var(--doc-border);
   border-radius: 16px;
@@ -781,6 +796,8 @@ img.docImage {
    .docQuizFeedback/.docQuizKicker (même rôle visuel) plutôt que de
    dupliquer ces règles. ---- */
 .docAssocCard {
+  width: 100%;
+  max-width: 760px;
   background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
   border: 1px solid var(--doc-border);
   border-radius: 16px;
@@ -933,6 +950,8 @@ img.docImage {
    .docAssocTitle/.docAssocMeta/.docMinigameRestartBar (mêmes rôles
    visuels, voir forgeDocRenderMemoryProps ci-dessus). ---- */
 .docMemoryCardWrap {
+  width: 100%;
+  max-width: 760px;
   background: linear-gradient(180deg, var(--doc-card), var(--doc-bg-2));
   border: 1px solid var(--doc-border);
   border-radius: 16px;