Phase 7 : personnage animé par sprites (poses/images successives)

Ajoute une nouvelle action de flow "jouer_animation_sprite" qui joue une
séquence de PNG sur un élément image (cycle en boucle type marche, ou
une fois type saut) — réutilise target_element_id (déjà whitelisté) et
data_value en JSON {frames, fps, loop}, exactement le patron déjà établi
par "jouer_son" (Phase 6) et "alea" (Phase 2) : aucune nouvelle colonne,
aucune migration de schéma.

Ajoute une propriété d'élément "orientation" (Modifier un élément) pour
retourner un personnage en miroir (gauche/droite/bascule) sans nécessiter
une 2e feuille de sprites "vue de dos" — même patron que "surbrillance"/
"désactivé".

Étend aussi la Timeline d'animation existante (kind="sprite", aux côtés
de "animate_css"/"custom") pour qu'un personnage puisse animer tout seul
dès l'affichage de l'écran (ex. idle en boucle perpétuelle), pas
seulement en réaction à un événement — réutilise la colonne générique
custom_keyframes (JSON) et le réglage iteration_count déjà là pour la
boucle, aucune migration non plus. Les deux entrées (action de flow et
clip de timeline) partagent le même moteur côté client
(runSpriteAnimation()/activeSpriteAnimations dans static/js/play/
actions.js, indexé par nœud DOM plutôt que par id d'élément pour
supporter plusieurs instances d'un même écran-modèle animées
indépendamment).

Une bibliothèque de sprites Forge (2 personnages Kenney CC0, sous-
ensemble curé idle/marche/saut copié dans static/characters/) est
proposée dans l'éditeur, mais un créateur peut tout aussi bien utiliser
ses propres sprites uploadés (même route d'upload générique que le son
de la Phase 6).

Périmètre volontairement limité à ce qui a été demandé : pas d'avatar
modulable en couches (assemblage cheveux/haut/bas par le joueur),
écarté du plan initial à la demande de l'utilisateur.

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

static/js/play/screens.js

@@ -38,6 +38,11 @@ function showScreen(id) {
     window.currentScreenId = id;
     applyScreenAspect(el.dataset.aspect || '9/16');
   }
+  // Phase 7 — nettoie les animations de sprites de l'écran quitté (sinon
+  // une boucle setInterval reste active sur un élément désormais caché,
+  // mirroring le nettoyage déjà fait pour activeTimerTriggerIntervals
+  // dans triggers.js).
+  stopAllSpriteAnimations();
   runScreenShowTriggers(id);
   runScreenTimerTriggers(id);
   runAnimationTimeline(id);
@@ -141,6 +146,15 @@ function applyAnimationClip(clip) {
           target.removeEventListener('animationend', handler);
         });
       }
+    } else if (clip.kind === 'sprite') {
+      // Phase 7 — même moteur que l'action de flow "jouer_animation_sprite"
+      // (voir runSpriteAnimation() dans actions.js) : custom_keyframes
+      // stocke ici {frames, fps} en JSON plutôt que des images-clés CSS
+      // (réutilise la colonne générique existante, pas de nouveau champ).
+      var spriteData = {};
+      try { spriteData = JSON.parse(clip.custom_keyframes || '{}'); } catch (e) { /* invalide : rien à jouer */ }
+      spriteData.loop = infinite;
+      setTimeout(function() { runSpriteAnimation(target, spriteData); }, delay * 1000);
     } else {
       var animClass = 'animate__' + clip.animate_name;
       target.style.setProperty('--animate-duration', duration + 's');