fix(ui): polish demo-flow overlays

- OutroVideoOverlay: stagger reveal so 'Next step :' appears immediately and
  'La ferme' fades in 500ms later, instead of both showing at once.
- MissionNotification: enforce 589/211 aspect-ratio + objectFit cover on the
  <video> branch so webm assets (square 2000x2000) render at the same place
  as the legacy PNG notifications instead of shifting the layout.
- HandTrackingTutorial: add a 5000ms fallback timeout that auto-dismisses
  the overlay if MediaPipe never reports a hand (camera blocked, mouse-only
  player), so the screen never stays stuck.

docs/technical/repair-game.md

@@ -275,6 +275,22 @@ While the player is in `fragmented`, `scanning`, `repairing` or `reassembling`,
 
 The bubble is mounted both in `GameStageContent` (production scene) and `TestMap` (physics test scene) so the behaviour matches in both contexts.
 
+## Narrator Audio (Ebike Mission)
+
+`EbikeRepairNarrator` (`src/components/game/EbikeRepairNarrator.tsx`) is a headless component mounted in `src/pages/page.tsx` next to `EbikeIntroSequence`. It subscribes to `useGameStore` and plays one-shot narrator cues at specific repair-step transitions for the `ebike` mission only:
+
+| Step entered | Dialogue ID                          | Audio file                         | Subtitle |
+| ------------ | ------------------------------------ | ---------------------------------- | -------- |
+| `fragmented` | `narrateur_galetscan`                | `narrateur_galetscan.mp3`          | cue 6    |
+| `repairing`  | `narrateur_refroidisseur_diagnostic` | `narrateur_refroidisseurcassé.mp3` | cue 24   |
+| `done`       | `narrateur_ebikerepare`              | `narrateur_ebikeréparé.mp3`        | cue 7    |
+
+A `useRef<Set<MissionStep>>` guards against double-fires (StrictMode, re-renders) and is cleared when the mission rolls back to `locked` or `waiting`, so debug-panel replays still trigger the narration.
+
+Cue 7 was previously a single subtitle covering both the diagnostic line and the "Eeeet voilà!" completion line. It was split into cue 7 (completion only) and a new cue 24 (diagnostic) so the two sentences can be triggered at independent moments — they correspond to two distinct `.mp3` files.
+
+The breakdown line (`narrateur_ebikecasse`, cue 5) is still triggered by `EbikeIntroSequence` at distance threshold, not by this component. Pylon and farm narrator cues are not yet wired through `EbikeRepairNarrator`; the same per-mission lookup pattern can be extended when those flows need narration.
+
 ## Repair Case Details
 
 The case model implementation lives in:

public/sounds/dialogue/dialogues.json

@@ -69,6 +69,12 @@
       "audio": "/sounds/dialogue/narrateur_ebikeréparé.mp3",
       "subtitleCueIndex": 7
     },
