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/hand-tracking.md

@@ -20,9 +20,11 @@ Both sources funnel into the same `HandTrackingContext` so all consumers see one
 1. The active source captures or receives landmarks.
 2. The hook applies an EMA smoothing pass on the landmarks before publishing the snapshot.
 3. `HandTrackingProvider` exposes that snapshot through React context.
-4. `GrabbableObject` reads the snapshot each frame and uses the fist state plus raycasting to grab objects.
+4. `GrabbableObject` reads the snapshot each frame and uses `hand.isFist` plus raycasting to grab objects.
-5. `HandTrackingGlove` reads the same snapshot and places a rigged glove on each detected hand.
+5. `HandTrackingVisualizer` paints the SVG hand silhouette overlay on top of the canvas — the primary visualization.
-6. `HandTrackingVisualizer` paints an SVG wireframe overlay on top of the canvas.
+6. `HandTrackingGlove` (opt-in, see UI And Debug) places a rigged 3D glove on each detected hand when enabled via the debug toggle.
+
+All consumers — fist detection, grab raycasting, SVG silhouette, optional 3D glove — read the **same** landmarks from the snapshot. None of them depend on the others.
 
 ## Activation Rules
 
@@ -108,6 +110,17 @@ interface HandTrackingHand {
 
 `x` and `y` are normalized camera coordinates. `z` is a relative depth value from MediaPipe, not an absolute world-space distance.
 
+## Fist Detection
+
+`isFist` is computed in `src/lib/handTracking/browserHandTracking.ts` (`isFist()` function) from landmarks alone — no model, no glove. The check is:
+
+1. Palm center = mean of landmarks `[0, 5, 9, 13, 17]` (wrist + 4 MCPs).
+2. Palm size = distance from wrist (landmark 0) to middle MCP (landmark 9).
+3. For each of the four fingertip landmarks `[8, 12, 16, 20]`, check whether its distance to the palm center is less than `1.05 × palmSize`.
+4. `isFist === true` iff all four fingertips pass the check.
+
+The flag is attached to each hand on the snapshot at the publish step (`isFist: isFist(normalizedLandmarks)`) and read directly by `GrabbableObject.tsx` — the SVG visualizer and the 3D glove never participate in the gesture decision.
+
 ## Grab Targeting
 
 The hand grab logic lives in `src/components/three/interaction/GrabbableObject.tsx`.
@@ -142,18 +155,40 @@ This is less expressive than true depth-aware hand movement, but it is more stab
 The current debug UI includes:
 
 - `HandTrackingDebugPanel` inside `DebugOverlayLayout` for status, usage, loaded glove model, server state, hand count, and fist state
-- `HandTrackingVisualizer` for the SVG landmark overlay
+- `HandTrackingVisualizer` for the SVG hand silhouette overlay (always on when tracking is active)
-- `HandTrackingFallback` for the last-resort hand silhouette overlay
+- `HandTrackingFallback` for the last-resort hand silhouette overlay (legacy, see below)
-- `HandTrackingGlove` for the per-hand rigged glove models in the R3F scene
+- `HandTrackingGlove` for the per-hand rigged glove models in the R3F scene, opt-in via the **Show Model** toggle
 - `r3f-perf` for render performance
 - `lil-gui` for scene, camera, lighting, interaction, and grab controls
 
-The SVG visualizer uses a "blueish hand" style: white connection lines between landmarks, cyan circles with a dark blue outline. The outline gets thicker when the hand is detected as a fist, so the user gets a visual confirmation of the grab gesture without having to look at the debug panel.
+### SVG Visualizer
 
-The fallback overlay (`HandTrackingFallback`) draws a simple open-hand or fist silhouette positioned on the detected wrist landmark. It only renders for a hand whose matching glove is in the `"error"` state in `useHandTrackingGloveStatus`. This guarantees the user always sees something on their hand even when the 3D glove model fails to load.
+`HandTrackingVisualizer` is the primary hand visualization. It draws a light-blue hand silhouette with a crisp dark-blue outline by:
+
+1. Filling a palm polygon (landmarks `[1, 5, 9, 13, 17]` plus two synthetic wrist corners) and five finger tubes (thick rounded `stroke` along each finger's joint chain).
+2. Wrapping the whole thing in an SVG `<filter>` that uses `feMorphology` to dilate the merged alpha by 2 px and subtract the original, producing a single continuous outline around the union — no internal seams where the palm and finger tubes overlap.
+3. Shrinking every landmark toward the hand centroid by `RENDER_SCALE = 0.65` so the silhouette stays compact and doesn't dominate the screen.
+4. Overlaying the 21 raw landmarks and 21 bones as faint translucent lines and dots, so the user can still see the MediaPipe data feeding the silhouette.
+
+The SVG only displays when MediaPipe is active and the debug **Show Model** toggle is off (default). When the toggle is on, the SVG hides and `HandTrackingGlove` takes over.
+
+### Show Model Toggle
+
+The `Hand Tracking` debug folder exposes a single visualization switch:
+
+- `showHandTrackingModel = false` (default): SVG visualizer renders, 3D glove is not mounted at all.
+- `showHandTrackingModel = true`: SVG visualizer hides, 3D glove gets mounted for the detected hand(s).
+
+The 3D glove is treated as opt-in legacy because it had bugs (WebGL context loss, finger rig artefacts) and its hit/grab role was never load-bearing — grab has always read landmarks directly.
+
+### Fallback Overlay (legacy)
+
+`HandTrackingFallback` draws a simple open-hand or fist silhouette positioned on the detected wrist landmark. It renders for any hand whose glove is in the `"error"` state in `useHandTrackingGloveStatus`. Now that the glove is opt-in and rarely mounted, the fallback effectively only fires in the rare case where the user enables `showHandTrackingModel` and the glove fails to load. It is kept on disk for that edge case but is not part of the default visual path.
 
 ## Glove Models
 
+The 3D glove is **opt-in** via the `Show Model` debug toggle (see UI And Debug). It is not mounted by default; the SVG visualizer is the primary hand UI. The information below applies only when the toggle is enabled.
+
 `HandTrackingGlove` loads `public/models/gant_l/model.gltf` for both hands. The right hand applies `scale.x = -1` at the group level to mirror the mesh, so the thumb ends up on the correct side. Both hands therefore share the same rig and the same material.
 
 The historical `public/models/gant_r/model.gltf` is kept as legacy but is not loaded by the frontend — its GLB embeds three skeletons (`Hand_l`, `Hand_l_pad`, `Hand_r`) plus a `galet` mesh, which made the finger rig unreliable.
@@ -172,6 +207,8 @@ They are intended for future swap-by-state usage but are **not yet rigged**. The
 - Production usage is currently limited to repair mission steps that explicitly need hands.
 - MediaPipe depth is relative and currently not used for stable object depth control.
 - The virtual hit zone is an approximation based on multiple raycasts, not a real 3D collider.
+- The 3D glove is opt-in only (see `Show Model` toggle). Default visual is the SVG silhouette.
+- `HandTrackingFallback` is legacy and effectively unused unless the glove toggle is enabled and the glove fails to load.
 - The right glove is a mirrored copy of `gant_l` rather than its own mesh; in the future a dedicated right-hand model would give a better visual.
 - The `_pad` glove variants are not rigged yet, so swap-by-state (normal ↔ pad) is not wired in.
 - Finger bone animation is an approximate landmark-to-bone mapping; it still needs calibration for per-model twist, offsets, and smoothing.

docs/technical/repair-game.md

@@ -17,8 +17,10 @@ Implemented missions:
 ## Main Files
 
 | File                                                  | Responsibility                                    |
-| ---------------------------------------------- | ------------------------------------------------- |
+| ----------------------------------------------------- | ------------------------------------------------- |
 | `src/components/three/gameplay/RepairGame.tsx`        | Orchestrates the repair step machine              |
+| `src/components/three/gameplay/RepairFocusBubble.tsx` | Dark sphere shroud + cocoon decor during focus    |
+| `src/managers/stores/useRepairFocusStore.ts`          | Global flag + center for the repair focus bubble  |
 | `src/data/gameplay/repairMissions.ts`                 | Mission-specific data                             |
 | `src/types/gameplay/repairMission.ts`                 | Mission ids, step ids, guards                     |
 | `src/managers/stores/useGameStore.ts`                 | Global progression and mission transitions        |
@@ -159,8 +161,6 @@ The repair case appears near the mission object. The player can:
 
 Both paths move to `fragmented`.
 
-`useRepairMovementLocked()` locks player movement during focused repair steps and drives the repair movement indicator.
-
 ### Fragmented
 
 File:
@@ -171,6 +171,10 @@ src/components/three/models/ExplodableModel.tsx
 
 The mission object is shown split apart. A timer then moves the mission to `scanning`.
 
+`ExplodedModel.createParts` walks the GLTF tree recursively, descending through any single mesh-bearing wrapper node (e.g. `Scene > Moto > Eclatement` for the Ebike) until it reaches a node with multiple mesh-bearing children. Those children are the natural "explosion groups" authored by the modeler. This avoids exploding raw leaf meshes in local space when the model has extra empty wrapper nodes above the intended group.
+
+When mounted, `RepairGame` applies `RepairMissionConfig.modelRotation` and `modelScale` to the fragmented model so it lines up with the source inspection model in world space (e.g. the parked Ebike using `EBIKE_WORLD_ROTATION_Y` / `EBIKE_WORLD_SCALE`).
+
 The default delay comes from:
 
 ```txt
@@ -256,6 +260,37 @@ The repaired object remains visible. The player validates the completion target,
 2. the case plays its exit animation
 3. `completeMission(mission)` advances the global game progression
 
+## Focus Bubble
+
+While the player is in `fragmented`, `scanning`, `repairing` or `reassembling`, `RepairGame` flips `useRepairFocusStore.active = true` and publishes the snapped world center of the repair model.
+
+`RepairFocusBubble` reads the store and:
+
+- renders a `BackSide` sphere (radius 1, scaled 0 → 10m) tinted `#060814` at opacity 0.92
+- grows the sphere with GSAP `expo.out` over 2.5 s when focus turns on
+- shrinks back with `expo.in` over 1.2 s when focus turns off
+- mounts a small "cocoon" decor pass inside (subtle grid floor + soft directional light + ambient) that fades in once the bubble is mostly grown
+
+`Environment.tsx` and `GameStageContent.tsx` consume the same store flag to unmount the vegetation system and the zone debug visuals while the bubble is up, so trees and gizmos do not pierce the shroud. Terrain, water, sky, clouds and grass remain visible behind the bubble.
+
+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/cinematics.json

@@ -2,24 +2,18 @@
   "version": 1,
   "cinematics": [
     {
-      "id": "intro_overview",
+      "id": "outro_farm_drone",
       "timecode": 0,
-      "dialogueCues": [
-        {
-          "time": 0,
-          "dialogueId": "narrateur_bienvenueaaltera"
-        }
-      ],
       "cameraKeyframes": [
         {
           "time": 0,
-          "position": [8, 5, 12],
+          "position": [-24, 5, 65],
-          "target": [0, 2, 0]
+          "target": [-24, 2, 42]
         },
         {
-          "time": 4,
+          "time": 10,
-          "position": [12, 4, -6],
+          "position": [-24, 90, 200],
-          "target": [10, 1.4, -8]
+          "target": [-24, 0, 42]
         }
       ]
     }

public/map.json

@@ -39340,41 +39340,41 @@
                       "rotation": [0, 0.0027, 0.0819],
                       "scale": [1, 1, 1]
                     }
+                  ]
+                },
+                {
+                  "name": "pylone",
+                  "type": "Object3D",
+                  "position": [-22.8219, 6.7669, 28.1767],
+                  "rotation": [0, 0.0027, 0.0819],
+                  "scale": [1, 1, 1],
+                  "children": [
+                    {
+                      "name": "pylone",
+                      "type": "Mesh",
+                      "position": [-22.8219, 6.7669, 28.1767],
+                      "rotation": [0, 0.0027, 0.0819],
+                      "scale": [1, 1, 1]
+                    }
+                  ]
+                },
+                {
+                  "name": "pylone",
+                  "type": "Object3D",
+                  "position": [-31.5396, 5.5095, 36.2489],
+                  "rotation": [0, 0.0027, 0.0819],
+                  "scale": [1, 1, 1],
+                  "children": [
+                    {
+                      "name": "pylone",
+                      "type": "Mesh",
+                      "position": [-31.5396, 5.5095, 36.2489],
+                      "rotation": [0, 0.0027, 0.0819],
+                      "scale": [1, 1, 1]
+                    }
                   ],
                   "id": "repair:pylon"
                 },
-                {
-                  "name": "pylone",
-                  "type": "Object3D",
-                  "position": [-22.8219, 6.7669, 28.1767],
-                  "rotation": [0, 0.0027, 0.0819],
-                  "scale": [1, 1, 1],
-                  "children": [
-                    {
-                      "name": "pylone",
-                      "type": "Mesh",
-                      "position": [-22.8219, 6.7669, 28.1767],
-                      "rotation": [0, 0.0027, 0.0819],
-                      "scale": [1, 1, 1]
-                    }
-                  ]
-                },
-                {
-                  "name": "pylone",
-                  "type": "Object3D",
-                  "position": [-31.5396, 5.5095, 36.2489],
-                  "rotation": [0, 0.0027, 0.0819],
-                  "scale": [1, 1, 1],
-                  "children": [
-                    {
-                      "name": "pylone",
-                      "type": "Mesh",
-                      "position": [-31.5396, 5.5095, 36.2489],
-                      "rotation": [0, 0.0027, 0.0819],
-                      "scale": [1, 1, 1]
-                    }
-                  ]
-                },
                 {
                   "name": "pylone",
                   "type": "Object3D",

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",
@@ -78,19 +84,19 @@
     {
       "id": "narrateur_coupureelec",
       "voice": "narrateur",
-      "audio": "/sounds/dialogue/narrateur_coupureélec.mp3",
+      "audio": "/sounds/dialogue/narrateur_coupure_elec.mp3",
       "subtitleCueIndex": 9
     },
     {
       "id": "narrateur_poteaueleccasse",
       "voice": "narrateur",
-      "audio": "/sounds/dialogue/narrateur_poteauéleccassé.mp3",
+      "audio": "/sounds/dialogue/narrateur_poteau_elec_casse.mp3",
       "subtitleCueIndex": 10
     },
     {
       "id": "narrateur_courantrepare",
       "voice": "narrateur",
-      "audio": "/sounds/dialogue/narrateur_courantréparé.mp3",
+      "audio": "/sounds/dialogue/narrateur_courant_repare.mp3",
       "subtitleCueIndex": 11
     },
     {
@@ -163,7 +169,13 @@
       "id": "narrateur_histoireelectricienne",
       "voice": "narrateur",
       "audio": "/sounds/dialogue/narrateur_histoireelectricienne.mp3",
-      "subtitleCueIndex": 23
+      "subtitleCueIndices": [23, 25, 26, 27, 28]
+    },
+    {
+      "id": "narrateur_demande_aide",
+      "voice": "narrateur",
+      "audio": "/sounds/dialogue/narrateur_demande_aide.mp3",
+      "subtitleCueIndex": 24
     },
     {
       "id": "fermier_coupdemain",
@@ -182,6 +194,24 @@
       "voice": "fermier",
       "audio": "/sounds/dialogue/fermier_findemission.mp3",
       "subtitleCueIndex": 3
+    },
+    {
+      "id": "electricienne_welcome",
+      "voice": "electricienne",
+      "audio": "/sounds/dialogue/electricienne_welcome.mp3",
+      "subtitleCueIndex": 1
+    },
+    {
+      "id": "electricienne_apresMontage",
+      "voice": "electricienne",
+      "audio": "/sounds/dialogue/electricienne_aprèsmontage.mp3",
+      "subtitleCueIndex": 2
+    },
+    {
+      "id": "electricienne_aurevoir",
+      "voice": "electricienne",
+      "audio": "/sounds/dialogue/electricienne_aurevoir.mp3",
+      "subtitleCueIndex": 3
     }
   ]
 }

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
@@ -87,5 +87,25 @@ Welcome to your workshop!! So? Pretty impressive, right? Okay, quick tour of wha
 Here, this is a dashboard. You can imagine that if your fridge or oven breaks down, you won't be able to put it in the pipe haha! So here, it tells you when residents have a bulky item that broke down, or when there's a problem in the city. Uh oh... I've got an emergency, I'll have to leave you soon! So here, take your tools to repair most things: a mini 3D printer powered by electronic waste, Push-Parts gloves to disassemble objects, and a Relaunch pack!
 
 23
-00:00:00,000 --> 00:00:54,000
+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. 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. A few years ago, as you know, the northern countries were, quite unexpectedly, the first ones forced to migrate. So they began their journey, country by country, city by city, village by village. On a day of walking like so many others after several months, a climate storm caught them off guard. Having split up to find food in the village, her father and one of her two brothers sadly disappeared. It's tragic. But one day, they happened upon this place during their journey. We welcomed them with open arms, and they were slowly able to rebuild their lives among us. Today, they are an integral part of the community.
+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.
+
+26
+00:00:19,100 --> 00:00:30,600
+A few years ago, as you know, the northern countries were, quite unexpectedly, the first ones forced to migrate. So they began their journey, country by country, city by city, village by village.
+
+27
+00:00:30,600 --> 00:00:42,800
+On a day of walking like so many others after several months, a climate storm caught them off guard. Having split up to find food in the village, her father and one of her two brothers sadly disappeared. It's tragic.
+
+28
+00:00:42,800 --> 00:00:54,000
+But one day, they happened upon this place during their journey. We welcomed them with open arms, and they were slowly able to rebuild their lives among us. Today, they are an integral part of the community.

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

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,12 +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:54,000
+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. 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. 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. 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. 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.
+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 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, 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 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, ils ont pu se reconstruire doucement parmi nous et font partie intégrante de la communauté aujourd'hui.

src/components/ebike/Ebike.tsx

@@ -33,9 +33,19 @@ const _up = new THREE.Vector3(0, 1, 0);
 
 interface EbikeProps {
   position: Vector3Tuple;
+  /**
+   * When true (default), the parked position is snapped to the world terrain
+   * height. Pass false in test scenes that don't render the world terrain so
+   * the bike stays at the explicit Y of {@link position} instead of floating
+   * at the (invisible) terrain height.
+   */
+  snapToTerrain?: boolean;
 }
 
