Quêtes/collision : personnages nommés, dialogues qui parlent, boîte de dialogue en jeu

- "ℹ️ Informations" (propriétés d'un personnage) : nom éditable, réutilisé
  comme "qui parle" dans l'éditeur de dialogue de quête (menu déroulant,
  plus "Joueur" toujours disponible) — remplace l'ancien choix binaire
  joueur/pnj. db.sanitize_quest_dialogues accepte maintenant un nom libre.

- Nouveau menu "🖥️ Interface" (palette d'objets) avec le premier widget :
  "💬 Boîte de dialogue" (kind="dialogue_box", screens/rendering/
  dialogue_box_style.py) — position/taille comme tout objet de scène,
  panneau "🎨 Style" dédié (police, taille, épaisseur, couleur du texte,
  couleur header/body/footer). Rendu en <div> à 3 zones, jamais soumis à
  la collision ni à l'éditeur de collision (exclu partout : obstacles,
  liste des règles, payload). Rendu côté jeu dans .sceneUI, une couche
  FIXE au viewport (jamais .sceneWorld, qui défile avec la caméra).

- static/js/play/dialogue-box-controller.js : fait le lien moteur entre
  l'action "quete" de l'éditeur de collision et ce widget — affiche la
  réplique en cours du dialogue correspondant au STATUT ACTUEL de la
  quête (gameData.quests, désormais exposé game-wide par
  full_game_payload.py), avance au clic sur "Suivant" (header = qui
  parle, body = texte, footer = bouton), se masque à la dernière réplique.

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

static/style.css

@@ -634,6 +634,31 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
    comporte donc exactement comme avant. */
 .playScreen.playScene{ overflow:hidden; }
 .sceneWorld{ position:relative; width:100%; height:100%; }
+/* .sceneUI : couche d'interface FIXE au VIEWPORT (jamais dans
+   .sceneWorld, qui défile avec la caméra, voir static/js/play/
+   personnage-controller.js) — le widget "💬 Boîte de dialogue" y vit,
+   voir templates/play.html. */
+.sceneUI{ position:absolute; inset:0; pointer-events:none; z-index:500; }
+
+/* Widget "💬 Boîte de dialogue" (voir screens/rendering/dialogue_box_style.py,
+   static/js/play/dialogue-box-controller.js) : header/body/footer,
+   toujours VISIBLE dans l'éditeur (texte d'exemple, pour le positionner/
+   styliser) mais masqué par défaut EN JEU tant qu'aucune règle de
+   collision "quete" n'a de réplique à afficher. */
+.dialogueBoxWidget{
+  display:flex; flex-direction:column; border-radius:10px; overflow:hidden;
+  box-shadow:0 6px 18px rgba(0,0,0,.35); pointer-events:auto;
+}
+.playScreen .dialogueBoxWidget{ display:none; }
+.playScreen .dialogueBoxWidget.is-active{ display:flex; }
+.dialogueBoxHeader{ padding:8px 12px; font-weight:700; }
+.dialogueBoxBody{ padding:10px 12px; flex:1; overflow-y:auto; }
+.dialogueBoxFooter{ padding:6px 10px; display:flex; justify-content:flex-end; }
+.dialogueBoxNextBtn{
+  background:rgba(255,255,255,.15); color:inherit; border:1px solid rgba(255,255,255,.3);
+  border-radius:6px; padding:5px 12px; font:inherit; font-size:12px; cursor:pointer;
+}
+.dialogueBoxNextBtn:hover{ background:rgba(255,255,255,.28); }
 
 /* Surbrillance de l'élément sélectionné dans l'arborescence, posée en JS sur
    sa propre balise (voir applySelectionHighlight) — seul moyen de la voir
@@ -804,7 +829,11 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
 }
 .questBubble-pnj{ background:linear-gradient(135deg, #2f6fed, #1e4fb0); border-bottom-left-radius:4px; }
 .questBubble-joueur{ background:linear-gradient(135deg, #2ecc71, #1e9e57); border-bottom-right-radius:4px; }
-.questBubbleSpeaker{ font-size:10.5px; font-weight:700; color:rgba(255,255,255,.85); cursor:pointer; }
+.questBubbleSpeaker{
+  font-size:10.5px; font-weight:700; color:rgba(255,255,255,.85); cursor:pointer;
+  background:transparent; border:none; padding:0; font-family:inherit; max-width:100%;
+}
+.questBubbleSpeaker option{ color:#111; }
 .questBubbleText{
   resize:none; overflow:hidden; border:none; background:transparent; color:#fff; font-size:13px;
   font-family:inherit; padding:0; min-height:1.4em;