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/style.css

@@ -467,7 +467,17 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
    (.flowCanvasWrap/.animTimelineWrap ont déjà leur propre défilement),
    jamais sur cette zone entière — sans quoi la barre d'onglets et la barre
    d'outils défileraient avec le contenu au lieu de rester fixes en haut. */
-.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow:hidden; display:flex; flex-direction:column; }
+.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow:hidden; display:flex; flex-direction:column; transition:margin .2s ease; }
+/* Bug corrigé : les panneaux flottants (voir .floatPanel plus bas) sont
+   en position:fixed, DONC hors du flux flex de .builder3 — ils flottent
+   PAR-DESSUS le canevas sans jamais réduire sa largeur, rendant sa
+   partie droite (sous "⚙️ Propriétés") ou gauche (sous "🧩 Objets")
+   inaccessible au clic/glisser tant que le panneau correspondant reste
+   ouvert. Réserve maintenant leur largeur explicitement dès qu'un
+   panneau est ouvert (voir :not(.hidden), la classe posée/retirée par
+   openFloatPanel()/closeFloatPanel(), static/js/screen_edit/tree-panels.js). */
+#builder3:has(#panelLeftFloat:not(.hidden)) .builderCanvasArea{ margin-left:310px; }
+#builder3:has(#propsPanelFloat:not(.hidden)) .builderCanvasArea{ margin-right:370px; }
 
 /* ---------- Panneaux gauche/droite flottants ---------- */
 /* Les deux panneaux (éléments de l'écran / propriétés) sont sortis du flux
@@ -670,23 +680,40 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
 
 /* Widget "❓ Boîte à quiz" (voir screens/rendering/dialogue_box_style.py,
    static/js/play/dialogue-box-controller.js) : même squelette que
-   "💬 Boîte de dialogue" (header/corps, même "🎨 Style") mais pas de pied
-   — la question se résout au clic sur un choix. Masquée par défaut au
-   jeu, comme la boîte de dialogue. */
+   "💬 Boîte de dialogue" (header "Quête : <titre>"/corps, même "🎨 Style")
+   mais pas de pied — la question se résout au clic sur un choix. Masquée
+   par défaut au jeu, comme la boîte de dialogue ; rejoue son animation
+   d'entrée à CHAQUE nouvelle question (voir forgeShowQuizBox). */
+@keyframes quizPopIn{ from{ opacity:0; transform:scale(.92) translateY(12px); } to{ opacity:1; transform:none; } }
+@keyframes quizWrongShake{ 0%, 100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } }
+@keyframes quizCorrectPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.04); } 100%{ transform:scale(1); } }
 .quizBoxWidget{
   display:flex; flex-direction:column; border-radius:10px; overflow:hidden;
   box-shadow:0 6px 18px rgba(0,0,0,.35); pointer-events:auto;
 }
 .playScreen .quizBoxWidget{ display:none; }
-.playScreen .quizBoxWidget.is-active{ display:flex; }
+.playScreen .quizBoxWidget.is-active{ display:flex; animation:quizPopIn .3s ease; }
 .quizBoxHeader{ padding:8px 12px; font-weight:700; }
-.quizBoxChoices{ padding:10px 12px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
+.quizBoxBody{ padding:10px 12px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
+.quizBoxQuestionText{ margin:0; font-weight:600; }
+.quizBoxChoices{ display:flex; flex-direction:column; gap:8px; }
 .quizBoxChoiceBtn{
   background:rgba(255,255,255,.12); color:inherit; border:1px solid rgba(255,255,255,.3);
   border-radius:6px; padding:8px 10px; font:inherit; font-size:13px; text-align:left; cursor:pointer;
   transition:background .15s ease, transform .1s ease;
 }
 .quizBoxChoiceBtn:hover{ background:rgba(255,255,255,.25); transform:translateX(2px); }
+.quizBoxChoiceBtn:disabled{ cursor:default; }
+.quizBoxChoiceBtn:disabled:hover{ transform:none; }
+/* Révélation de la bonne/mauvaise réponse (voir forgeQuizBoxAnswer) —
+   toujours la bonne en vert (même si le joueur s'est trompé, demande
+   explicite : "indiquer la bonne réponse"), le choix cliqué en rouge s'il
+   ne l'était pas. */
+.quizBoxChoiceBtn.is-correct{
+  background:#2ecc71 !important; border-color:#2ecc71 !important; color:#08210f; font-weight:700;
+  animation:quizCorrectPop .3s ease;
+}
+.quizBoxChoiceBtn.is-wrong{ background:#e0524d !important; border-color:#e0524d !important; animation:quizWrongShake .4s ease; }
 
 /* Widget "🏆 Score" — TOUJOURS visible une fois posé (pas de collision/
    déclencheur, contrairement aux deux widgets ci-dessus), voir