-export function Ebike({ position }: EbikeProps): React.JSX.Element {
+export function Ebike({
+  position,
+  snapToTerrain = true,
+}: EbikeProps): React.JSX.Element {
   const groupRef = useRef<THREE.Group>(null);
   const { scene } = useLoggedGLTF(EBIKE_MODEL_PATH, {
     scope: "Ebike",
@@ -45,7 +55,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
   const terrainHeight = useTerrainHeightSampler();
   const parkedPosition = useMemo<Vector3Tuple>(() => {
     const [x, y, z] = position;
-    const height = terrainHeight.getHeight(x, z) ?? y;
+    const height = snapToTerrain ? (terrainHeight.getHeight(x, z) ?? y) : y;
     const bottomOffset = getObjectBottomOffset(model, [
       EBIKE_WORLD_SCALE,
       EBIKE_WORLD_SCALE,
@@ -53,7 +63,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
     ]);
 
     return [x, height + bottomOffset, z];
-  }, [model, position, terrainHeight]);
+  }, [model, position, snapToTerrain, terrainHeight]);
   const movementMode = useGameStore((state) => state.player.movementMode);
   const mainState = useGameStore((state) => state.mainState);
   const ebikeStep = useGameStore((state) => state.ebike.currentStep);
@@ -119,12 +129,6 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
 
   // State for debug visualization (synced from refs during useFrame)
   const [showCameraPoints, setShowCameraPoints] = useState(true);
-  const [debugRestingPosition, setDebugRestingPosition] =
-    useState<Vector3Tuple>([
-      parkedPosition[0],
-      parkedPosition[1],
-      parkedPosition[2],
-    ]);
 
   // Keep movementModeRef in sync — useFrame closures capture React state at
   // render time and can become stale between renders.
@@ -135,7 +139,9 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
   // SpotLight target must be in the scene to define the cone direction.
   useEffect(() => {
     threeScene.add(headlightTarget);
-    return () => { threeScene.remove(headlightTarget); };
+    return () => {
+      threeScene.remove(headlightTarget);
+    };
   }, [threeScene, headlightTarget]);
 
   // Link the target to the SpotLight once it mounts.
@@ -192,7 +198,9 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
       console.log("[Ebike] Fork found:", (forkNode as THREE.Object3D).name);
     } else {
       const names: string[] = [];
-      model.traverse((c) => { if (c.name) names.push(c.name); });
+      model.traverse((c) => {
+        if (c.name) names.push(c.name);
+      });
       console.warn("[Ebike] Fork not found. All nodes:", names);
     }
   }, [model]);
@@ -307,9 +315,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
         }
 
         // Sync debug visualization state (throttled to avoid excessive re-renders)
-        if (showCameraPoints) {
+        // Debug visualization positions are derived elsewhere when needed.
-          setDebugRestingPosition([...restingPositionRef.current]);
-        }
       } else {
         updateEbikeSounds({ mounted: false, driving: false, breakdown: false });
         groupRef.current.position.set(...restingPositionRef.current);
@@ -326,24 +332,32 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
     }
   });
 
-  // Debug visualization positions computed from state (not refs)
-  const camPointPos: Vector3Tuple = [
-    debugRestingPosition[0] + EBIKE_CAMERA_TRANSFORM.position[0],
-    debugRestingPosition[1] + EBIKE_CAMERA_TRANSFORM.position[1],
-    debugRestingPosition[2] + EBIKE_CAMERA_TRANSFORM.position[2],
-  ];
-  const dropPointPos: Vector3Tuple = [
-    debugRestingPosition[0] + EBIKE_DROP_PLAYER_TRANSFORM.position[0],
-    debugRestingPosition[1] + EBIKE_DROP_PLAYER_TRANSFORM.position[1],
-    debugRestingPosition[2] + EBIKE_DROP_PLAYER_TRANSFORM.position[2],
-  ];
   const interactionLabel =
     mainState === "ebike"
-      ? "Réparer l'e-bike"
+      ? "Lancer le Repair Game"
       : movementMode === "walk"
         ? "Monter sur le bike"
         : "Descendre du bike";
 
+  // Hide the interact prompt while the player is actively riding the bike
+  // (driving input pressed) so the "Descendre du bike" label doesn't
+  // pollute the view. The prompt comes back the moment the bike comes to
+  // a stop. window.ebikeDriveInputActive is published every frame by
+  // PlayerController based on whether a movement key is currently held.
+  // Also hide entirely while the breakdown sequence is active — the bike
+  // must read as inert and non-interactive while the panne dialogue plays
+  // and during the auto-dismount that follows.
+  const [isEbikeDriving, setIsEbikeDriving] = useState(false);
+  const [isEbikeBreakdown, setIsEbikeBreakdown] = useState(false);
+  useFrame(() => {
+    const driving =
+      movementMode === "ebike" && window.ebikeDriveInputActive === true;
+    if (driving !== isEbikeDriving) setIsEbikeDriving(driving);
+    const breakdown = window.ebikeBreakdownActive === true;
+    if (breakdown !== isEbikeBreakdown) setIsEbikeBreakdown(breakdown);
+  });
+  const showInteractPrompt = !isEbikeDriving && !isEbikeBreakdown;
+
   const handleInteract = useCallback((): void => {
     if (window.ebikeBreakdownActive === true) return;
 
@@ -382,9 +396,15 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
         EBIKE_CAMERA_TRANSFORM.rotation[2],
       ];
 
-      animateCameraTransformTransition(targetCamPos, targetRotation, 1, () => {
+      animateCameraTransformTransition(
+        targetCamPos,
+        targetRotation,
+        1,
+        () => {
           useGameStore.getState().setPlayerMovementMode("ebike");
-      });
+        },
+        { lockInput: false },
+      );
     } else {
       const currentPos = new THREE.Vector3();
       if (groupRef.current) {
@@ -410,9 +430,15 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
         THREE.MathUtils.radToDeg(currentEuler.z),
       ];
 
-      animateCameraTransformTransition(targetCamPos, targetRotation, 1, () => {
+      animateCameraTransformTransition(
+        targetCamPos,
+        targetRotation,
+        1,
+        () => {
           useGameStore.getState().setPlayerMovementMode("walk");
-      });
+        },
+        { lockInput: false },
+      );
     }
   }, [movementMode, mainState, ebikeStep, setMissionStep, camera, position]);
 
@@ -451,6 +477,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
           {/* radius 20 → ~7 unités monde (scale 0.35).
               Sphère omnidirectionnelle pour que le raycast fonctionne
               quelle que soit l'orientation de la caméra (montée ou à pied). */}
+          {showInteractPrompt ? (
             <InteractableObject
               kind="trigger"
               label={interactionLabel}
@@ -460,16 +487,26 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
             >
               <mesh>
                 <sphereGeometry args={[8, 15, 12]} />
-              <meshBasicMaterial colorWrite={false} color={"red"} depthWrite={false} />
+                <meshBasicMaterial
+                  colorWrite={false}
+                  color={"red"}
+                  depthWrite={false}
+                />
               </mesh>
             </InteractableObject>
+          ) : null}
 
           {/* GPS + Speedmeter – same group so they are perfectly co-localised.
               GPS: full circle (Fresnel mask), renderOrder 10 000
               Speedmeter: upper-half arc overlay, renderOrder 10 001
               rotation: Math.PI/2 radians = 90° (NOT the number 90 which = ~116.6°) */}
           <group position={[2, 6, 0]} rotation={[0, -80, 0]}>
-            <EbikeSpeedmeter width={3} height={1.5} position={[0, 0.4, 0]} gaugeInnerR={0.33} gaugeOuterR={0.445}
+            <EbikeSpeedmeter
+              width={3}
+              height={1.5}
+              position={[0, 0.4, 0]}
+              gaugeInnerR={0.33}
+              gaugeOuterR={0.445}
               gaugeWidth={2.5}
               gaugeHeight={2.1}
               gaugeOffsetX={0}

src/components/ebike/EbikeGPSMap.tsx

@@ -181,7 +181,12 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
 
   // Sync texture into uniform when it changes (canvas resize)
   useEffect(() => {
-    shaderMat.uniforms.map.value = texture;
+    const mapUniform = shaderMat.uniforms.map;
+    if (!mapUniform) return;
+
+    // External Three.js material uniform sync — intentional side effect.
+    // eslint-disable-next-line react-hooks/immutability
+    mapUniform.value = texture;
   }, [shaderMat, texture]);
 
   // Cleanup on unmount
@@ -196,6 +201,8 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
   // Resize the canvas whenever canvasSize changes (texture declared above)
   useEffect(() => {
     Object.assign(offscreenCanvas, { width: canvasSize, height: canvasSize });
+    // External Three.js texture invalidation — intentional side effect.
+    // eslint-disable-next-line react-hooks/immutability
     texture.needsUpdate = true;
   }, [canvasSize, offscreenCanvas, texture]);
 

src/components/ebike/EbikeSpeedmeter.tsx