+    {
+      "id": "narrateur_refroidisseur_diagnostic",
+      "voice": "narrateur",
+      "audio": "/sounds/dialogue/narrateur_refroidisseurcassé.mp3",
+      "subtitleCueIndex": 24
+    },
     {
       "id": "narrateur_ordredemandedelaide",
       "voice": "narrateur",

public/sounds/dialogue/subtitles/en/narrateur.srt

@@ -24,7 +24,7 @@ So? Pretty amazing, right? Anyway, these rollers will scan the components to fin
 
 7
 00:00:00,000 --> 00:00:04,992
-Perfect! The cooler gave out, you can replace it with one of the components from your pack. Aaaand there we go! It runs like clockwork! Go on, hurry!
+Aaaand there we go! It runs like clockwork! Go on, hurry!
 
 8
 00:00:00,000 --> 00:00:04,512
@@ -90,6 +90,10 @@ Here, this is a dashboard. You can imagine that if your fridge or oven breaks do
 00:00:00,000 --> 00:00:07,500
 The electrician helped you at the Power Plant? Aaaaah, that's what I love here: everyone helps each other, nobody judges anyone, it's like a real little family.
 
+24
+00:00:00,000 --> 00:00:05,500
+Perfect! The cooler gave out, you can replace it with one of the components from your pack.
+
 25
 00:00:07,500 --> 00:00:19,100
 You should know the electrician has quite a special story. She was born in the north of the continent, in the city of Kalska. She grew up happily with her mother Edith, her father Jordan, and her two little brothers, Malo and Justin.

public/sounds/dialogue/subtitles/fr/electricienne.srt

@@ -1,6 +1,6 @@
 1
 00:00:00,000 --> 00:00:08,000
-Hey !! Comment ça va ? Tu as besoin d'aide pour poser les galets ?
+Hey !! Comment ça va ? Tu as besoin d'aide pour redresser le poteau ?
 
 2
 00:00:00,000 --> 00:00:08,000
@@ -8,4 +8,4 @@ N'hésite pas, si tu as besoin d'autre chose !
 
 3
 00:00:00,000 --> 00:00:08,000
-À la prochaine !
+À la prochaine !

public/sounds/dialogue/subtitles/fr/narrateur.srt

@@ -1,6 +1,6 @@
 1
 00:00:00,000 --> 00:00:09,000
-Bonjour à toi, futur habitant d'Altéra ! Aujourd'hui tu vas découvrir le rôle de technicien au sein de La Fabrik qui s'occupe des technologies et réparation Low-Tech.
+Bonjour à toi, futur habitant d'Altéra ! Aujourd'hui tu vas découvrir le rôle de technicien au sein de La Fabrik, qui s'occupe des technologies et des réparations low-tech.
 
 2
 00:00:09,000 --> 00:00:11,592
@@ -8,7 +8,7 @@ Avant de commencer, comment tu t'appelles ?
 
 3
 00:00:00,000 --> 00:00:10,824
-Très bien ! On va commencer pas à pas pour te montrer comment fonctionne l'atelier. Ensuite, tu commenceras ta journée et tu pourras te rendre compte de l'impact positif qu'a la Fabrik sur la communauté et le quartier.
+Très bien ! On va avancer pas à pas pour te montrer comment fonctionne l'atelier. Ensuite, tu commenceras ta journée et tu pourras te rendre compte de l'impact positif qu'a La Fabrik sur la communauté et le quartier.
 
 4
 00:00:00,000 --> 00:00:06,072
@@ -16,15 +16,15 @@ Allez go ! Il faudrait que tu ailles à la ferme, on cherche à améliorer quelq
 
 5
 00:00:00,000 --> 00:00:12,720
-Quoi ? Ton E-Bike est cassé ? Bon c'est pas très grave, ça arrive ! Utilise les deux galets qui sont sur tes gants. Ce sont de véritables bijoux technologiques. Poses en un en-dessous du vélo, et un au-dessus.
+Quoi ? Ton E-Bike est cassé ? Bon, ce n'est pas très grave, ça arrive ! Utilise les deux galets qui sont sur tes gants. Ce sont de véritables bijoux technologiques. Poses-en un en dessous du vélo, et un au-dessus.
 
 6
 00:00:00,000 --> 00:00:08,064
-Alors ? Pas magnifique ça ? Enfin bref, ces galets vont scanner les composants pour savoir ce qu'on doit réparer et / ou changer.
+Alors ? Pas magnifique ça ? Enfin bref, ces galets vont scanner les composants pour savoir ce qu'on doit réparer et/ou changer.
 
 7
 00:00:00,000 --> 00:00:04,992
-Parfait ! C'est le refroidisseur qui a lâché, tu peux le remplacer avec un des composants de ton pack. Eeeet voilà ! Il fonctionne comme une horloge ! Allez fonce !
+Eeeet voilà ! Il fonctionne comme une horloge ! Allez fonce !
 
 8
 00:00:00,000 --> 00:00:04,512
@@ -32,7 +32,7 @@ N'hésite pas à aller demander de l'aide si tu as besoin, tout le monde est sup
 
 9
 00:00:00,000 --> 00:00:08,880
-Oh woooow !! T'as vu ça ???? Tous les feux, ordinateurs et lumières se sont éteints !! Faut vite que t'aille au Centre de l'Énergie, on ne peut même plus renvoyer les appareils réparés !
+Oh woooow !! T'as vu ça ???? Tous les feux, ordinateurs et lumières se sont éteints !! Il faut vite que tu ailles au Centre de l'Énergie, on ne peut même plus renvoyer les appareils réparés !
 
 10
 00:00:00,000 --> 00:00:09,840
@@ -48,7 +48,7 @@ Booon, grâce à toi j'ai pu finir mon urgence ! Oh mais t'arrives bientôt à l
 
 13
 00:00:00,000 --> 00:00:11,760
-Bon, fini le moment émotion haha ! Pour la ferme, comme je te l'ai dis, ici, il faut qu'on change l'irrigation. Durant les périodes de sécheresse, les habitants se plaignent d'un souci. Vois ce que tu peux faire.
+Bon, fini le moment émotion haha ! Pour la ferme, comme je te l'ai dit, ici, il faut qu'on change l'irrigation. Durant les périodes de sécheresse, les habitants se plaignent d'un souci. Vois ce que tu peux faire.
 
 14
 00:00:00,000 --> 00:00:04,560
@@ -60,7 +60,7 @@ Ouiii ! C'est ça ! On aimerait ne plus pomper l'eau dans le lac, sinon on va é
 
 16
 00:00:00,000 --> 00:00:10,944
-L'ancien refroidisseur de ton E-Bike ?? Mais oui !! Hahaha, très bonne idée ! Combiné aux anciens tuyaux du lac, on va pouvoir faire quelque chose de cool ! Met tout ça entre tes pads !
+L'ancien refroidisseur de ton E-Bike ?? Mais oui !! Hahaha, très bonne idée ! Combiné aux anciens tuyaux du lac, on va pouvoir faire quelque chose de cool ! Mets tout ça entre tes pads !
 
 17
 00:00:00,000 --> 00:00:05,712
@@ -68,7 +68,7 @@ Le refroidisseur de ton E-Bike est cassé, mais on peut encore en faire quelque
 
 18
 00:00:00,000 --> 00:00:10,032
-Ma-gni-fique ! Je vois que Gilbert t'as aidé haha, il est adorable celui-là ! Tu as fait du super boulot ! Et grâce à toi, le quartier est amélioré.
+Ma-gni-fique ! Je vois que Gilbert t'a aidé haha, il est adorable celui-là ! Tu as fait du super boulot ! Et grâce à toi, le quartier est amélioré.
 
 19
 00:00:00,000 --> 00:00:11,520
@@ -80,28 +80,32 @@ Allez bonne chance ! J'ai du boulot !
 
 21
 00:00:00,000 --> 00:00:33,600
-Bienvenue dans ton atelier !! Alors ? Ça claque hein ? Bon je te présente en rapide tout ce qu'il y a : ici c'est ton plan de travail. Dans les tuyaux, ce sont des objets des résidents du quartier qui sont tombés en panne qui attendent d'être réparés. Une fois réparé, tu mets l'objet dans ce tuyau et ça repart chez la bonne personne.
+Bienvenue dans ton atelier !! Alors ? Ça claque hein ? Bon, je te présente rapidement tout ce qu'il y a : ici, c'est ton plan de travail. Dans les tuyaux, ce sont des objets des résidents du quartier qui sont tombés en panne et qui attendent d'être réparés. Une fois l'objet réparé, tu le mets dans ce tuyau et ça repart chez la bonne personne.
 
 22
 00:00:00,000 --> 00:00:14,760
-Ici, c'est un tableau de bord. T'imagines bien que si ton frigo ou ton four tombe en panne, tu ne vas pas pouvoir le mettre dans le tuyau haha ! Donc ici, ça te signale quand des résidents ont un objet volumineux tombé en panne, ou quand il y a un problème dans la ville. Oh oh... j'ai une urgence, il va bientôt falloir que je te laisse ! Donc tiens, tes outils pour pouvoir réparer la plupart des choses : une mini imprimante 3D à base de déchets électroniques, des gants Pousse Pièces pour désassembler les objets, ainsi qu'un pack de Relance !
+Ici, c'est un tableau de bord. T'imagines bien que si ton frigo ou ton four tombe en panne, tu ne vas pas pouvoir le mettre dans le tuyau haha ! Donc ici, ça te signale quand des résidents ont un objet volumineux tombé en panne, ou quand il y a un problème dans la ville. Oh oh... j'ai une urgence, il va bientôt falloir que je te laisse ! Donc tiens, tes outils pour pouvoir réparer la plupart des choses : une mini-imprimante 3D à base de déchets électroniques, des gants Pousse-Pièces pour désassembler les objets, ainsi qu'un pack de Relance !
 
 23
 00:00:00,000 --> 00:00:07,500
 L'électricienne t'a aidé à la Centrale ? Aaaaah c'est ça que j'adore ici, tout le monde s'entraide, personne se juge, une vraie petite famille.
 
+24
+00:00:00,000 --> 00:00:05,500
+Parfait ! C'est le refroidisseur qui a lâché, tu peux le remplacer avec un des composants de ton pack.
+
 25
 00:00:07,500 --> 00:00:19,100
-Sache que l'électricienne a une histoire assez particulière. Elle est née au nord du continent, dans la ville de Kalska. Elle a grandit heureuse, avec sa mère Edith, son père Jordan et ses deux petits frères Malo et Justin.
+Sache que l'électricienne a une histoire assez particulière. Elle est née au nord du continent, dans la ville de Kalska. Elle a grandi heureuse, avec sa mère Edith, son père Jordan et ses deux petits frères Malo et Justin.
 
 26
 00:00:19,100 --> 00:00:30,600
-Il y a quelques années de ça, comme tu le sais, c'est les pays du Nord, qui par grande surprise, ont été obligés de migrer en premier. Ils ont alors entamé leur périple, pays par pays, ville par ville, village par village.
+Il y a quelques années de ça, comme tu le sais, ce sont les pays du Nord qui, par grande surprise, ont été obligés de migrer en premier. Ils ont alors entamé leur périple, pays par pays, ville par ville, village par village.
 
 27
 00:00:30,600 --> 00:00:42,800
-Un jour de marche comme les autres depuis plusieurs mois, une tempête climatique les a pris de court. S'étant séparés pour trouver des vivres dans le village, le père et un des deux frères sont malheureusement partis. C'est tragique.
+Un jour de marche comme les autres depuis plusieurs mois, une tempête climatique les a pris de court. S'étant séparés pour trouver des vivres dans le village, le père et l'un des deux frères sont malheureusement partis. C'est tragique.
 
 28
 00:00:42,800 --> 00:00:54,000
-Mais un beau jour, ils sont tombés ici, par hasard dans leur périple. On les a accueillis les bras ouverts et ils ont pu se reconstruire doucement parmi nous et font partie intégrante de la communauté aujourd'hui.
+Mais un beau jour, ils sont tombés ici, par hasard, dans leur périple. On les a accueillis les bras ouverts, ils ont pu se reconstruire doucement parmi nous et font partie intégrante de la communauté aujourd'hui.

src/components/ebike/EbikeGPSMap.tsx

@@ -181,9 +181,12 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
 
   // Sync texture into uniform when it changes (canvas resize)
   useEffect(() => {
+    const mapUniform = shaderMat.uniforms.map;
+    if (!mapUniform) return;
+
     // External Three.js material uniform sync — intentional side effect.
     // eslint-disable-next-line react-hooks/immutability
-    shaderMat.uniforms.map.value = texture;
+    mapUniform.value = texture;
   }, [shaderMat, texture]);
 
   // Cleanup on unmount

src/components/game/EbikeIntroSequence.tsx

@@ -146,16 +146,6 @@ export function EbikeIntroSequence(): React.JSX.Element | null {
     return null;
   }
 
-  if (mainState == "pylon") {
-    if (pylonStep === "approaching") {
-      return <MissionNotification mission="pylon" visible />;
-    }
-    if (pylonStep === "narrator-outro") {
-      return <MissionNotification mission="farm" visible />;
-    }
-    return null;
-  }
-
   if (
     introStep !== "reveal" &&
     introStep !== "await-ebike-mount" &&

src/components/game/EbikeRepairNarrator.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef } from "react";
+import {
+  EBIKE_DIAGNOSTIC_DIALOGUE_ID,
+  EBIKE_REPAIRED_DIALOGUE_ID,
+  EBIKE_SCAN_HINT_DIALOGUE_ID,
+} from "@/data/ebike/ebikeConfig";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
+import type { MissionStep } from "@/types/gameplay/repairMission";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+
+/**
+ * Plays narrator cues during the ebike repair game:
+ * - `fragmented`  -> "Alors? Pas magnifique ça?... ces galets vont scanner..."
+ * - `repairing`   -> "Parfait! C'est le refroidisseur qui a lâché..."
+ * - `done`        -> "Eeeet voilà! Il fonctionne comme une horloge!..."
+ *
+ * Each cue is one-shot per mission run; the played-set resets when the
+ * mission state rolls back to `locked`/`waiting` so debug-panel replays
+ * still trigger the narration.
+ *
+ * Audio AND subtitles are strictly scoped to `mainState === "ebike"`. If
+ * the player leaves the ebike main state mid-line (debug panel jump,
+ * mission transition, etc.), the active audio is paused and the
+ * subtitle is force-cleared so nothing bleeds into pylon/farm/outro.
+ */
+const STEP_TO_DIALOGUE_ID: Partial<Record<MissionStep, string>> = {
+  fragmented: EBIKE_SCAN_HINT_DIALOGUE_ID,
+  repairing: EBIKE_DIAGNOSTIC_DIALOGUE_ID,
+  done: EBIKE_REPAIRED_DIALOGUE_ID,
+};
+
+function stopAudio(audio: HTMLAudioElement | null): void {
+  if (!audio) return;
+  if (!audio.paused) {
+    audio.pause();
+    audio.currentTime = 0;
+  }
+}
+
+export function EbikeRepairNarrator(): null {
+  const mainState = useGameStore((state) => state.mainState);
+  const ebikeStep = useGameStore((state) => state.ebike.currentStep);
+  const playedRef = useRef<Set<MissionStep>>(new Set());
+  const activeAudioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    if (ebikeStep === "locked" || ebikeStep === "waiting") {
+      playedRef.current.clear();
+    }
+  }, [ebikeStep]);
+
+  // Belt-and-suspenders: any time we are NOT in the ebike main state,
+  // make sure no narrator audio or subtitle from this component is
+  // lingering. This catches races where the audio started a tick before
+  // the main state flipped and the per-step cleanup hadn't propagated
+  // yet (subtitle event still queued, etc.).
+  useEffect(() => {
+    if (mainState === "ebike") return;
+    stopAudio(activeAudioRef.current);
+    activeAudioRef.current = null;
+    useSubtitleStore.getState().clearActiveSubtitle();
+  }, [mainState]);
+
+  useEffect(() => {
+    if (mainState !== "ebike") return;
+
+    const dialogueId = STEP_TO_DIALOGUE_ID[ebikeStep];
+    if (!dialogueId) return;
+    if (playedRef.current.has(ebikeStep)) return;
+
+    playedRef.current.add(ebikeStep);
+
+    let cancelled = false;
+
+    void (async () => {
+      const manifest = await loadDialogueManifest();
+      if (cancelled || !manifest) return;
+      const audio = await playDialogueById(manifest, dialogueId);
+      if (cancelled) {
+        stopAudio(audio);
+        useSubtitleStore.getState().clearActiveSubtitle();
+        return;
+      }
+      activeAudioRef.current = audio;
+    })();
+
+    return () => {
+      cancelled = true;
+      stopAudio(activeAudioRef.current);
+      activeAudioRef.current = null;
+      useSubtitleStore.getState().clearActiveSubtitle();
+    };
+  }, [mainState, ebikeStep]);
+
+  return null;
+}

