Commandes personnage : détection de touche au clavier + touches d'animation supplémentaires

Deux retours utilisateur sur le panneau "Commandes" (déplacement/
animation automatiques, voir précédent commit) :
- Les champs de touche (haut/bas/gauche/droite/interagir) capturent
  maintenant la touche au clavier (clic puis appui — event.key, même
  valeur que heldKeys/triggers.js) au lieu d'être tapés à la main,
  source d'erreurs ("Espace" vs " ", "flèche haut" vs "ArrowUp"...).
- Nouvelle section "Animations supplémentaires" : un nombre illimité de
  touches, chacune liée à UNE pose au choix parmi celles réellement
  disponibles pour ce personnage (sauter, attaquer, courir...) — pas
  seulement les 4 touches de déplacement + interagir.

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

templates/scene_edit.html

@@ -680,21 +680,21 @@
       <details class="propGroup">
         <summary>🕹️ Commandes</summary>
         <div class="propGroupBody" id="personnageCommandsBody" data-element-id="{{ obj.id }}">
-          <p class="help">Ce personnage se déplace et s'anime automatiquement avec ces touches, sans rien à poser dans la logique.</p>
+          <p class="help">Ce personnage se déplace et s'anime automatiquement avec ces touches, sans rien à poser dans la logique. Clique un champ puis appuie sur la touche voulue.</p>
           <div class="field is-grouped">
             <div class="control"><label class="label is-small">Haut</label>
-              <input class="input is-small" id="cmd-haut" maxlength="12" value="{{ personnage_commands.haut }}"></div>
+              <input class="input is-small personnageKeyCapture" id="cmd-haut" readonly value="{{ personnage_commands.haut }}"></div>
             <div class="control"><label class="label is-small">Bas</label>
-              <input class="input is-small" id="cmd-bas" maxlength="12" value="{{ personnage_commands.bas }}"></div>
+              <input class="input is-small personnageKeyCapture" id="cmd-bas" readonly value="{{ personnage_commands.bas }}"></div>
           </div>
           <div class="field is-grouped">
             <div class="control"><label class="label is-small">Gauche</label>
-              <input class="input is-small" id="cmd-gauche" maxlength="12" value="{{ personnage_commands.gauche }}"></div>
+              <input class="input is-small personnageKeyCapture" id="cmd-gauche" readonly value="{{ personnage_commands.gauche }}"></div>
             <div class="control"><label class="label is-small">Droite</label>
-              <input class="input is-small" id="cmd-droite" maxlength="12" value="{{ personnage_commands.droite }}"></div>
+              <input class="input is-small personnageKeyCapture" id="cmd-droite" readonly value="{{ personnage_commands.droite }}"></div>
           </div>
           <div class="field"><label class="label is-small">Interagir</label>
-            <div class="control"><input class="input is-small" id="cmd-interagir" maxlength="12" value="{{ personnage_commands.interagir }}"></div>
+            <div class="control"><input class="input is-small personnageKeyCapture" id="cmd-interagir" readonly value="{{ personnage_commands.interagir }}"></div>
           </div>
           <div class="field"><label class="label is-small">Axe de déplacement</label>
             <div class="control">
@@ -710,6 +710,17 @@
           <div class="field"><label class="label is-small">Vitesse (px/tick)</label>
             <div class="control"><input class="input is-small" type="number" id="cmd-vitesse" min="1" max="20" value="{{ personnage_commands.vitesse }}"></div>
           </div>
+          <!-- Touches supplémentaires (sauter, attaquer...) : au-delà des 4
+               touches de déplacement et de "Interagir" ci-dessus, chacune
+               liée à UNE pose au choix du personnage (voir
+               ELEMENT_ANIMATIONS_MAP/PERSONNAGE_COMMANDS_EXTRA, déjà
+               connues de scene-editor.js) — construites en JS, jamais en
+               Jinja : le nombre de lignes change dynamiquement (+ Ajouter
+               / ×). -->
+          <div class="field"><label class="label is-small">Animations supplémentaires (sauter, attaquer...)</label>
+            <div id="personnageCommandsExtra"></div>
+            <button type="button" class="button is-small" onclick="addPersonnageCommandExtraRow()">+ Ajouter une touche</button>
+          </div>
         </div>
       </details>
       {% endif %}
@@ -746,6 +757,7 @@
   var ANIMATE_CSS_LABELS = {{ animate_css_labels_json|safe }};
   var SPRITE_LIBRARY = {{ sprite_library_json|safe }};
   var ELEMENT_ANIMATIONS_MAP = {{ element_animations_map_json|safe }};
+  var PERSONNAGE_COMMANDS_EXTRA = {{ (personnage_commands.extra if personnage_commands else [])|tojson }};
 </script>
 <script src="{{ url_for('static', filename='js/screen_edit/tree-panels.js') }}"></script>
 <script src="{{ url_for('static', filename='js/screen_edit/panel-init.js') }}"></script>