Fix accès au canevas masqué + quiz : header quête, réponse fausse n'avance jamais bloquée, animé

- Bug corrigé : les panneaux flottants "🧩 Objets"/"⚙️ Propriétés" sont en
  position:fixed (hors du flux flex de .builder3) — ils flottaient
  PAR-DESSUS le canevas sans jamais réduire sa largeur, rendant sa
  partie droite/gauche inaccessible au clic/glisser tant qu'un panneau
  restait ouvert. .builderCanvasArea réserve maintenant leur largeur
  (marge) dès qu'un panneau est ouvert (:has()).

- Boîte à quiz : header = "Quête : <titre>" (au lieu du texte de la
  question), corps = la question ET ses choix ensemble.

- Mauvaise réponse : ne bloque plus JAMAIS la progression (bug signalé :
  "je suis obligé de bien répondre sinon j'avance pas") — surligne la
  bonne réponse en vert (le choix cliqué en rouge s'il était faux) puis
  avance automatiquement après un court délai, sans jamais octroyer de
  points. Un second clic pendant la révélation est ignoré.

- Animations : la boîte à quiz rejoue une entrée (pop-in) à CHAQUE
  nouvelle question, la bonne réponse pulse en vert, une mauvaise
  réponse "secoue" en rouge.

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

static/js/play/__tests__/dialogue-box-controller.test.js

@@ -158,18 +158,31 @@ test('forgeDialogueBoxAdvance — objet inconnu (jamais affiché) : aucun effet'
 
 // ---------- Enchaînement dialogue + question ("❓ Question") ----------
 
-function fakeQuizWidget(objectId) {
-  const roles = { header: { textContent: '' }, choices: { innerHTML: '' } };
+function fakeQuizChoiceBtn() {
   const classes = new Set();
+  return { disabled: false, classList: { add: c => classes.add(c), contains: c => classes.has(c) }, _classes: classes };
+}
+
+function fakeQuizWidget(objectId, choiceCount) {
+  const roles = { header: { textContent: '' }, question: { textContent: '' }, choices: { innerHTML: '' } };
+  const classes = new Set();
+  // querySelectorAll('.quizBoxChoiceBtn') n'a pas besoin de refléter le
+  // HTML réellement injecté dans roles.choices.innerHTML (voir
+  // forgeShowQuizBox) pour ces tests — juste le bon NOMBRE de boutons,
+  // marqués correct/wrong par forgeQuizBoxAnswer via ces mêmes objets.
+  const buttons = Array.from({ length: choiceCount }, () => fakeQuizChoiceBtn());
   return {
     getAttribute: attr => (attr === 'data-object-id' ? String(objectId) : null),
     classList: { add: c => classes.add(c), remove: c => classes.delete(c), contains: c => classes.has(c) },
     querySelector: sel => {
       if (sel === '[data-quiz-role="header"]') return roles.header;
+      if (sel === '[data-quiz-role="question"]') return roles.question;
       if (sel === '[data-quiz-role="choices"]') return roles.choices;
       return null;
     },
-    _roles: roles, _classes: classes,
+    querySelectorAll: sel => (sel === '.quizBoxChoiceBtn' ? buttons : []),
+    offsetWidth: 100,
+    _roles: roles, _classes: classes, _buttons: buttons,
   };
 }
 
@@ -188,7 +201,7 @@ function docWithDialogueAndQuiz(dialogueWidget, quizWidget) {
 
 test.beforeEach(() => {
   global.gameData.quests.push({
-    id: 10, status: 'en_cours',
+    id: 10, title: 'Le quiz du sorcier', status: 'en_cours',
     dialogues: {
       nouvelle: [],
       en_cours: [
@@ -202,10 +215,10 @@ test.beforeEach(() => {
   window.forgeQuizScore = 0;
 });
 
-test('une ligne "question" est affichée dans la boîte à QUIZ, pas la boîte de dialogue', () => {
+test('une ligne "question" est affichée dans la boîte à QUIZ (header = quête, corps = question+choix), pas la boîte de dialogue', () => {
   const dialogueWidget = fakeWidget(42);
   dialogueWidget.getAttribute = attr => (attr === 'data-object-id' ? '42' : null);
-  const quizWidget = fakeQuizWidget(99);
+  const quizWidget = fakeQuizWidget(99, 2);
   const previousDoc = global.document;
   global.document = docWithDialogueAndQuiz(dialogueWidget, quizWidget);
   try {
@@ -215,36 +228,66 @@ test('une ligne "question" est affichée dans la boîte à QUIZ, pas la boîte d
     forgeDialogueBoxAdvance(42); // -> ligne "question"
     assert.equal(dialogueWidget._classes.has('is-active'), false); // masquée pendant la question
     assert.equal(quizWidget._classes.has('is-active'), true);
-    assert.equal(quizWidget._roles.header.textContent, '2+2 ?');
+    assert.equal(quizWidget._roles.header.textContent, 'Quête : Le quiz du sorcier');
+    assert.equal(quizWidget._roles.question.textContent, '2+2 ?');
     assert.match(quizWidget._roles.choices.innerHTML, /forgeQuizBoxAnswer\(99, 0\)/);
     assert.match(quizWidget._roles.choices.innerHTML, /forgeQuizBoxAnswer\(99, 1\)/);
   } finally { global.document = previousDoc; }
 });
 
-test('mauvaise réponse au quiz : aucun effet, la question reste affichée', () => {
+test('mauvaise réponse au quiz : aucun point, MAIS avance quand même (ne bloque jamais la progression), la bonne réponse est surlignée', () => {
   const dialogueWidget = fakeWidget(42);
-  const quizWidget = fakeQuizWidget(99);
+  const quizWidget = fakeQuizWidget(99, 2);
   const previousDoc = global.document;
+  const previousTimeout = global.setTimeout;
+  global.setTimeout = fn => fn(); // exécute la révélation immédiatement pour le test
   global.document = docWithDialogueAndQuiz(dialogueWidget, quizWidget);
   try {
     forgeShowDialogueBox(10);
     forgeDialogueBoxAdvance(42); // -> question
     forgeQuizBoxAnswer(99, 0); // mauvaise réponse (correct_index=1)
-    assert.equal(quizWidget._classes.has('is-active'), true); // reste affichée
     assert.equal(window.forgeQuizScore, 0); // aucun point
-  } finally { global.document = previousDoc; }
+    assert.equal(quizWidget._buttons[0]._classes.has('is-wrong'), true); // le choix cliqué (faux) surligné en rouge
+    assert.equal(quizWidget._buttons[1]._classes.has('is-correct'), true); // la BONNE réponse indiquée quand même
+    // Avance quand même à la ligne suivante — jamais bloqué sur une mauvaise réponse.
+    assert.equal(quizWidget._classes.has('is-active'), false);
+    assert.equal(dialogueWidget._classes.has('is-active'), true);
+    assert.equal(dialogueWidget._roles.body.textContent, 'Bien joué !');
+  } finally { global.document = previousDoc; global.setTimeout = previousTimeout; }
 });
 
-test('bonne réponse au quiz : crédite le score, masque la boîte, avance à la ligne suivante', () => {
+test('un second clic pendant la révélation (avant l\'avance automatique) est ignoré', () => {
   const dialogueWidget = fakeWidget(42);
-  const quizWidget = fakeQuizWidget(99);
+  const quizWidget = fakeQuizWidget(99, 2);
   const previousDoc = global.document;
+  const previousTimeout = global.setTimeout;
+  const pending = [];
+  global.setTimeout = fn => pending.push(fn); // ne s'exécute PAS tout de suite -> la question reste affichée
+  global.document = docWithDialogueAndQuiz(dialogueWidget, quizWidget);
+  try {
+    forgeShowDialogueBox(10);
+    forgeDialogueBoxAdvance(42);
+    forgeQuizBoxAnswer(99, 0); // 1er clic (faux)
+    forgeQuizBoxAnswer(99, 1); // 2nd clic pendant la révélation -> ignoré
+    assert.equal(window.forgeQuizScore, 0); // le 2nd clic (bon) n'a pas compté
+    pending.forEach(fn => fn());
+    assert.equal(window.forgeQuizScore, 0); // toujours 0 après l'avance différée
+  } finally { global.document = previousDoc; global.setTimeout = previousTimeout; }
+});
+
+test('bonne réponse au quiz : crédite le score, la surligne en vert, masque la boîte, avance à la ligne suivante', () => {
+  const dialogueWidget = fakeWidget(42);
+  const quizWidget = fakeQuizWidget(99, 2);
+  const previousDoc = global.document;
+  const previousTimeout = global.setTimeout;
+  global.setTimeout = fn => fn();
   global.document = docWithDialogueAndQuiz(dialogueWidget, quizWidget);
   try {
     forgeShowDialogueBox(10);
     forgeDialogueBoxAdvance(42); // -> question
     forgeQuizBoxAnswer(99, 1); // bonne réponse
     assert.equal(window.forgeQuizScore, 5);
+    assert.equal(quizWidget._buttons[1]._classes.has('is-correct'), true);
     assert.equal(quizWidget._classes.has('is-active'), false);
     assert.equal(dialogueWidget._classes.has('is-active'), true);
     assert.equal(dialogueWidget._roles.body.textContent, 'Bien joué !');
@@ -252,7 +295,7 @@ test('bonne réponse au quiz : crédite le score, masque la boîte, avance à la
     forgeDialogueBoxAdvance(42); // dernière ligne -> dialogue "en_cours" épuisé -> quête "terminee"
     assert.equal(forgeQuestById(10).status, 'terminee');
     assert.equal(dialogueWidget._classes.has('is-active'), false);
-  } finally { global.document = previousDoc; }
+  } finally { global.document = previousDoc; global.setTimeout = previousTimeout; }
 });
 
 test('aucune boîte à quiz posée sur la scène : la question est ignorée, la conversation avance seule', () => {