src/components/gameplay/farm/FarmNarrativeFlow.tsx

@@ -3,7 +3,8 @@ import { useGameStore } from "@/managers/stores/useGameStore";
 import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
 import { AudioManager } from "@/managers/AudioManager";
 
-const HISTOIRE_AUDIO_PATH = "/sounds/dialogue/narrateur_histoireelectricienne.mp3";
+const HISTOIRE_AUDIO_PATH =
+  "/sounds/dialogue/narrateur_histoireelectricienne.mp3";
 const OUTRO_DELAY_MS = 5_000; // delay after audio ends before transitioning to outro
 
 /**
@@ -78,9 +79,12 @@ function useHistoireSubtitlePlayback(
           ({ start, end }) => t >= start && t < end,
         );
         if (idx >= 0) {
+          const text = HISTOIRE_BLOCKS[idx];
+          if (text === undefined) return;
+
           setActiveSubtitle({
             speaker: "Narrateur",
-            text: HISTOIRE_BLOCKS[idx],
+            text,
           });
         }
       }
@@ -136,7 +140,9 @@ export function FarmNarrativeFlow(): null {
 
   // After the audio finishes, wait 5 s then transition to outro.
   // The timeout ID is kept in a ref so we can cancel on unmount.
-  const outroTimeoutRef = useRef<ReturnType<typeof window.setTimeout> | null>(null);
+  const outroTimeoutRef = useRef<ReturnType<typeof window.setTimeout> | null>(
+    null,
+  );
 
   useEffect(() => {
     return () => {

src/components/gameplay/pylon/PylonDownedPylon.tsx

@@ -33,7 +33,9 @@ export function PylonDownedPylon(): React.JSX.Element | null {
   );
   // Snap to terrain so the downed/upright model sits flush on the ground,
   // matching the Y adjustment that InstancedMapAsset applies to the same node.
-  const position = useTerrainSnappedPosition(pylonAnchor ?? PYLON_WORLD_POSITION);
+  const position = useTerrainSnappedPosition(
+    pylonAnchor ?? PYLON_WORLD_POSITION,
+  );
   const [isStraightening, setIsStraightening] = useState(false);
   // Keeps the pylon upright after the animation completes while
   // PylonFarmerNPC plays the post-raise audio sequence.
@@ -63,7 +65,9 @@ export function PylonDownedPylon(): React.JSX.Element | null {
     if (!group) return;
 
     if (!isStraightening || straightenStartRef.current === null) {
-      group.rotation.set(...(isRaised ? PYLON_UPRIGHT_ROTATION : PYLON_DOWNED_ROTATION));
+      group.rotation.set(
+        ...(isRaised ? PYLON_UPRIGHT_ROTATION : PYLON_DOWNED_ROTATION),
+      );
       return;
     }
 
@@ -104,11 +108,7 @@ export function PylonDownedPylon(): React.JSX.Element | null {
   if (!shouldRender) return null;
 
   return (
-    <group
-      ref={groupRef}
-      position={position}
-      rotation={PYLON_DOWNED_ROTATION}
-    >
+    <group ref={groupRef} position={position} rotation={PYLON_DOWNED_ROTATION}>
       <primitive object={scene.clone(true)} />
       {isPylonInteractive ? (
         <InteractableObject

src/components/gameplay/pylon/PylonFarmerNPC.tsx

@@ -159,7 +159,9 @@ function PylonFarmerNPCContent(): React.JSX.Element {
     } else if (step === "done") {
       // NPC reappears at repair completion — position at the post-raise spot,
       // facing the pylon, playing idle.
-      currentPosRef.current.set(...PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight);
+      currentPosRef.current.set(
+        ...PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight,
+      );
       savedRotationYRef.current = faceToward(
         currentPosRef.current,
         PYLON_WORLD_POSITION,

src/components/gameplay/pylon/PylonNarrativeFlow.tsx

@@ -28,11 +28,9 @@ export function PylonNarrativeFlow(): React.JSX.Element | null {
 
     void (async () => {
       // 1. Play the generator powerdown sound effect
-      const sfx = AudioManager.getInstance().playSound(
-        PYLON_POWERDOWN_SFX,
-        1,
-        { category: "sfx" },
-      );
+      const sfx = AudioManager.getInstance().playSound(PYLON_POWERDOWN_SFX, 1, {
+        category: "sfx",
+      });
 
       // 2. Wait for it to finish (or skip if it can't load)
       if (sfx) {

src/components/site/SiteNamingScreen.tsx

@@ -14,7 +14,7 @@ import {
   stopCurrentDialogue,
 } from "@/utils/dialogues/playDialogue";
 
-const TYPEWRITER_CHAR_DELAY_MS = 70;
+const TYPEWRITER_CHAR_DELAY_MS = 150;
 // Fallback in case nothing else triggers the typewriter (audio failed to
 // load, no subtitles, "ended" never fires). Long enough not to fire
 // before the narration on a slow load.

src/components/ui/MissionNotification.tsx

@@ -1,6 +1,11 @@
 import { MISSION_NOTIFICATION_IMAGE_PATHS } from "@/data/gameplay/missionNotifications";
 import type { RepairMissionId } from "@/types/gameplay/repairMission";
 
+// Reference aspect ratio of the original PNG mission notifications
+// (589 × 211). Webm assets are square (2000 × 2000), so without this hint the
+// <video> element renders at the wrong dimensions and shifts the layout.
+const NOTIFICATION_ASPECT_RATIO = "589 / 211";
+
 interface MissionNotificationProps {
   mission?: RepairMissionId;
   imagePath?: string;
@@ -26,6 +31,10 @@ export function MissionNotification({
         {isVideo ? (
           <video
             className="mission-notification__image"
+            style={{
+              aspectRatio: NOTIFICATION_ASPECT_RATIO,
+              objectFit: "cover",
+            }}
             src={src}
             aria-label="Nouvel objectif de mission"
             autoPlay

src/components/ui/OutroVideoOverlay.tsx

@@ -1,22 +1,48 @@
 import { useEffect, useRef, useState } from "react";
+import type { AudioCategory } from "@/data/audioConfig";
+import { AudioManager } from "@/managers/AudioManager";
 
 const OUTRO_VIDEO_SRC = "/cinematics/outro.mp4";
+const TRANSITION_FADE_MS = 600;
+const TRANSITION_HOLD_MS = 2000;
+const TRANSITION_TEXT_FADE_MS = 500;
+// Delay between "Next step :" appearing and "La ferme" fading in.
+const TRANSITION_LAFERME_DELAY_MS = 500;
+
+const MUTED_CATEGORIES: readonly AudioCategory[] = ["music", "sfx", "dialogue"];
+
+type Stage =
+  | "hidden"
+  | "fading-in"
+  | "showing-text"
+  | "fading-text-out"
+  | "video";
 
 /**
- * Full-screen video overlay that plays once after the outro drone-shot
- * cinematic ends. Triggered by the "outro-cinematic-complete" window event
- * dispatched from GameCinematics.tsx.
+ * End-of-demo overlay. Triggered by the "outro-cinematic-complete" window
+ * event dispatched from GameCinematics.tsx.
+ *
+ * Sequence:
+ *   1. Fade to black                                  (TRANSITION_FADE_MS)
+ *   2. Reveal "Next step: La ferme" text + hold       (TRANSITION_HOLD_MS)
+ *   3. Fade text out                                  (TRANSITION_TEXT_FADE_MS)
+ *   4. Play `outro.mp4` full-screen with all game audio muted
  */
 export function OutroVideoOverlay(): React.JSX.Element | null {
-  const [visible, setVisible] = useState(false);
+  const [stage, setStage] = useState<Stage>("hidden");
+  const [lafermeVisible, setLafermeVisible] = useState(false);
   const videoRef = useRef<HTMLVideoElement>(null);
+  const savedVolumesRef = useRef<Partial<Record<AudioCategory, number>>>({});
 
   useEffect(() => {
     function handleCinematicComplete(): void {
-      setVisible(true);
+      setStage("fading-in");
     }
 
-    window.addEventListener("outro-cinematic-complete", handleCinematicComplete);
+    window.addEventListener(
+      "outro-cinematic-complete",
+      handleCinematicComplete,
+    );
     return () => {
       window.removeEventListener(
         "outro-cinematic-complete",
@@ -25,12 +51,80 @@ export function OutroVideoOverlay(): React.JSX.Element | null {
     };
   }, []);
 
+  // Drive the transition timeline.
   useEffect(() => {
-    if (!visible) return;
-    void videoRef.current?.play();
-  }, [visible]);
+    if (stage === "fading-in") {
+      const timer = window.setTimeout(
+        () => setStage("showing-text"),
+        TRANSITION_FADE_MS,
+      );
+      return () => window.clearTimeout(timer);
+    }
+    if (stage === "showing-text") {
+      const timer = window.setTimeout(
+        () => setStage("fading-text-out"),
+        TRANSITION_HOLD_MS,
+      );
+      return () => window.clearTimeout(timer);
+    }
+    if (stage === "fading-text-out") {
+      const timer = window.setTimeout(
+        () => setStage("video"),
+        TRANSITION_TEXT_FADE_MS,
+      );
+      return () => window.clearTimeout(timer);
+    }
+    return undefined;
+  }, [stage]);
 
-  if (!visible) return null;
+  // Stagger the second word ("La ferme") so it fades in after "Next step :"
+  // is already visible.
+  useEffect(() => {
+    if (stage === "showing-text") {
+      const timer = window.setTimeout(
+        () => setLafermeVisible(true),
+        TRANSITION_LAFERME_DELAY_MS,
+      );
+      return () => window.clearTimeout(timer);
+    }
+    if (stage === "hidden" || stage === "fading-in") {
+      // Reset the staged reveal so a re-triggered outro replays correctly.
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setLafermeVisible(false);
+    }
+    return undefined;
+  }, [stage]);
+
+  // Mute all game audio while the video is showing; restore on cleanup so
+  // a re-mounted page doesn't stay silent.
+  useEffect(() => {
+    if (stage !== "video") return;
+
+    const audioManager = AudioManager.getInstance();
+    const saved: Partial<Record<AudioCategory, number>> = {};
+    for (const category of MUTED_CATEGORIES) {
+      saved[category] = audioManager.getCategoryVolume(category);
+      audioManager.setCategoryVolume(category, 0);
+    }
+    savedVolumesRef.current = saved;
+
+    void videoRef.current?.play();
+
+    return () => {
+      for (const category of MUTED_CATEGORIES) {
+        const previous = savedVolumesRef.current[category];
+        if (previous !== undefined) {
+          audioManager.setCategoryVolume(category, previous);
+        }
+      }
+      savedVolumesRef.current = {};
+    };
+  }, [stage]);
+
+  if (stage === "hidden") return null;
+
+  const showText = stage === "showing-text" || stage === "fading-text-out";
+  const textOpacity = stage === "showing-text" ? 1 : 0;
 
   return (
     <div
@@ -42,14 +136,45 @@ export function OutroVideoOverlay(): React.JSX.Element | null {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        opacity: stage === "fading-in" ? 0 : 1,
+        transition: `opacity ${TRANSITION_FADE_MS}ms ease-out`,
+        pointerEvents: stage === "video" ? "auto" : "none",
       }}
+      aria-hidden={stage !== "video"}
     >
-      <video
-        ref={videoRef}
-        src={OUTRO_VIDEO_SRC}
-        style={{ width: "100%", height: "100%", objectFit: "cover" }}
-        playsInline
-      />
+      {showText ? (
+        <div
+          style={{
+            color: "#F2F2F2",
+            textAlign: "center",
+            textShadow: "0 7px 14.4px rgba(0, 0, 0, 0.25)",
+            fontFamily: "Inter, system-ui, sans-serif",
+            fontSize: "clamp(24px, 4vw, 48px)",
+            fontWeight: 700,
+            letterSpacing: "-1.3px",
+            opacity: textOpacity,
+            transition: `opacity ${TRANSITION_TEXT_FADE_MS}ms ease-in`,
+          }}
+        >
+          Next step :{" "}
+          <span
+            style={{
+              opacity: lafermeVisible ? 1 : 0,
+              transition: `opacity ${TRANSITION_TEXT_FADE_MS}ms ease-in`,
+            }}
+          >
+            La ferme
+          </span>
+        </div>
+      ) : null}
+      {stage === "video" ? (
+        <video
+          ref={videoRef}
+          src={OUTRO_VIDEO_SRC}
+          style={{ width: "100%", height: "100%", objectFit: "cover" }}
+          playsInline
+        />
+      ) : null}
     </div>
   );
 }

