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;