Centre le contenu des mini-jeux plein-page au lieu de le laisser tassé en haut

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>
This commit is contained in:
william
2026-09-23 10:58:46 +02:00
co-authored by Claude Sonnet 5
parent 33d90e896e
commit 82223171a9
+19
View File
@@ -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;