src/components/ui/tutorial/HandTrackingTutorial.tsx

@@ -14,6 +14,11 @@ const HAND_TUTORIAL_STEPS: ReadonlySet<MissionStep> = new Set([
   "inspected",
 ]);
 
+// Fallback: if hand detection never fires (camera blocked, MediaPipe failure,
+// player using mouse), the tutorial auto-dismisses after this delay so it
+// never blocks the screen indefinitely.
+const HAND_TUTORIAL_FALLBACK_TIMEOUT_MS = 5000;
+
 /**
  * First-time hand-tracking tutorial. Visible during the early ebike repair
  * steps until MediaPipe actually detects a hand on screen. Once dismissed it
@@ -39,6 +44,17 @@ export function HandTrackingTutorial(): React.JSX.Element | null {
     }
   }, [handsDetected, dismissed]);
 
+  // Fallback timeout: dismiss the tutorial even if no hand is ever detected,
+  // so the overlay never gets stuck on screen.
+  useEffect(() => {
+    if (!isInShowWindow || dismissed) return undefined;
+    const timer = window.setTimeout(
+      () => setDismissed(true),
+      HAND_TUTORIAL_FALLBACK_TIMEOUT_MS,
+    );
+    return () => window.clearTimeout(timer);
+  }, [isInShowWindow, dismissed]);
+
   if (!isInShowWindow || dismissed) return null;
 
   return (

src/components/zone/ZoneDetection.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import { isDebugEnabled } from "@/utils/debug/isDebugEnabled";
@@ -50,11 +50,10 @@ export function ZoneDetection({
   zone,
   onEnter,
   height,
-}: ZoneDetectionProps): React.JSX.Element {
+}: ZoneDetectionProps): React.JSX.Element | null {
   const camera = useThree((state) => state.camera);
   const hasTriggeredRef = useRef(false);
   const onEnterRef = useRef(onEnter);
-  const [isActive, setIsActive] = useState(false);
 
   useEffect(() => {
     onEnterRef.current = onEnter;
@@ -75,9 +74,8 @@ export function ZoneDetection({
     if (_cameraPos.y > zone.position[1] + zoneHeight / 2) return;
 
     hasTriggeredRef.current = true;
-    setIsActive(true);
     onEnterRef.current();
   });
 
-  return <ZoneDebugVisual zone={zone} active={isActive} />;
+  return null;
 }

src/data/ebike/ebikeConfig.ts

@@ -33,3 +33,7 @@ export const EBIKE_SOUNDS = {
 } as const;
 
 export const EBIKE_BREAKDOWN_DIALOGUE_ID = "narrateur_ebikecasse";
+export const EBIKE_SCAN_HINT_DIALOGUE_ID = "narrateur_galetscan";
+export const EBIKE_DIAGNOSTIC_DIALOGUE_ID =
+  "narrateur_refroidisseur_diagnostic";
+export const EBIKE_REPAIRED_DIALOGUE_ID = "narrateur_ebikerepare";

src/data/gameplay/missionNotifications.ts

@@ -5,7 +5,7 @@ export const INTRO_MISSION_NOTIFICATION_IMAGE_PATH =
 
 export const MISSION_NOTIFICATION_IMAGE_PATHS: Record<RepairMissionId, string> =
   {
-    ebike: "/assets/world/UI/ebike-mission-notification.webm",
-    pylon: "/assets/world/UI/pylon-mission-notification.webm",
-    farm: "/assets/world/UI/farm-mission-notification.webm",
+    ebike: "/assets/world/UI/ebike.webm",
+    pylon: "/assets/world/UI/centrale.webm",
+    farm: "/assets/world/UI/laferme.webm",
   };

src/data/gameplay/repairMissionState.ts

@@ -10,6 +10,7 @@ const REPAIR_MISSION_ID_VALUES: ReadonlySet<string> = new Set(
 
 export const MISSION_STEPS = [
   "locked",
+  "electricienne_history",
   "approaching",
   "arrived",
   "npc-return",
@@ -30,12 +31,20 @@ const PYLON_ONLY_MISSION_STEPS = new Set<MissionStep>([
   "npc-return",
   "narrator-outro",
 ]);
+const FARM_ONLY_MISSION_STEPS = new Set<MissionStep>(["electricienne_history"]);
 
 export function getMissionStepsFor(
   mission: RepairMissionId,
 ): readonly MissionStep[] {
-  if (mission === "pylon") return MISSION_STEPS;
-  return MISSION_STEPS.filter((step) => !PYLON_ONLY_MISSION_STEPS.has(step));
+  return MISSION_STEPS.filter((step) => {
+    if (mission !== "pylon" && PYLON_ONLY_MISSION_STEPS.has(step)) {
+      return false;
+    }
+    if (mission !== "farm" && FARM_ONLY_MISSION_STEPS.has(step)) {
+      return false;
+    }
+    return true;
+  });
 }
 
 export function isRepairMissionId(value: string): value is RepairMissionId {
@@ -53,6 +62,8 @@ export function getNextMissionStep(
   switch (step) {
     case "locked":
       return mission === "pylon" ? "approaching" : "waiting";
+    case "electricienne_history":
+      return "done";
     case "approaching":
       return "arrived";
     case "arrived":
@@ -85,6 +96,8 @@ export function getPreviousMissionStep(
   switch (step) {
     case "locked":
       return "locked";
+    case "electricienne_history":
+      return "locked";
     case "approaching":
       return "locked";
     case "arrived":

src/pages/page.tsx

@@ -4,6 +4,7 @@ import { Canvas } from "@react-three/fiber";
 import * as THREE from "three";
 import { DebugPerf } from "@/components/debug/DebugPerf";
 import { EbikeIntroSequence } from "@/components/game/EbikeIntroSequence";
+import { EbikeRepairNarrator } from "@/components/game/EbikeRepairNarrator";
 import { AppLoadingIndicator } from "@/components/ui/AppLoadingIndicator";
 import { DialogMessage } from "@/components/ui/DialogMessage";
 import { GameUI } from "@/components/ui/GameUI";
@@ -259,6 +260,7 @@ export function HomePage(): React.JSX.Element | null {
       ) : null}
       {renderIntroOverlay()}
       <EbikeIntroSequence />
+      <EbikeRepairNarrator />
     </HandTrackingProvider>
   );
 }

src/utils/map/mapInstanceTransform.ts

@@ -3,10 +3,15 @@ import type { MapNode, MapNodeInstanceTransform } from "@/types/map/mapScene";
 export function mapNodeToInstanceTransform(
   node: MapNode,
 ): MapNodeInstanceTransform {
-  return {
-    id: node.id,
+  const transform: MapNodeInstanceTransform = {
     position: node.position,
     rotation: node.rotation,
     scale: node.scale,
   };
+
+  if (node.id !== undefined) {
+    transform.id = node.id;
+  }
+
+  return transform;
 }

src/world/GameStageContent.tsx

@@ -6,9 +6,6 @@ import { FarmNarrativeFlow } from "@/components/gameplay/farm/FarmNarrativeFlow"
 import { PylonDownedPylon } from "@/components/gameplay/pylon/PylonDownedPylon";
 import { PylonLightingEffect } from "@/components/gameplay/pylon/PylonLightingEffect";
 import { PylonNarrativeFlow } from "@/components/gameplay/pylon/PylonNarrativeFlow";
-import { ZoneDebugVisual } from "@/components/zone/ZoneDetection";
-import { PYLON_APPROACH_ZONE, PYLON_ARRIVED_ZONE } from "@/data/gameplay/zones";
-import { isDebugEnabled } from "@/utils/debug/isDebugEnabled";
 import {
   REPAIR_MISSION_POSITION_ENTRIES,
   REPAIR_MISSION_TRIGGERS,
@@ -18,7 +15,6 @@ import {
   OUTRO_STAGE_ANCHOR,
 } from "@/data/gameplay/gameStageAnchors";
 import { useGameStore } from "@/managers/stores/useGameStore";
-import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore";
 import { useRepairMissionAnchorStore } from "@/managers/stores/useRepairMissionAnchorStore";
 import {
   isFarmNarrativeStep,
@@ -92,14 +88,12 @@ export function GameStageContent(): React.JSX.Element {
   const mainState = useGameStore((state) => state.mainState);
   const pylonStep = useGameStore((state) => state.pylon.currentStep);
   const anchors = useRepairMissionAnchorStore((state) => state.anchors);
-  const repairFocusActive = useRepairFocusStore((state) => state.active);
 
   const farmStep = useGameStore((state) => state.farm.currentStep);
 
   const pylonInNarrative =
     mainState === "pylon" && isPylonNarrativeStep(pylonStep);
-  const farmInNarrative =
-    mainState === "farm" && isFarmNarrativeStep(farmStep);
+  const farmInNarrative = mainState === "farm" && isFarmNarrativeStep(farmStep);
 
   return (
     <>
@@ -107,12 +101,6 @@ export function GameStageContent(): React.JSX.Element {
       <Ebike position={EBIKE_WORLD_POSITION} />
       <PylonLightingEffect />
       <PylonDownedPylon />
-      {isDebugEnabled() && !repairFocusActive ? (
-        <>
-          <ZoneDebugVisual zone={PYLON_APPROACH_ZONE} active={false} />
-          <ZoneDebugVisual zone={PYLON_ARRIVED_ZONE} active={false} />
-        </>
-      ) : null}
       {mainState === "pylon" ? <PylonNarrativeFlow /> : null}
       {mainState === "farm" ? <FarmNarrativeFlow /> : null}
       {REPAIR_MISSION_POSITION_ENTRIES.map(({ mission }) => {