@@ -123,6 +123,8 @@ export function EbikeSpeedmeter({
   );
 
   // ── Frame loop ──────────────────────────────────────────────────────────────
+  /* External Three.js canvas+texture sync — intentional side effects in useFrame. */
+  /* eslint-disable react-hooks/immutability */
   useFrame((_, delta) => {
     // 1. Smooth speed factor
     const target = THREE.MathUtils.clamp(window.ebikeSpeedFactor ?? 0, 0, 1);
@@ -151,7 +153,7 @@ export function EbikeSpeedmeter({
     // Default centre: horizontal middle + needle-pivot height.
     // gaugeOffsetX/Y shift the pivot so the arc aligns with cadran.png.
     const cx = size * (0.5 + gaugeOffsetX);
-    const cy = size * ((1 - NEEDLE_PIVOT_UV_Y) + gaugeOffsetY); // default ≈ 0.88 × size
+    const cy = size * (1 - NEEDLE_PIVOT_UV_Y + gaugeOffsetY); // default ≈ 0.88 × size
 
     const outerR = size * gaugeOuterR;
     const innerR = size * gaugeInnerR;
@@ -181,6 +183,7 @@ export function EbikeSpeedmeter({
     }
 
     fillTexture.needsUpdate = true;
+    /* eslint-enable react-hooks/immutability */
   });
 
   return (
@@ -212,11 +215,12 @@ export function EbikeSpeedmeter({
       </mesh>
 
       {/* Needle — pivot at bottom-centre of the arc */}
-      <group ref={needleGroupRef} position={[0, -height * 0.38, 0.002]} rotation={[0, 0, 0]}>
+      <group
-        <mesh
+        ref={needleGroupRef}
-          position={[0, needleHeight / 2, 0]}
+        position={[0, -height * 0.38, 0.002]}
-          renderOrder={renderOrder + 1}
+        rotation={[0, 0, 0]}
       >
+        <mesh position={[0, needleHeight / 2, 0]} renderOrder={renderOrder + 1}>
           <planeGeometry args={[needleWidth, needleHeight]} />
           <meshBasicMaterial
             map={needleTexture}

src/components/game/EbikeIntroSequence.tsx

@@ -14,8 +14,10 @@ import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
 import { playDialogueById } from "@/utils/dialogues/playDialogue";
 
 export function EbikeIntroSequence(): React.JSX.Element | null {
+  const mainState = useGameStore((state) => state.mainState);
   const introStep = useGameStore((state) => state.intro.currentStep);
   const movementMode = useGameStore((state) => state.player.movementMode);
+  const pylonStep = useGameStore((state) => state.pylon.currentStep);
   const setIntroStep = useGameStore((state) => state.setIntroStep);
   const completeIntro = useGameStore((state) => state.completeIntro);
   const [breakdownDialogueDone, setBreakdownDialogueDone] = useState(false);
@@ -134,6 +136,16 @@ export function EbikeIntroSequence(): React.JSX.Element | null {
     }
   }, [introStep]);
 
+  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

@@ -0,0 +1,171 @@
+import { useEffect, useRef } from "react";
+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 OUTRO_DELAY_MS = 5_000; // delay after audio ends before transitioning to outro
+
+/**
+ * Text blocks for the electricienne history narration (max 5 lines each).
+ * Displayed sequentially — timings are calculated dynamically from the actual
+ * audio duration so they are always correct regardless of the mp3 length.
+ */
+const HISTOIRE_BLOCKS = [
+  "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.",
+  "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.",
+  "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.",
+  "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.",
+  "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.",
+] as const;
+
+const TOTAL_CHARS = HISTOIRE_BLOCKS.reduce((sum, b) => sum + b.length, 0);
+
+/** Compute start/end times for each block based on actual audio duration. */
+function buildBlockTimings(
+  duration: number,
+): Array<{ start: number; end: number }> {
+  let t = 0;
+  return HISTOIRE_BLOCKS.map((block) => {
+    const blockDuration = (block.length / TOTAL_CHARS) * duration;
+    const start = t;
+    t += blockDuration;
+    return { start, end: t };
+  });
+}
+
+/**
+ * Play the histoire audio and keep `useSubtitleStore` in sync with
+ * dynamically-computed block boundaries.
+ * Movement is intentionally NOT blocked so the player can explore while
+ * listening to the narration.
+ * `onAudioEnded` fires once when the audio element emits "ended".
+ */
+function useHistoireSubtitlePlayback(
+  enabled: boolean,
+  onAudioEnded?: () => void,
+): void {
+  // Keep callback in a ref so the effect doesn't need it as a dependency.
+  const onAudioEndedRef = useRef(onAudioEnded);
+  useEffect(() => {
+    onAudioEndedRef.current = onAudioEnded;
+  });
+
+  useEffect(() => {
+    if (!enabled) return undefined;
+
+    let isCancelled = false;
+
+    const audio = AudioManager.getInstance().playSound(HISTOIRE_AUDIO_PATH, 1, {
+      category: "dialogue",
+    });
+
+    if (!audio) return undefined;
+
+    const { setActiveSubtitle, clearActiveSubtitle } =
+      useSubtitleStore.getState();
+
+    /** Wire up block-level subtitle sync once we know the audio duration. */
+    function startSync(): void {
+      const duration = audio.duration;
+      if (!duration || isNaN(duration) || isCancelled) return;
+
+      const timings = buildBlockTimings(duration);
+
+      function onTimeUpdate(): void {
+        const t = audio.currentTime;
+        const idx = timings.findIndex(
+          ({ start, end }) => t >= start && t < end,
+        );
+        if (idx >= 0) {
+          const text = HISTOIRE_BLOCKS[idx];
+          if (text === undefined) return;
+
+          setActiveSubtitle({
+            speaker: "Narrateur",
+            text,
+          });
+        }
+      }
+
+      function onEnded(): void {
+        clearActiveSubtitle();
+        onAudioEndedRef.current?.();
+      }
+
+      audio.addEventListener("timeupdate", onTimeUpdate);
+      audio.addEventListener("ended", onEnded, { once: true });
+    }
+
+    // If duration is already known (cached audio), start immediately.
+    if (audio.duration && !isNaN(audio.duration)) {
+      startSync();
+    } else {
+      audio.addEventListener("loadedmetadata", startSync, { once: true });
+    }
+
+    return () => {
+      isCancelled = true;
+      audio.pause();
+      useSubtitleStore.getState().clearActiveSubtitle();
+    };
+  }, [enabled]);
+}
+
+/**
+ * Handles the farm mission narrative intro:
+ *   locked → (auto) → electricienne_history → plays audio with block subtitles
+ *                   → 5 s after audio ends → completeMission("farm") → outro
+ */
+export function FarmNarrativeFlow(): null {
+  const mainState = useGameStore((state) => state.mainState);
+  const step = useGameStore((state) => state.farm.currentStep);
+  const setMissionStep = useGameStore((state) => state.setMissionStep);
+  const completeMission = useGameStore((state) => state.completeMission);
+
+  // locked is purely a gate — transition immediately to electricienne_history.
+  useEffect(() => {
+    if (mainState !== "farm" || step !== "locked") return;
+    setMissionStep("farm", "electricienne_history");
+  }, [mainState, step, setMissionStep]);
+
+  // Ensure movement is always allowed during the electricienne_history narration,
+  // regardless of what the previous step may have blocked.
+  const setCanMove = useGameStore((state) => state.setCanMove);
+  useEffect(() => {
+    if (mainState !== "farm" || step !== "electricienne_history") return;
+    setCanMove(true);
+  }, [mainState, step, setCanMove]);
+
+  // 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,
+  );
+
+  useEffect(() => {
+    return () => {
+      if (outroTimeoutRef.current !== null) {
+        window.clearTimeout(outroTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleAudioEnded = (): void => {
+    if (outroTimeoutRef.current !== null) {
+      window.clearTimeout(outroTimeoutRef.current);
+    }
+    outroTimeoutRef.current = window.setTimeout(() => {
+      outroTimeoutRef.current = null;
+      completeMission("farm");
+    }, OUTRO_DELAY_MS);
+  };
+
+  useHistoireSubtitlePlayback(
+    mainState === "farm" && step === "electricienne_history",
+    handleAudioEnded,
+  );
+
+  return null;
+}

src/components/gameplay/pylon/PylonDownedPylon.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useRef, useState } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useGLTF } from "@react-three/drei";
+import * as THREE from "three";
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { useRepairMissionAnchorStore } from "@/managers/stores/useRepairMissionAnchorStore";
+import { useTerrainSnappedPosition } from "@/hooks/three/useTerrainHeight";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+import {
+  PYLON_DOWNED_ROTATION,
+  PYLON_NARRATIVE_INTERACT_RADIUS,
+  PYLON_NARRATIVE_DIALOGUES,
+  PYLON_STRAIGHTEN_ANIMATION_DURATION_MS,
+  PYLON_UPRIGHT_ROTATION,
+  PYLON_WORLD_POSITION,
+} from "@/data/gameplay/pylonConfig";
+import { isRepairGameStep } from "@/types/gameplay/repairMission";
+import { pylonStraighteningSignal } from "@/components/gameplay/pylon/pylonSignals";
+
+const PYLON_MODEL_PATH = "/models/pylone/model.glb";
+
+export function PylonDownedPylon(): React.JSX.Element | null {
+  const mainState = useGameStore((state) => state.mainState);
+  const step = useGameStore((state) => state.pylon.currentStep);
+  const setCanMove = useGameStore((state) => state.setCanMove);
+  // Use the repair:pylon anchor from the store so the downed pylon is always
+  // co-located with the instanced mesh it replaces. Falls back to the
+  // hard-coded constant while the map is loading or unavailable.
+  const pylonAnchor = useRepairMissionAnchorStore(
+    (state) => state.anchors.pylon,
+  );
+  // 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 [isStraightening, setIsStraightening] = useState(false);
+  // Keeps the pylon upright after the animation completes while
+  // PylonFarmerNPC plays the post-raise audio sequence.
+  const [isRaised, setIsRaised] = useState(false);
+  const groupRef = useRef<THREE.Group>(null);
+  const straightenStartRef = useRef<number | null>(null);
+  const hasPlayedFirstAudioRef = useRef(false);
+
+  // Hidden outside the pylon mission and once the pylon has been raised
+  // (repair-game steps take over from there).
+  const shouldRender = mainState === "pylon" && !isRepairGameStep(step);
+
+  useEffect(() => {
+    if (step === "arrived") {
+      hasPlayedFirstAudioRef.current = false;
+      // Reset the "raised" latch when a new run begins. This is derived
+      // resync from the step prop and runs once per step transition.
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setIsRaised(false);
+    }
+  }, [step]);
+
+  const { scene } = useGLTF(PYLON_MODEL_PATH);
+
+  useFrame(() => {
+    const group = groupRef.current;
+    if (!group) return;
+
+    if (!isStraightening || straightenStartRef.current === null) {
+      group.rotation.set(
+        ...(isRaised ? PYLON_UPRIGHT_ROTATION : PYLON_DOWNED_ROTATION),
+      );
+      return;
+    }
+
+    const elapsed = performance.now() - straightenStartRef.current;
+    const t = Math.min(elapsed / PYLON_STRAIGHTEN_ANIMATION_DURATION_MS, 1);
+    const eased = 1 - Math.pow(1 - t, 3);
+    const startEuler = new THREE.Euler(...PYLON_DOWNED_ROTATION);
+
+    group.rotation.set(
+      THREE.MathUtils.lerp(startEuler.x, 0, eased),
+      startEuler.y,
+      THREE.MathUtils.lerp(startEuler.z, 0, eased),
+    );
+  });
+
+  const isPylonInteractive = step === "arrived" || step === "npc-return";
+
+  const beginStraighten = (): void => {
+    setIsStraightening(true);
+    pylonStraighteningSignal.started = true;
+    pylonStraighteningSignal.completed = false;
+    straightenStartRef.current = performance.now();
+    setCanMove(false);
+    if (groupRef.current) {
+      groupRef.current.rotation.set(...PYLON_DOWNED_ROTATION);
+    }
+    window.setTimeout(() => {
+      setIsStraightening(false);
+      pylonStraighteningSignal.started = false;
+      // Keep pylon upright while PylonFarmerNPC plays the audio sequence.
+      // PylonFarmerNPC will call setMissionStep("pylon", "inspected") once done.
+      setIsRaised(true);
+      setCanMove(true);
+      pylonStraighteningSignal.completed = true;
+    }, PYLON_STRAIGHTEN_ANIMATION_DURATION_MS);
+  };
+
+  if (!shouldRender) return null;
+
+  return (
+    <group ref={groupRef} position={position} rotation={PYLON_DOWNED_ROTATION}>
+      <primitive object={scene.clone(true)} />
+      {isPylonInteractive ? (
+        <InteractableObject
+          kind="trigger"
+          label={
+            step === "arrived" ? "Inspecter le pylône" : "Redresser le pylône"
+          }
+          position={position}
+          radius={PYLON_NARRATIVE_INTERACT_RADIUS}
+          onPress={() => {
+            if (step === "arrived") {
+              if (!hasPlayedFirstAudioRef.current) {
+                hasPlayedFirstAudioRef.current = true;
+                void (async () => {
+                  const manifest = await loadDialogueManifest();
+                  if (!manifest) return;
+                  const audio = await playDialogueById(
+                    manifest,
+                    PYLON_NARRATIVE_DIALOGUES.brokenPylon,
+                  );
+                  if (!audio) return;
+                  audio.addEventListener(
+                    "ended",
+                    () => {
+                      void (async () => {
+                        const m = await loadDialogueManifest();
+                        if (!m) return;
+                        await playDialogueById(
+                          m,
+                          PYLON_NARRATIVE_DIALOGUES.demandeAide,
+                        );
+                      })();
+                    },
+                    { once: true },
+                  );
+                })();
+              } else {
+                void (async () => {
+                  const manifest = await loadDialogueManifest();
+                  if (!manifest) return;
+                  await playDialogueById(
+                    manifest,
+                    PYLON_NARRATIVE_DIALOGUES.demandeAide,
+                  );
+                })();
+              }
+            } else if (step === "npc-return" && !isStraightening) {
+              beginStraighten();
+            }
+          }}
+        >
+          <mesh>
+            <sphereGeometry args={[1, 8, 8]} />
+            <meshBasicMaterial transparent opacity={0} depthWrite={false} />
+          </mesh>
+        </InteractableObject>
+      ) : null}
+    </group>
+  );
+}
+
+useGLTF.preload(PYLON_MODEL_PATH);

src/components/gameplay/pylon/PylonFarmerNPC.tsx

@@ -0,0 +1,296 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useAnimations } from "@react-three/drei";
+import { useGLTF } from "@react-three/drei";
+import { SkeletonUtils } from "three-stdlib";
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
+import {
+  PYLON_FARMER_NPC_AFTER_POSITION,
+  PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight,
+  PYLON_FARMER_NPC_AFTER_SCALE,
+  PYLON_FARMER_NPC_POSITION,
+  PYLON_FARMER_NPC_WALK_LOOK_AT,
+  PYLON_FARMER_NPC_WALK_SPEED,
+  PYLON_NARRATIVE_DIALOGUES,
+  PYLON_NARRATIVE_INTERACT_RADIUS,
+  PYLON_WORLD_POSITION,
+} from "@/data/gameplay/pylonConfig";
+import { pylonStraighteningSignal } from "@/components/gameplay/pylon/pylonSignals";
+
+const ELECTRICIENNE_MODEL_PATH = "/models/electricienne-animated/model.gltf";
+const ANIM_FADE = 0.3;
+const ARRIVE_THRESHOLD = 0.12;
+
+type NPCAnimation = "idle" | "walk" | "push";
+
+const _target = new THREE.Vector3();
+
+/**
+ * Compute the Y rotation (radians) for a model whose default forward
+ * direction is +Z, so that it faces from `from` toward `to`.
+ */
+function faceToward(
+  from: THREE.Vector3,
+  to: readonly [number, number, number],
+): number {
+  const dx = to[0] - from.x;
+  const dz = to[2] - from.z;
+  return Math.atan2(dx, dz);
+}
+
+/**
+ * Outer shell — only checks visibility conditions.
+ * Rendering is delegated to PylonFarmerNPCContent so that the heavy hooks
+ * (useFrame, useAnimations) are only active while the NPC is actually shown.
+ */
+export function PylonFarmerNPC(): React.JSX.Element | null {
+  const mainState = useGameStore((state) => state.mainState);
+  const step = useGameStore((state) => state.pylon.currentStep);
+
+  if (mainState !== "pylon") return null;
+  // Visible during narrative + at repair completion (hides during repair steps)
+  if (
+    step !== "arrived" &&
+    step !== "npc-return" &&
+    step !== "inspected" &&
+    step !== "done"
+  ) {
+    return null;
+  }
+
+  return <PylonFarmerNPCContent />;
+}
+
+// ─── Inner component — heavy hooks only run when NPC is mounted ──────────────
+function PylonFarmerNPCContent(): React.JSX.Element {
+  const step = useGameStore((state) => state.pylon.currentStep);
+  const setMissionStep = useGameStore((state) => state.setMissionStep);
+  const camera = useThree((state) => state.camera);
+
+  const groupRef = useRef<THREE.Group>(null);
+  const currentPosRef = useRef(new THREE.Vector3(...PYLON_FARMER_NPC_POSITION));
+
+  // Animation state guard — null forces playAnim to always trigger
+  const currentAnimRef = useRef<NPCAnimation | null>(null);
+
+  // Signal edge tracking
+  const wasStraighteningRef = useRef(false);
+  const wasCompletedRef = useRef(false);
+
+  // Saved Y rotation used whenever the NPC is stationary
+  const savedRotationYRef = useRef<number>(0);
+
+  const { scene, animations } = useLoggedGLTF(ELECTRICIENNE_MODEL_PATH, {
+    scope: "PylonFarmerNPC",
+  });
+  const model = useMemo(() => SkeletonUtils.clone(scene), [scene]);
+
+  // actions is in deps of playAnim: when useAnimations populates it (async useState
+  // inside drei), playAnim recreates → useEffect([step, playAnim]) re-fires → animation plays.
+  const { actions } = useAnimations(animations, model);
+
+  // ─── playAnim ─────────────────────────────────────────────────────────────
+  // NOTE: actions is intentionally in the dep array so this callback is
+  // recreated when drei's internal state populates the actions map.
+  // External THREE.AnimationAction lifecycle methods (fadeOut/fadeIn/play +
+  // setLoop/clampWhenFinished mutations) are intentional side effects on
+  // drei-managed objects.
+  /* eslint-disable react-hooks/immutability */
+  const playAnim = useCallback(
+    (name: NPCAnimation, fade = ANIM_FADE): void => {
+      if (currentAnimRef.current === name) return;
+      currentAnimRef.current = name;
+
+      Object.values(actions).forEach((a) => a?.fadeOut(fade));
+
+      const action = actions[name];
+      if (!action) return;
+
+      if (name === "push") {
+        action.setLoop(THREE.LoopOnce, 1);
+        action.clampWhenFinished = true;
+      }
+      action.reset().fadeIn(fade).play();
+    },
+    [actions],
+  );
+  /* eslint-enable react-hooks/immutability */
+
+  // ─── Async audio after pylon is raised ────────────────────────────────────
+  const playPostRaiseAudioAndAdvance = useCallback(async () => {
+    const manifest = await loadDialogueManifest();
+    if (manifest) {
+      const audio = await playDialogueById(
+        manifest,
+        PYLON_NARRATIVE_DIALOGUES.electricienneApresMontage,
+      );
+      if (audio) {
+        await new Promise<void>((resolve) => {
+          audio.addEventListener("ended", () => resolve(), { once: true });
+          audio.addEventListener("error", () => resolve(), { once: true });
+        });
+      }
+    }
+    pylonStraighteningSignal.completed = false;
+    setMissionStep("pylon", "inspected");
+  }, [setMissionStep]);
+
+  // ─── Step-driven animation ────────────────────────────────────────────────
+  // Fires when step changes OR when playAnim changes (i.e. when actions load).
+  // playAnim mutates drei-managed AnimationAction internals (intentional).
+  /* eslint-disable react-hooks/immutability */
+  useEffect(() => {
+    currentAnimRef.current = null;
+    if (step === "arrived") {
+      currentPosRef.current.set(...PYLON_FARMER_NPC_POSITION);
+      wasStraighteningRef.current = false;
+      wasCompletedRef.current = false;
+      savedRotationYRef.current = 0;
+      playAnim("idle");
+    } else if (step === "npc-return") {
+      playAnim("walk");
+    } else if (step === "inspected") {
+      playAnim("idle");
+    } 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,
+      );
+      savedRotationYRef.current = faceToward(
+        currentPosRef.current,
+        PYLON_WORLD_POSITION,
+      );
+      playAnim("idle");
+    }
+  }, [step, playAnim]);
+
+  // ─── Per-frame: movement + rotation + signal detection ───────────────────
+  useFrame((_, delta) => {
+    const group = groupRef.current;
+    if (!group) return;
+
+    const isStraightening = pylonStraighteningSignal.started;
+    const isCompleted = pylonStraighteningSignal.completed;
+
+    // Rising edge: pylon straightening starts → push
+    if (isStraightening && !wasStraighteningRef.current) {
+      wasStraighteningRef.current = true;
+      currentAnimRef.current = null;
+      playAnim("push");
+    }
+
+    // Rising edge: straightening completed → idle + face player + audio
+    if (isCompleted && !wasCompletedRef.current) {
+      wasCompletedRef.current = true;
+      currentAnimRef.current = null;
+      playAnim("idle");
+      savedRotationYRef.current = faceToward(currentPosRef.current, [
+        camera.position.x,
+        camera.position.y,
+        camera.position.z,
+      ]);
+      void playPostRaiseAudioAndAdvance();
+    }
+
+    // ── Position ──────────────────────────────────────────────────────────
+    if (step === "npc-return" && !isCompleted) {
+      const targetPos = isStraightening
+        ? PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight
+        : PYLON_FARMER_NPC_AFTER_POSITION;
+      _target.set(...targetPos);
+
+      const dist = currentPosRef.current.distanceTo(_target);
+      if (dist > ARRIVE_THRESHOLD) {
+        const t = Math.min((PYLON_FARMER_NPC_WALK_SPEED * delta) / dist, 1);
+        currentPosRef.current.lerp(_target, t);
+      } else if (!isStraightening && currentAnimRef.current === "walk") {
+        playAnim("idle");
+        savedRotationYRef.current = faceToward(
+          currentPosRef.current,
+          PYLON_WORLD_POSITION,
+        );
+      }
+      group.position.copy(currentPosRef.current);
+    } else if (step === "inspected" || step === "done") {
+      group.position.set(...PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight);
+    } else if (isCompleted) {
+      group.position.copy(currentPosRef.current);
+    } else {
+      group.position.set(...PYLON_FARMER_NPC_POSITION);
+    }
+
+    // ── Rotation ──────────────────────────────────────────────────────────
+    if (
+      step === "npc-return" &&
+      !isCompleted &&
+      currentAnimRef.current === "walk"
+    ) {
+      const walkRotY = faceToward(
+        currentPosRef.current,
+        PYLON_FARMER_NPC_WALK_LOOK_AT,
+      );
+      group.rotation.set(0, walkRotY, 0);
+    } else {
+      group.rotation.set(0, savedRotationYRef.current, 0);
+    }
+
+    group.scale.setScalar(PYLON_FARMER_NPC_AFTER_SCALE);
+  });
+  /* eslint-enable react-hooks/immutability */
+
+  return (
+    <group ref={groupRef} position={PYLON_FARMER_NPC_POSITION}>
+      <primitive object={model} />
+      {step === "arrived" ? (
+        <InteractableObject
+          kind="trigger"
+          label="Parler à l'électricienne"
+          position={PYLON_FARMER_NPC_POSITION}
+          radius={PYLON_NARRATIVE_INTERACT_RADIUS}
+          onPress={() => {
+            // Turn to face the player the moment they engage the NPC
+            savedRotationYRef.current = faceToward(currentPosRef.current, [
+              camera.position.x,
+              camera.position.y,
+              camera.position.z,
+            ]);
+
+            void (async () => {
+              const manifest = await loadDialogueManifest();
+              if (!manifest) {
+                setMissionStep("pylon", "npc-return");
+                return;
+              }
+              const audio = await playDialogueById(
+                manifest,
+                PYLON_NARRATIVE_DIALOGUES.electricienneWelcome,
+              );
+              if (!audio) {
+                setMissionStep("pylon", "npc-return");
+                return;
+              }
+              audio.addEventListener(
+                "ended",
+                () => setMissionStep("pylon", "npc-return"),
+                { once: true },
+              );
+            })();
+          }}
+        >
+          <mesh>
+            <sphereGeometry args={[1, 8, 8]} />
+            <meshBasicMaterial transparent opacity={0} depthWrite={false} />
+          </mesh>
+        </InteractableObject>
+      ) : null}
+    </group>
+  );
+}
+
+useGLTF.preload(ELECTRICIENNE_MODEL_PATH);

src/components/gameplay/pylon/PylonLightingEffect.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { useFrame } from "@react-three/fiber";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { LIGHTING_STATE } from "@/world/lightingState";
+import { LIGHTING_DEFAULTS } from "@/data/world/lightingConfig";
+
+// ─── Pylon atmosphere colours ─────────────────────────────────────────────────
+// Applied from "approaching" until the pylon mission ends.
+const PYLON_AMBIENT_COLOR = "#7b87c8"; // blue-violet
+const PYLON_SUN_COLOR = "#a882d4"; // lavender-purple
+
+// Lerp speed (1 = full transition in ~1 s at 60 fps)
+const TRANSITION_SPEED = 0.8;
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function PylonLightingEffect(): null {
+  const mainState = useGameStore((state) => state.mainState);
+  const step = useGameStore((state) => state.pylon.currentStep);
+
+  // True from "approaching" until done — lighting starts reverting as soon as
+  // the repair is complete (powerup sfx plays at "done", outro dialogue at "narrator-outro").
+  const isActive =
+    mainState === "pylon" &&
+    step !== "locked" &&
+    step !== "done" &&
+    step !== "narrator-outro";
+
+  // Working THREE.Color instances — lerped every frame
+  const ambientRef = useRef(new THREE.Color(LIGHTING_STATE.ambientColor));
+  const sunRef = useRef(new THREE.Color(LIGHTING_STATE.sunColor));
+
+  // Target colours — updated reactively when isActive changes
+  const targetAmbientRef = useRef(
+    new THREE.Color(LIGHTING_DEFAULTS.ambientColor),
+  );
+  const targetSunRef = useRef(new THREE.Color(LIGHTING_DEFAULTS.sunColor));
+
+  useEffect(() => {
+    if (isActive) {
+      targetAmbientRef.current.set(PYLON_AMBIENT_COLOR);
+      targetSunRef.current.set(PYLON_SUN_COLOR);
+    } else {
+      targetAmbientRef.current.set(LIGHTING_DEFAULTS.ambientColor);
+      targetSunRef.current.set(LIGHTING_DEFAULTS.sunColor);
+    }
+  }, [isActive]);
+
+  useFrame((_, delta) => {
+    const t = Math.min(TRANSITION_SPEED * delta, 1);
+
+    ambientRef.current.lerp(targetAmbientRef.current, t);
+    sunRef.current.lerp(targetSunRef.current, t);
+
+    LIGHTING_STATE.ambientColor = `#${ambientRef.current.getHexString()}`;
+    LIGHTING_STATE.sunColor = `#${sunRef.current.getHexString()}`;
+  });
+
+  return null;
+}

src/components/gameplay/pylon/PylonNarrativeFlow.tsx

@@ -0,0 +1,161 @@
+import { useEffect } from "react";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { useDialoguePlayback } from "@/hooks/gameplay/useDialoguePlayback";
+import { ZoneDetection } from "@/components/zone/ZoneDetection";
+import { PylonFarmerNPC } from "@/components/gameplay/pylon/PylonFarmerNPC";
+import { PylonNarratorOutro } from "@/components/gameplay/pylon/PylonNarratorOutro";
+import { PYLON_APPROACH_ZONE, PYLON_ARRIVED_ZONE } from "@/data/gameplay/zones";
+import { PYLON_NARRATIVE_DIALOGUES } from "@/data/gameplay/pylonConfig";
+import { AudioManager } from "@/managers/AudioManager";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+
+const PYLON_POWERDOWN_SFX = "/sounds/effect/generateur-powerdown.mp3";
+const PYLON_POWERUP_SFX = "/sounds/effect/generateur-powerup.mp3";
+
+export function PylonNarrativeFlow(): React.JSX.Element | null {
+  const mainState = useGameStore((state) => state.mainState);
+  const step = useGameStore((state) => state.pylon.currentStep);
+  const setMissionStep = useGameStore((state) => state.setMissionStep);
+  const setCanMove = useGameStore((state) => state.setCanMove);
+
+  // ── approaching : powerdown sfx → then electricOutage dialogue ────────────
+  useEffect(() => {
+    if (mainState !== "pylon" || step !== "approaching") return undefined;
+
+    let isCancelled = false;
+    setCanMove(false);
+
+    void (async () => {
+      // 1. Play the generator powerdown sound effect
+      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) {
+        await new Promise<void>((resolve) => {
+          sfx.addEventListener("ended", () => resolve(), { once: true });
+          sfx.addEventListener("error", () => resolve(), { once: true });
+        });
+      }
+
+      if (isCancelled) return;
+
+      // 3. Play the narrative dialogue
+      const manifest = await loadDialogueManifest();
+      if (isCancelled || !manifest) {
+        setCanMove(true);
+        return;
+      }
+
+      const audio = await playDialogueById(
+        manifest,
+        PYLON_NARRATIVE_DIALOGUES.electricOutage,
+      );
+
+      if (isCancelled || !audio) {
+        setCanMove(true);
+        return;
+      }
+
+      audio.addEventListener(
+        "ended",
+        () => {
+          setCanMove(true);
+        },
+        { once: true },
+      );
+    })();
+
+    return () => {
+      isCancelled = true;
+      setCanMove(true);
+    };
+  }, [mainState, step, setCanMove]);
+
+  // ── arrived : searchCentral dialogue (unchanged) ──────────────────────────
+  useDialoguePlayback({
+    enabled: mainState === "pylon" && step === "arrived",
+    dialogueId: PYLON_NARRATIVE_DIALOGUES.searchCentral,
+  });
+
+  // ── inspected (demo skip) : jump straight to done after 5 s ─────────────
+  useEffect(() => {
+    if (mainState !== "pylon" || step !== "inspected") return undefined;
+
+    const timeoutId = window.setTimeout(() => {
+      setMissionStep("pylon", "done");
+    }, 5_000);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [mainState, step, setMissionStep]);
+
+  // ── done : powerup sfx + lighting revert → auto-transition to narrator-outro
+  useEffect(() => {
+    if (mainState !== "pylon" || step !== "done") return undefined;
+
+    const sfx = AudioManager.getInstance().playSound(PYLON_POWERUP_SFX, 1, {
+      category: "sfx",
+    });
+
+    if (sfx) {
+      sfx.addEventListener(
+        "ended",
+        () => setMissionStep("pylon", "narrator-outro"),
+        { once: true },
+      );
+      sfx.addEventListener(
+        "error",
+        () => setMissionStep("pylon", "narrator-outro"),
+        { once: true },
+      );
+    } else {
+      // Fallback if the audio can't load
+      setMissionStep("pylon", "narrator-outro");
+    }
+
+    return undefined;
+  }, [mainState, step, setMissionStep]);
+
+  // narrator-outro audio sequence + completeMission are handled in PylonNarratorOutro
+
+  if (mainState !== "pylon") return null;
+
+  if (step === "locked") {
+    return (
+      <ZoneDetection
+        key="pylon-approach"
+        zone={PYLON_APPROACH_ZONE}
+        onEnter={() => setMissionStep("pylon", "approaching")}
+      />
+    );
+  }
+
+  if (step === "approaching") {
+    return (
+      <ZoneDetection
+        key="pylon-arrived"
+        zone={PYLON_ARRIVED_ZONE}
+        onEnter={() => setMissionStep("pylon", "arrived")}
+      />
+    );
+  }
+
+  if (
+    step === "arrived" ||
+    step === "npc-return" ||
+    step === "inspected" ||
+    step === "done"
+  ) {
+    return <PylonFarmerNPC />;
+  }
+
+  if (step === "narrator-outro") {
+    return <PylonNarratorOutro />;
+  }
+
+  return null;
+}

src/components/gameplay/pylon/PylonNarratorOutro.tsx

@@ -0,0 +1,72 @@
+import { useEffect } from "react";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+import { PYLON_NARRATIVE_DIALOGUES } from "@/data/gameplay/pylonConfig";
+
+/**
+ * Plays the narrator-outro audio sequence:
+ *   1. electricienne_aurevoir  ("À la prochaine !")
+ *   2. narrateur_courantrepare ("powerRestored")
+ * then completes the pylon mission.
+ */
+export function PylonNarratorOutro(): null {
+  const completeMission = useGameStore((state) => state.completeMission);
+  const setCanMove = useGameStore((state) => state.setCanMove);
+
+  useEffect(() => {
+    let cancelled = false;
+    setCanMove(false);
+
+    void (async () => {
+      const manifest = await loadDialogueManifest();
+      if (cancelled || !manifest) {
+        setCanMove(true);
+        return;
+      }
+
+      // 1. Électricienne : "À la prochaine !"
+      const audio1 = await playDialogueById(
+        manifest,
+        PYLON_NARRATIVE_DIALOGUES.electricienneAurevoir,
+      );
+      if (audio1 && !cancelled) {
+        await new Promise<void>((resolve) => {
+          audio1.addEventListener("ended", () => resolve(), { once: true });
+          audio1.addEventListener("error", () => resolve(), { once: true });
+        });
+      }
+
+      if (cancelled) {
+        setCanMove(true);
+        return;
+      }
+
+      // 2. Narrateur : "Le courant est réparé"
+      const audio2 = await playDialogueById(
+        manifest,
+        PYLON_NARRATIVE_DIALOGUES.powerRestored,
+      );
+      if (audio2 && !cancelled) {
+        audio2.addEventListener(
+          "ended",
+          () => {
+            setCanMove(true);
+            completeMission("pylon");
+          },
+          { once: true },
+        );
+      } else {
+        setCanMove(true);
+        completeMission("pylon");
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      setCanMove(true);
+    };
+  }, [completeMission, setCanMove]);
+
+  return null;
+}

src/components/gameplay/pylon/pylonSignals.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared runtime signal set by PylonDownedPylon when the straighten
+ * animation starts, so PylonFarmerNPC can switch its lerp target.
+ *
+ * `completed` is set after the straighten animation finishes so
+ * PylonFarmerNPC can play the post-raise audio sequence before
+ * transitioning to the repair game.
+ */
+export const pylonStraighteningSignal = { started: false, completed: false };

src/components/site/SiteCard.tsx

@@ -22,8 +22,6 @@ export function SiteCard({
     return "#b8b8b8";
   };
 
-  const borderColor = selected ? "#a8d5a2" : "rgba(255, 255, 255, 0.55)";
-
   const textColor = disabled ? "rgba(77, 77, 77, 0.72)" : "#4d4d4d";
 
   return (
@@ -41,7 +39,9 @@ export function SiteCard({
         height: isSituation
           ? "clamp(48px, 6vw, 60px)"
           : "clamp(140px, 18vw, 180px)",
-        border: `3px solid ${borderColor}`,
+        border: "3px solid rgba(255, 255, 255, 0.55)",
+        outline: selected ? "3px solid #a8d5a2" : "none",
+        outlineOffset: 0,
         background: getBackground(),
         cursor: disabled ? "not-allowed" : "pointer",
         display: "flex",

src/components/site/SiteNamingScreen.tsx

@@ -1,59 +1,133 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { useSiteStore } from "@/managers/stores/useSiteStore";
+import { useSettingsStore } from "@/managers/stores/useSettingsStore";
 import { SiteButton } from "@/components/site/SiteButton";
 import { SITE_CONFIG } from "@/data/site/siteConfig";
 import { SITE_DIALOGUE_IDS } from "@/data/site/dialogueIds";
-import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import {
+  loadDialogueManifest,
+  loadDialogueSubtitleCues,
+} from "@/utils/dialogues/loadDialogueManifest";
 import {
   playDialogueById,
   stopCurrentDialogue,
 } from "@/utils/dialogues/playDialogue";
 
+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.
+const AUDIO_END_FALLBACK_MS = 8000;
+
 /**
- * Screen 3: Name input
+ * Screen 3: Name reveal
- * The displayed name is forced to SITE_CONFIG.presetPlayerName — the
+ * The player's preset name is revealed letter-by-letter inside the input
- * field reveals one letter per keystroke until the preset name is complete.
+ * once the naming dialogue finishes playing. The confirm button stays
+ * locked until the reveal completes. No user typing — the input is
+ * read-only and just acts as a typewriter target.
  */
 export function SiteNamingScreen(): React.JSX.Element {
   const setStep = useSiteStore((state) => state.setStep);
   const setPlayerName = useGameStore((state) => state.setPlayerName);
-  const [charIndex, setCharIndex] = useState(0);
+  const [revealedChars, setRevealedChars] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const [typewriterStarted, setTypewriterStarted] = useState(false);
 
   const presetPlayerName = SITE_CONFIG.presetPlayerName;
-  const displayValue = presetPlayerName.slice(0, charIndex);
+  const displayValue = presetPlayerName.slice(0, revealedChars);
-  const isComplete = charIndex >= presetPlayerName.length;
+  const isComplete = revealedChars >= presetPlayerName.length;
 
+  // Play the dialogue, then trigger the typewriter so it FINISHES at the
+  // same moment the narration ends. We compute that moment from the SRT
+  // cues: the last cue's endTime is where the narrator stops speaking,
+  // so we start typing `typewriterDuration` before that.
   useEffect(() => {
     let cancelled = false;
+    let audioElement: HTMLAudioElement | null = null;
+    let onTimeUpdate: (() => void) | null = null;
+    let fallbackTimer: ReturnType<typeof setTimeout> | null = null;
+
+    const start = (): void => {
+      if (cancelled) return;
+      setTypewriterStarted(true);
+    };
+
+    const typewriterDurationSec =
+      (TYPEWRITER_CHAR_DELAY_MS * presetPlayerName.length) / 1000;
 
     void (async () => {
       const manifest = await loadDialogueManifest();
-      if (cancelled || !manifest) return;
+      if (cancelled) return;
-      await playDialogueById(manifest, SITE_DIALOGUE_IDS.naming);
+      if (!manifest) {
+        start();
+        return;
+      }
+
+      // Resolve the dialogue + its SRT cues for the active subtitle language.
+      const dialogue = manifest.dialogues.find(
+        (item) => item.id === SITE_DIALOGUE_IDS.naming,
+      );
+      const language = useSettingsStore.getState().subtitleLanguage;
+      const subtitleData = dialogue
+        ? await loadDialogueSubtitleCues(manifest, dialogue, language)
+        : null;
+      if (cancelled) return;
+
+      audioElement = await playDialogueById(manifest, SITE_DIALOGUE_IDS.naming);
+      if (cancelled) return;
+      if (!audioElement) {
+        start();
+        return;
+      }
+
+      const lastCue = subtitleData?.cues[subtitleData.cues.length - 1];
+      if (lastCue) {
+        // Trigger so the typewriter ends at the narration's end.
+        const audio = audioElement;
+        const triggerAt = Math.max(0, lastCue.endTime - typewriterDurationSec);
+        onTimeUpdate = (): void => {
+          if (audio.currentTime >= triggerAt) {
+            audio.removeEventListener("timeupdate", onTimeUpdate!);
+            start();
+          }
+        };
+        audio.addEventListener("timeupdate", onTimeUpdate);
+      } else {
+        // No SRT data — fall back to the audio "ended" event.
+        audioElement.addEventListener("ended", start, { once: true });
+      }
+
+      fallbackTimer = setTimeout(start, AUDIO_END_FALLBACK_MS);
     })();
 
     return () => {
       cancelled = true;
+      if (fallbackTimer !== null) clearTimeout(fallbackTimer);
+      if (audioElement) {
+        if (onTimeUpdate) {
+          audioElement.removeEventListener("timeupdate", onTimeUpdate);
+        }
+        audioElement.removeEventListener("ended", start);
+      }
       stopCurrentDialogue();
     };
-  }, []);
+  }, [presetPlayerName.length]);
 
+  // Reveal the preset name one character at a time once the typewriter
+  // has been triggered.
   useEffect(() => {
-    inputRef.current?.focus();
+    if (!typewriterStarted) return;
-  }, []);
+    const interval = setInterval(() => {
-
+      setRevealedChars((current) => {
-  const handleNameChange = useCallback(
+        if (current >= presetPlayerName.length) {
-    (event: React.ChangeEvent<HTMLInputElement>): void => {
+          clearInterval(interval);
-      const nextLength = Math.min(
+          return current;
-        event.target.value.length,
+        }
-        presetPlayerName.length,
+        return current + 1;
-      );
+      });
-      setCharIndex(nextLength);
+    }, TYPEWRITER_CHAR_DELAY_MS);
-    },
+    return () => clearInterval(interval);
-    [presetPlayerName.length],
+  }, [typewriterStarted, presetPlayerName.length]);
-  );
 
   const handleConfirm = (): void => {
     if (isComplete) {
@@ -98,17 +172,16 @@ export function SiteNamingScreen(): React.JSX.Element {
             margin: 0,
           }}
         >
-          Quel est votre prénom ?
+          Je suis…
         </h2>
 
         <input
-          ref={inputRef}
           type="text"
           value={displayValue}
-          onChange={handleNameChange}
+          readOnly
-          placeholder="Écrivez votre prénom ici"
+          tabIndex={-1}
           aria-labelledby="player-name-label"
-          aria-describedby="player-name-hint"
+          aria-live="polite"
           autoComplete="off"
           style={{
             display: "flex",
@@ -122,30 +195,12 @@ export function SiteNamingScreen(): React.JSX.Element {
             background: "#D9D9D9",
             outline: "none",
             color: "#333",
-            caretColor: "#333",
             fontFamily: "Inter, system-ui, sans-serif",
             fontSize: "clamp(16px, 2.5vw, 20px)",
             textAlign: "left",
             boxSizing: "border-box",
           }}
         />
-        <span
-          id="player-name-hint"
-          style={{
-            position: "absolute",
-            width: 1,
-            height: 1,
-            padding: 0,
-            margin: -1,
-            overflow: "hidden",
-            clip: "rect(0, 0, 0, 0)",
-            whiteSpace: "nowrap",
-            border: 0,
-          }}
-        >
-          Votre personnage s&apos;appelle {presetPlayerName}. Tapez{" "}
-          {presetPlayerName.length} caractères pour révéler son nom.
-        </span>
       </div>
 
       <SiteButton

src/components/three/gameplay/RepairFocusBubble.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useMemo, useRef } from "react";
+import gsap from "gsap";
+import * as THREE from "three";
+import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore";
+
+const BUBBLE_RADIUS_METERS = 10;
+const BUBBLE_GROW_DURATION_SECONDS = 2.5;
+const BUBBLE_SHRINK_DURATION_SECONDS = 1.2;
+const BUBBLE_COLOR = "#060814";
+const BUBBLE_OPACITY = 0.92;
+const BUBBLE_SHELL_RADIUS = 1; // sphere geometry baked at radius=1, scale = radius
+
+/**
+ * Dark sphere shroud rendered around the active repair model when the
+ * focus state is active. Grows from 0 -> BUBBLE_RADIUS_METERS using a
+ * GSAP `expo.out` ease so the player visually transitions from the open
+ * map to an isolated repair "cocoon". Reverses on focus end.
+ *
+ * The sphere uses BackSide rendering so the player remains inside the
+ * shroud when they stand near the repair model. A subtle decor pass
+ * (grid floor + soft directional light + light fog) is rendered as a
+ * sibling group so it appears once the bubble has expanded.
+ */
+export function RepairFocusBubble(): React.JSX.Element | null {
+  const active = useRepairFocusStore((state) => state.active);
+  const center = useRepairFocusStore((state) => state.center);
+  const groupRef = useRef<THREE.Group>(null);
+  const meshRef = useRef<THREE.Mesh>(null);
+  const decorRef = useRef<THREE.Group>(null);
+  const scaleRef = useRef({ value: 0.0001 });
+  const decorOpacityRef = useRef({ value: 0 });
+
+  const sphereGeometry = useMemo(
+    () => new THREE.SphereGeometry(BUBBLE_SHELL_RADIUS, 48, 32),
+    [],
+  );
+  const sphereMaterial = useMemo(
+    () =>
+      new THREE.MeshBasicMaterial({
+        color: BUBBLE_COLOR,
+        side: THREE.BackSide,
+        transparent: true,
+        opacity: BUBBLE_OPACITY,
+        depthWrite: false,
+        fog: false,
+      }),
+    [],
+  );
+
+  useEffect(() => {
+    return () => {
+      sphereGeometry.dispose();
+      sphereMaterial.dispose();
+    };
+  }, [sphereGeometry, sphereMaterial]);
+
+  useEffect(() => {
+    const targetScale = active ? BUBBLE_RADIUS_METERS : 0.0001;
+    const targetDecor = active ? 1 : 0;
+    const duration = active
+      ? BUBBLE_GROW_DURATION_SECONDS
+      : BUBBLE_SHRINK_DURATION_SECONDS;
+
+    const scaleTween = gsap.to(scaleRef.current, {
+      value: targetScale,
+      duration,
+      ease: active ? "expo.out" : "expo.in",
+      onUpdate: () => {
+        const mesh = meshRef.current;
+        if (mesh) mesh.scale.setScalar(scaleRef.current.value);
+      },
+    });
+
+    const decorTween = gsap.to(decorOpacityRef.current, {
+      value: targetDecor,
+      duration: duration * 0.8,
+      delay: active ? duration * 0.4 : 0,
+      ease: "power2.inOut",
+      onUpdate: () => {
+        const decor = decorRef.current;
+        if (!decor) return;
+        decor.traverse((child) => {
+          if (
+            child instanceof THREE.Mesh &&
+            child.material instanceof THREE.Material
+          ) {
+            const material = child.material as THREE.Material & {
+              opacity?: number;
+              transparent?: boolean;
+            };
+            if (typeof material.opacity === "number") {
+              material.opacity = decorOpacityRef.current.value;
+              material.transparent = true;
+            }
+          }
+        });
+      },
+    });
+
+    return () => {
+      scaleTween.kill();
+      decorTween.kill();
+    };
+  }, [active]);
+
+  // Render even when inactive so the shrink tween can play out; visibility
+  // is implicit via near-zero scale.
+  return (
+    <group ref={groupRef} position={center}>
+      <mesh
+        ref={meshRef}
+        geometry={sphereGeometry}
+        material={sphereMaterial}
+        renderOrder={-1}
+        frustumCulled={false}
+      />
+      <group ref={decorRef}>
+        {/* Subtle grid floor visible only inside the bubble */}
+        <gridHelper
+          args={[BUBBLE_RADIUS_METERS * 1.6, 24, "#1f2937", "#111827"]}
+          position={[0, -0.5, 0]}
+        />
+        {/* Soft directional light for the repair model */}
+        <directionalLight
+          position={[2, 4, 3]}
+          intensity={0.6}
+          color="#cbd5f5"
+        />
+        <ambientLight intensity={0.25} color="#1e293b" />
+      </group>
+    </group>
+  );
+}

src/components/three/gameplay/RepairGame.tsx

@@ -25,6 +25,7 @@ import type {
   RepairScannedBrokenPart,
 } from "@/types/gameplay/repairMission";
 import { useGameStore } from "@/managers/stores/useGameStore";
+import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore";
 import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
 import { toVector3Scale } from "@/utils/three/scale";
 
@@ -72,8 +73,20 @@ export function RepairGame({
   const [scannedBrokenParts, setScannedBrokenParts] = useState<
     readonly RepairScannedBrokenPart[]
   >([]);
+  // For the ebike mission, use the bike's live parked world position once
+  // the repair flow leaves the waiting/locked phase so the repair happens
+  // wherever the player parked the bike, not at the static zone anchor.
+  // window.ebikeParkedPosition is set by Ebike when the player drops the
+  // bike and stays stable through the rest of the repair flow.
+  const livePosition = useMemo<Vector3Tuple>(() => {
+    if (mission !== "ebike" || mainState !== mission) return position;
+    if (step === "locked" || step === "waiting") return position;
+    const parked = window.ebikeParkedPosition;
+    if (!parked) return position;
+    return [parked[0], parked[1], parked[2]];
+  }, [mainState, mission, position, step]);
   const parsedScale = toVector3Scale(scale);
-  const snappedPosition = useTerrainSnappedPosition(position);
+  const snappedPosition = useTerrainSnappedPosition(livePosition);
   const readyForFragmentation = step === "inspected";
   const brokenNodeNames = useMemo(() => getBrokenNodeNames(config), [config]);
 
@@ -98,6 +111,25 @@ export function RepairGame({
     };
   }, [mainState, mission, step]);
 
+  // Drive the global focus bubble: active during the immersive repair
+  // phases so the world dims/hides outside the dark sphere shroud.
+  const focusCenterX = snappedPosition[0];
+  const focusCenterY = snappedPosition[1];
+  const focusCenterZ = snappedPosition[2];
+  useEffect(() => {
+    const inFocusPhase =
+      mainState === mission && shouldFocusBubbleBeActive(step);
+    if (inFocusPhase) {
+      useRepairFocusStore
+        .getState()
+        .setFocus(true, [focusCenterX, focusCenterY, focusCenterZ]);
+      return () => {
+        useRepairFocusStore.getState().setFocus(false);
+      };
+    }
+    return undefined;
+  }, [mainState, mission, step, focusCenterX, focusCenterY, focusCenterZ]);
+
   useEffect(() => {
     if (mainState !== mission) return undefined;
 
@@ -131,6 +163,7 @@ export function RepairGame({
         {step === "fragmented" ? (
           <ExplodableModel
             modelPath={config.modelPath}
+            rotation={config.modelRotation ?? [0, 0, 0]}
             scale={config.modelScale ?? 1}
             split
           />
@@ -148,6 +181,7 @@ export function RepairGame({
           <>
             <ExplodableModel
               modelPath={config.modelPath}
+              rotation={config.modelRotation ?? [0, 0, 0]}
               scale={config.modelScale ?? 1}
               split
               hideNodeNames={brokenNodeNames}
@@ -170,7 +204,7 @@ export function RepairGame({
             onComplete={() => setMissionStep(mission, "done")}
           />
         ) : null}
-        {step === "done" ? (
+        {step === "done" && mission !== "pylon" ? (
           <RepairCompletionStep
             config={config}
             onComplete={() => completeMission(mission)}
@@ -200,6 +234,15 @@ function shouldKeepRepairRuntimeState(step: MissionStep): boolean {
   return step === "repairing" || step === "reassembling" || step === "done";
 }
 
+function shouldFocusBubbleBeActive(step: MissionStep): boolean {
+  return (
+    step === "fragmented" ||
+    step === "scanning" ||
+    step === "repairing" ||
+    step === "reassembling"
+  );
+}
+
 function getRepairMissionModelPaths(config: RepairMissionConfig): string[] {
   return [
     ...new Set([

src/components/ui/GameUI.tsx

@@ -4,22 +4,26 @@ import { GameSettingsMenu } from "@/components/ui/GameSettingsMenu";
 import { HandTrackingFallback } from "@/components/ui/HandTrackingFallback";
 import { HandTrackingVisualizer } from "@/components/ui/HandTrackingVisualizer";
 import { InteractPrompt } from "@/components/ui/InteractPrompt";
-import { RepairMovementLockIndicator } from "@/components/ui/RepairMovementLockIndicator";
+import { OutroVideoOverlay } from "@/components/ui/OutroVideoOverlay";
 import { Subtitles } from "@/components/ui/Subtitles";
 import { TalkieDialogueOverlay } from "@/components/ui/TalkieDialogueOverlay";
+import { HandTrackingTutorial } from "@/components/ui/tutorial/HandTrackingTutorial";
+import { MovementTutorial } from "@/components/ui/tutorial/MovementTutorial";
 
 export function GameUI(): React.JSX.Element {
   return (
     <>
       <DebugOverlayLayout />
       <Crosshair />
-      <RepairMovementLockIndicator />
       <InteractPrompt />
       <HandTrackingVisualizer />
       <HandTrackingFallback />
+      <MovementTutorial />
+      <HandTrackingTutorial />
       <Subtitles />
       <TalkieDialogueOverlay />
       <GameSettingsMenu />
+      <OutroVideoOverlay />
     </>
   );
 }

src/components/ui/HandTrackingFallback.tsx

@@ -4,29 +4,70 @@ import {
   type HandTrackingGloveHandedness,
 } from "@/hooks/handTracking/useHandTrackingGloveStatus";
 
-// Simple schematic silhouettes used as a last-resort fallback when the
+// Hand silhouettes used as a last-resort fallback when the rigged glove
-// rigged glove model has failed to load. Both icons share the same
+// model has failed to load. Both icons share a 100x120 viewBox so finger
-// 48x48 viewBox and the same stroke/fill rules from the .css.
+// lengths and the thumb angle stay anatomically readable.
 
 const OpenHandShape = (): React.JSX.Element => (
-  <>
+  <path
-    <ellipse cx="9" cy="30" rx="3" ry="6" transform="rotate(-25 9 30)" />
+    d="M 28 116
-    <rect x="14" y="8" width="4" height="22" rx="2" />
+       Q 22 100 22 80
-    <rect x="20" y="4" width="4" height="26" rx="2" />
+       Q 22 65 28 58
-    <rect x="26" y="6" width="4" height="24" rx="2" />
+       Q 22 52 14 46
-    <rect x="32" y="10" width="4" height="20" rx="2" />
+       Q 6 40 8 28
-    <rect x="10" y="26" width="28" height="18" rx="6" />
+       Q 12 18 22 20
-  </>
+       Q 30 24 30 36
+       Q 32 46 36 50
+       Q 36 38 36 28
+       Q 36 18 42 18
+       Q 48 18 48 28
+       Q 48 40 50 50
+       Q 50 32 50 14
+       Q 50 6 56 6
+       Q 62 6 62 14
+       Q 62 32 62 50
+       Q 64 38 64 20
+       Q 64 12 70 12
+       Q 76 12 76 20
+       Q 76 38 78 50
+       Q 78 40 78 32
+       Q 78 24 84 24
+       Q 90 24 90 32
+       Q 90 44 92 56
+       Q 96 80 92 100
+       Q 86 116 82 116
+       Z"
+  />
 );
 
 const FistShape = (): React.JSX.Element => (
   <>
-    <ellipse cx="8" cy="26" rx="3" ry="5" />
+    <path
-    <rect x="10" y="14" width="28" height="30" rx="10" />
+      d="M 18 70
-    <circle cx="15" cy="14" r="3" />
+         Q 14 50 24 38
-    <circle cx="21" cy="13" r="3" />
+         Q 28 30 36 34
-    <circle cx="27" cy="13" r="3" />
+         Q 40 26 48 30
-    <circle cx="33" cy="14" r="3" />
+         Q 54 22 60 28
+         Q 68 24 74 32
+         Q 84 32 88 46
+         Q 92 64 88 82
+         Q 82 104 64 112
+         Q 42 116 26 108
+         Q 14 96 18 70
+         Z"
+    />
+    <path
+      d="M 18 70
+         Q 6 66 8 80
+         Q 8 94 18 96
+         Q 28 94 26 84
+         Q 22 76 18 70
+         Z"
+    />
+    <path d="M 32 38 Q 30 50 34 60" fill="none" strokeLinecap="round" />
+    <path d="M 46 32 Q 44 46 48 58" fill="none" strokeLinecap="round" />
+    <path d="M 60 32 Q 58 46 62 58" fill="none" strokeLinecap="round" />
+    <path d="M 74 36 Q 72 50 76 60" fill="none" strokeLinecap="round" />
   </>
 );
 
@@ -66,7 +107,7 @@ export function HandTrackingFallback(): React.JSX.Element | null {
           <svg
             key={`${handedness}-${index}`}
             className="hand-tracking-fallback__icon"
-            viewBox="0 0 48 48"
+            viewBox="0 0 100 120"
             style={{
               left: `${leftPercent}%`,
               top: `${topPercent}%`,

src/components/ui/HandTrackingVisualizer.tsx

@@ -1,8 +1,16 @@
 import { useHandTrackingSnapshot } from "@/hooks/handTracking/useHandTrackingSnapshot";
-import { useHandTrackingGloveStatus } from "@/hooks/handTracking/useHandTrackingGloveStatus";
 import { useDebugStore } from "@/hooks/debug/useDebugStore";
 
-const HAND_CONNECTIONS: Array<[number, number]> = [
+// MediaPipe indexes the 21 hand landmarks predictably:
+// 0 wrist, 1-4 thumb (base→tip), 5-8 index, 9-12 middle, 13-16 ring, 17-20 pinky.
+const FINGER_LANDMARKS: Array<readonly number[]> = [
+  [1, 2, 3, 4],
+  [5, 6, 7, 8],
+  [9, 10, 11, 12],
+  [13, 14, 15, 16],
+  [17, 18, 19, 20],
+];
+const SKELETON_BONES: Array<[number, number]> = [
   [0, 1],
   [1, 2],
   [2, 3],
@@ -26,70 +34,187 @@ const HAND_CONNECTIONS: Array<[number, number]> = [
   [0, 17],
 ];
 
-const LANDMARK_FILL = "#67e8f9"; // cyan-300, opaque interior
+const HAND_FILL = "#bfdbfe"; // blue-200, light interior
-const LANDMARK_STROKE = "#0c4a6e"; // sky-900, dark blue outline
+const HAND_OUTLINE_COLOR = "#1e3a8a"; // blue-900, crisp dark outline
-const LANDMARK_STROKE_FIST = "#1e3a8a"; // blue-900, thicker accent when fist
+const HAND_OUTLINE_RADIUS = 2; // px
-const CONNECTION_STROKE = "#ffffff"; // white bones
+// Shrink the rendered hand around its centroid. Grab/physics keep using raw
-const INDEX_TIP_LANDMARK = 8;
+// landmarks elsewhere, so the silhouette is just visually smaller.
+const RENDER_SCALE = 0.65;
+const FINGER_THICKNESS_FACTOR = 0.08; // fraction of (scaled) hand length
+const WRIST_HALF_WIDTH = 0.28;
+const SKELETON_STROKE = "rgba(30, 58, 138, 0.22)";
+const SKELETON_DOT_FILL = "rgba(30, 58, 138, 0.35)";
+const FILTER_ID = "hand-tracking-outline";
 
 export function HandTrackingVisualizer(): React.JSX.Element | null {
   const { hands, status } = useHandTrackingSnapshot();
-  const showHandTrackingSvg = useDebugStore((debug) =>
+  const showHandTrackingModel = useDebugStore((debug) =>
-    debug.getShowHandTrackingSvg(),
+    debug.getShowHandTrackingModel(),
-  );
-  const gloves = useHandTrackingGloveStatus((state) => state.gloves);
-  const hasLoadedGlove = Object.values(gloves).some(
-    (gloveStatus) => gloveStatus === "loaded",
   );
 
-  if (
+  if (status === "idle" || hands.length === 0 || showHandTrackingModel) {
-    status === "idle" ||
-    hands.length === 0 ||
-    (hasLoadedGlove && !showHandTrackingSvg)
-  ) {
     return null;
   }
 
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
   return (
     <svg className="hand-tracking-visualizer" aria-hidden="true">
+      <defs>
+        {/* Dilate the merged alpha of all child shapes by HAND_OUTLINE_RADIUS
+            and subtract the original to get a 1-ring outline. Lets the palm
+            polygon and the five finger tubes share a single crisp outline
+            with no internal seams where they overlap. */}
+        <filter id={FILTER_ID} x="-10%" y="-10%" width="120%" height="120%">
+          <feMorphology
+            operator="dilate"
+            radius={HAND_OUTLINE_RADIUS}
+            in="SourceAlpha"
+            result="dilated"
+          />
+          <feComposite
+            operator="out"
+            in="dilated"
+            in2="SourceAlpha"
+            result="ringAlpha"
+          />
+          <feFlood floodColor={HAND_OUTLINE_COLOR} result="ringColor" />
+          <feComposite
+            operator="in"
+            in="ringColor"
+            in2="ringAlpha"
+            result="coloredRing"
+          />
+          <feMerge>
+            <feMergeNode in="SourceGraphic" />
+            <feMergeNode in="coloredRing" />
+          </feMerge>
+        </filter>
+      </defs>
+
       {hands.map((hand, handIndex) => {
         const landmarks = hand.landmarks;
-        if (landmarks.length === 0) return null;
+        if (landmarks.length < 21) return null;
 
-        const landmarkStroke = hand.isFist
+        // Centroid of all 21 landmarks in pixel space (mirrored x).
-          ? LANDMARK_STROKE_FIST
+        let cx = 0;
-          : LANDMARK_STROKE;
+        let cy = 0;
+        for (const lm of landmarks) {
+          cx += (1 - lm.x) * viewportWidth;
+          cy += lm.y * viewportHeight;
+        }
+        cx /= landmarks.length;
+        cy /= landmarks.length;
+
+        // Render coordinates: shrink each landmark toward the centroid.
+        const px = (i: number): number => {
+          const lm = landmarks[i];
+          return lm
+            ? cx + ((1 - lm.x) * viewportWidth - cx) * RENDER_SCALE
+            : cx;
+        };
+        const py = (i: number): number => {
+          const lm = landmarks[i];
+          return lm ? cy + (lm.y * viewportHeight - cy) * RENDER_SCALE : cy;
+        };
+
+        const handLengthPx = Math.hypot(px(12) - px(0), py(12) - py(0));
+        const fingerThickness = Math.max(
+          6,
+          handLengthPx * FINGER_THICKNESS_FACTOR,
+        );
+        const halfFingerThickness = fingerThickness / 2;
+        const dotRadius = Math.max(1.2, fingerThickness * 0.1);
+
+        // Perpendicular to the palm centerline (wrist → middle MCP), used to
+        // place two synthetic wrist corners on either side of landmark 0.
+        const cdx = px(9) - px(0);
+        const cdy = py(9) - py(0);
+        const clen = Math.hypot(cdx, cdy) || 1;
+        const perpX = -cdy / clen;
+        const perpY = cdx / clen;
+        const thumbSide =
+          (px(1) - px(0)) * perpX + (py(1) - py(0)) * perpY >= 0 ? 1 : -1;
+        const wristHalfWidth = handLengthPx * WRIST_HALF_WIDTH;
+        const wristThumbX = px(0) + perpX * wristHalfWidth * thumbSide;
+        const wristThumbY = py(0) + perpY * wristHalfWidth * thumbSide;
+        const wristPinkyX = px(0) - perpX * wristHalfWidth * thumbSide;
+        const wristPinkyY = py(0) - perpY * wristHalfWidth * thumbSide;
+
+        // Palm outline: straight L between adjacent MCPs along the top (no
+        // inter-finger dip — the morphology dilation rounds the MCP corners),
+        // rounded heel via two Q curves bowing out to the synthetic wrist
+        // corners.
+        const palmD = [
+          `M ${px(1)} ${py(1)}`,
+          `L ${px(5)} ${py(5)}`,
+          `L ${px(9)} ${py(9)}`,
+          `L ${px(13)} ${py(13)}`,
+          `L ${px(17)} ${py(17)}`,
+          `Q ${wristPinkyX} ${wristPinkyY}, ${px(0)} ${py(0)}`,
+          `Q ${wristThumbX} ${wristThumbY}, ${px(1)} ${py(1)}`,
+          "Z",
+        ].join(" ");
+
+        // Each finger path starts halfFingerThickness inside the palm (toward
+        // the next joint), so the rounded base cap sits hidden inside the palm
+        // fill instead of bulging below the MCP.
+        const fingerPathD = (joints: readonly number[]): string => {
+          const baseIdx = joints[0];
+          const nextIdx = joints[1];
+          if (baseIdx === undefined || nextIdx === undefined) return "";
+          const baseX = px(baseIdx);
+          const baseY = py(baseIdx);
+          const nextX = px(nextIdx);
+          const nextY = py(nextIdx);
+          const dx = nextX - baseX;
+          const dy = nextY - baseY;
+          const dlen = Math.hypot(dx, dy) || 1;
+          const sx = baseX + (dx / dlen) * halfFingerThickness;
+          const sy = baseY + (dy / dlen) * halfFingerThickness;
+          return joints
+            .map((idx, k) =>
+              k === 0 ? `M ${sx} ${sy}` : `L ${px(idx)} ${py(idx)}`,
+            )
+            .join(" ");
+        };
 
         return (
           <g key={`${hand.handedness}-${handIndex}`}>
-            {HAND_CONNECTIONS.map(([from, to]) => {
+            <g filter={`url(#${FILTER_ID})`}>
-              const fromPoint = landmarks[from];
+              <path d={palmD} fill={HAND_FILL} />
-              const toPoint = landmarks[to];
+              {FINGER_LANDMARKS.map((joints, fingerIndex) => (
-              if (!fromPoint || !toPoint) return null;
+                <path
-
+                  key={fingerIndex}
-              return (
+                  d={fingerPathD(joints)}
-                <line
+                  fill="none"
-                  key={`${from}-${to}`}
+                  stroke={HAND_FILL}
-                  x1={`${(1 - fromPoint.x) * 100}%`}
+                  strokeWidth={fingerThickness}
-                  y1={`${fromPoint.y * 100}%`}
-                  x2={`${(1 - toPoint.x) * 100}%`}
-                  y2={`${toPoint.y * 100}%`}
-                  stroke={CONNECTION_STROKE}
-                  strokeWidth="2.5"
                   strokeLinecap="round"
+                  strokeLinejoin="round"
                 />
-              );
+              ))}
-            })}
+            </g>
 
-            {landmarks.map((landmark, landmarkIndex) => (
+            {SKELETON_BONES.map(([from, to]) => (
+              <line
+                key={`bone-${from}-${to}`}
+                x1={px(from)}
+                y1={py(from)}
+                x2={px(to)}
+                y2={py(to)}
+                stroke={SKELETON_STROKE}
+                strokeWidth="1"
+              />
+            ))}
+            {landmarks.map((_, landmarkIndex) => (
               <circle
-                key={landmarkIndex}
+                key={`dot-${landmarkIndex}`}
-                cx={`${(1 - landmark.x) * 100}%`}
+                cx={px(landmarkIndex)}
-                cy={`${landmark.y * 100}%`}
+                cy={py(landmarkIndex)}
-                r={landmarkIndex === INDEX_TIP_LANDMARK ? 6 : 4}
+                r={dotRadius}
-                fill={LANDMARK_FILL}
+                fill={SKELETON_DOT_FILL}
-                stroke={landmarkStroke}
-                strokeWidth={hand.isFist ? 2.5 : 2}
               />
             ))}
           </g>

src/components/ui/InteractPrompt.tsx

@@ -9,10 +9,14 @@ export function InteractPrompt(): React.JSX.Element | null {
   if (cameraMode !== "player") return null;
   if (!focused || holding || focused.kind !== "trigger") return null;
 
+  const label = focused.label?.trim() ?? "";
+
   return (
     <div className="interact-prompt" aria-live="polite">
       <kbd className="interact-prompt__key">{INTERACT_KEY.toUpperCase()}</kbd>
-      <span className="interact-prompt__label">{focused.label}</span>
+      {label.length > 0 ? (
+        <span className="interact-prompt__label">{label}</span>
+      ) : null}
     </div>
   );
 }

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

@@ -0,0 +1,180 @@
+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";
+
+/**
+ * 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 [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 {
+      setStage("fading-in");
+    }
+
+    window.addEventListener(
+      "outro-cinematic-complete",
+      handleCinematicComplete,
+    );
+    return () => {
+      window.removeEventListener(
+        "outro-cinematic-complete",
+        handleCinematicComplete,
+      );
+    };
+  }, []);
+
+  // Drive the transition timeline.
+  useEffect(() => {
+    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]);
+
+  // 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
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 10000,
+        background: "#000",
+        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"}
+    >
+      {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/RepairMovementLockIndicator.tsx

@@ -1,20 +0,0 @@
-import { useCameraMode } from "@/hooks/debug/useCameraMode";
-import { useRepairMovementLocked } from "@/hooks/gameplay/useRepairMovementLocked";
-
-export function RepairMovementLockIndicator(): React.JSX.Element | null {
-  const cameraMode = useCameraMode();
-  const movementLocked = useRepairMovementLocked();
-
-  if (cameraMode !== "player") return null;
-  if (!movementLocked) return null;
-
-  return (
-    <div className="repair-movement-lock-indicator" aria-live="polite">
-      <span
-        className="repair-movement-lock-indicator__dot"
-        aria-hidden="true"
-      />
-      <span>Déplacement verrouillé pendant la réparation</span>
-    </div>
-  );
-}

src/components/ui/debug/GameStateDebugPanel.tsx

@@ -5,8 +5,8 @@ import {
   MAIN_GAME_STATES,
 } from "@/data/game/gameStateConfig";
 import {
+  getMissionStepsFor,
   isMissionStep,
-  MISSION_STEPS,
 } from "@/data/gameplay/repairMissionState";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import type { MainGameState } from "@/types/game";
@@ -53,7 +53,9 @@ export function GameStateDebugPanel(): React.JSX.Element {
       ? GAME_STEPS
       : mainState === "outro"
         ? ["waiting", "started"]
-        : MISSION_STEPS;
+        : mainState === "ebike" || mainState === "pylon" || mainState === "farm"
+          ? getMissionStepsFor(mainState)
+          : [];
 
   function setSubState(nextSubState: string): void {
     if (mainState === "intro") {

src/components/ui/tutorial/HandTrackingTutorial.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import { Hand } from "lucide-react";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { useHandTrackingSnapshot } from "@/hooks/handTracking/useHandTrackingSnapshot";
+import type { MissionStep } from "@/types/gameplay/repairMission";
+import { TutorialOverlay } from "@/components/ui/tutorial/TutorialOverlay";
+
+// Repair steps where the hand-tracking tutorial is allowed to display. Covers
+// the no-hand-tracking phase (fragmented, scanning) and the first hand-driven
+// step (inspected) — beyond that the player has presumably learned.
+const HAND_TUTORIAL_STEPS: ReadonlySet<MissionStep> = new Set([
+  "fragmented",
+  "scanning",
+  "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
+ * stays dismissed for the session.
+ */
+export function HandTrackingTutorial(): React.JSX.Element | null {
+  const mainState = useGameStore((state) => state.mainState);
+  const ebikeStep = useGameStore((state) => state.ebike.currentStep);
+  const { hands, status } = useHandTrackingSnapshot();
+  const [dismissed, setDismissed] = useState(false);
+
+  const isInShowWindow =
+    mainState === "ebike" && HAND_TUTORIAL_STEPS.has(ebikeStep);
+  const handsDetected = status !== "idle" && hands.length > 0;
+
+  useEffect(() => {
+    if (handsDetected && !dismissed) {
+      // Sync the persistent dismissal flag with an external signal (the
+      // hand-tracking snapshot). Same shape as the resync pattern used
+      // elsewhere in the repo (e.g. PylonDownedPylon).
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setDismissed(true);
+    }
+  }, [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 (
+    <TutorialOverlay
+      icon={
+        <div className="tutorial-overlay__hands">
+          <Hand size={96} strokeWidth={1.5} />
+          <Hand
+            size={96}
+            strokeWidth={1.5}
+            style={{ transform: "scaleX(-1)" }}
+          />
+        </div>
+      }
+      text="Placez vos mains devant la caméra pour attraper les pièces. Sinon, utilisez la souris."
+    />
+  );
+}

src/components/ui/tutorial/MovementTutorial.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import type { GameStep } from "@/types/game";
+import { TutorialOverlay } from "@/components/ui/tutorial/TutorialOverlay";
+
+const MOVEMENT_KEYS = new Set(["z", "q", "s", "d"]);
+// Intro steps where the movement tutorial is allowed to display. From the
+// reveal fade through the free-walk window before the ebike mount.
+const MOVEMENT_TUTORIAL_STEPS: ReadonlySet<GameStep> = new Set([
+  "reveal",
+  "await-ebike-mount",
+]);
+
+function KeyCap({ label }: { label: string }): React.JSX.Element {
+  return <span className="tutorial-overlay__keycap">{label}</span>;
+}
+
+/**
+ * First-time movement tutorial. Visible during the intro reveal and the
+ * walk-around step before the ebike mount, until the player presses any
+ * of Z, Q, S, D. Once dismissed it stays dismissed for the session.
+ */
+export function MovementTutorial(): React.JSX.Element | null {
+  const introStep = useGameStore((state) => state.intro.currentStep);
+  const [dismissed, setDismissed] = useState(false);
+
+  const isInShowWindow = MOVEMENT_TUTORIAL_STEPS.has(introStep);
+
+  useEffect(() => {
+    if (dismissed) return;
+    function onKeyDown(event: KeyboardEvent): void {
+      if (MOVEMENT_KEYS.has(event.key.toLowerCase())) {
+        setDismissed(true);
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [dismissed]);
+
+  if (!isInShowWindow || dismissed) return null;
+
+  return (
+    <TutorialOverlay
+      icon={
+        <div className="tutorial-overlay__keyboard">
+          <span aria-hidden="true" />
+          <KeyCap label="Z" />
+          <span aria-hidden="true" />
+          <KeyCap label="Q" />
+          <KeyCap label="S" />
+          <KeyCap label="D" />
+        </div>
+      }
+      text="Utilisez le clavier et la souris pour vous déplacer."
+    />
+  );
+}

src/components/ui/tutorial/TutorialOverlay.tsx

@@ -0,0 +1,23 @@
+interface TutorialOverlayProps {
+  icon: React.ReactNode;
+  text: string;
+}
+
+/**
+ * Full-screen instructional overlay shown during onboarding moments
+ * (movement intro, hand-tracking intro, ...). Pure presentation: parent
+ * decides when to mount it and when to unmount it.
+ */
+export function TutorialOverlay({
+  icon,
+  text,
+}: TutorialOverlayProps): React.JSX.Element {
+  return (
+    <div className="tutorial-overlay" aria-live="polite">
+      <div className="tutorial-overlay__panel">
+        <div className="tutorial-overlay__icon">{icon}</div>
+        <p className="tutorial-overlay__text">{text}</p>
+      </div>
+    </div>
+  );
+}

src/components/zone/ZoneDetection.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import { isDebugEnabled } from "@/utils/debug/isDebugEnabled";
+import type { ZoneConfig } from "@/types/gameplay/zone";
+
+interface ZoneDetectionProps {
+  zone: ZoneConfig;
+  onEnter: () => void;
+  height?: number;
+}
+
+const _cameraPos = new THREE.Vector3();
+
+export function ZoneDebugVisual({
+  zone,
+  active,
+}: {
+  zone: ZoneConfig;
+  active: boolean;
+}): React.JSX.Element | null {
+  if (!isDebugEnabled()) return null;
+  return (
+    <group position={zone.position}>
+      <mesh rotation={[-Math.PI / 2, 0, 0]}>
+        <ringGeometry args={[zone.radius - 0.2, zone.radius, 32]} />
+        <meshBasicMaterial
+          color={active ? "#22c55e" : "#fbbf24"}
+          transparent
+          opacity={0.6}
+          side={THREE.DoubleSide}
+        />
+      </mesh>
+      <mesh>
+        <cylinderGeometry
+          args={[zone.radius, zone.radius, zone.height, 16, 1, true]}
+        />
+        <meshBasicMaterial
+          color={active ? "#22c55e" : "#fbbf24"}
+          transparent
+          opacity={0.08}
+          side={THREE.DoubleSide}
+        />
+      </mesh>
+    </group>
+  );
+}
+
+export function ZoneDetection({
+  zone,
+  onEnter,
+  height,
+}: ZoneDetectionProps): React.JSX.Element | null {
+  const camera = useThree((state) => state.camera);
+  const hasTriggeredRef = useRef(false);
+  const onEnterRef = useRef(onEnter);
+
+  useEffect(() => {
+    onEnterRef.current = onEnter;
+  }, [onEnter]);
+
+  useFrame(() => {
+    if (hasTriggeredRef.current) return;
+
+    camera.getWorldPosition(_cameraPos);
+    const dx = _cameraPos.x - zone.position[0];
+    const dz = _cameraPos.z - zone.position[2];
+    const horizontalDist = Math.sqrt(dx * dx + dz * dz);
+
+    if (horizontalDist > zone.radius) return;
+
+    const zoneHeight = height ?? zone.height;
+    if (_cameraPos.y < zone.position[1] - zoneHeight / 2) return;
+    if (_cameraPos.y > zone.position[1] + zoneHeight / 2) return;
+
+    hasTriggeredRef.current = true;
+    onEnterRef.current();
+  });
+
+  return null;
+}

src/data/ebike/ebikeConfig.ts

@@ -15,11 +15,11 @@ export const EBIKE_DROP_PLAYER_TRANSFORM: CameraTransform = {
   rotation: [0, 0, 0],
 };
 
-export const EBIKE_WORLD_POSITION: Vector3Tuple = [65, 0.8, 72];
+export const EBIKE_WORLD_POSITION: Vector3Tuple = [68, 0.8, 65];
 export const EBIKE_WORLD_ROTATION_Y = -2.5;
 export const EBIKE_WORLD_SCALE = 0.35;
 
-export const EBIKE_INTRO_BREAKDOWN_DISTANCE = 15;
+export const EBIKE_INTRO_BREAKDOWN_DISTANCE = 50;
 export const EBIKE_BREAKDOWN_DIALOGUE_DELAY_MS = 250;
 
 export const EBIKE_ACCELERATION_DURATION_MS = 2000;
@@ -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",
+    ebike: "/assets/world/UI/ebike.webm",
-    pylon: "/assets/world/UI/pylon-mission-notification.webm",
+    pylon: "/assets/world/UI/centrale.webm",
-    farm: "/assets/world/UI/farm-mission-notification.webm",
+    farm: "/assets/world/UI/laferme.webm",
   };

src/data/gameplay/pylonConfig.ts

@@ -0,0 +1,54 @@
+import type { Vector3Tuple } from "@/types/three/three";
+
+export const PYLON_WORLD_POSITION: Vector3Tuple = [-31.5, 3.5, 36.04];
+
+export const PYLON_DOWNED_ROTATION: Vector3Tuple = [0, 0, -0.9];
+
+export const PYLON_UPRIGHT_ROTATION: Vector3Tuple = [0, 0, 0];
+
+export const PYLON_FARMER_NPC_POSITION: Vector3Tuple = [-16.13, 3.2, 52.46];
+
+export const PYLON_FARMER_NPC_AFTER_POSITION: Vector3Tuple = [
+  PYLON_WORLD_POSITION[0] + 3,
+  PYLON_WORLD_POSITION[1] + 0.2,
+  PYLON_WORLD_POSITION[2],
+];
+
+/** Point vers lequel l'électricienne regarde pendant sa marche vers le pylône (ajustable) */
+export const PYLON_FARMER_NPC_WALK_LOOK_AT: Vector3Tuple = [
+  PYLON_WORLD_POSITION[0] + 3,
+  PYLON_WORLD_POSITION[1] + 0.2,
+  PYLON_WORLD_POSITION[2],
+];
+
+/** Position finale du PNJ quand le pylône se redresse */
+export const PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight: Vector3Tuple = [
+  PYLON_WORLD_POSITION[0] + 1,
+  PYLON_WORLD_POSITION[1],
+  PYLON_WORLD_POSITION[2],
+];
+
+/** Rotation (X Y Z radians) du PNJ une fois arrivé sous le pylône */
+export const PYLON_FARMER_NPC_AFTER_ROTATION: Vector3Tuple = [0, 0, 0];
+
+/** Scale uniforme du PNJ une fois arrivé sous le pylône */
+export const PYLON_FARMER_NPC_AFTER_SCALE = 1.55;
+
+/** Vitesse du lerp de déplacement du PNJ (unités/s) */
+export const PYLON_FARMER_NPC_WALK_SPEED = 2;
+
+export const PYLON_NARRATIVE_INTERACT_RADIUS = 3.5;
+
+export const PYLON_STRAIGHTEN_ANIMATION_DURATION_MS = 2200;
+
+export const PYLON_NARRATIVE_DIALOGUES = {
+  electricOutage: "narrateur_coupureelec",
+  searchCentral: "narrateur_fouillelecentre",
+  brokenPylon: "narrateur_poteaueleccasse",
+  demandeAide: "narrateur_demande_aide",
+  farmerHelp: "fermier_coupdemain",
+  electricienneWelcome: "electricienne_welcome",
+  electricienneApresMontage: "electricienne_apresMontage",
+  electricienneAurevoir: "electricienne_aurevoir",
+  powerRestored: "narrateur_courantrepare",
+} as const;

src/data/gameplay/repairMissionAnchors.ts

@@ -4,6 +4,7 @@ import type {
   RepairMissionTriggerConfig,
 } from "@/types/gameplay/repairMission";
 import { EBIKE_WORLD_POSITION } from "@/data/ebike/ebikeConfig";
+import { PYLON_WORLD_POSITION } from "@/data/gameplay/pylonConfig";
 
 export const REPAIR_MISSION_ANCHOR_IDS: Partial<
   Record<RepairMissionId, string>
@@ -15,7 +16,7 @@ const EBIKE_REPAIR_POSITION = EBIKE_WORLD_POSITION satisfies Vector3Tuple;
 
 const REPAIR_MISSION_POSITIONS = {
   ebike: EBIKE_REPAIR_POSITION,
-  pylon: [64, 0, -66],
+  pylon: PYLON_WORLD_POSITION,
   farm: [-24, 0, 42],
 } as const satisfies Record<RepairMissionId, Vector3Tuple>;
 

src/data/gameplay/repairMissionState.ts

@@ -10,6 +10,10 @@ const REPAIR_MISSION_ID_VALUES: ReadonlySet<string> = new Set(
 
 export const MISSION_STEPS = [
   "locked",
+  "electricienne_history",
+  "approaching",
+  "arrived",
+  "npc-return",
   "waiting",
   "inspected",
   "fragmented",
@@ -17,9 +21,32 @@ export const MISSION_STEPS = [
   "repairing",
   "reassembling",
   "done",
+  "narrator-outro",
 ] as const satisfies readonly MissionStep[];
 const MISSION_STEP_VALUES: ReadonlySet<string> = new Set(MISSION_STEPS);
 
+const PYLON_ONLY_MISSION_STEPS = new Set<MissionStep>([
+  "approaching",
+  "arrived",
+  "npc-return",
+  "narrator-outro",
+]);
+const FARM_ONLY_MISSION_STEPS = new Set<MissionStep>(["electricienne_history"]);
+
+export function getMissionStepsFor(
+  mission: RepairMissionId,
+): readonly MissionStep[] {
+  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 {
   return REPAIR_MISSION_ID_VALUES.has(value);
 }
@@ -28,9 +55,20 @@ export function isMissionStep(value: string): value is MissionStep {
   return MISSION_STEP_VALUES.has(value);
 }
 
-export function getNextMissionStep(step: MissionStep): MissionStep {
+export function getNextMissionStep(
+  step: MissionStep,
+  mission?: RepairMissionId,
+): MissionStep {
   switch (step) {
     case "locked":
+      return mission === "pylon" ? "approaching" : "waiting";
+    case "electricienne_history":
+      return "done";
+    case "approaching":
+      return "arrived";
+    case "arrived":
+      return "npc-return";
+    case "npc-return":
       return "waiting";
     case "waiting":
       return "inspected";
@@ -43,16 +81,31 @@ export function getNextMissionStep(step: MissionStep): MissionStep {
     case "repairing":
       return "reassembling";
     case "reassembling":
-    case "done":
       return "done";
+    case "done":
+      return mission === "pylon" ? "narrator-outro" : "done";
+    case "narrator-outro":
+      return "narrator-outro";
   }
 }
 
-export function getPreviousMissionStep(step: MissionStep): MissionStep {
+export function getPreviousMissionStep(
+  step: MissionStep,
+  mission?: RepairMissionId,
+): MissionStep {
   switch (step) {
     case "locked":
-    case "waiting":
       return "locked";
+    case "electricienne_history":
+      return "locked";
+    case "approaching":
+      return "locked";
+    case "arrived":
+      return "approaching";
+    case "npc-return":
+      return "arrived";
+    case "waiting":
+      return mission === "pylon" ? "npc-return" : "locked";
     case "inspected":
       return "waiting";
     case "fragmented":
@@ -65,5 +118,7 @@ export function getPreviousMissionStep(step: MissionStep): MissionStep {
       return "repairing";
     case "done":
       return "reassembling";
+    case "narrator-outro":
+      return "done";
   }
 }

src/data/gameplay/repairMissions.ts

@@ -3,6 +3,10 @@ import type {
   RepairMissionConfig,
   RepairMissionId,
 } from "@/types/gameplay/repairMission";
+import {
+  EBIKE_WORLD_ROTATION_Y,
+  EBIKE_WORLD_SCALE,
+} from "@/data/ebike/ebikeConfig";
 
 const REPAIR_INTERACT_UI_PATH = "/assets/world/UI/interagir.webm";
 const REPAIR_BROKEN_UI_PATH = "/assets/world/UI/cassé.webm";
@@ -20,7 +24,8 @@ export const REPAIR_MISSIONS: Record<RepairMissionId, RepairMissionConfig> = {
     description:
       "Repair the damaged cooling module before relaunching the bike",
     modelPath: "/models/ebike/model.gltf",
-    modelScale: 0.3,
+    modelScale: EBIKE_WORLD_SCALE,
+    modelRotation: [0, EBIKE_WORLD_ROTATION_Y, 0],
     stageUiPath: "/assets/world/UI/ebike-mission-notification.webm",
     interactUiPath: REPAIR_INTERACT_UI_PATH,
     brokenUiPath: REPAIR_BROKEN_UI_PATH,
@@ -86,7 +91,20 @@ export const REPAIR_MISSIONS: Record<RepairMissionId, RepairMissionConfig> = {
       "pylon-cable-left-replacement",
     ],
     scanPartSeconds: 1.4,
-    brokenParts: [],
+    brokenParts: [
+      {
+        id: "pylon-grid-relay",
+        label: "Grid relay",
+        nodeName: "lampe",
+        caseSlotName: "placeholder_1",
+      },
+      {
+        id: "pylon-damaged-panel",
+        label: "Damaged solar panel",
+        nodeName: "pylone",
+        caseSlotName: "placeholder_2",
+      },
+    ],
     replacementParts: [
       {
         id: "pylon-cable-right-replacement",

src/data/gameplay/zones.ts

@@ -0,0 +1,24 @@
+import type { ZoneConfig } from "@/types/gameplay/zone";
+import { PYLON_WORLD_POSITION } from "@/data/gameplay/pylonConfig";
+
+// Zones qui active la coupure de courant
+export const PYLON_APPROACH_ZONE: ZoneConfig = {
+  id: "pylon-approach",
+  position: [5, 4, -21.5],
+  radius: 10,
+  height: 18,
+  oneShot: true,
+};
+
+// Zone qui active la cinématique d'arrivée du pylône
+export const PYLON_ARRIVED_ZONE: ZoneConfig = {
+  id: "pylon-arrived",
+  position: [
+    PYLON_WORLD_POSITION[0],
+    PYLON_WORLD_POSITION[1],
+    PYLON_WORLD_POSITION[2],
+  ],
+  radius: 30,
+  height: 15,
+  oneShot: true,
+};

src/data/world/characters/characterConfig.ts

@@ -30,8 +30,8 @@ export const CHARACTER_CONFIGS = {
     position: [-40.5, 0, 45.5],
     rotation: [0, -0.35, 0],
     scale: [1.55, 1.55, 1.55],
-    animations: ["Dance"],
+    animations: ["idle", "walk"],
-    defaultAnimation: "Dance",
+    defaultAnimation: "idle",
   },
   gerant: {
     id: "gerant",

src/hooks/debug/usePlayerPositionDebug.ts

@@ -0,0 +1,29 @@
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import type GUI from "lil-gui";
+import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
+
+export function usePlayerPositionDebug(): void {
+  const pos = useRef({ x: 0, y: 0, z: 0 });
+  const controllers = useRef<{ updateDisplay: () => void }[]>([]);
+
+  useDebugFolder("Game", (folder: GUI) => {
+    const sub = folder.addFolder("Player Position");
+    sub.open();
+
+    controllers.current = [
+      sub.add(pos.current, "x").name("X").decimals(2).disable(),
+      sub.add(pos.current, "y").name("Y").decimals(2).disable(),
+      sub.add(pos.current, "z").name("Z").decimals(2).disable(),
+    ];
+  });
+
+  useFrame(() => {
+    const p = window.playerPos;
+    if (!p) return;
+    pos.current.x = p[0];
+    pos.current.y = p[1];
+    pos.current.z = p[2];
+    for (const c of controllers.current) c.updateDisplay();
+  });
+}

src/hooks/gameplay/useDialoguePlayback.ts

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+
+interface UseDialoguePlaybackOptions {
+  enabled: boolean;
+  dialogueId: string | null;
+  onComplete?: () => void;
+}
+
+export function useDialoguePlayback({
+  enabled,
+  dialogueId,
+  onComplete,
+}: UseDialoguePlaybackOptions): void {
+  const setCanMove = useGameStore((state) => state.setCanMove);
+
+  useEffect(() => {
+    if (!enabled || !dialogueId) return undefined;
+
+    let isCancelled = false;
+    setCanMove(false);
+
+    void (async () => {
+      const manifest = await loadDialogueManifest();
+      if (isCancelled || !manifest) {
+        setCanMove(true);
+        return;
+      }
+
+      const audio = await playDialogueById(manifest, dialogueId);
+      if (isCancelled || !audio) {
+        setCanMove(true);
+        return;
+      }
+
+      audio.addEventListener(
+        "ended",
+        () => {
+          setCanMove(true);
+          onComplete?.();
+        },
+        { once: true },
+      );
+    })();
+
+    return () => {
+      isCancelled = true;
+      setCanMove(true);
+    };
+  }, [enabled, dialogueId, onComplete, setCanMove]);
+}

src/hooks/gameplay/useRepairMovementLocked.ts

@@ -1,29 +0,0 @@
-import { useGameStore } from "@/managers/stores/useGameStore";
-import type { MissionStep } from "@/types/gameplay/repairMission";
-
-export function useRepairMovementLocked(): boolean {
-  return useGameStore((state) => {
-    switch (state.mainState) {
-      case "ebike":
-        return isRepairMovementLocked(state.ebike.currentStep);
-      case "pylon":
-        return isRepairMovementLocked(state.pylon.currentStep);
-      case "farm":
-        return isRepairMovementLocked(state.farm.currentStep);
-      case "intro":
-      case "outro":
-        return false;
-    }
-  });
-}
-
-function isRepairMovementLocked(step: MissionStep): boolean {
-  return (
-    step === "inspected" ||
-    step === "fragmented" ||
-    step === "scanning" ||
-    step === "repairing" ||
-    step === "reassembling" ||
-    step === "done"
-  );
-}

src/index.css

@@ -809,35 +809,48 @@ canvas {
 
 .interact-prompt {
   position: fixed;
-  bottom: 30%;
+  bottom: 12%;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
-  align-items: center;
+  align-items: stretch;
   gap: 8px;
   pointer-events: none;
   z-index: 10;
 }
 
-.interact-prompt__key {
+.interact-prompt__key,
+.interact-prompt__label {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
+  height: 36px;
-  height: 24px;
+  background: rgba(10, 12, 20, 0.55);
-  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  font-family: "Inter", sans-serif;
-  border-radius: 4px;
+  color: #ffffff;
-  font-size: 13px;
+}
-  font-weight: 600;
+
-  color: white;
+.interact-prompt__key {
+  width: 36px;
+  font-size: 15px;
+  font-weight: 900;
   font-style: normal;
+  letter-spacing: 0;
+  /* 3D keyboard key effect: top highlight, bottom inner darkening,
+     and a thin bottom drop so the key reads as physically pressed-up. */
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.25),
+    inset 0 -3px 0 rgba(0, 0, 0, 0.45),
+    0 2px 0 rgba(0, 0, 0, 0.55);
 }
 
 .interact-prompt__label {
+  padding: 0 12px;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.85);
+  font-weight: 700;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.02em;
+  line-height: 1;
 }
 
 .repair-movement-lock-indicator {
@@ -1786,7 +1799,8 @@ canvas {
   width: 100vw;
   height: 100vh;
   pointer-events: none;
-  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.55));
+  opacity: 0.8;
+  filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.3));
 }
 
 .hand-tracking-fallback {
@@ -1798,14 +1812,82 @@ canvas {
   pointer-events: none;
 }
 
+.tutorial-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 14;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(96, 165, 250, 0.55);
+  pointer-events: none;
+}
+
+.tutorial-overlay__panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 36px;
+  padding: 56px 72px;
+  max-width: 640px;
+  background: transparent;
+  border: 2px solid #1e3a8a;
+  border-radius: 24px;
+  color: #1e3a8a;
+}
+
+.tutorial-overlay__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tutorial-overlay__text {
+  font-family: var(--font-body);
+  font-size: 1.1rem;
+  font-weight: 500;
+  line-height: 1.45;
+  text-align: center;
+  margin: 0;
+}
+
+.tutorial-overlay__keyboard {
+  display: grid;
+  grid-template-columns: repeat(3, 64px);
+  gap: 8px;
+  font-family: var(--font-primary);
+}
+
+.tutorial-overlay__keycap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  background: #e0f2fe;
+  border: 2px solid #1e3a8a;
+  border-radius: 10px;
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: #1e3a8a;
+}
+
+.tutorial-overlay__hands {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  color: #1e3a8a;
+}
+
 .hand-tracking-fallback__icon {
   position: absolute;
-  width: 96px;
+  width: 80px;
   height: 96px;
   fill: #67e8f9;
   stroke: #0c4a6e;
-  stroke-width: 2;
+  stroke-width: 3;
   stroke-linejoin: round;
+  stroke-linecap: round;
   filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.55));
 }
 

src/managers/stores/useGameStore.ts

@@ -146,7 +146,7 @@ function completeEbikeState(state: GameState): GameStateUpdate {
     },
     pylon: {
       ...state.pylon,
-      currentStep: "waiting",
+      currentStep: "approaching",
     },
   };
 }
@@ -161,7 +161,10 @@ function completePylonState(state: GameState): GameStateUpdate {
     },
     farm: {
       ...state.farm,
-      currentStep: "waiting",
+      // Farm starts at "locked" so FarmNarrativeFlow can auto-transition
+      // to "electricienne_history" and play the intro audio before the
+      // repair game begins.
+      currentStep: "locked",
     },
   };
 }
@@ -212,7 +215,7 @@ function advanceRepairMissionState(
   state: GameState,
   mission: RepairMissionId,
 ): GameStateUpdate {
-  const nextStep = getNextMissionStep(state[mission].currentStep);
+  const nextStep = getNextMissionStep(state[mission].currentStep, mission);
   if (nextStep === "done") {
     return completeMissionState(state, mission);
   }
@@ -227,7 +230,7 @@ function rewindRepairMissionState(
   return setMissionStepState(
     state,
     mission,
-    getPreviousMissionStep(state[mission].currentStep),
+    getPreviousMissionStep(state[mission].currentStep, mission),
   );
 }
 

src/managers/stores/useRepairFocusStore.ts

@@ -0,0 +1,25 @@
+import { create } from "zustand";
+import type { Vector3Tuple } from "@/types/three/three";
+
+/**
+ * Tracks whether a repair mini-game is currently in its "focused" phase
+ * (fragmented / scanning / repairing / reassembling). When active, a dark
+ * sphere expands around the repair model to visually isolate the player
+ * from the rest of the map. The store also exposes the world-space center
+ * of the bubble so map content can dim/hide content outside it if needed.
+ */
+interface RepairFocusStore {
+  active: boolean;
+  center: Vector3Tuple;
+  setFocus: (active: boolean, center?: Vector3Tuple) => void;
+}
+
+export const useRepairFocusStore = create<RepairFocusStore>((set) => ({
+  active: false,
+  center: [0, 0, 0],
+  setFocus: (active, center) =>
+    set((state) => ({
+      active,
+      center: center ?? state.center,
+    })),
+}));

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/types/gameplay/repairMission.ts

@@ -64,6 +64,13 @@ export interface RepairMissionConfig {
   description: string;
   modelPath: string;
   modelScale?: ModelTransformProps["scale"];
+  /**
+   * World-space rotation applied to the model when mounted by RepairGame
+   * (fragmented + repairing steps). Should match the rotation used by the
+   * source object in the world (e.g. parked Ebike) so the fragmented model
+   * lines up visually with the inspection model.
+   */
+  modelRotation?: Vector3Tuple;
   stageUiPath: string;
   interactUiPath: string;
   brokenUiPath: string;
@@ -83,10 +90,50 @@ export interface RepairMissionConfig {
 
 export type MissionStep =
   | "locked"
+  | "approaching"
+  | "arrived"
+  | "npc-return"
   | "waiting"
   | "inspected"
   | "fragmented"
   | "scanning"
   | "repairing"
   | "reassembling"
-  | "done";
+  | "done"
+  | "narrator-outro"
+  | "electricienne_history";
+
+export const PYLON_NARRATIVE_STEPS = [
+  "approaching",
+  "arrived",
+  "npc-return",
+  "narrator-outro",
+] as const;
+
+/** Farm-specific steps that bypass the repair-game flow. */
+export const FARM_NARRATIVE_STEPS = [
+  "locked",
+  "electricienne_history",
+] as const;
+
+export const REPAIR_GAME_STEPS = [
+  "waiting",
+  "inspected",
+  "fragmented",
+  "scanning",
+  "repairing",
+  "reassembling",
+  "done",
+] as const;
+
+export function isPylonNarrativeStep(step: MissionStep): boolean {
+  return (PYLON_NARRATIVE_STEPS as readonly MissionStep[]).includes(step);
+}
+
+export function isFarmNarrativeStep(step: MissionStep): boolean {
+  return (FARM_NARRATIVE_STEPS as readonly MissionStep[]).includes(step);
+}
+
+export function isRepairGameStep(step: MissionStep): boolean {
+  return (REPAIR_GAME_STEPS as readonly MissionStep[]).includes(step);
+}

src/types/gameplay/zone.ts

@@ -0,0 +1,9 @@
+import type { Vector3Tuple } from "@/types/three/three";
+
+export interface ZoneConfig {
+  id: string;
+  position: Vector3Tuple;
+  radius: number;
+  height: number;
+  oneShot: boolean;
+}

src/types/map/mapScene.ts

@@ -11,6 +11,8 @@ export interface MapNode {
 }
 
 export interface MapNodeInstanceTransform {
+  /** Node id from map.json — preserved so specific instances can be excluded at runtime. */
+  id?: string;
   position: Vector3Tuple;
   rotation: Vector3Tuple;
   scale: Vector3Tuple;

src/utils/debug/Debug.ts

@@ -85,7 +85,7 @@ export class Debug {
     fogEnabled: boolean;
     handTrackingSource: HandTrackingSource;
     showDebugOverlay: boolean;
-    showHandTrackingSvg: boolean;
+    showHandTrackingModel: boolean;
     showInteractionSpheres: boolean;
     showPerf: boolean;
     sceneMode: SceneMode;
@@ -108,7 +108,7 @@ export class Debug {
       fogEnabled: FOG_CONFIG.enabled,
       handTrackingSource: storedControls.handTrackingSource ?? "browser",
       showDebugOverlay: true,
-      showHandTrackingSvg: false,
+      showHandTrackingModel: false,
       showInteractionSpheres: false,
       showPerf: true,
       sceneMode: storedControls.sceneMode ?? "game",
@@ -156,10 +156,10 @@ export class Debug {
       const handTrackingFolder = this.createFolder("Hand Tracking");
 
       handTrackingFolder
-        ?.add(this.controls, "showHandTrackingSvg")
+        ?.add(this.controls, "showHandTrackingModel")
-        .name("Show SVG")
+        .name("Show Model")
         .onChange((value: boolean) => {
-          this.controls.showHandTrackingSvg = value;
+          this.controls.showHandTrackingModel = value;
           this.emit();
         });
 
@@ -281,12 +281,12 @@ export class Debug {
     return this.controls.showInteractionSpheres;
   }
 
-  getShowHandTrackingSvg(): boolean {
+  getShowHandTrackingModel(): boolean {
-    return this.controls.showHandTrackingSvg;
+    return this.controls.showHandTrackingModel;
   }
 
-  setShowHandTrackingSvg(value: boolean): void {
+  setShowHandTrackingModel(value: boolean): void {
-    this.controls.showHandTrackingSvg = value;
+    this.controls.showHandTrackingModel = value;
     this.emit();
   }
 

src/utils/map/mapInstanceTransform.ts

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

src/utils/three/ExplodedModel.ts

@@ -53,13 +53,23 @@ export class ExplodedModel {
   }
 
   private createParts(model: THREE.Object3D): ExplodedPart[] {
-    const root =
+    // Drill down through single-mesh-bearing branches until we find a node
-      model.children.length === 1 && model.children[0]
+    // with multiple mesh-bearing children (the natural "explosion group" the
-        ? model.children[0]
+    // modeler authored). Falls back to flat mesh list only if no such group
-        : model;
+    // exists. This avoids exploding leaves in local space when wrapper nodes
-    const directChildren = root.children.filter((child) => hasMesh(child));
+    // (e.g. "Empty" + "Moto" > "Eclatement") sit above the actual group.
+    let current = model;
+    while (true) {
+      const meshChildren = current.children.filter((child) => hasMesh(child));
+      if (meshChildren.length === 1 && meshChildren[0]) {
+        current = meshChildren[0];
+        continue;
+      }
+      break;
+    }
+    const directChildren = current.children.filter((child) => hasMesh(child));
     const sourceObjects =
-      directChildren.length > 1 ? directChildren : getMeshes(root);
+      directChildren.length > 1 ? directChildren : getMeshes(current);
 
     if (sourceObjects.length === 0) return [];
 

src/world/Environment.tsx

@@ -11,6 +11,7 @@ import {
   isMapModelVisible,
   useMapPerformanceStore,
 } from "@/managers/stores/useMapPerformanceStore";
+import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore";
 import { SkyModel } from "@/components/three/world/SkyModel";
 import { CloudSystem } from "@/world/clouds/CloudSystem";
 import { FogSystem } from "@/world/fog/FogSystem";
@@ -24,6 +25,9 @@ export function Environment(): React.JSX.Element {
   const groups = useMapPerformanceStore((state) => state.groups);
   const models = useMapPerformanceStore((state) => state.models);
   const showSky = isMapModelVisible("sky", { groups, models });
+  // Hide vegetation while the repair focus bubble is active so the cocoon
+  // shroud is not pierced by tall trees / bushes around the repair model.
+  const repairFocusActive = useRepairFocusStore((state) => state.active);
 
   if (sceneMode === "physics") {
     return (
@@ -52,7 +56,7 @@ export function Environment(): React.JSX.Element {
       <WaterSystem />
       <CloudSystem />
       <GrassSystem />
-      <VegetationSystem />
+      {repairFocusActive ? null : <VegetationSystem />}
     </>
   );
 }

src/world/GameCinematics.tsx

@@ -118,7 +118,15 @@ function playCinematic(
     onUpdate: () => camera.lookAt(target),
     onComplete: () => {
       timelineRef.current = null;
+      // During the outro the camera is intentionally left at its final
+      // position — don't release cinematic lock so the player camera system
+      // can't snap it back to the player's eye position.
+      const { mainState } = useGameStore.getState();
+      if (mainState === "outro") {
+        window.dispatchEvent(new CustomEvent("outro-cinematic-complete"));
+      } else {
         useGameStore.getState().setCinematicPlaying(false);
+      }
     },
   });
 
@@ -242,7 +250,10 @@ export function animateCameraTransformTransition(
   targetRotation: Vector3Tuple,
   duration: number = 1,
   onComplete?: () => void,
+  options: { lockInput?: boolean } = {},
 ): void {
+  const { lockInput = true } = options;
+
   if (!globalCamera) {
     logger.warn("GameCinematics", "Camera not found for transition");
     onComplete?.();
@@ -252,7 +263,9 @@ export function animateCameraTransformTransition(
   const camera = globalCamera;
 
   cameraTransitionTimeline?.kill();
+  if (lockInput) {
     useGameStore.getState().setCinematicPlaying(true);
+  }
 
   // Convert target rotation in degrees to quaternion
   const targetEuler = new THREE.Euler(
@@ -274,7 +287,9 @@ export function animateCameraTransformTransition(
     },
     onComplete: () => {
       cameraTransitionTimeline = null;
+      if (lockInput) {
         useGameStore.getState().setCinematicPlaying(false);
+      }
       onComplete?.();
     },
   });

src/world/GameMusic.tsx

@@ -1,14 +1,43 @@
 import { useEffect } from "react";
 import { AudioManager } from "@/managers/AudioManager";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import type { MissionStep } from "@/types/gameplay/repairMission";
 
 const GAME_MUSIC_PATH = "/sounds/musique/musique-jeu.mp3";
-const GAME_MUSIC_VOLUME = 0.33;
+const REPAIR_MUSIC_PATH = "/sounds/musique/musique-reparation.mp3";
+const MUSIC_VOLUME = 0.33;
+
+// Steps during which the repair mini-game owns the experience.
+// Triggered when any mission (ebike / pylon / farm) is in this range.
+const REPAIR_MUSIC_STEPS: ReadonlySet<MissionStep> = new Set([
+  "inspected",
+  "fragmented",
+  "scanning",
+  "repairing",
+  "reassembling",
+  "done",
+]);
 
 export function GameMusic(): null {
+  const ebikeStep = useGameStore((state) => state.ebike.currentStep);
+  const pylonStep = useGameStore((state) => state.pylon.currentStep);
+  const farmStep = useGameStore((state) => state.farm.currentStep);
+
+  const inRepair =
+    REPAIR_MUSIC_STEPS.has(ebikeStep) ||
+    REPAIR_MUSIC_STEPS.has(pylonStep) ||
+    REPAIR_MUSIC_STEPS.has(farmStep);
+
   useEffect(() => {
     const audio = AudioManager.getInstance();
-    audio.playMusic(GAME_MUSIC_PATH, GAME_MUSIC_VOLUME);
+    audio.playMusic(
+      inRepair ? REPAIR_MUSIC_PATH : GAME_MUSIC_PATH,
+      MUSIC_VOLUME,
+    );
+  }, [inRepair]);
 
+  useEffect(() => {
+    const audio = AudioManager.getInstance();
     return () => {
       audio.stopMusic();
     };

src/world/GameStageContent.tsx

@@ -1,6 +1,11 @@
 import { Ebike } from "@/components/ebike/Ebike";
 import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { RepairFocusBubble } from "@/components/three/gameplay/RepairFocusBubble";
 import { RepairGame } from "@/components/three/gameplay/RepairGame";
+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 {
   REPAIR_MISSION_POSITION_ENTRIES,
   REPAIR_MISSION_TRIGGERS,
@@ -11,16 +16,14 @@ import {
 } from "@/data/gameplay/gameStageAnchors";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { useRepairMissionAnchorStore } from "@/managers/stores/useRepairMissionAnchorStore";
+import {
+  isFarmNarrativeStep,
+  isPylonNarrativeStep,
+} from "@/types/gameplay/repairMission";
 import type { RepairMissionTriggerConfig } from "@/types/gameplay/repairMission";
 import type { Vector3Tuple } from "@/types/three/three";
 import { getRepairMissionPosition } from "@/utils/gameplay/repairMissionPosition";
-import {
+import { EBIKE_WORLD_POSITION } from "@/data/ebike/ebikeConfig";
-  EBIKE_WORLD_POSITION,
-  EBIKE_WORLD_ROTATION_Y,
-  EBIKE_WORLD_SCALE,
-} from "@/data/ebike/ebikeConfig";
-
-const EBIKE_CONFIG_KEY = `${EBIKE_WORLD_POSITION.join(",")}:${EBIKE_WORLD_ROTATION_Y}:${EBIKE_WORLD_SCALE}`;
 
 interface StageAnchorProps {
   color: string;
@@ -83,15 +86,28 @@ function RepairMissionTrigger({
 
 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 farmStep = useGameStore((state) => state.farm.currentStep);
+
+  const pylonInNarrative =
+    mainState === "pylon" && isPylonNarrativeStep(pylonStep);
+  const farmInNarrative = mainState === "farm" && isFarmNarrativeStep(farmStep);
+
   return (
     <>
       {mainState === "intro" ? <StageAnchor {...INTRO_STAGE_ANCHOR} /> : null}
-      <Ebike key={EBIKE_CONFIG_KEY} position={EBIKE_WORLD_POSITION} />
+      <Ebike position={EBIKE_WORLD_POSITION} />
+      <PylonLightingEffect />
+      <PylonDownedPylon />
+      {mainState === "pylon" ? <PylonNarrativeFlow /> : null}
+      {mainState === "farm" ? <FarmNarrativeFlow /> : null}
       {REPAIR_MISSION_POSITION_ENTRIES.map(({ mission }) => {
         const position = getRepairMissionPosition(mission, anchors);
         if (!position) return null;
+        if (mission === "pylon" && pylonInNarrative) return null;
+        if (mission === "farm" && farmInNarrative) return null;
         return (
           <RepairGame key={mission} mission={mission} position={position} />
         );
@@ -100,6 +116,7 @@ export function GameStageContent(): React.JSX.Element {
         <RepairMissionTrigger key={config.mission} config={config} />
       ))}
       {mainState === "outro" ? <StageAnchor {...OUTRO_STAGE_ANCHOR} /> : null}
+      <RepairFocusBubble />
     </>
   );
 }

src/world/World.tsx

@@ -6,9 +6,11 @@ import {
 } from "@/data/player/playerConfig";
 import { LA_FABRIK_INITIAL_LOOK_AT } from "@/data/world/laFabrikConfig";
 import { useCameraMode } from "@/hooks/debug/useCameraMode";
+import { useDebugStore } from "@/hooks/debug/useDebugStore";
 import { useEnvironmentDebug } from "@/hooks/debug/useEnvironmentDebug";
 import { useMapPerformanceDebug } from "@/hooks/debug/useMapPerformanceDebug";
 import { useCharacterDebug } from "@/hooks/debug/useCharacterDebug";
+import { usePlayerPositionDebug } from "@/hooks/debug/usePlayerPositionDebug";
 import { useDebugVisualsDebug } from "@/hooks/debug/useDebugVisualsDebug";
 import { useSceneMode } from "@/hooks/debug/useSceneMode";
 import { useHandTrackingSnapshot } from "@/hooks/handTracking/useHandTrackingSnapshot";
@@ -31,7 +33,6 @@ import { CharacterSystem } from "@/world/characters/CharacterSystem";
 import { Player } from "@/world/player/Player";
 import { TestMap } from "@/world/debug/TestMap";
 import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
-import type { HandTrackingGloveHandedness } from "@/hooks/handTracking/useHandTrackingGloveStatus";
 import type { HandTrackingHand } from "@/types/handTracking/handTracking";
 
 interface WorldProps {
@@ -40,7 +41,7 @@ interface WorldProps {
 
 function hasTrackedHand(
   hands: HandTrackingHand[],
-  handedness: HandTrackingGloveHandedness,
+  handedness: "left" | "right",
 ): boolean {
   return hands.some((hand) => hand.handedness.toLowerCase() === handedness);
 }
@@ -49,6 +50,7 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
   useEnvironmentDebug();
   useMapPerformanceDebug();
   useCharacterDebug();
+  usePlayerPositionDebug();
   useDebugVisualsDebug();
 
   const cameraMode = useCameraMode();
@@ -58,6 +60,9 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
     (state) => state.showPlayerModel,
   );
   const showDebugOctree = useDebugVisualsStore((state) => state.showOctree);
+  const showHandTrackingModel = useDebugStore((debug) =>
+    debug.getShowHandTrackingModel(),
+  );
   const { hands, status, usageStatus } = useHandTrackingSnapshot();
   const {
     octree,
@@ -72,7 +77,10 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
       ? PLAYER_SPAWN_POSITION_GAME
       : PLAYER_SPAWN_POSITION_PHYSICS;
   const showHandTrackingGloves =
-    status === "connected" && usageStatus !== "inactive" && hands.length > 0;
+    showHandTrackingModel &&
+    status === "connected" &&
+    usageStatus !== "inactive" &&
+    hands.length > 0;
   const showLeftHandTrackingGlove =
     showHandTrackingGloves && hasTrackedHand(hands, "left");
   const showRightHandTrackingGlove =

src/world/debug/TestMap.tsx

@@ -3,7 +3,9 @@ import { Component, useRef, useState, useEffect } from "react";
 import * as THREE from "three";
 import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier";
 import { Line } from "@react-three/drei";
+import { Ebike } from "@/components/ebike/Ebike";
 import { RepairGame } from "@/components/three/gameplay/RepairGame";
+import { RepairFocusBubble } from "@/components/three/gameplay/RepairFocusBubble";
 import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
 import { AnimatedModel } from "@/components/three/models/AnimatedModel";
 import { TriggerObject } from "@/components/three/interaction/TriggerObject";
@@ -239,11 +241,16 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
             <group position={zone.position}>
               <RepairPlaygroundZoneMarker color={zone.color} />
             </group>
+            {zone.mission === "ebike" ? (
+              <Ebike position={zone.position} snapToTerrain={false} />
+            ) : null}
             <RepairGame mission={zone.mission} position={zone.position} />
           </group>
         ))}
       </Physics>
 
+      <RepairFocusBubble />
+
       {/* Dynamic Futuristic 3D GPS Dashboard Preview */}
       <group
         position={TEST_SCENE_GPS_PREVIEW_POSITION}
@@ -264,7 +271,7 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
         </mesh>
         */}
         {/* GPS Map screen plane */}
-        <group position={[0, 0, 0.06]}>
+        <group position={[0, -8, 0.06]}>
           <EbikeGPSMap
             width={4}
             height={4}

src/world/map-instancing/MapInstancingSystem.tsx

@@ -20,6 +20,7 @@ import {
   isMapModelVisible,
   useMapPerformanceStore,
 } from "@/managers/stores/useMapPerformanceStore";
+import { useGameStore } from "@/managers/stores/useGameStore";
 import { InstancedMapAsset } from "@/world/map-instancing/InstancedMapAsset";
 import {
   MAP_INSTANCING_ASSETS,
@@ -27,6 +28,8 @@ import {
   type MapInstancingAssetConfig,
   type MapInstancingAssetType,
 } from "@/data/world/mapInstancingConfig";
+import { REPAIR_MISSION_ANCHOR_IDS } from "@/data/gameplay/repairMissionAnchors";
+import { isRepairGameStep } from "@/types/gameplay/repairMission";
 import { useMapInstancingData } from "@/hooks/world/useMapInstancingData";
 import type { MapAssetInstance } from "@/types/map/mapScene";
 import type { GraphicsPreset } from "@/data/world/graphicsConfig";
@@ -146,6 +149,8 @@ export function MapInstancingSystem({
   const groups = useMapPerformanceStore((state) => state.groups);
   const models = useMapPerformanceStore((state) => state.models);
   const { data, isLoading } = useMapInstancingData();
+  const mainState = useGameStore((state) => state.mainState);
+  const pylonStep = useGameStore((state) => state.pylon.currentStep);
   const streamingEnabled =
     streaming &&
     CHUNK_CONFIG.enabled &&
@@ -153,6 +158,15 @@ export function MapInstancingSystem({
     sceneMode === "game" &&
     cameraMode === "player";
 
+  // During the pylon narrative phase (before the pylon is raised), hide the
+  // repair:pylon instanced mesh so the PylonDownedPylon component takes its place.
+  // Once the pylon is raised (repair-game steps), restore it so the normal model
+  // appears upright in the world while the repair mini-game runs.
+  const hidePylonAnchorId =
+    mainState === "pylon" && !isRepairGameStep(pylonStep)
+      ? REPAIR_MISSION_ANCHOR_IDS.pylon
+      : undefined;
+
   const chunks = useMemo(() => {
     if (!data) return [];
 
@@ -168,12 +182,18 @@ export function MapInstancingSystem({
         return [];
       }
 
-      const instances = data.get(type);
+      let instances = data.get(type);
       if (!instances || instances.length === 0) return [];
 
+      // Filter out the repair-mission pylon instance during the narrative phase
+      if (hidePylonAnchorId && config.mapName === "pylone") {
+        instances = instances.filter((inst) => inst.id !== hidePylonAnchorId);
+        if (instances.length === 0) return [];
+      }
+
       return createMapAssetChunks(type, config, instances);
     });
-  }, [data, groups, models, onlyMapName]);
+  }, [data, groups, models, onlyMapName, hidePylonAnchorId]);
 
   const visibleChunks = useVisibleWorldChunks(chunks, streamingEnabled, {
     loadRadius: graphicsPresetConfig.chunkLoadRadius,

src/world/player/PlayerController.tsx

@@ -23,7 +23,6 @@ import {
   PLAYER_MAX_DELTA,
   PLAYER_XZ_DAMPING_FACTOR,
 } from "@/data/player/playerConfig";
-import { useRepairMovementLocked } from "@/hooks/gameplay/useRepairMovementLocked";
 import { useTerrainHeightSampler } from "@/hooks/three/useTerrainHeight";
 import { InteractionManager } from "@/managers/InteractionManager";
 import { useGameStore } from "@/managers/stores/useGameStore";
@@ -154,9 +153,7 @@ export function PlayerController({
 }: PlayerControllerProps): null {
   const camera = useThree((state) => state.camera);
   const sceneMode = useSceneMode();
-  const movementLocked = useRepairMovementLocked();
   const terrainHeight = useTerrainHeightSampler();
-  const movementLockedRef = useRef(movementLocked);
   const keys = useRef<Keys>({ ...DEFAULT_KEYS });
   const velocity = useRef(new THREE.Vector3());
   const fallDuration = useRef(0);
@@ -249,17 +246,6 @@ export function PlayerController({
     initializedRef.current = true;
   }, [camera, initialLookAt, spawnPosition]);
 
-  useEffect(() => {
-    movementLockedRef.current = movementLocked;
-
-    if (!movementLocked) return;
-
-    keys.current = { ...DEFAULT_KEYS };
-    wantsJump.current = false;
-    velocity.current.setX(0);
-    velocity.current.setZ(0);
-  }, [movementLocked]);
-
   useEffect(() => {
     const interaction = InteractionManager.getInstance();
 
@@ -267,20 +253,11 @@ export function PlayerController({
       if (isPlayerInputLocked()) return;
 
       if (setMovementKey(keys.current, event.key, true)) {
-        if (movementLockedRef.current) {
-          keys.current = { ...DEFAULT_KEYS };
-        }
         event.preventDefault();
         return;
       }
 
       if (event.key === JUMP_KEY) {
-        if (movementLockedRef.current) {
-          wantsJump.current = false;
-          event.preventDefault();
-          return;
-        }
-
         wantsJump.current = true;
         event.preventDefault();
         return;
@@ -386,7 +363,11 @@ export function PlayerController({
     }
 
     _wishDir.set(0, 0, 0);
-    if (!movementLocked && !isEbikeBreakdown) {
+    // Block drive input only when still on the bike during breakdown.
+    // Once auto-dismounted (movementMode === "walk"), the player must
+    // remain free to walk around even though ebikeBreakdownActive is true.
+    const blockDriveInput = isEbikeMounted && isEbikeBreakdown;
+    if (!blockDriveInput) {
       if (keys.current.forward) _wishDir.add(_forward);
       if (keys.current.backward) _wishDir.sub(_forward);
       if (!isEbikeMounted) {