fix(pylon): start post-ebike delay in tampon state

Update repair-game.md to reflect the recent flow refactor:
- single ExplodableModel mounted across fragmented -> done
- splitSpeed for slower, more deliberate explosion
- ebike repairing simplified to a single 'Changez le refroidisseur' trigger
- ebike done auto-completes on narrateur_ebikerepare's ended event
- narrator ownership table clarified (narrator vs scan sequence vs repair game)

docs/technical/hand-tracking.md

@@ -10,17 +10,25 @@ It is now also available to the production repair flow when a mission reaches a
 
 ## Runtime Flow
 
-1. The browser captures webcam frames in `src/hooks/handTracking/useRemoteHandTracking.ts`.
-2. Frames are sent to the local Python backend over WebSocket.
-3. The backend runs MediaPipe hand landmark detection.
-4. The backend returns hand data including landmarks, handedness, score, center point, and `isFist`.
-5. React stores the latest snapshot in the hand tracking provider.
-6. `GrabbableObject` reads that snapshot each frame and uses fist state plus raycasting to grab objects.
-7. `HandTrackingGlove` reads the same snapshot and places the rigged `gant_l` and `gant_r` models on the detected hands when hand tracking is active.
+The frontend can run hand tracking with two interchangeable sources, selected from the debug source controller:
+
+- **Browser JS** (`src/hooks/handTracking/useBrowserHandTracking.ts`) runs MediaPipe `hand_landmarker.task` directly in the browser via `@mediapipe/tasks-vision`. Default for debug.
+- **Backend** (`src/hooks/handTracking/useRemoteHandTracking.ts`) sends webcam frames as JPEG over WebSocket to a local Python process that runs MediaPipe and returns landmarks.
+
+Both sources funnel into the same `HandTrackingContext` so all consumers see one shared snapshot:
+
+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 `hand.isFist` plus raycasting to grab objects.
+5. `HandTrackingVisualizer` paints the SVG hand silhouette overlay on top of the canvas — the primary visualization.
+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
 
-Hand tracking is intentionally gated so the webcam and backend are not used all the time.
+Hand tracking is gated so the webcam and runtime are only spun up when actually needed.
 
 The debug activation conditions are:
 
@@ -28,16 +36,26 @@ The debug activation conditions are:
 - scene mode is `physics`
 - the player is near an interaction, is holding an object, or is hand-holding an object
 
-This keeps hand tracking active while the player is inside an interaction zone, even if the camera is not aimed directly at the object.
-
 The production repair activation conditions are:
 
 - active `mainState` is `ebike`, `pylon`, or `farm`
 - the active mission step is `inspected`, `repairing`, `reassembling`, or `done`
 
-This keeps the webcam off during `waiting`, `fragmented`, and `scanning`, then enables hand input only when the repair flow is expected to use hands.
+This keeps the webcam off during `waiting`, `fragmented`, and `scanning`.
 
-In the current production repair flow, `inspected` uses a two-fists hold gesture to advance to `fragmented`. The hold must last one second and is independent from local object interaction distance once the mission is in the correct state. Keyboard input for the same transition is handled separately by the repair case trigger, so pressing `E` requires the case to be focused through the shared interaction system.
+### Linger
+
+Once activation turns off (player walks back out of a trigger zone, or a mission step transitions away), the runtime stays alive for `HAND_TRACKING_LINGER_MS` (2000 ms) before being torn down. This gives MediaPipe enough time to finish initializing the webcam and load the model on a fresh entry — without the linger, a quick walk-through of a trigger zone never produces a detected hand.
+
+## Provider Stability
+
+`HandTrackingProvider` always renders the same JSX root (`HandTrackingRuntime`) and exposes `enabled` as a prop. Returning two different element types (`<HandTrackingContext value=IDLE>` vs `<ActiveHandTrackingProvider>`) used to be the historical shape and was the root cause of WebGL context loss: every `enabled` toggle forced React to remount the entire subtree, including the `<Canvas>`, which destroyed the WebGL renderer.
+
+The two source hooks are therefore mounted in permanence with an `enabled` flag that they early-return on. No webcam or MediaPipe resources are created while `enabled` is false.
+
+## StrictMode Resilience
+
+In development, `<StrictMode>` mounts → unmounts → remounts each effect to surface non-idempotent code. The two source hooks delay their actual `start()` call by `HAND_TRACKING_RUNTIME_START_DELAY_MS` (80 ms) and clear the timer on cleanup, so a StrictMode double-mount or a rapid `nearby` flicker never reaches `getUserMedia` twice.
 
 ## Backend
 
@@ -52,7 +70,27 @@ The Python process uses MediaPipe and the local model file:
 backend/hand_landmarker.task
 ```
 
-The backend sends normalized hand coordinates and landmarks. The frontend treats the values as screen-space inputs, then maps them into world space with the active Three.js camera.
+The frontend sends JPEG frames at `HAND_TRACKING_FRAME_WIDTH × HAND_TRACKING_FRAME_HEIGHT` (320×240) to keep WebSocket bandwidth low. The backend sends normalized hand coordinates and landmarks.
+
+## Browser MediaPipe
+
+The browser path uses `hand_landmarker.task` (float16) downloaded from Google's MediaPipe model storage. The requested webcam resolution is **640×480** (`HAND_TRACKING_BROWSER_CAMERA_WIDTH/HEIGHT`), independent from the backend's 320×240. The float16 model is more sensitive than the backend Python model and needs the higher-resolution frame to detect hands reliably.
+
+The MediaPipe delegate is currently `"GPU"`. CPU works too but is significantly slower; on a loaded scene the inference drops to ~5fps and the user feels noticeable lag during grab. MediaPipe creates its own WebGL context separate from Three.js, so there is no direct contention.
+
+A singleton instance of `HandLandmarker` is cached in `src/lib/handTracking/browserHandTracking.ts`. `releaseBrowserHandLandmarker()` is called on cleanup and on WebGL context lost.
+
+## Smoothing
+
+MediaPipe at ~10 fps produces noticeable landmark jitter that, when fed raw into the scene, makes both the glove rig and any grabbed object tremble.
+
+A simple exponential moving average is applied to every landmark before the snapshot is published:
+
+```ts
+smoothed.x = previous.x * (1 - factor) + next.x * factor;
+```
+
+The factor is `HAND_TRACKING_LANDMARK_SMOOTHING` (0.4). Hands are matched across frames by `handedness` so left/right don't bleed into each other.
 
 ## Frontend Data Shape
 
@@ -72,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`.
@@ -106,24 +155,60 @@ 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 wireframe fallback
-- `HandTrackingGlove` for the left-hand `gant_l` and right-hand `gant_r` models in the R3F scene
+- `HandTrackingVisualizer` for the SVG hand silhouette overlay (always on when tracking is active)
+- `HandTrackingFallback` for the last-resort hand silhouette overlay (legacy, see below)
+- `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 hand tracking debug panel is a compact HTML grid outside the canvas. `Model loaded` displays the successfully loaded glove models. The SVG hand wireframe is only a fallback while models are loading or if a glove model fails to load.
+### SVG Visualizer
+
+`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 current glove MVP uses `public/models/gant_l/model.gltf` and `public/models/gant_r/model.gltf`, which contain GLTF skins and armatures. Each model is positioned, oriented, and scaled from palm landmarks, then each finger bone chain is rotated toward the matching MediaPipe landmark chain.
+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.
 
-The glove models are intentionally smaller than the raw SVG overlay so they do not dominate the camera view.
+`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.
+
+The `gant_l` material is set to `alphaMode: OPAQUE` with `doubleSided: true`. The opaque mode prevents transparency sorting issues that made folded fingers disappear behind the palm; the double-sided flag covers the back faces revealed by the mirror scale on the right hand.
+
+Two additional glove variants exist on disk:
+
+- `public/models/gant_l_pad/model.gltf`
+- `public/models/gant_r_pad/model.gltf`
+
+They are intended for future swap-by-state usage but are **not yet rigged**. They cannot be animated by MediaPipe landmarks in their current form — re-exporting them from Blender with the same armature structure as `gant_l` is a prerequisite.
 
 ## Known Limitations
 
 - 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.
-- There is no smoothing layer for hand position or depth yet.
-- The SVG hand visualization is a fallback, not the primary display when glove models load correctly.
+- 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,23 +161,22 @@ 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:
+Files:
 
 ```txt
 src/components/three/models/ExplodableModel.tsx
+src/utils/three/ExplodedModel.ts
 ```
 
-The mission object is shown split apart. A timer then moves the mission to `scanning`.
+The mission object is shown split apart. `RepairGame` mounts a **single** `ExplodableModel` instance for the entire repair flow (`fragmented` -> `done`) so the model loads once, animates from its real authored positions, and is never re-instantiated when the player advances to scanning, repairing, reassembling or done. This eliminates the visible position/rotation jumps and re-explosion that occurred when each step instantiated its own model.
 
-The default delay comes from:
+`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.
 
-```txt
-REPAIR_FRAGMENTATION_SEQUENCE_SECONDS
-```
+When mounted, `RepairGame` applies `RepairMissionConfig.modelRotation` and `modelScale` to the shared 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 explode/reassemble lerp speed is configurable via `splitSpeed` (default `REPAIR_FRAGMENT_SPLIT_SPEED = 1.8`, ~1.5s) so each node is clearly seen leaving its origin.
+
+Transition out is event-driven: the model fires `onSplitSettled(1)` when the lerp converges and `RepairGame` advances to `scanning`. A `REPAIR_FRAGMENTATION_SEQUENCE_SECONDS + 2` fallback timer guards against load failures.
 
 ### Scanning
 
@@ -185,50 +186,33 @@ File:
 src/components/three/gameplay/RepairScanSequence.tsx
 ```
 
-The scan sequence:
+The scan sequence is now stateless w.r.t. the model: it receives `parts: ExplodedPart[]` from the upstream shared `ExplodableModel` and:
 
-- keeps the exploded model visible
-- receives model parts from `ExplodableModel`
 - advances an active part index over time
 - renders `RepairScanVisual` on the active part
-- reveals broken-part highlights when configured broken parts have been reached
+- reveals broken-part highlights cumulatively as scan progresses
+- when the active part has a `voiceLineId`, gates the advance on the audio's `ended` event (with a 15s ceiling fallback) so the diagnostic line plays in full
 - returns `RepairScannedBrokenPart[]` when done
 
-Broken-part lookup first tries `brokenParts[].nodeName`. If no configured node matches, it falls back to the first available exploded parts. This fallback is useful while GLTF node names are still unstable, but precise `nodeName` config is safer for production.
+Broken-part lookup uses `brokenParts[].nodeName` against the exploded parts (deep traverse). When a configured node can't be matched, the available part names are logged so config drift is visible in the console.
 
 ### Repairing
 
-File:
+For pylon/farm:
 
 ```txt
 src/components/three/gameplay/RepairRepairingStep.tsx
 ```
 
-This is the densest gameplay step.
+This is the densest gameplay step. It renders install target, placeholder markers, grabbable replacement parts, grabbable broken parts to store, placement feedback and a ready-to-install prompt. Validation requires the correct replacement part placed AND every scanned broken part deposited.
 
-It renders:
-
-- install target
-- placeholder markers
-- grabbable replacement parts
-- grabbable broken parts to store
-- placement feedback
-- ready-to-install prompt
-
-Important local state:
-
-- `placedPartIds`: replacement parts that snapped near a placeholder
-- `depositedBrokenPartIds`: broken parts stored in the case
-- `showBlockedInstallFeedback`: temporary visual feedback when install is attempted too early
-
-Validation:
+For ebike (mission 1, simplified):
 
 ```txt
-correct replacement part placed
-AND every scanned broken part deposited
+src/components/three/gameplay/RepairEbikeRepairTrigger.tsx
 ```
 
-Only then does the install target call `onRepair()` and move to `reassembling`.
+Replaces the heavier grabbable UX with a single "Changez le refroidisseur" prompt. Pressing E advances directly to `reassembling`. The cercles décoratifs and grabbable parts are omitted to keep the first repair experience low-friction.
 
 ### Reassembling
 
@@ -238,23 +222,59 @@ File:
 src/components/three/gameplay/RepairReassemblyStep.tsx
 ```
 
-The exploded model animates back into assembled form and completion particles play. A timer then moves the mission to `done`.
+The shared `ExplodableModel` flips `split=false`, animating each node back to its original position (inverse of fragmented). `RepairReassemblyStep` itself is now reduced to:
 
-Mission configs can override the default reassembly duration.
+- the completion particles
+- a `delayMs` timer (`REPAIR_REASSEMBLY_HOLD_MS = 1500`) that fires `onSettled` so `RepairGame` auto-advances to `done`
 
 ### Done
 
-File:
+For pylon/farm:
 
 ```txt
 src/components/three/gameplay/RepairCompletionStep.tsx
 ```
 
-The repaired object remains visible. The player validates the completion target, then:
+The shared exploded model (now reassembled) remains visible. The player validates a green completion target, the case closes and exits, then `completeMission(mission)` advances the global game progression.
 
-1. the repair case closes
-2. the case plays its exit animation
-3. `completeMission(mission)` advances the global game progression
+For ebike (mission 1, auto-complete):
+
+`RepairGame` plays `narrateur_ebikerepare` directly on entry to `done`. When the audio's `ended` event fires (with `REPAIR_DONE_DIALOGUE_FALLBACK_MS = 6000` fallback) `completeMission("ebike")` is called automatically and the world hands off to the pylon mission. The bubble shrinks via `shouldFocusBubbleBeActive(done) === false`. No Validate button is shown.
+
+## 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 | Owner                  |
+| ------------ | ------------------------------------ | ---------------------------------- | -------- | ---------------------- |
+| `fragmented` | `narrateur_galetscan`                | `narrateur_galetscan.mp3`          | cue 6    | `EbikeRepairNarrator`  |
+| `scanning`   | `narrateur_refroidisseur_diagnostic` | `narrateur_refroidisseurcassé.mp3` | cue 24   | `RepairScanSequence`\* |
+| `done`       | `narrateur_ebikerepare`              | `narrateur_ebikeréparé.mp3`        | cue 7    | `RepairGame`\*\*       |
+
+\* The diagnostic line is triggered by the scan sequence when it lands on the broken part configured with `voiceLineId` (refroidisseur for ebike). The advance to `repairing` is gated on the audio's `ended` event so the line plays in full with the red highlight on screen.
+
+\*\* `RepairGame` plays the success line directly on entering `done` so the audio's `ended` event can drive `completeMission` and hand off to pylon. A `REPAIR_DONE_DIALOGUE_FALLBACK_MS` timer guards against load failures. `EbikeRepairNarrator` no longer owns this cue.
+
+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
 

docs/technical/webgl-context-lost-investigation.md

@@ -1,367 +0,0 @@
-# WebGL Context Lost - Investigation
-
-## Résumé court
-
-Le projet subit des pertes de contexte WebGL pendant les phases où le jeu active
-ou prépare le hand tracking, les interactions physiques ou le repair game.
-
-Le symptôme visible côté console est :
-
-```txt
-THREE.WebGLRenderer: Context Lost.
-[ERROR] [WebGL] Context lost - attempting auto-restore
-THREE.WebGLRenderer: Context Restored.
-```
-
-Le problème est bloquant parce que le hand tracking et le repair game sont au
-coeur de l'expérience. Quand le contexte WebGL saute, la scène Three.js peut se
-remonter, le joueur peut revenir au spawn, le pointer lock peut être perdu, et
-les tests de gameplay deviennent instables.
-
-## Ce qui fonctionne aujourd'hui
-
-La page principale monte un `<Canvas>` React Three Fiber dans
-`src/pages/page.tsx`.
-
-`src/world/World.tsx` compose ensuite :
-
-- la scène de jeu ou la scène de test physique ;
-- le player ;
-- les systèmes visuels de monde ;
-- les gants de hand tracking ;
-- les systèmes de debug.
-
-Le hand tracking est centralisé dans
-`src/providers/gameplay/HandTrackingProvider.tsx`.
-
-Il peut utiliser deux sources :
-
-- `browser` : MediaPipe JS dans le navigateur ;
-- `backend` : backend Python local via WebSocket.
-
-L'activation est déclenchée par :
-
-- certaines étapes du repair game ;
-- les zones d'interaction qui demandent explicitement les mains ;
-- la scène Physique en debug, selon les objets présents.
-
-## Problème observé
-
-Les context lost arrivent dans plusieurs situations :
-
-- entrée dans une zone d'interaction ;
-- lancement du hand tracking ;
-- lancement d'un repair game ;
-- scène Physique avec `TestMap`, `Physics`, `AnimatedModel`, waypoints GPS et
-  objets interactifs ;
-- source browser JS ;
-- source backend.
-
-Le fait que le crash existe avec les deux sources indique que le problème n'est
-probablement pas limité au backend Python ni à MediaPipe JS seul. Le hand
-tracking semble être un déclencheur fort, mais il arrive au moment où plusieurs
-ressources GPU et systèmes runtime se réveillent ensemble.
-
-## Pourquoi c'est bloquant
-
-Ce bug bloque la feature principale du projet :
-
-- le repair game dépend du hand tracking pour valider certaines actions ;
-- les interactions main sont nécessaires pour tester les objets grabbables ;
-- un context lost casse la continuité du gameplay ;
-- le joueur peut être replacé au spawn après reconstruction ;
-- le pointer lock peut être perdu ;
-- les logs deviennent difficiles à lire parce que le jeu tente de restaurer la
-  scène en boucle ;
-- le comportement n'est pas fiable pour une démo ou un déploiement.
-
-Tant que ce problème n'est pas stable, on ne peut pas valider correctement :
-
-- la mission e-bike ;
-- la mission pylône ;
-- la mission ferme ;
-- les interactions main ;
-- le switch browser/backend ;
-- le comportement en build de production.
-
-## Hypothèses principales
-
-### 1. Pression GPU au lancement du hand tracking
-
-MediaPipe browser peut créer ses propres ressources GPU. Si Three.js charge
-déjà beaucoup de géométries, textures, ombres et modèles, l'ajout du hand
-tracking peut faire passer le navigateur au-dessus d'une limite GPU.
-
-Le stash contient une tentative de mitigation en forçant MediaPipe browser et le
-backend à utiliser le CPU.
-
-### 2. Activation trop brusque du runtime mains
-
-Les logs montrent des transitions rapides :
-
-```txt
-Browser JS runtime starting
-Runtime source selected
-Runtime snapshot changed
-Browser JS runtime stopped
-Browser JS runtime starting
-```
-
-Ce type de start/stop rapide peut provoquer :
-
-- création webcam ;
-- création MediaPipe ;
-- montage des gants ;
-- update du state React ;
-- re-render du monde ;
-- stress GPU au même moment.
-
-### 3. Les gants 3D sont montés trop tôt
-
-Si les gants de hand tracking sont montés avant d'avoir de vraies mains
-détectées, le jeu charge et prépare des modèles GPU sans utilité immédiate.
-
-Le stash contient une tentative pour ne rendre les gants que lorsqu'une main
-existe réellement dans le snapshot.
-
-### 4. Re-upload textures / GLTF trop agressif
-
-`src/utils/three/optimizeGLTFScene.ts` modifie des textures GLTF. Si cette
-optimisation force trop souvent `needsUpdate`, mipmaps ou anisotropy, le
-navigateur peut recharger beaucoup de textures vers le GPU.
-
-Le stash limite cette pression en évitant de forcer les mipmaps et en abaissant
-l'anisotropy.
-
-### 5. Permission caméra au mauvais moment
-
-Demander la caméra au moment exact où le joueur entre dans une interaction ou
-lance le repair game ajoute un gros événement runtime au pire moment.
-
-Le stash contient une tentative de warmup caméra pour obtenir la permission plus
-tôt et réutiliser le stream au moment où le hand tracking devient nécessaire.
-
-### 6. La scène Physique ajoute du bruit
-
-La scène Physique est une scène de test volontairement riche :
-
-- `Physics` Rapier ;
-- `GrabbableObject` ;
-- `TriggerObject` ;
-- `RepairGame` ;
-- `AnimatedModel` ;
-- GPS preview ;
-- waypoints verts ;
-- player ;
-- debug overlay.
-
-Cette richesse est normale pour une scène de test, mais elle complique
-l'investigation parce qu'elle active beaucoup de systèmes à la fois.
-
-## Fichiers modifiés dans le stash
-
-Le stash `stash@{0}` contient 28 fichiers modifiés, environ `+530 / -152`.
-Il ne contient pas de fichiers untracked.
-
-| Fichier                                                   | Rôle dans l'investigation                                                                 |
-| --------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `README.md`                                               | Note sur les commandes backend depuis la racine du repo.                                  |
-| `backend/README.md`                                       | Documentation plus claire pour lancer le backend et réparer un `.venv` cassé.             |
-| `backend/hand_tracker.py`                                 | Force le backend MediaPipe en CPU.                                                        |
-| `docs/user/main-feature.md`                               | Ajustements de documentation utilisateur.                                                 |
-| `public/sounds/dialogue/subtitles/fr/electricienne.srt`   | Ajustements de sous-titres, pas central pour le context lost.                             |
-| `public/sounds/dialogue/subtitles/fr/narrateur.srt`       | Ajustements de sous-titres, pas central pour le context lost.                             |
-| `src/components/debug/DebugPlayerModel.tsx`               | Ajustements de modèle debug player.                                                       |
-| `src/components/three/handTracking/HandTrackingGlove.tsx` | Retire le preload automatique des gants pour réduire la pression GPU.                     |
-| `src/components/three/interaction/GrabbableObject.tsx`    | Marque les grabbables qui nécessitent vraiment le hand tracking.                          |
-| `src/components/three/interaction/InteractableObject.tsx` | Ajoute le flag `handTracking` aux interactables.                                          |
-| `src/data/debug/testSceneConfig.ts`                       | Stabilise la scène Physique : sol, GPS, hauteur des waypoints.                            |
-| `src/data/handTrackingConfig.ts`                          | Ajoute délai d'activation, TTL warmup caméra, delegate CPU browser.                       |
-| `src/data/player/playerConfig.ts`                         | Corrige le spawn Physique avec `PLAYER_EYE_HEIGHT`.                                       |
-| `src/hooks/debug/useSceneMode.ts`                         | Force `game` hors debug actif pour éviter des scènes debug en prod.                       |
-| `src/hooks/handTracking/useBothFistsHold.ts`              | Sort le hold des deux poings de `useFrame` R3F vers `requestAnimationFrame`.              |
-| `src/hooks/handTracking/useBrowserHandTracking.ts`        | Encadre `detectForVideo`, release MediaPipe en cleanup, gère les erreurs.                 |
-| `src/hooks/three/useTerrainHeight.ts`                     | Ajustements terrain, liés au snap/player.                                                 |
-| `src/lib/handTracking/browserHandTracking.ts`             | Force delegate CPU, garde une instance MediaPipe, ajoute `releaseBrowserHandLandmarker`.  |
-| `src/lib/handTracking/handTrackingSession.ts`             | Ajoute warmup caméra, cache stream, timeout et consommation du stream préparé.            |
-| `src/managers/InteractionManager.ts`                      | Ajoute `handTrackingNearby` pour ne pas activer les mains sur toute interaction.          |
-| `src/pages/page.tsx`                                      | Gestion WebGL context lost/restored, DPR fixe, antialias off, release MediaPipe au crash. |
-| `src/providers/gameplay/HandTrackingProvider.tsx`         | Ajoute activation différée, snapshot queued, warmup runtime.                              |
-| `src/types/interaction/interaction.ts`                    | Ajoute `handTracking` et `handTrackingNearby` aux types interaction.                      |
-| `src/utils/debug/Debug.ts`                                | Synchronise l'affichage du controller hand tracking source.                               |
-| `src/utils/three/optimizeGLTFScene.ts`                    | Réduit la pression GPU des textures GLTF.                                                 |
-| `src/world/World.tsx`                                     | Ne rend les gants que si une main correspondante est détectée.                            |
-| `src/world/debug/TestMap.tsx`                             | Nettoie les logs, stabilise waypoints/GPS/scène Physique.                                 |
-| `src/world/player/PlayerCamera.tsx`                       | Ajustements pointer lock/canvas ciblé.                                                    |
-
-## Fichiers actuellement modifiés dans le worktree
-
-Etat observé au moment de cette note :
-
-| Fichier                                                   | Statut                                                    |
-| --------------------------------------------------------- | --------------------------------------------------------- |
-| `public/models/talkie/*`                                  | Beaucoup d'anciennes textures/fichiers `.gltf` supprimés. |
-| `public/models/talkie/model.glb`                          | Nouveau fichier non suivi.                                |
-| `src/components/three/handTracking/HandTrackingGlove.tsx` | Modifié.                                                  |
-| `src/data/debug/testSceneConfig.ts`                       | Modifié.                                                  |
-| `src/data/gameplay/repairMissions.ts`                     | Modifié.                                                  |
-| `src/data/handTrackingConfig.ts`                          | Modifié.                                                  |
-| `src/data/player/playerConfig.ts`                         | Modifié.                                                  |
-| `src/data/world/mapLodConfig.ts`                          | Modifié.                                                  |
-| `src/hooks/handTracking/useBrowserHandTracking.ts`        | Modifié.                                                  |
-| `src/hooks/handTracking/useRemoteHandTracking.ts`         | Modifié.                                                  |
-| `src/lib/handTracking/browserHandTracking.ts`             | Modifié.                                                  |
-| `src/lib/handTracking/handTrackingSession.ts`             | Modifié.                                                  |
-| `src/pages/page.tsx`                                      | Modifié.                                                  |
-| `src/providers/gameplay/HandTrackingProvider.tsx`         | Modifié.                                                  |
-| `src/utils/debug/Debug.ts`                                | Modifié.                                                  |
-| `src/utils/three/optimizeGLTFScene.ts`                    | Modifié.                                                  |
-| `src/world/World.tsx`                                     | Modifié.                                                  |
-| `src/world/debug/TestMap.tsx`                             | Modifié.                                                  |
-| `src/world/player/Player.tsx`                             | Modifié.                                                  |
-| `src/world/player/PlayerCamera.tsx`                       | Modifié.                                                  |
-| `src/world/player/PlayerController.tsx`                   | Modifié.                                                  |
-| `src/components/ui/RuntimeLoadingIndicator.tsx`           | Nouveau fichier non suivi.                                |
-| `src/hooks/handTracking/useHandTrackingRuntimeWarmup.ts`  | Nouveau fichier non suivi.                                |
-| `src/world/player/playerRuntimeSnapshot.ts`               | Nouveau fichier non suivi.                                |
-
-Attention : les fichiers supprimés/nouveaux du talkie semblent être un sujet
-séparé du context lost. Il faut les garder séparés dans les commits.
-
-## Fichiers directement impactés par le bug
-
-### Canvas et WebGL
-
-- `src/pages/page.tsx`
-- `src/world/World.tsx`
-- `src/utils/three/optimizeGLTFScene.ts`
-
-Ces fichiers influencent directement la charge GPU, la configuration du canvas,
-les ressources GLTF et le comportement au context lost/restored.
-
-### Hand tracking
-
-- `src/providers/gameplay/HandTrackingProvider.tsx`
-- `src/hooks/handTracking/useBrowserHandTracking.ts`
-- `src/hooks/handTracking/useRemoteHandTracking.ts`
-- `src/hooks/handTracking/useBothFistsHold.ts`
-- `src/hooks/handTracking/useHandTrackingRuntimeWarmup.ts`
-- `src/lib/handTracking/browserHandTracking.ts`
-- `src/lib/handTracking/handTrackingSession.ts`
-- `src/data/handTrackingConfig.ts`
-- `src/components/three/handTracking/HandTrackingGlove.tsx`
-- `backend/hand_tracker.py`
-
-Ces fichiers contrôlent le déclenchement, la source, la caméra, MediaPipe, le
-backend et le rendu visuel des mains.
-
-### Interactions et repair game
-
-- `src/components/three/interaction/GrabbableObject.tsx`
-- `src/components/three/interaction/InteractableObject.tsx`
-- `src/managers/InteractionManager.ts`
-- `src/types/interaction/interaction.ts`
-- `src/components/three/gameplay/RepairGame.tsx`
-- `src/hooks/gameplay/useRepairMissionStep.ts`
-- `src/hooks/gameplay/useRepairMovementLocked.ts`
-
-Ces fichiers sont impactés parce que l'entrée dans une zone ou une étape repair
-peut déclencher le hand tracking.
-
-### Player et restauration après crash
-
-- `src/world/player/Player.tsx`
-- `src/world/player/PlayerCamera.tsx`
-- `src/world/player/PlayerController.tsx`
-- `src/world/player/playerRuntimeSnapshot.ts`
-- `src/data/player/playerConfig.ts`
-
-Ces fichiers influencent le spawn, la caméra, le pointer lock, et la possibilité
-de récupérer la dernière position après un context lost.
-
-### Scène Physique / debug
-
-- `src/world/debug/TestMap.tsx`
-- `src/data/debug/testSceneConfig.ts`
-- `src/components/debug/DebugPlayerModel.tsx`
-- `src/hooks/debug/useSceneMode.ts`
-- `src/utils/debug/Debug.ts`
-
-Ces fichiers ne sont pas forcément la cause racine, mais ils créent une scène de
-stress utile pour reproduire le bug.
-
-## Ce que le stash essayait de corriger
-
-Le stash essaye de réduire le risque de context lost avec plusieurs leviers :
-
-1. passer MediaPipe browser/backend en CPU ;
-2. libérer MediaPipe quand le runtime s'arrête ou quand WebGL saute ;
-3. éviter de monter les gants sans mains détectées ;
-4. retarder l'activation du hand tracking pour éviter les start/stop violents ;
-5. demander la caméra plus tôt et réutiliser le stream ;
-6. réduire la charge GPU du canvas avec DPR fixe et antialias off ;
-7. limiter les re-uploads de textures GLTF ;
-8. distinguer les interactions qui demandent vraiment le hand tracking ;
-9. restaurer WebGL avec une limite pour éviter les boucles infinies ;
-10. conserver la position du joueur après restauration.
-
-## Ce qui reste à prouver
-
-Il faut encore isoler le déclencheur exact :
-
-- crash avec hand tracking désactivé complètement ;
-- crash avec source browser JS seulement ;
-- crash avec source backend seulement ;
-- crash avec gants 3D désactivés ;
-- crash avec MediaPipe CPU ;
-- crash avec `AnimatedModel` de TestMap désactivé ;
-- crash avec GPS preview/waypoints désactivés ;
-- crash avec shadows/antialias/DPR réduits ;
-- crash en scène game réelle, pas seulement scène Physique.
-
-## Plan d'investigation recommandé
-
-1. Stabiliser le worktree et ne pas mélanger assets talkie, LOD, docs backend et
-   context lost dans le même commit.
-2. Garder le stash tant que le fix final n'est pas validé.
-3. Créer un commit ou patch isolé pour les logs context lost seulement.
-4. Ajouter un switch debug qui permet de couper séparément :
-   - hand tracking runtime ;
-   - gants 3D ;
-   - MediaPipe browser ;
-   - backend ;
-   - GPS preview ;
-   - AnimatedModel de TestMap.
-5. Reproduire le bug avec une matrice claire.
-6. Garder les changements qui diminuent réellement les context lost.
-7. Supprimer les logs temporaires une fois le diagnostic terminé.
-
-## Recommandation Git
-
-Ne pas supprimer le stash maintenant.
-
-Il contient du travail réel sur le context lost. Même s'il n'est pas parfait, il
-sert de trace d'investigation et contient des morceaux utiles.
-
-Avant de le supprimer, sauvegarder le patch :
-
-```bash
-git stash show -p stash@{0} > context-lost-stash.patch
-```
-
-Ensuite seulement, si tout a été repris dans des commits propres :
-
-```bash
-git stash drop stash@{0}
-```
-
-## Commits logiques proposés
-
-Séparer en plusieurs commits pour éviter un gros commit illisible :
-
-1. `docs: document webgl context lost investigation`
-2. `fix: reduce handtracking gpu pressure`
-3. `fix: delay handtracking activation`
-4. `fix: preserve player state after webgl restore`
-5. `fix: stabilize physics debug scene`
-6. `docs: clarify backend handtracking setup`

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],
-          "target": [0, 2, 0]
+          "position": [-24, 5, 65],
+          "target": [-24, 2, 42]
         },
         {
-          "time": 4,
-          "position": [12, 4, -6],
-          "target": [10, 1.4, -8]
+          "time": 10,
+          "position": [-24, 90, 200],
+          "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/roadNetwork.json

@@ -382,7 +382,7 @@
     "x": -18.16,
     "y": 6.37,
     "z": 16.59,
-    "connections": [54, 56, 59, 156]
+    "connections": [54, 56, 59, 174]
   },
   {
     "id": 56,
@@ -431,14 +431,14 @@
     "x": 14.42,
     "y": 6.42,
     "z": 18.95,
-    "connections": [61, 63, 64, 108]
+    "connections": [61, 64, 108, 173]
   },
   {
     "id": 63,
     "x": 2.44,
     "y": 7.13,
     "z": 3.31,
-    "connections": [62]
+    "connections": [172]
   },
   {
     "id": 64,
@@ -634,7 +634,7 @@
     "x": 31.21,
     "y": 5.49,
     "z": -15.42,
-    "connections": [71, 92, 102, 103]
+    "connections": [71, 92, 103, 166]
   },
   {
     "id": 92,
@@ -706,13 +706,6 @@
     "z": 6.58,
     "connections": []
   },
-  {
-    "id": 102,
-    "x": 43.42,
-    "y": 4.52,
-    "z": -8.25,
-    "connections": [91]
-  },
   {
     "id": 103,
     "x": 32.83,
@@ -753,14 +746,14 @@
     "x": 19.31,
     "y": 5.65,
     "z": 26.84,
-    "connections": [62, 109, 131]
+    "connections": [62, 109, 131, 167]
   },
   {
     "id": 109,
     "x": 22.49,
     "y": 5.23,
     "z": 29.86,
-    "connections": [108, 110, 127]
+    "connections": [108, 110]
   },
   {
     "id": 110,
@@ -881,34 +874,6 @@
     "z": 79.54,
     "connections": [125]
   },
-  {
-    "id": 127,
-    "x": 31.39,
-    "y": 4.75,
-    "z": 27.95,
-    "connections": [109, 128]
-  },
-  {
-    "id": 128,
-    "x": 41.12,
-    "y": 4.07,
-    "z": 25.58,
-    "connections": [127, 129]
-  },
-  {
-    "id": 129,
-    "x": 46.63,
-    "y": 3.54,
-    "z": 26.12,
-    "connections": [128, 130]
-  },
-  {
-    "id": 130,
-    "x": 53.28,
-    "y": 2.65,
-    "z": 32.44,
-    "connections": [129]
-  },
   {
     "id": 131,
     "x": 19.13,
@@ -1070,26 +1035,19 @@
     "z": 117.06,
     "connections": []
   },
-  {
-    "id": 156,
-    "x": -45.93,
-    "y": 2.77,
-    "z": 40.28,
-    "connections": [55]
-  },
   {
     "id": 157,
     "x": -7.58,
     "y": 5.97,
     "z": -28.56,
-    "connections": [4, 158]
+    "connections": [4, 179]
   },
   {
     "id": 158,
     "x": -17.19,
     "y": 2.57,
     "z": -60.82,
-    "connections": [157, 159, 162]
+    "connections": [159, 162, 180]
   },
   {
     "id": 159,
@@ -1132,5 +1090,117 @@
     "y": 2.28,
     "z": -44.28,
     "connections": [163]
+  },
+  {
+    "id": 165,
+    "x": 106.01,
+    "y": 0.1,
+    "z": 1.02,
+    "connections": []
+  },
+  {
+    "id": 166,
+    "x": 43.06,
+    "y": 4.57,
+    "z": -7.87,
+    "connections": [91]
+  },
+  {
+    "id": 167,
+    "x": 25.12,
+    "y": 5.18,
+    "z": 28.43,
+    "connections": [108, 168]
+  },
+  {
+    "id": 168,
+    "x": 33.68,
+    "y": 4.56,
+    "z": 28.11,
+    "connections": [167, 169]
+  },
+  {
+    "id": 169,
+    "x": 40.79,
+    "y": 4.09,
+    "z": 25.69,
+    "connections": [168, 170]
+  },
+  {
+    "id": 170,
+    "x": 47.9,
+    "y": 3.41,
+    "z": 26.49,
+    "connections": [169, 171]
+  },
+  {
+    "id": 171,
+    "x": 52.58,
+    "y": 2.73,
+    "z": 31.99,
+    "connections": [170]
+  },
+  {
+    "id": 172,
+    "x": 7.42,
+    "y": 7.03,
+    "z": 8.82,
+    "connections": [63, 173]
+  },
+  {
+    "id": 173,
+    "x": 11,
+    "y": 6.74,
+    "z": 15.13,
+    "connections": [172, 62]
+  },
+  {
+    "id": 174,
+    "x": -24.16,
+    "y": 5.72,
+    "z": 21.45,
+    "connections": [55, 175]
+  },
+  {
+    "id": 175,
+    "x": -31.1,
+    "y": 4.88,
+    "z": 26.48,
+    "connections": [174, 176]
+  },
+  {
+    "id": 176,
+    "x": -35.84,
+    "y": 4.17,
+    "z": 31.18,
+    "connections": [175, 177]
+  },
+  {
+    "id": 177,
+    "x": -41.34,
+    "y": 3.37,
+    "z": 36.51,
+    "connections": [176, 178]
+  },
+  {
+    "id": 178,
+    "x": -47.11,
+    "y": 2.66,
+    "z": 40.6,
+    "connections": [177]
+  },
+  {
+    "id": 179,
+    "x": -9.75,
+    "y": 5.03,
+    "z": -38.14,
+    "connections": [157, 180]
+  },
+  {
+    "id": 180,
+    "x": -14.38,
+    "y": 3.62,
+    "z": -50.73,
+    "connections": [179, 158]
   }
 ]

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",
@@ -163,7 +169,7 @@
       "id": "narrateur_histoireelectricienne",
       "voice": "narrateur",
       "audio": "/sounds/dialogue/narrateur_histoireelectricienne.mp3",
-      "subtitleCueIndex": 23
+      "subtitleCueIndices": [23, 25, 26, 27, 28]
     },
     {
       "id": "narrateur_demande_aide",
@@ -188,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
-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.
+00:00:00,000 --> 00:00:07,500
+The electrician helped you at the Power Plant? Aaaaah, that's what I love here: everyone helps each other, nobody judges anyone, it's like a real little family.
+
+24
+00:00:00,000 --> 00:00:05,500
+Perfect! The cooler gave out, you can replace it with one of the components from your pack.
+
+25
+00:00:07,500 --> 00:00:19,100
+You should know the electrician has quite a special story. She was born in the north of the continent, in the city of Kalska. She grew up happily with her mother Edith, her father Jordan, and her two little brothers, Malo and Justin.
+
+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
-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.
+00:00:00,000 --> 00:00:07,500
+L'électricienne t'a aidé à la Centrale ? Aaaaah c'est ça que j'adore ici, tout le monde s'entraide, personne se juge, une vraie petite famille.
+
+24
+00:00:00,000 --> 00:00:05,500
+Parfait ! C'est le refroidisseur qui a lâché, tu peux le remplacer avec un des composants de ton pack.
+
+25
+00:00:07,500 --> 00:00:19,100
+Sache que l'électricienne a une histoire assez particulière. Elle est née au nord du continent, dans la ville de Kalska. Elle a 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

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, useMemo, useCallback } from "react";
 import * as THREE from "three";
 import { useFrame, useThree } from "@react-three/fiber";
 import { EbikeGPSMap } from "@/components/ebike/EbikeGPSMap";
-import { EbikeSpeedometer } from "@/components/ebike/EbikeSpeedometer";
+import { EbikeSpeedmeter } from "@/components/ebike/EbikeSpeedmeter";
 import { InteractableObject } from "@/components/three/interaction/InteractableObject";
 import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
 import { useClonedObject } from "@/hooks/three/useClonedObject";
@@ -25,11 +25,27 @@ import "@/types/ebike/ebikeWindow";
 
 const EBIKE_MODEL_PATH = "/models/ebike/model.gltf";
 
+// Reusable vectors — allocated once to avoid per-frame GC pressure
+const _phareWorldPos = new THREE.Vector3();
+const _bikeForward = new THREE.Vector3();
+const _aimDir = new THREE.Vector3();
+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",
@@ -39,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,
@@ -47,16 +63,16 @@ 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);
   const setMissionStep = useGameStore((state) => state.setMissionStep);
   const camera = useThree((state) => state.camera);
+  const threeScene = useThree((state) => state.scene);
   const updateEbikeSounds = useEbikeSounds();
   const repairGameOwnsEbikeModel =
     mainState === "ebike" &&
-    ebikeStep !== "locked" &&
     ebikeStep !== "waiting" &&
     ebikeStep !== "inspected";
 
@@ -96,19 +112,61 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
   ]);
   const restingRotationRef = useRef<number>(EBIKE_WORLD_ROTATION_Y);
   const forkRef = useRef<THREE.Object3D | null>(null);
+  const phareRef = useRef<THREE.Object3D | null>(null);
+  const headlightRef = useRef<THREE.SpotLight | null>(null);
+  // SpotLight target — must live in the scene to define the cone direction.
+  const headlightTarget = useMemo(() => new THREE.Object3D(), []);
+  // Original quaternion of the Fourche node — rotation is applied on top of this.
+  const forkInitialQuatRef = useRef(new THREE.Quaternion());
+  // Smoothed steer angle for the fork (avoids direct Euler manipulation).
+  const forkAngleRef = useRef(0);
+  // Ref copy of movementMode — useFrame closures can capture stale React state.
+  const movementModeRef = useRef(movementMode);
+  // Becomes true the first time the player mounts. After that, dismounting
+  // must NOT reset position back to the original spawn point.
+  const hasRiddenRef = useRef(false);
 
   // 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.
+  useEffect(() => {
+    movementModeRef.current = movementMode;
+  }, [movementMode]);
+
+  // SpotLight target must be in the scene to define the cone direction.
+  useEffect(() => {
+    threeScene.add(headlightTarget);
+    return () => {
+      threeScene.remove(headlightTarget);
+    };
+  }, [threeScene, headlightTarget]);
+
+  // Link the target to the SpotLight once it mounts.
+  useEffect(() => {
+    if (headlightRef.current) {
+      headlightRef.current.target = headlightTarget;
+    }
+  }, [headlightTarget]);
 
   useEffect(() => {
-    if (movementMode === "ebike") return;
+    if (movementMode === "ebike") {
+      // Player just mounted — mark as ridden so we never reset position again.
+      hasRiddenRef.current = true;
+      return;
+    }
 
+    if (hasRiddenRef.current) {
+      // Player dismounted: keep the position the bike was left at.
+      // Just make sure the window vars are up to date for the next mount.
+      window.ebikeParkedPosition = restingPositionRef.current;
+      window.ebikeParkedRotation = restingRotationRef.current;
+      return;
+    }
+
+    // Bike has never been ridden yet — safe to (re)place it at the spawn point.
+    // This also fires when parkedPosition recalculates (e.g. terrain loads late).
     restingPositionRef.current = parkedPosition;
     restingRotationRef.current = EBIKE_WORLD_ROTATION_Y;
     lastGpsUpdatePos.current.set(...parkedPosition);
@@ -123,11 +181,26 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
   }, [movementMode, parkedPosition]);
 
   useEffect(() => {
-    if (model) {
-      const fork = model.getObjectByName("fourche");
-      if (fork) {
-        forkRef.current = fork;
-      }
+    if (!model) return;
+
+    let forkNode: THREE.Object3D | null = null;
+    model.traverse((child) => {
+      if (child.name.toLowerCase() === "fourche") forkNode = child;
+      if (child.name === "Phare") phareRef.current = child;
+    });
+
+    if (forkNode) {
+      forkRef.current = forkNode;
+      // Snapshot the rest-pose quaternion — steering is applied on top of this.
+      forkInitialQuatRef.current.copy((forkNode as THREE.Object3D).quaternion);
+      forkAngleRef.current = 0;
+      console.log("[Ebike] Fork found:", (forkNode as THREE.Object3D).name);
+    } else {
+      const names: string[] = [];
+      model.traverse((c) => {
+        if (c.name) names.push(c.name);
+      });
+      console.warn("[Ebike] Fork not found. All nodes:", names);
     }
   }, [model]);
 
@@ -154,11 +227,48 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
   }, []);
 
   useFrame((_, delta) => {
+    // ── SpotLight headlight — tune the constants below ────────────────────────
+    // ── SpotLight headlight — tune these four constants ───────────────────────
+    const LIGHT_OFFSET_X = -0.7; // position : left(-) / right(+)
+    const LIGHT_OFFSET_Y = 1.5; // position : down(-) / up(+)
+    const LIGHT_OFFSET_Z = 0; // position : backward(-) / forward(+)
+    const LIGHT_AIM_DEG = 90; // aim rotation around Y : 0=forward, -90=left, +90=right
+    const LIGHT_TARGET_DIST = 20; // metres devant la position de la lumière
+    // ─────────────────────────────────────────────────────────────────────────
+    if (headlightRef.current && phareRef.current && groupRef.current) {
+      phareRef.current.getWorldPosition(_phareWorldPos);
+      groupRef.current.getWorldDirection(_bikeForward);
+
+      // Position offset in bike-local space (no GC — reusing module-level vectors)
+      const right = _bikeForward.clone().cross(_up).normalize();
+      _phareWorldPos
+        .addScaledVector(right, LIGHT_OFFSET_X)
+        .addScaledVector(_up, LIGHT_OFFSET_Y)
+        .addScaledVector(_bikeForward, LIGHT_OFFSET_Z);
+
+      headlightRef.current.position.copy(_phareWorldPos);
+
+      // Aim direction: rotate forward around Y by LIGHT_AIM_DEG
+      _aimDir
+        .copy(_bikeForward)
+        .applyAxisAngle(_up, THREE.MathUtils.degToRad(LIGHT_AIM_DEG));
+
+      headlightTarget.position
+        .copy(_phareWorldPos)
+        .addScaledVector(_aimDir, LIGHT_TARGET_DIST);
+      headlightTarget.updateMatrixWorld();
+    }
+    // ──────────────────────────────────────────────────────────────────────────
+
     if (groupRef.current) {
-      if (movementMode === "ebike") {
+      // Use the ref — not the React state — to avoid stale closure bugs in
+      // R3F's frame loop (the state value may not update until the next render).
+      if (movementModeRef.current === "ebike") {
+        // Sound plays whenever the bike is actually moving (speedFactor > 5 %),
+        // not only while the input key is held.
         updateEbikeSounds({
           mounted: true,
-          driving: window.ebikeDriveInputActive === true,
+          driving: (window.ebikeSpeedFactor ?? 0) > 0.05,
           breakdown: window.ebikeBreakdownActive === true,
         });
 
@@ -169,16 +279,31 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
         ];
         restingRotationRef.current = groupRef.current.rotation.y;
 
-        // Smoothly rotate the front fork ("fourche") up to 15 degrees in its own Z axis
+        // ── Fork steering via quaternion ──────────────────────────────────────
+        // We rotate around the fork's LOCAL Y axis (steering tube) by composing
+        // a fresh quaternion on top of the rest-pose snapshot taken at load time.
+        // This is axis-agnostic: correct regardless of how Blender exported the node.
+        // Tune FORK_ANGLE (radians) or negate it if the visual direction is wrong.
+        const FORK_ANGLE = 0.12; // 10°
         const steerFactor = window.ebikeSteerFactor ?? 0;
+
         if (forkRef.current) {
-          // 15 degrees is 0.26 radians
-          const targetForkRotation = steerFactor * 0.26;
-          forkRef.current.rotation.z = THREE.MathUtils.lerp(
-            forkRef.current.rotation.z,
-            targetForkRotation,
+          // Smooth the angle separately so we can apply it cleanly each frame.
+          forkAngleRef.current = THREE.MathUtils.lerp(
+            forkAngleRef.current,
+            steerFactor * FORK_ANGLE,
             12 * delta,
           );
+          // Build steer quat around LOCAL Y of the fork node.
+          const steerQuat = new THREE.Quaternion().setFromAxisAngle(
+            new THREE.Vector3(0, 1, 0),
+            forkAngleRef.current,
+          );
+          // Apply on top of rest-pose: Q_final = Q_rest × Q_steer
+          forkRef.current.quaternion.multiplyQuaternions(
+            forkInitialQuatRef.current,
+            steerQuat,
+          );
         }
 
         // Throttled GPS start position update to prevent performance loss
@@ -189,17 +314,16 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
         }
 
         // Sync debug visualization state (throttled to avoid excessive re-renders)
-        if (showCameraPoints) {
-          setDebugRestingPosition([...restingPositionRef.current]);
-        }
+        // Debug visualization positions are derived elsewhere when needed.
       } else {
         updateEbikeSounds({ mounted: false, driving: false, breakdown: false });
         groupRef.current.position.set(...restingPositionRef.current);
         groupRef.current.rotation.set(0, restingRotationRef.current, 0);
 
-        // Reset fork rotation when parked
+        // Reset fork to rest-pose when parked
         if (forkRef.current) {
-          forkRef.current.rotation.z = 0;
+          forkRef.current.quaternion.copy(forkInitialQuatRef.current);
+          forkAngleRef.current = 0;
         }
       }
       window.ebikeParkedPosition = restingPositionRef.current;
@@ -207,40 +331,45 @@ 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;
 
     if (movementMode === "walk") {
-      if (
-        mainState === "ebike" &&
-        (ebikeStep === "locked" || ebikeStep === "waiting")
-      ) {
+      if (mainState === "ebike" && ebikeStep === "waiting") {
         setMissionStep("ebike", "inspected");
         return;
       }
 
-      if (mainState === "ebike" && ebikeStep === "inspected") {
-        setMissionStep("ebike", "fragmented");
-        return;
-      }
+      // Note: inspected -> fragmented is no longer driven by press-E.
+      // It auto-advances after the focus bubble's grow tween (see
+      // RepairGame, gated on BUBBLE_GROW_DURATION_SECONDS), so the
+      // sphere visibly engulfs the bike before the explode animation.
 
       const cameraOffset = new THREE.Vector3(
         ...EBIKE_CAMERA_TRANSFORM.position,
@@ -263,9 +392,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) {
@@ -291,9 +426,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]);
 
@@ -329,6 +470,10 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
           scale={EBIKE_WORLD_SCALE}
         >
           <primitive object={model} />
+          {/* 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}
@@ -337,16 +482,35 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
               onPress={handleInteract}
             >
               <mesh>
-              <boxGeometry args={[8, 9, 2]} />
-              <meshBasicMaterial colorWrite={false} depthWrite={false} />
+                <sphereGeometry args={[8, 15, 12]} />
+                <meshBasicMaterial
+                  colorWrite={false}
+                  color={"red"}
+                  depthWrite={false}
+                />
               </mesh>
             </InteractableObject>
+          ) : null}
 
-          {/* Dynamic 3D GPS Dashboard Screen */}
-          <group position={[0, 7, 0]} rotation={[0, 90, 0]}>
+          {/* 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}
+              gaugeWidth={2.5}
+              gaugeHeight={2.1}
+              gaugeOffsetX={0}
+              gaugeOffsetY={-0.19}
+            />
             <EbikeGPSMap
-              width={0.8}
-              height={0.8}
+              width={1.3}
+              height={1}
               startPos={gpsStartPos}
               destPos={destPos}
               mapImageUrl="/assets/world/gps/map_background.png"
@@ -359,15 +523,26 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
               zoom={4}
             />
           </group>
-          <group position={[0, 6.35, 0]} rotation={[0, 90, 0]}>
-            <EbikeSpeedometer />
-          </group>
         </group>
       ) : null}
 
+      {/* SpotLight headlight — cone aimed forward, position & target via useFrame */}
+      {!repairGameOwnsEbikeModel && (
+        <spotLight
+          ref={headlightRef}
+          intensity={100}
+          color="#ffca60"
+          angle={Math.PI / 5} // 22.5° demi-angle — cone étroit comme une torche
+          penumbra={0.5} // bord doux (0 = dur, 1 = très doux)
+          distance={50}
+          decay={2.5}
+          castShadow={false}
+        />
+      )}
+
       {showCameraPoints && !repairGameOwnsEbikeModel && (
         <>
-          <mesh position={camPointPos}>
+          {/* <mesh position={camPointPos}>
             <sphereGeometry args={[0.3, 16, 16]} />
             <meshStandardMaterial
               color="yellow"
@@ -382,7 +557,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
               emissive="cyan"
               emissiveIntensity={0.5}
             />
-          </mesh>
+          </mesh> */}
         </>
       )}
     </>

src/components/ebike/EbikeGPSMap.tsx

@@ -12,6 +12,28 @@ import {
 } from "@/pathfinding/WaypointAStar";
 import type { Waypoint } from "@/pathfinding/types";
 import type { Vector3Tuple } from "@/types/three/three";
+
+const VERT_SHADER = /* glsl */ `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+
+// Circular Fresnel mask: fully visible inside innerRadius, fades out to outerRadius
+const FRAG_SHADER = /* glsl */ `
+  uniform sampler2D map;
+  uniform float innerRadius;
+  uniform float outerRadius;
+  varying vec2 vUv;
+  void main() {
+    vec4 color = texture2D(map, vUv);
+    float dist = length(vUv - vec2(0.5));
+    float mask = 1.0 - smoothstep(innerRadius, outerRadius, dist);
+    gl_FragColor = vec4(color.rgb, color.a * mask);
+  }
+`;
 function computeImageSource(
   img: HTMLImageElement | HTMLCanvasElement,
   baseBounds: { minX: number; maxX: number; minZ: number; maxZ: number },
@@ -126,19 +148,64 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- Canvas should only be created once
   }, []);
 
-  // Resize the canvas whenever canvasSize changes
-  // Note: Modifying canvas dimensions is intentional and necessary for rendering
-  useEffect(() => {
-    // Use Object.assign to resize canvas - this is a necessary mutation for canvas rendering
-    Object.assign(offscreenCanvas, { width: canvasSize, height: canvasSize });
-    if (textureRef.current) {
-      textureRef.current.needsUpdate = true;
-    }
-  }, [canvasSize, offscreenCanvas]);
-
-  const textureRef = useRef<THREE.CanvasTexture | null>(null);
   const animTimeRef = useRef<number>(0);
 
+  // Imperative CanvasTexture — must be declared before the resize effect below
+  const texture = useMemo(() => {
+    const tex = new THREE.CanvasTexture(offscreenCanvas);
+    tex.format = THREE.RGBAFormat;
+    tex.minFilter = THREE.LinearFilter;
+    tex.magFilter = THREE.LinearFilter;
+    return tex;
+  }, [offscreenCanvas]);
+
+  // ShaderMaterial with circular Fresnel mask (created once)
+  const shaderMat = useMemo(
+    () =>
+      new THREE.ShaderMaterial({
+        uniforms: {
+          map: { value: null },
+          innerRadius: { value: 0.45 },
+          outerRadius: { value: 0.5 },
+        },
+        vertexShader: VERT_SHADER,
+        fragmentShader: FRAG_SHADER,
+        transparent: true,
+        depthTest: false,
+        depthWrite: false,
+        side: THREE.DoubleSide,
+        toneMapped: false,
+      }),
+    [],
+  );
+
+  // Sync texture into uniform when it changes (canvas resize)
+  useEffect(() => {
+    const mapUniform = shaderMat.uniforms.map;
+    if (!mapUniform) return;
+
+    // External Three.js material uniform sync — intentional side effect.
+    // eslint-disable-next-line react-hooks/immutability
+    mapUniform.value = texture;
+  }, [shaderMat, texture]);
+
+  // Cleanup on unmount
+  useEffect(
+    () => () => {
+      shaderMat.dispose();
+      texture.dispose();
+    },
+    [shaderMat, texture],
+  );
+
+  // 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]);
+
   // Load waypoints (localStorage with /roadNetwork.json fallback)
   useEffect(() => {
     let cancelled = false;
@@ -492,42 +559,20 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
   useEffect(() => {
     let animId: number;
     const tick = () => {
-      animTimeRef.current += 0.004; // Slow, premium sweep speed
+      animTimeRef.current += 0.004;
       if (animTimeRef.current > 1) animTimeRef.current = 0;
-
       draw();
-
-      // Update texture after draw
-      if (textureRef.current) {
-        textureRef.current.needsUpdate = true;
-      }
-
+      texture.needsUpdate = true;
       animId = requestAnimationFrame(tick);
     };
     animId = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(animId);
-  }, [draw]);
+  }, [draw, texture]);
 
   return (
     <mesh position={position} renderOrder={renderOrder}>
       <planeGeometry args={[width, height]} />
-      <meshBasicMaterial
-        toneMapped={false}
-        transparent={true}
-        opacity={1}
-        depthTest={false}
-        depthWrite={false}
-        side={THREE.DoubleSide}
-      >
-        <canvasTexture
-          ref={textureRef}
-          attach="map"
-          image={offscreenCanvas}
-          format={THREE.RGBAFormat}
-          minFilter={THREE.LinearFilter}
-          magFilter={THREE.LinearFilter}
-        />
-      </meshBasicMaterial>
+      <primitive object={shaderMat} attach="material" />
     </mesh>
   );
 };

src/components/ebike/EbikeSpeedmeter.tsx

@@ -0,0 +1,237 @@
+import { useEffect, useRef, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useTexture } from "@react-three/drei";
+import * as THREE from "three";
+import type { Vector3Tuple } from "@/types/three/three";
+import "@/types/ebike/ebikeWindow";
+
+const SPEEDOMETER_DIAL_TEXTURE = "/assets/world/gps/cadran.png";
+const SPEEDOMETER_NEEDLE_TEXTURE = "/assets/world/gps/fleche.png";
+
+export interface EbikeSpeedmeterProps {
+  width?: number;
+  height?: number;
+  /** Local position offset within the parent group. Default: [0, 0, 0] */
+  position?: Vector3Tuple;
+  /**
+   * Needle rotation.z when speedFactor = 0.
+   * Default: Math.PI / 2  (pointing left — 9 o'clock)
+   */
+  minAngle?: number;
+  /**
+   * Needle rotation.z when speedFactor = 1.
+   * Default: -Math.PI / 2 (pointing right — 3 o'clock)
+   */
+  maxAngle?: number;
+  renderOrder?: number;
+  /**
+   * Inner radius of the gauge-fill arc, as a fraction of the canvas half-width.
+   * Tune this to align the fill with the cadran.png track.  Default: 0.33
+   */
+  gaugeInnerR?: number;
+  /**
+   * Outer radius of the gauge-fill arc, as a fraction of the canvas half-width.
+   * Tune this to align the fill with the cadran.png track.  Default: 0.445
+   */
+  gaugeOuterR?: number;
+  /**
+   * Width of the gauge-fill plane. Defaults to `width` when omitted.
+   * Lets you resize the fill independently of the cadran/needle.
+   */
+  gaugeWidth?: number;
+  /**
+   * Height of the gauge-fill plane. Defaults to `height` when omitted.
+   * Lets you resize the fill independently of the cadran/needle.
+   */
+  gaugeHeight?: number;
+  /**
+   * Horizontal offset of the arc pivot from the canvas centre.
+   * Expressed as a fraction of the canvas size: -0.1 = shift 10 % to the left,
+   * +0.1 = shift 10 % to the right. Default: 0
+   */
+  gaugeOffsetX?: number;
+  /**
+   * Vertical offset of the arc pivot from its default position.
+   * Expressed as a fraction of the canvas size: -0.1 = shift upward (toward top
+   * of the plane), +0.1 = shift downward. Default: 0
+   */
+  gaugeOffsetY?: number;
+}
+
+// The needle pivot is always at -height*0.38 in local space,
+// which is always 12 % from the bottom of the plane (UV y = 0.12).
+// With Three.js flipY texture convention, canvas y = (1 - 0.12) * size = 0.88 * size.
+const NEEDLE_PIVOT_UV_Y = 0.12; // fraction from bottom
+
+export function EbikeSpeedmeter({
+  width = 0.8,
+  height = 0.8,
+  position = [0, 0, 0],
+  minAngle = Math.PI / 2,
+  maxAngle = -Math.PI / 2,
+  renderOrder = 1000,
+  gaugeInnerR = 0.33,
+  gaugeOuterR = 0.445,
+  gaugeWidth,
+  gaugeHeight,
+  gaugeOffsetX = 0,
+  gaugeOffsetY = 0,
+}: EbikeSpeedmeterProps): React.JSX.Element {
+  // Fall back to the main dimensions when gauge-specific ones aren't provided
+  const fillW = gaugeWidth ?? width;
+  const fillH = gaugeHeight ?? height;
+  const needleGroupRef = useRef<THREE.Group>(null);
+  const speedFactorRef = useRef(0);
+
+  // ── Dial & needle textures ──────────────────────────────────────────────────
+  const [dialTexture, needleTexture] = useTexture([
+    SPEEDOMETER_DIAL_TEXTURE,
+    SPEEDOMETER_NEEDLE_TEXTURE,
+  ]) as [THREE.Texture, THREE.Texture];
+
+  const needleWidth = width * 0.68;
+  const needleHeight = needleWidth / 2;
+
+  useEffect(() => {
+    [dialTexture, needleTexture].forEach((tex) => {
+      tex.colorSpace = THREE.SRGBColorSpace;
+      tex.needsUpdate = true;
+    });
+  }, [dialTexture, needleTexture]);
+
+  // ── Gauge-fill canvas ───────────────────────────────────────────────────────
+  const fillCanvas = useMemo(() => {
+    const c = document.createElement("canvas");
+    c.width = 256;
+    c.height = 256;
+    return c;
+  }, []);
+
+  const fillTexture = useMemo(() => {
+    const tex = new THREE.CanvasTexture(fillCanvas);
+    tex.format = THREE.RGBAFormat;
+    tex.minFilter = THREE.LinearFilter;
+    tex.magFilter = THREE.LinearFilter;
+    return tex;
+  }, [fillCanvas]);
+
+  useEffect(
+    () => () => {
+      fillTexture.dispose();
+    },
+    [fillTexture],
+  );
+
+  // ── 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);
+    speedFactorRef.current = THREE.MathUtils.lerp(
+      speedFactorRef.current,
+      target,
+      Math.min(1, delta * 10),
+    );
+
+    // 2. Needle rotation
+    if (needleGroupRef.current) {
+      needleGroupRef.current.rotation.z = THREE.MathUtils.lerp(
+        minAngle,
+        maxAngle,
+        speedFactorRef.current,
+      );
+    }
+
+    // 3. Draw gauge fill -------------------------------------------------------
+    const ctx = fillCanvas.getContext("2d", { alpha: true });
+    if (!ctx) return;
+
+    const size = fillCanvas.width;
+    ctx.clearRect(0, 0, size, size);
+
+    // 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 outerR = size * gaugeOuterR;
+    const innerR = size * gaugeInnerR;
+
+    // Arc sweeps clockwise from π (left) to current needle angle
+    const arcStart = Math.PI;
+    const arcEnd = Math.PI + speedFactorRef.current * Math.PI;
+
+    if (speedFactorRef.current > 0.005) {
+      // Radial gradient using #3F67DD — slightly transparent at inner edge,
+      // fully solid at outer edge for a depth effect.
+      const radial = ctx.createRadialGradient(cx, cy, innerR, cx, cy, outerR);
+      radial.addColorStop(0, "rgba(191, 234, 255, 0)"); // inner edge
+      radial.addColorStop(0.7, "rgba(118, 152, 255, 0.95)"); // outer edge
+
+      // Annular sector shape (outer arc + inner arc reversed)
+      ctx.beginPath();
+      ctx.arc(cx, cy, outerR, arcStart, arcEnd, false);
+      ctx.arc(cx, cy, innerR, arcEnd, arcStart, true);
+      ctx.closePath();
+
+      ctx.fillStyle = radial;
+      ctx.shadowBlur = 16;
+      ctx.shadowColor = "#3F67DD";
+      ctx.fill();
+      ctx.shadowBlur = 0;
+    }
+
+    fillTexture.needsUpdate = true;
+    /* eslint-enable react-hooks/immutability */
+  });
+
+  return (
+    <group renderOrder={renderOrder} position={position}>
+      {/* Gauge fill — behind the cadran frame (size controlled by gaugeWidth/gaugeHeight) */}
+      <mesh renderOrder={renderOrder - 1} position={[0, 0, -0.001]}>
+        <planeGeometry args={[fillW, fillH]} />
+        <meshBasicMaterial
+          map={fillTexture}
+          transparent
+          depthTest={false}
+          depthWrite={false}
+          toneMapped={false}
+          side={THREE.DoubleSide}
+        />
+      </mesh>
+
+      {/* Dial frame (cadran.png) */}
+      <mesh renderOrder={renderOrder}>
+        <planeGeometry args={[width, height]} />
+        <meshBasicMaterial
+          map={dialTexture}
+          transparent
+          depthTest={false}
+          depthWrite={false}
+          toneMapped={false}
+          side={THREE.DoubleSide}
+        />
+      </mesh>
+
+      {/* Needle — pivot at bottom-centre of the arc */}
+      <group
+        ref={needleGroupRef}
+        position={[0, -height * 0.38, 0.002]}
+        rotation={[0, 0, 0]}
+      >
+        <mesh position={[0, needleHeight / 2, 0]} renderOrder={renderOrder + 1}>
+          <planeGeometry args={[needleWidth, needleHeight]} />
+          <meshBasicMaterial
+            map={needleTexture}
+            transparent
+            depthTest={false}
+            depthWrite={false}
+            toneMapped={false}
+            side={THREE.DoubleSide}
+          />
+        </mesh>
+      </group>
+    </group>
+  );
+}

src/components/game/EbikeIntroSequence.tsx

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

src/components/game/EbikeRepairNarrator.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef } from "react";
+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";
+
+/**
+ * Previously played the ebike repair cues directly. `RepairGame` now
+ * owns the repair-game cue timings that gate gameplay transitions
+ * (`fragmented` waits for `narrateur_galetscan`, `done` waits for
+ * `narrateur_ebikerepare`). This component remains as the central
+ * safety cleanup for legacy/queued ebike narrator audio.
+ *
+ * The `narrateur_refroidisseur_diagnostic` line is triggered by the
+ * scan sequence itself when it lands on the refroidisseur node
+ * (configured via `RepairMissionPartConfig.voiceLineId` on the broken
+ * part). The `narrateur_ebikerepare` line is triggered by RepairGame
+ * directly at the `done` step so its `ended` event can drive the
+ * mission completion handoff.
+ *
+ * Each cue is one-shot per mission run; the played-set resets when the
+ * mission state rolls back to `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>> = {};
+
+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 === "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

@@ -4,6 +4,8 @@ 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 {
@@ -14,22 +16,46 @@ import {
   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.gltf";
+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 setMissionStep = useGameStore((state) => state.setMissionStep);
   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;
+    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);
@@ -39,7 +65,9 @@ export function PylonDownedPylon(): React.JSX.Element | null {
     if (!group) return;
 
     if (!isStraightening || straightenStartRef.current === null) {
-      group.rotation.set(...(showUpright ? PYLON_UPRIGHT_ROTATION : PYLON_DOWNED_ROTATION));
+      group.rotation.set(
+        ...(isRaised ? PYLON_UPRIGHT_ROTATION : PYLON_DOWNED_ROTATION),
+      );
       return;
     }
 
@@ -55,22 +83,12 @@ export function PylonDownedPylon(): React.JSX.Element | null {
     );
   });
 
-  const showUpright =
-    mainState !== "pylon" ||
-    step === "waiting" ||
-    step === "inspected" ||
-    step === "fragmented" ||
-    step === "scanning" ||
-    step === "repairing" ||
-    step === "reassembling" ||
-    step === "done" ||
-    step === "narrator-outro";
-
   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) {
@@ -79,17 +97,18 @@ export function PylonDownedPylon(): React.JSX.Element | null {
     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);
-      setMissionStep("pylon", "inspected");
+      pylonStraighteningSignal.completed = true;
     }, PYLON_STRAIGHTEN_ANIMATION_DURATION_MS);
   };
 
+  if (!shouldRender) return null;
+
   return (
-    <group
-      ref={groupRef}
-      position={PYLON_WORLD_POSITION}
-      rotation={PYLON_DOWNED_ROTATION}
-    >
+    <group ref={groupRef} position={position} rotation={PYLON_DOWNED_ROTATION}>
       <primitive object={scene.clone(true)} />
       {isPylonInteractive ? (
         <InteractableObject
@@ -97,7 +116,7 @@ export function PylonDownedPylon(): React.JSX.Element | null {
           label={
             step === "arrived" ? "Inspecter le pylône" : "Redresser le pylône"
           }
-          position={PYLON_WORLD_POSITION}
+          position={position}
           radius={PYLON_NARRATIVE_INTERACT_RADIUS}
           onPress={() => {
             if (step === "arrived") {
@@ -117,7 +136,10 @@ export function PylonDownedPylon(): React.JSX.Element | null {
                       void (async () => {
                         const m = await loadDialogueManifest();
                         if (!m) return;
-                        await playDialogueById(m, PYLON_NARRATIVE_DIALOGUES.demandeAide);
+                        await playDialogueById(
+                          m,
+                          PYLON_NARRATIVE_DIALOGUES.demandeAide,
+                        );
                       })();
                     },
                     { once: true },
@@ -127,7 +149,10 @@ export function PylonDownedPylon(): React.JSX.Element | null {
                 void (async () => {
                   const manifest = await loadDialogueManifest();
                   if (!manifest) return;
-                  await playDialogueById(manifest, PYLON_NARRATIVE_DIALOGUES.demandeAide);
+                  await playDialogueById(
+                    manifest,
+                    PYLON_NARRATIVE_DIALOGUES.demandeAide,
+                  );
                 })();
               }
             } else if (step === "npc-return" && !isStraightening) {

src/components/gameplay/pylon/PylonFarmerNPC.tsx

@@ -1,83 +1,266 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import * as THREE from "three";
-import { useFrame } from "@react-three/fiber";
+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_ROTATION,
   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);
-  const setMissionStep = useGameStore((state) => state.setMissionStep);
-  const groupRef = useRef<THREE.Group>(null);
-  const currentPosRef = useRef(
-    new THREE.Vector3(...PYLON_FARMER_NPC_POSITION),
-  );
 
-  // Reset position when entering arrived, set target when entering npc-return
+  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]);
+  }, [step, playAnim]);
 
+  // ─── Per-frame: movement + rotation + signal detection ───────────────────
   useFrame((_, delta) => {
     const group = groupRef.current;
     if (!group) return;
 
-    if (step === "npc-return") {
-      const targetPos = pylonStraighteningSignal.started
+    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);
-      currentPosRef.current.lerp(_target, Math.min(PYLON_FARMER_NPC_WALK_SPEED * delta, 1));
+
+      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);
-      group.rotation.set(...PYLON_FARMER_NPC_AFTER_ROTATION);
-      group.scale.setScalar(PYLON_FARMER_NPC_AFTER_SCALE);
-    } else if (step === "inspected") {
+    } else if (step === "inspected" || step === "done") {
       group.position.set(...PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight);
-      group.rotation.set(...PYLON_FARMER_NPC_AFTER_ROTATION);
-      group.scale.setScalar(PYLON_FARMER_NPC_AFTER_SCALE);
+    } else if (isCompleted) {
+      group.position.copy(currentPosRef.current);
     } else {
       group.position.set(...PYLON_FARMER_NPC_POSITION);
     }
-  });
 
-  if (mainState !== "pylon") return null;
-  if (step !== "arrived" && step !== "npc-return" && step !== "inspected") return null;
+    // ── 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}>
-      <mesh position={[0, 1, 0]}>
-        <capsuleGeometry args={[0.4, 1.2, 6, 12]} />
-        <meshStandardMaterial color="#a16207" />
-      </mesh>
-      <mesh position={[0, 1.95, 0]}>
-        <sphereGeometry args={[0.28, 12, 12]} />
-        <meshStandardMaterial color="#fde68a" />
-      </mesh>
-
+      <primitive object={model} />
       {step === "arrived" ? (
         <InteractableObject
           kind="trigger"
-          label="Parler au fermier"
+          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) {
@@ -86,7 +269,7 @@ export function PylonFarmerNPC(): React.JSX.Element | null {
               }
               const audio = await playDialogueById(
                 manifest,
-                PYLON_NARRATIVE_DIALOGUES.farmerHelp,
+                PYLON_NARRATIVE_DIALOGUES.electricienneWelcome,
               );
               if (!audio) {
                 setMissionStep("pylon", "npc-return");
@@ -109,3 +292,5 @@ export function PylonFarmerNPC(): React.JSX.Element | 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

@@ -1,33 +1,142 @@
+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 {
+  PYLON_APPROACH_DELAY_MS,
+  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 completeMission = useGameStore((state) => state.completeMission);
+  const setCanMove = useGameStore((state) => state.setCanMove);
 
-  useDialoguePlayback({
-    enabled: mainState === "pylon" && step === "approaching",
-    dialogueId: PYLON_NARRATIVE_DIALOGUES.electricOutage,
+  useEffect(() => {
+    if (mainState !== "pylon" || step !== "tampon") return undefined;
+
+    const timeoutId = window.setTimeout(() => {
+      setMissionStep("pylon", "approaching");
+    }, PYLON_APPROACH_DELAY_MS);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [mainState, setMissionStep, step]);
+
+  // ── 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,
   });
 
-  useDialoguePlayback({
-    enabled: mainState === "pylon" && step === "narrator-outro",
-    dialogueId: PYLON_NARRATIVE_DIALOGUES.powerRestored,
-    onComplete: () => completeMission("pylon"),
+  // ── 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") {
@@ -35,7 +144,7 @@ export function PylonNarrativeFlow(): React.JSX.Element | null {
       <ZoneDetection
         key="pylon-approach"
         zone={PYLON_APPROACH_ZONE}
-        onEnter={() => setMissionStep("pylon", "approaching")}
+        onEnter={() => setMissionStep("pylon", "tampon")}
       />
     );
   }
@@ -50,7 +159,12 @@ export function PylonNarrativeFlow(): React.JSX.Element | null {
     );
   }
 
-  if (step === "arrived" || step === "npc-return" || step === "inspected") {
+  if (
+    step === "arrived" ||
+    step === "npc-return" ||
+    step === "inspected" ||
+    step === "done"
+  ) {
     return <PylonFarmerNPC />;
   }
 

src/components/gameplay/pylon/PylonNarratorOutro.tsx

@@ -1,11 +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";
 
-export function PylonNarratorOutro(): React.JSX.Element | null {
-  const mainState = useGameStore((state) => state.mainState);
-  const step = useGameStore((state) => state.pylon.currentStep);
+/**
+ * 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);
 
-  if (mainState !== "pylon") return null;
-  if (step !== "narrator-outro") return null;
+  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

@@ -1,5 +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 };
+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
- * The displayed name is forced to SITE_CONFIG.presetPlayerName — the
- * field reveals one letter per keystroke until the preset name is complete.
+ * Screen 3: Name reveal
+ * The player's preset name is revealed letter-by-letter inside the input
+ * 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 inputRef = useRef<HTMLInputElement>(null);
+  const [revealedChars, setRevealedChars] = useState(0);
+  const [typewriterStarted, setTypewriterStarted] = useState(false);
 
   const presetPlayerName = SITE_CONFIG.presetPlayerName;
-  const displayValue = presetPlayerName.slice(0, charIndex);
-  const isComplete = charIndex >= presetPlayerName.length;
+  const displayValue = presetPlayerName.slice(0, revealedChars);
+  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;
-      await playDialogueById(manifest, SITE_DIALOGUE_IDS.naming);
+      if (cancelled) return;
+      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();
-  }, []);
-
-  const handleNameChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>): void => {
-      const nextLength = Math.min(
-        event.target.value.length,
-        presetPlayerName.length,
-      );
-      setCharIndex(nextLength);
-    },
-    [presetPlayerName.length],
-  );
+    if (!typewriterStarted) return;
+    const interval = setInterval(() => {
+      setRevealedChars((current) => {
+        if (current >= presetPlayerName.length) {
+          clearInterval(interval);
+          return current;
+        }
+        return current + 1;
+      });
+    }, TYPEWRITER_CHAR_DELAY_MS);
+    return () => clearInterval(interval);
+  }, [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}
-          placeholder="Écrivez votre prénom ici"
+          readOnly
+          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/RepairCaseModel.tsx

@@ -15,11 +15,15 @@ import {
   REPAIR_CASE_OPEN_ROTATION_OFFSET_DEGREES,
   REPAIR_CASE_CLOSE_SOUND_PATH,
   REPAIR_CASE_OPEN_SOUND_PATH,
+  REPAIR_CASE_PART_ANCHOR_FALLBACK_QUATERNION,
+  REPAIR_CASE_PART_ANCHOR_FALLBACKS,
+  REPAIR_CASE_PART_ANCHOR_NAMES,
   REPAIR_CASE_PLACEHOLDER_NAME_PREFIX,
   REPAIR_CASE_POP_DURATION,
   REPAIR_CASE_POP_Y_OFFSET,
   REPAIR_CASE_ROTATION_AMPLITUDE_DEGREES,
   REPAIR_CASE_ROTATION_RESET_SPEED,
+  type RepairCasePartAnchorName,
 } from "@/data/gameplay/repairCaseConfig";
 import { useClonedObject } from "@/hooks/three/useClonedObject";
 import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
@@ -32,6 +36,10 @@ export interface RepairCasePlaceholder {
   position: Vector3Tuple;
 }
 
+export type RepairCasePartAnchors = Partial<
+  Record<RepairCasePartAnchorName, Vector3Tuple>
+>;
+
 interface RepairCaseModelProps extends ModelTransformProps {
   modelPath: string;
   open: boolean;
@@ -40,6 +48,7 @@ interface RepairCaseModelProps extends ModelTransformProps {
   onPlaceholdersChange?:
     | ((placeholders: readonly RepairCasePlaceholder[]) => void)
     | undefined;
+  onAnchorsChange?: ((anchors: RepairCasePartAnchors) => void) | undefined;
   onExitComplete?: (() => void) | undefined;
 }
 
@@ -59,6 +68,7 @@ export function RepairCaseModel({
   exiting = false,
   floating = true,
   onPlaceholdersChange,
+  onAnchorsChange,
   onExitComplete,
   position = [0, 0, 0],
   rotation = [0, 0, 0],
@@ -81,6 +91,7 @@ export function RepairCaseModel({
   const pop = useRef({ scale: 0.001, yOffset: REPAIR_CASE_POP_Y_OFFSET });
   const onExitCompleteRef = useRef(onExitComplete);
   const onPlaceholdersChangeRef = useRef(onPlaceholdersChange);
+  const onAnchorsChangeRef = useRef(onAnchorsChange);
   const initialOpen = useRef(open);
   const previousOpen = useRef(open);
   const openedRotationZ = useRef(0);
@@ -89,6 +100,12 @@ export function RepairCaseModel({
   const placeholderSignature = useRef("__initial__");
   const placeholderPosition = useRef(new THREE.Vector3());
   const placeholderLocalPosition = useRef(new THREE.Vector3());
+  const anchorNodes = useRef<Map<RepairCasePartAnchorName, THREE.Object3D>>(
+    new Map(),
+  );
+  const anchorSignature = useRef("__initial__");
+  const anchorWorldPosition = useRef(new THREE.Vector3());
+  const anchorLocalPosition = useRef(new THREE.Vector3());
 
   useEffect(() => {
     onExitCompleteRef.current = onExitComplete;
@@ -98,6 +115,10 @@ export function RepairCaseModel({
     onPlaceholdersChangeRef.current = onPlaceholdersChange;
   }, [onPlaceholdersChange]);
 
+  useEffect(() => {
+    onAnchorsChangeRef.current = onAnchorsChange;
+  }, [onAnchorsChange]);
+
   useEffect(() => {
     const popAnimation = pop.current;
 
@@ -153,6 +174,37 @@ export function RepairCaseModel({
       }
     });
 
+    // Resolve part anchor nodes (cabledroit, cablegauche, pucehaut, pucebas,
+    // refroidisseur). Existing GLTF nodes are reused and their meshes are
+    // hidden so the standalone model injected at the same position becomes
+    // the only visible representation. Missing nodes are created on the fly
+    // at the configured fallback case-local position.
+    anchorNodes.current = new Map();
+    REPAIR_CASE_PART_ANCHOR_NAMES.forEach((anchorName) => {
+      let node = model.getObjectByName(anchorName);
+      if (node) {
+        node.traverse((descendant) => {
+          if ((descendant as THREE.Mesh).isMesh) {
+            descendant.visible = false;
+          }
+        });
+      } else {
+        const placeholder = new THREE.Object3D();
+        placeholder.name = anchorName;
+        const fallback = REPAIR_CASE_PART_ANCHOR_FALLBACKS[anchorName];
+        placeholder.position.set(fallback[0], fallback[1], fallback[2]);
+        placeholder.quaternion.set(
+          REPAIR_CASE_PART_ANCHOR_FALLBACK_QUATERNION[0],
+          REPAIR_CASE_PART_ANCHOR_FALLBACK_QUATERNION[1],
+          REPAIR_CASE_PART_ANCHOR_FALLBACK_QUATERNION[2],
+          REPAIR_CASE_PART_ANCHOR_FALLBACK_QUATERNION[3],
+        );
+        model.add(placeholder);
+        node = placeholder;
+      }
+      anchorNodes.current.set(anchorName, node);
+    });
+
     if (lid) {
       lid.rotation.z =
         openedRotationZ.current +
@@ -250,6 +302,31 @@ export function RepairCaseModel({
       }
     }
 
+    if (anchorNodes.current.size > 0) {
+      const anchors: RepairCasePartAnchors = {};
+      const signatureParts: string[] = [];
+      anchorNodes.current.forEach((node, anchorName) => {
+        node.getWorldPosition(anchorWorldPosition.current);
+        anchorLocalPosition.current.copy(anchorWorldPosition.current);
+        group.parent?.worldToLocal(anchorLocalPosition.current);
+        const tuple: Vector3Tuple = [
+          anchorLocalPosition.current.x,
+          anchorLocalPosition.current.y,
+          anchorLocalPosition.current.z,
+        ];
+        anchors[anchorName] = tuple;
+        signatureParts.push(
+          `${anchorName}:${tuple.map((value) => value.toFixed(3)).join(",")}`,
+        );
+      });
+      signatureParts.sort();
+      const nextAnchorSignature = signatureParts.join("|");
+      if (nextAnchorSignature !== anchorSignature.current) {
+        anchorSignature.current = nextAnchorSignature;
+        onAnchorsChangeRef.current?.(anchors);
+      }
+    }
+
     animationActiveRef.current = isNear;
 
     if (animationActiveRef.current) {

src/components/three/gameplay/RepairCompletionStep.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
 import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
 import { RepairMissionCase } from "@/components/three/gameplay/RepairMissionCase";
 import { TriggerObject } from "@/components/three/interaction/TriggerObject";
@@ -40,11 +39,12 @@ export function RepairCompletionStep({
         onExitComplete={onComplete}
       />
 
-      <RepairObjectModel
-        label={config.label}
-        modelPath={config.modelPath}
-        scale={config.modelScale ?? 1}
-      />
+      {/*
+        The repaired model is now rendered by the shared ExplodableModel
+        in RepairGame (split=false at done) so a single instance covers
+        the whole repair flow. Rendering RepairObjectModel here would
+        duplicate the model on top of the unified one.
+      */}
 
       {!isClosingCase ? (
         <TriggerObject

src/components/three/gameplay/RepairEbikeRepairTrigger.tsx

@@ -0,0 +1,57 @@
+import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
+import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
+import type { Vector3Tuple } from "@/types/three/three";
+
+interface RepairEbikeRepairTriggerProps {
+  anchor: Vector3Tuple;
+  installed: boolean;
+}
+
+const REPLACEMENT_MODEL_PATH = "/models/refroidisseur/model.gltf";
+
+/**
+ * Ebike-specific fake replacement flow: the broken radiator node is
+ * hidden in the shared ExplodableModel, a grabbable copy appears at the
+ * same anchor, then RepairGame/RepairMissionCase controls the install
+ * interaction and this component swaps the copy for a fresh glowing part.
+ */
+export function RepairEbikeRepairTrigger({
+  anchor,
+  installed,
+}: RepairEbikeRepairTriggerProps): React.JSX.Element {
+  return (
+    <group>
+      {!installed ? (
+        <GrabbableObject
+          position={anchor}
+          colliders="ball"
+          handControlled
+          lockUntilGrab
+          label="Retirer le refroidisseur"
+        >
+          <RepairObjectModel
+            label="Refroidisseur"
+            modelPath={REPLACEMENT_MODEL_PATH}
+            scale={0.24}
+          />
+        </GrabbableObject>
+      ) : (
+        <group position={anchor}>
+          <RepairObjectModel
+            label="Refroidisseur"
+            modelPath={REPLACEMENT_MODEL_PATH}
+            scale={0.24}
+          />
+          <mesh>
+            <sphereGeometry args={[0.65, 32, 16]} />
+            <meshBasicMaterial color="#22c55e" transparent opacity={0.18} />
+          </mesh>
+          <mesh rotation={[Math.PI / 2, 0, 0]}>
+            <torusGeometry args={[0.72, 0.025, 8, 96]} />
+            <meshBasicMaterial color="#86efac" transparent opacity={0.85} />
+          </mesh>
+        </group>
+      )}
+    </group>
+  );
+}

src/components/three/gameplay/RepairFocusBubble.tsx

@@ -0,0 +1,138 @@
+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;
+/**
+ * Duration of the GSAP `expo.out` grow tween. Exported so step-driven
+ * code (e.g. `RepairGame` advancing inspected -> fragmented) can wait
+ * the same amount of time before triggering the next phase.
+ */
+export 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

@@ -1,19 +1,42 @@
-import { Suspense, useEffect, useMemo, useState } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { useGLTF } from "@react-three/drei";
 import { ExplodableModel } from "@/components/three/models/ExplodableModel";
-import type { RepairCasePlaceholder } from "@/components/three/gameplay/RepairCaseModel";
+import type { ExplodedNodeAnchors } from "@/components/three/models/ExplodableModel";
+import type {
+  RepairCasePartAnchors,
+  RepairCasePlaceholder,
+} from "@/components/three/gameplay/RepairCaseModel";
 import { RepairCompletionStep } from "@/components/three/gameplay/RepairCompletionStep";
+import { RepairEbikeRepairTrigger } from "@/components/three/gameplay/RepairEbikeRepairTrigger";
 import { RepairInspectionObject } from "@/components/three/gameplay/RepairInspectionObject";
 import { RepairMissionCase } from "@/components/three/gameplay/RepairMissionCase";
+import { BUBBLE_GROW_DURATION_SECONDS } from "@/components/three/gameplay/RepairFocusBubble";
 import { RepairRepairingStep } from "@/components/three/gameplay/RepairRepairingStep";
 import { RepairReassemblyStep } from "@/components/three/gameplay/RepairReassemblyStep";
 import { RepairScanSequence } from "@/components/three/gameplay/RepairScanSequence";
 import { REPAIR_CASE_MODEL_PATH } from "@/data/gameplay/repairCaseConfig";
-import { REPAIR_FRAGMENTATION_SEQUENCE_SECONDS } from "@/data/gameplay/repairGameConfig";
+import {
+  REPAIR_FRAGMENT_SPLIT_DURATION_SECONDS,
+  REPAIR_DONE_DIALOGUE_FALLBACK_MS,
+  REPAIR_FRAGMENTATION_SEQUENCE_SECONDS,
+  REPAIR_FRAGMENT_SPLIT_SPEED,
+  REPAIR_REASSEMBLY_HOLD_MS,
+} from "@/data/gameplay/repairGameConfig";
 import { REPAIR_MISSIONS } from "@/data/gameplay/repairMissions";
+import {
+  EBIKE_REPAIRED_DIALOGUE_ID,
+  EBIKE_SCAN_HINT_DIALOGUE_ID,
+} from "@/data/ebike/ebikeConfig";
 import { useRepairFragmentationInput } from "@/hooks/gameplay/useRepairFragmentationInput";
 import { useRepairMissionStep } from "@/hooks/gameplay/useRepairMissionStep";
 import { useTerrainSnappedPosition } from "@/hooks/three/useTerrainHeight";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import {
+  clearQueuedDialogues,
+  playDialogueById,
+  stopCurrentDialogue,
+} from "@/utils/dialogues/playDialogue";
+import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
 import type {
   MissionStep,
   RepairMissionConfig,
@@ -21,7 +44,9 @@ 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 type { ExplodedPart } from "@/utils/three/ExplodedModel";
 import { toVector3Scale } from "@/utils/three/scale";
 
 interface RepairGameProps extends Required<
@@ -36,6 +61,11 @@ interface RepairMissionAssetPreloaderProps {
   config: RepairMissionConfig;
 }
 
+interface EbikeRepairTransform {
+  position: Vector3Tuple;
+  rotationY: number;
+}
+
 function RepairMissionAssetPreloader({
   config,
 }: RepairMissionAssetPreloaderProps): null {
@@ -49,6 +79,20 @@ function RepairMissionAssetPreloader({
   return null;
 }
 
+const REPAIR_PHASES: readonly MissionStep[] = [
+  "fragmented",
+  "scanning",
+  "repairing",
+  "reassembling",
+  "done",
+];
+
+const SPLIT_PHASES: readonly MissionStep[] = [
+  "fragmented",
+  "scanning",
+  "repairing",
+];
+
 export function RepairGame({
   mission,
   position,
@@ -63,12 +107,62 @@ export function RepairGame({
   const [casePlaceholders, setCasePlaceholders] = useState<
     readonly RepairCasePlaceholder[]
   >([]);
+  const [caseAnchors, setCaseAnchors] = useState<RepairCasePartAnchors>({});
+  const [brokenAnchors, setBrokenAnchors] = useState<ExplodedNodeAnchors>({});
   const [scannedBrokenParts, setScannedBrokenParts] = useState<
     readonly RepairScannedBrokenPart[]
   >([]);
+  const [explodedParts, setExplodedParts] = useState<readonly ExplodedPart[]>(
+    [],
+  );
+  const [ebikeRepairTransform, setEbikeRepairTransform] =
+    useState<EbikeRepairTransform | null>(null);
+  const [ebikeCoolingInstalled, setEbikeCoolingInstalled] = useState(false);
+  const fragmentedSplitSettledRef = useRef(false);
+  const fragmentedDialogueDoneRef = useRef(false);
+  const reassemblyDoneTimeoutRef = useRef<number | null>(null);
+  // Ebike-specific: once the repair starts, keep the entire repair flow
+  // exactly where the bike currently is. `Ebike` owns the live parked
+  // position while inspected is showing; RepairGame takes over the model
+  // from fragmented onward and must reuse that same world transform.
+  const livePosition = useMemo<Vector3Tuple>(() => {
+    if (mission !== "ebike" || step === "waiting") return position;
+
+    if (ebikeRepairTransform) return ebikeRepairTransform.position;
+
+    const parked = window.ebikeParkedPosition;
+    if (!parked) return position;
+
+    return [parked[0], parked[1], parked[2]];
+  }, [ebikeRepairTransform, mission, position, step]);
+  const usesLiveEbikePosition = mission === "ebike" && step !== "waiting";
   const parsedScale = toVector3Scale(scale);
-  const snappedPosition = useTerrainSnappedPosition(position);
+  const terrainSnappedPosition = useTerrainSnappedPosition(livePosition);
+  const snappedPosition = usesLiveEbikePosition
+    ? livePosition
+    : terrainSnappedPosition;
   const readyForFragmentation = step === "inspected";
+  const brokenNodeNames = useMemo(() => getBrokenNodeNames(config), [config]);
+  const isRepairPhase = (REPAIR_PHASES as readonly MissionStep[]).includes(
+    step,
+  );
+  const isSplitPhase = (SPLIT_PHASES as readonly MissionStep[]).includes(step);
+  const isRepairing = step === "repairing";
+  const repairModelRotation: Vector3Tuple =
+    mission === "ebike" && ebikeRepairTransform
+      ? [0, ebikeRepairTransform.rotationY, 0]
+      : (config.modelRotation ?? [0, 0, 0]);
+  const ebikeBrokenNodeName = config.brokenParts[0]?.targetNodeName;
+  const ebikeBrokenWorldAnchor = ebikeBrokenNodeName
+    ? brokenAnchors[ebikeBrokenNodeName]
+    : undefined;
+  const ebikeBrokenLocalAnchor = ebikeBrokenWorldAnchor
+    ? ([
+        ebikeBrokenWorldAnchor[0] - snappedPosition[0],
+        ebikeBrokenWorldAnchor[1] - snappedPosition[1],
+        ebikeBrokenWorldAnchor[2] - snappedPosition[2],
+      ] satisfies Vector3Tuple)
+    : ([0, 1, 0] satisfies Vector3Tuple);
 
   useRepairFragmentationInput({
     enabled: mainState === mission && readyForFragmentation,
@@ -81,7 +175,10 @@ export function RepairGame({
 
     const timeoutId = window.setTimeout(() => {
       setCasePlaceholders([]);
+      setCaseAnchors({});
+      setBrokenAnchors({});
       setScannedBrokenParts([]);
+      setEbikeCoolingInstalled(false);
     }, 0);
 
     return () => {
@@ -90,19 +187,309 @@ export function RepairGame({
   }, [mainState, mission, step]);
 
   useEffect(() => {
-    if (mainState !== mission) return undefined;
+    if (mission !== "ebike") return undefined;
 
-    if (step !== "fragmented") return undefined;
+    if (mainState !== "ebike" || step === "waiting") {
+      const timeoutId = window.setTimeout(() => {
+        setEbikeRepairTransform(null);
+        setEbikeCoolingInstalled(false);
+      }, 0);
+
+      return () => {
+        window.clearTimeout(timeoutId);
+      };
+    }
+
+    if (ebikeRepairTransform) return undefined;
+
+    const parked = window.ebikeParkedPosition;
+    const rotationY =
+      window.ebikeParkedRotation ?? config.modelRotation?.[1] ?? 0;
+    const snapshot: EbikeRepairTransform = {
+      position: parked ? [parked[0], parked[1], parked[2]] : position,
+      rotationY,
+    };
+    const timeoutId = window.setTimeout(() => {
+      setEbikeRepairTransform(snapshot);
+    }, 0);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [
+    config.modelRotation,
+    ebikeRepairTransform,
+    mainState,
+    mission,
+    position,
+    step,
+  ]);
+
+  useEffect(() => {
+    if (mission !== "ebike") return;
+    if (mainState === "ebike") return;
+
+    clearQueuedDialogues();
+    stopCurrentDialogue();
+    useSubtitleStore.getState().clearActiveSubtitle();
+  }, [mainState, mission]);
+
+  // 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, mission);
+    if (inFocusPhase) {
+      useRepairFocusStore
+        .getState()
+        .setFocus(true, [focusCenterX, focusCenterY, focusCenterZ]);
+      return () => {
+        useRepairFocusStore.getState().setFocus(false);
+      };
+    }
+    return undefined;
+  }, [mainState, mission, step, focusCenterX, focusCenterY, focusCenterZ]);
+
+  // Ebike-only: auto-advance inspected -> fragmented once the focus
+  // bubble's grow tween has finished isolating the bike inside the dark
+  // cocoon. The 2.5s delay matches BUBBLE_GROW_DURATION_SECONDS so the
+  // fragmentation visual coincides with the fully-formed shroud.
+  useEffect(() => {
+    if (mainState !== mission) return undefined;
+    if (mission !== "ebike") return undefined;
+    if (step !== "inspected") return undefined;
 
     const timeoutId = window.setTimeout(() => {
-      setMissionStep(mission, "scanning");
-    }, REPAIR_FRAGMENTATION_SEQUENCE_SECONDS * 1000);
+      setMissionStep(mission, "fragmented");
+    }, BUBBLE_GROW_DURATION_SECONDS * 1000);
 
     return () => {
       window.clearTimeout(timeoutId);
     };
   }, [mainState, mission, setMissionStep, step]);
 
+  // fragmented -> scanning is now driven by `onSplitSettled` from the
+  // shared ExplodableModel below (fires once the lerp actually
+  // converges on progress=1). The legacy
+  // REPAIR_FRAGMENTATION_SEQUENCE_SECONDS timer is kept as a safety-net
+  // fallback in case the model fails to load (no settled event) so the
+  // flow can never get stuck on the fragmented step.
+  useEffect(() => {
+    if (mainState !== mission) return undefined;
+    if (step !== "fragmented") return undefined;
+    if (mission === "ebike") return undefined;
+
+    const timeoutId = window.setTimeout(
+      () => {
+        setMissionStep(mission, "scanning");
+      },
+      (REPAIR_FRAGMENTATION_SEQUENCE_SECONDS + 2) * 1000,
+    );
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [mainState, mission, setMissionStep, step]);
+
+  useEffect(() => {
+    if (mainState !== mission) return undefined;
+    if (mission !== "ebike") return undefined;
+    if (step !== "fragmented") return undefined;
+
+    fragmentedSplitSettledRef.current = false;
+    fragmentedDialogueDoneRef.current = false;
+
+    let cancelled = false;
+    let activeAudio: HTMLAudioElement | null = null;
+    let fallbackTimeoutId: number | null = null;
+
+    const tryAdvance = (): void => {
+      if (cancelled) return;
+      if (!fragmentedSplitSettledRef.current) return;
+      if (!fragmentedDialogueDoneRef.current) return;
+      setMissionStep(mission, "scanning");
+    };
+
+    const markDialogueDone = (): void => {
+      if (cancelled) return;
+      fragmentedDialogueDoneRef.current = true;
+      tryAdvance();
+    };
+
+    void (async () => {
+      const manifest = await loadDialogueManifest();
+      if (cancelled) return;
+      const audio = manifest
+        ? await playDialogueById(manifest, EBIKE_SCAN_HINT_DIALOGUE_ID)
+        : null;
+      if (cancelled) {
+        if (audio && !audio.paused) {
+          audio.pause();
+          audio.currentTime = 0;
+        }
+        useSubtitleStore.getState().clearActiveSubtitle();
+        return;
+      }
+
+      activeAudio = audio;
+      if (audio) {
+        audio.addEventListener("ended", markDialogueDone, { once: true });
+        fallbackTimeoutId = window.setTimeout(markDialogueDone, 15000);
+      } else {
+        fallbackTimeoutId = window.setTimeout(markDialogueDone, 1000);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (activeAudio) {
+        activeAudio.removeEventListener("ended", markDialogueDone);
+        if (!activeAudio.paused) {
+          activeAudio.pause();
+          activeAudio.currentTime = 0;
+        }
+      }
+      if (fallbackTimeoutId !== null) {
+        window.clearTimeout(fallbackTimeoutId);
+      }
+      useSubtitleStore.getState().clearActiveSubtitle();
+    };
+  }, [mainState, mission, setMissionStep, step]);
+
+  useEffect(() => {
+    if (mainState !== mission) return undefined;
+    if (step !== "reassembling") return undefined;
+
+    const timeoutId = window.setTimeout(() => {
+      setMissionStep(mission, "done");
+    }, REPAIR_REASSEMBLY_HOLD_MS + 4000);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [mainState, mission, setMissionStep, step]);
+
+  // Ebike-only: at `done`, play the success narrator line and complete
+  // the mission when the audio ends (handing off to pylon). A fallback
+  // timer guarantees the transition even if the audio fails.
+  useEffect(() => {
+    if (mainState !== mission) return undefined;
+    if (mission !== "ebike") return undefined;
+    if (step !== "done") return undefined;
+
+    let cancelled = false;
+    let activeAudio: HTMLAudioElement | null = null;
+    let fallbackTimeoutId: number | null = null;
+
+    const finish = (): void => {
+      if (cancelled) return;
+      cancelled = true;
+      completeMission(mission);
+    };
+
+    void (async () => {
+      const manifest = await loadDialogueManifest();
+      if (cancelled) return;
+      const audio = manifest
+        ? await playDialogueById(manifest, EBIKE_REPAIRED_DIALOGUE_ID)
+        : null;
+      if (cancelled) {
+        if (audio && !audio.paused) {
+          audio.pause();
+          audio.currentTime = 0;
+        }
+        useSubtitleStore.getState().clearActiveSubtitle();
+        return;
+      }
+      activeAudio = audio;
+      if (audio) {
+        audio.addEventListener("ended", finish, { once: true });
+        fallbackTimeoutId = window.setTimeout(
+          finish,
+          REPAIR_DONE_DIALOGUE_FALLBACK_MS,
+        );
+      } else {
+        fallbackTimeoutId = window.setTimeout(
+          finish,
+          REPAIR_DONE_DIALOGUE_FALLBACK_MS,
+        );
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (activeAudio) {
+        activeAudio.removeEventListener("ended", finish);
+        if (!activeAudio.paused) {
+          activeAudio.pause();
+          activeAudio.currentTime = 0;
+        }
+      }
+      if (fallbackTimeoutId !== null) {
+        window.clearTimeout(fallbackTimeoutId);
+      }
+      useSubtitleStore.getState().clearActiveSubtitle();
+    };
+  }, [completeMission, mainState, mission, step]);
+
+  // The shared ExplodableModel resets its parts to a fresh array each
+  // time it remounts (i.e. when leaving the repair flow back to
+  // waiting/inspected). The cached `explodedParts` will be overwritten
+  // by `onPartsReady` on the next mount; we don't need an explicit
+  // reset because no rendered code path uses the stale parts outside
+  // the repair phases.
+
+  // Settled callback: drives event-based transitions out of the
+  // explode/reassemble lerp.
+  const stepRef = useRef(step);
+  useEffect(() => {
+    stepRef.current = step;
+  }, [step]);
+  const handleSplitSettled = useMemo(
+    () => (settledAt: 0 | 1) => {
+      const currentStep = stepRef.current;
+      if (settledAt === 1 && currentStep === "fragmented") {
+        if (mission === "ebike") {
+          fragmentedSplitSettledRef.current = true;
+          if (fragmentedDialogueDoneRef.current) {
+            setMissionStep(mission, "scanning");
+          }
+          return;
+        }
+        setMissionStep(mission, "scanning");
+      }
+      if (settledAt === 0 && currentStep === "reassembling") {
+        if (reassemblyDoneTimeoutRef.current !== null) {
+          window.clearTimeout(reassemblyDoneTimeoutRef.current);
+        }
+        reassemblyDoneTimeoutRef.current = window.setTimeout(() => {
+          reassemblyDoneTimeoutRef.current = null;
+          setMissionStep(mission, "done");
+        }, REPAIR_REASSEMBLY_HOLD_MS);
+      }
+    },
+    [mission, setMissionStep],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (reassemblyDoneTimeoutRef.current !== null) {
+        window.clearTimeout(reassemblyDoneTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  function handleEbikeCoolingInstall(): void {
+    if (ebikeCoolingInstalled) return;
+    setEbikeCoolingInstalled(true);
+    window.setTimeout(() => {
+      setMissionStep(mission, "reassembling");
+    }, 450);
+  }
+
   if (mainState !== mission) return null;
   if (step === "locked") return null;
 
@@ -119,51 +506,88 @@ export function RepairGame({
             onInspect={() => setMissionStep(mission, "inspected")}
           />
         ) : null}
-        {step === "fragmented" ? (
+        {/*
+          Single ExplodableModel mounted across the entire repair flow
+          (fragmented -> done) so the model loads once, animates from
+          its real original positions, never re-instantiates between
+          phases, and stays at a stable transform. `split` toggles drive
+          the explode/reassemble lerps in place.
+        */}
+        {isRepairPhase ? (
           <ExplodableModel
             modelPath={config.modelPath}
+            rotation={repairModelRotation}
             scale={config.modelScale ?? 1}
-            split
+            split={isSplitPhase}
+            splitSpeed={REPAIR_FRAGMENT_SPLIT_SPEED}
+            splitDurationSeconds={REPAIR_FRAGMENT_SPLIT_DURATION_SECONDS}
+            onPartsReady={setExplodedParts}
+            onSplitSettled={handleSplitSettled}
+            {...(isRepairing
+              ? {
+                  hideNodeNames: brokenNodeNames,
+                  nodeAnchorNames: brokenNodeNames,
+                  onNodeAnchorsChange: setBrokenAnchors,
+                }
+              : {})}
           />
         ) : null}
         {step === "scanning" ? (
           <RepairScanSequence
             config={config}
+            parts={explodedParts}
             onComplete={(brokenParts) => {
               setScannedBrokenParts(brokenParts);
               setMissionStep(mission, "repairing");
             }}
           />
         ) : null}
-        {step === "repairing" ? (
+        {step === "repairing" && mission === "ebike" ? (
+          <RepairEbikeRepairTrigger
+            anchor={ebikeBrokenLocalAnchor}
+            installed={ebikeCoolingInstalled}
+          />
+        ) : null}
+        {step === "repairing" && mission !== "ebike" ? (
           <RepairRepairingStep
+            anchors={caseAnchors}
+            brokenAnchors={brokenAnchors}
             brokenParts={scannedBrokenParts}
             config={config}
             placeholders={casePlaceholders}
             onRepair={() => setMissionStep(mission, "reassembling")}
           />
         ) : null}
-        {step === "reassembling" ? (
-          <RepairReassemblyStep
-            config={config}
-            onComplete={() => setMissionStep(mission, "done")}
-          />
-        ) : null}
-        {step === "done" ? (
+        {step === "reassembling" ? <RepairReassemblyStep /> : null}
+        {step === "done" && mission !== "pylon" && mission !== "ebike" ? (
           <RepairCompletionStep
             config={config}
             onComplete={() => completeMission(mission)}
           />
         ) : null}
-        {step !== "waiting" && step !== "done" && step !== "reassembling" ? (
+        {step !== "waiting" &&
+        step !== "done" &&
+        step !== "reassembling" &&
+        // Ebike's inspected phase is a 2.5s sphere-reveal cinematic that
+        // auto-advances to fragmented; the case + "press to fragment"
+        // prompt would only flash on screen, so suppress them here.
+        !(mission === "ebike" && step === "inspected") ? (
           <RepairMissionCase
             config={config}
             onPlaceholdersChange={setCasePlaceholders}
-            open={step === "repairing"}
-            zoomed={step === "repairing"}
-            showFragmentationPrompt={readyForFragmentation}
+            onAnchorsChange={setCaseAnchors}
+            open={mission !== "ebike" && step === "repairing"}
+            zoomed={mission !== "ebike" && step === "repairing"}
+            showFragmentationPrompt={
+              readyForFragmentation && mission !== "ebike"
+            }
+            {...(mission === "ebike" && step === "repairing"
+              ? { interactLabel: "Changez le refroidisseur" }
+              : {})}
             onInteract={
-              readyForFragmentation
+              mission === "ebike" && step === "repairing"
+                ? handleEbikeCoolingInstall
+                : readyForFragmentation && mission !== "ebike"
                   ? () => setMissionStep(mission, "fragmented")
                   : undefined
             }
@@ -178,6 +602,23 @@ function shouldKeepRepairRuntimeState(step: MissionStep): boolean {
   return step === "repairing" || step === "reassembling" || step === "done";
 }
 
+function shouldFocusBubbleBeActive(
+  step: MissionStep,
+  mission: RepairMissionId,
+): boolean {
+  // Ebike opens the focus bubble one phase earlier (inspected) so the
+  // sphere visibly engulfs the bike during the inspect-then-explode
+  // build-up. Pylon/farm keep their original behaviour where the bubble
+  // appears once the model has fragmented.
+  if (mission === "ebike" && step === "inspected") return true;
+  return (
+    step === "fragmented" ||
+    step === "scanning" ||
+    step === "repairing" ||
+    step === "reassembling"
+  );
+}
+
 function getRepairMissionModelPaths(config: RepairMissionConfig): string[] {
   return [
     ...new Set([
@@ -188,3 +629,15 @@ function getRepairMissionModelPaths(config: RepairMissionConfig): string[] {
     ]),
   ];
 }
+
+function getBrokenNodeNames(config: RepairMissionConfig): readonly string[] {
+  const names = new Set<string>();
+  config.brokenParts.forEach((part) => {
+    if (part.targetNodeName) names.add(part.targetNodeName);
+    else if (part.nodeName) names.add(part.nodeName);
+  });
+  config.replacementParts.forEach((part) => {
+    if (part.targetNodeName) names.add(part.targetNodeName);
+  });
+  return Array.from(names);
+}

src/components/three/gameplay/RepairMissionCase.tsx

@@ -1,5 +1,6 @@
 import {
   RepairCaseModel,
+  type RepairCasePartAnchors,
   type RepairCasePlaceholder,
 } from "@/components/three/gameplay/RepairCaseModel";
 import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
@@ -19,10 +20,12 @@ interface RepairMissionCaseProps {
   onPlaceholdersChange?:
     | ((placeholders: readonly RepairCasePlaceholder[]) => void)
     | undefined;
+  onAnchorsChange?: ((anchors: RepairCasePartAnchors) => void) | undefined;
   onExitComplete?: (() => void) | undefined;
   open?: boolean;
   zoomed?: boolean;
   showFragmentationPrompt?: boolean;
+  interactLabel?: string;
   onInteract?: (() => void) | undefined;
 }
 
@@ -30,10 +33,12 @@ export function RepairMissionCase({
   config,
   exiting = false,
   onPlaceholdersChange,
+  onAnchorsChange,
   onExitComplete,
   open = false,
   zoomed = false,
   showFragmentationPrompt = false,
+  interactLabel,
   onInteract,
 }: RepairMissionCaseProps): React.JSX.Element {
   const casePosition = zoomed
@@ -48,7 +53,7 @@ export function RepairMissionCase({
         <TriggerObject
           position={casePosition}
           colliders="ball"
-          label={`Ouvrir ${config.label}`}
+          label={interactLabel ?? `Ouvrir ${config.label}`}
           radius={REPAIR_INTERACTION_RADIUS}
           onTrigger={onInteract}
         >
@@ -57,6 +62,7 @@ export function RepairMissionCase({
             exiting={exiting}
             onExitComplete={onExitComplete}
             onPlaceholdersChange={onPlaceholdersChange}
+            onAnchorsChange={onAnchorsChange}
             open={open}
             floating={!zoomed}
             position={modelPosition}
@@ -70,6 +76,7 @@ export function RepairMissionCase({
           exiting={exiting}
           onExitComplete={onExitComplete}
           onPlaceholdersChange={onPlaceholdersChange}
+          onAnchorsChange={onAnchorsChange}
           open={open}
           floating={!zoomed}
           position={modelPosition}

src/components/three/gameplay/RepairObjectModel.tsx

@@ -8,6 +8,7 @@ import { toVector3Scale } from "@/utils/three/scale";
 interface RepairObjectModelProps extends ModelTransformProps {
   label: string;
   modelPath: string;
+  ghosted?: boolean;
 }
 
 interface RepairObjectModelBoundaryProps extends RepairObjectModelProps {
@@ -73,6 +74,7 @@ export function RepairObjectModel({
   position = [0, 0, 0],
   rotation = [0, 0, 0],
   scale = 1,
+  ghosted = false,
 }: RepairObjectModelProps): React.JSX.Element {
   return (
     <RepairObjectModelBoundary
@@ -87,6 +89,7 @@ export function RepairObjectModel({
         position={position}
         rotation={rotation}
         scale={scale}
+        opacity={ghosted ? 0.35 : 1}
       />
     </RepairObjectModelBoundary>
   );

src/components/three/gameplay/RepairReassemblyStep.tsx

@@ -1,45 +1,15 @@
-import { useEffect, useState } from "react";
 import { RepairCompletionParticles } from "@/components/three/gameplay/RepairCompletionParticles";
-import { ExplodableModel } from "@/components/three/models/ExplodableModel";
-import { REPAIR_REASSEMBLY_SECONDS } from "@/data/gameplay/repairGameConfig";
-import type { RepairMissionConfig } from "@/types/gameplay/repairMission";
 
-interface RepairReassemblyStepProps {
-  config: RepairMissionConfig;
-  onComplete: () => void;
-}
-
-export function RepairReassemblyStep({
-  config,
-  onComplete,
-}: RepairReassemblyStepProps): React.JSX.Element {
-  const [split, setSplit] = useState(true);
-  const reassemblySeconds =
-    config.reassemblySeconds ?? REPAIR_REASSEMBLY_SECONDS;
-
-  useEffect(() => {
-    const closeTimeoutId = window.setTimeout(() => {
-      setSplit(false);
-    }, 50);
-    const completeTimeoutId = window.setTimeout(() => {
-      onComplete();
-    }, reassemblySeconds * 1000);
-
-    return () => {
-      window.clearTimeout(closeTimeoutId);
-      window.clearTimeout(completeTimeoutId);
-    };
-  }, [onComplete, reassemblySeconds]);
-
-  return (
-    <group>
-      <ExplodableModel
-        modelPath={config.modelPath}
-        scale={config.modelScale ?? 1}
-        split={split}
-        splitDistance={1.2}
-      />
-      <RepairCompletionParticles />
-    </group>
-  );
+/**
+ * Visual layer for the reassembly phase. The actual collapse animation
+ * (parts lerping back to their original positions) is driven by the
+ * shared ExplodableModel mounted upstream by RepairGame, which keeps a
+ * single instance alive across fragmented -> done so the model never
+ * reloads or jumps between phases.
+ *
+ * This component now only renders the completion particles and emits a
+ * settled signal after `delayMs` so the upstream flow can advance.
+ */
+export function RepairReassemblyStep(): React.JSX.Element {
+  return <RepairCompletionParticles />;
 }

src/components/three/gameplay/RepairRepairingStep.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useRef, useState } from "react";
 import * as THREE from "three";
-import type { RepairCasePlaceholder } from "@/components/three/gameplay/RepairCaseModel";
+import type {
+  RepairCasePartAnchors,
+  RepairCasePlaceholder,
+} from "@/components/three/gameplay/RepairCaseModel";
+import type { ExplodedNodeAnchors } from "@/components/three/models/ExplodableModel";
 import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
 import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
 import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
@@ -38,6 +42,8 @@ const STORED_BROKEN_PART_COLOR = "#38bdf8";
 let hasWarnedMissingPlaceholders = false;
 
 interface RepairRepairingStepProps {
+  anchors?: RepairCasePartAnchors;
+  brokenAnchors?: ExplodedNodeAnchors;
   brokenParts: readonly RepairScannedBrokenPart[];
   config: RepairMissionConfig;
   placeholders: readonly RepairCasePlaceholder[];
@@ -63,6 +69,8 @@ interface RepairPartPlacementFeedbackProps {
 }
 
 export function RepairRepairingStep({
+  anchors = {},
+  brokenAnchors = {},
   brokenParts,
   config,
   placeholders,
@@ -76,12 +84,15 @@ export function RepairRepairingStep({
   const [depositedBrokenPartIds, setDepositedBrokenPartIds] = useState<
     Record<string, boolean>
   >({});
+  const [heldPartByLockGroup, setHeldPartByLockGroup] = useState<
+    Record<string, string>
+  >({});
   const [showBlockedInstallFeedback, setShowBlockedInstallFeedback] =
     useState(false);
   const replacementParts = getReplacementParts(config);
   const brokenPartsToDeposit = getBrokenPartsToDeposit(config, brokenParts);
-  const requiredReplacementPart = replacementParts.find(
-    (part) => part.id === config.requiredReplacementPartId,
+  const requiredReplacementPart = replacementParts.find((part) =>
+    config.requiredReplacementPartIds.includes(part.id),
   );
   const requiredReplacementLabel =
     requiredReplacementPart?.label ?? config.label;
@@ -89,15 +100,16 @@ export function RepairRepairingStep({
   const placeholderPositions = placeholderTargets.map(
     (target) => target.position,
   );
-  const hasCorrectPartPlaced = Boolean(
-    placedPartIds[config.requiredReplacementPartId],
+  const hasCorrectPartPlaced = config.requiredReplacementPartIds.some(
+    (id) => placedPartIds[id],
   );
   const hasDepositedBrokenParts = brokenPartsToDeposit.every(
     (part) => depositedBrokenPartIds[part.id],
   );
   const hasWrongPartPlaced = replacementParts.some(
     (part) =>
-      part.id !== config.requiredReplacementPartId && placedPartIds[part.id],
+      !config.requiredReplacementPartIds.includes(part.id) &&
+      placedPartIds[part.id],
   );
   const isReadyToInstall = hasCorrectPartPlaced && hasDepositedBrokenParts;
   const installColor = isReadyToInstall
@@ -177,6 +189,24 @@ export function RepairRepairingStep({
     });
   }
 
+  function handleReplacementGrabChange(
+    part: RepairMissionPartConfig,
+    held: boolean,
+  ): void {
+    if (!part.caseLockGroup) return;
+    const group = part.caseLockGroup;
+    setHeldPartByLockGroup((current) => {
+      if (held) {
+        if (current[group] === part.id) return current;
+        return { ...current, [group]: part.id };
+      }
+      if (current[group] !== part.id) return current;
+      const next = { ...current };
+      delete next[group];
+      return next;
+    });
+  }
+
   return (
     <group ref={groupRef}>
       <RepairInstallTarget
@@ -192,15 +222,23 @@ export function RepairRepairingStep({
       <RepairPlaceholderMarkers positions={placeholderPositions} />
 
       {replacementParts.map((part, index) => {
+        const anchorPosition = part.caseAnchor
+          ? anchors[part.caseAnchor]
+          : undefined;
         const placeholderPosition =
+          anchorPosition ??
           placeholderPositions[index % placeholderPositions.length] ??
           placeholderPositions[0]!;
         const isPlaced = Boolean(placedPartIds[part.id]);
         const feedbackState = getReplacementFeedbackState(
           part.id,
-          config.requiredReplacementPartId,
+          config.requiredReplacementPartIds,
           isPlaced,
         );
+        const lockedByOther =
+          part.caseLockGroup !== undefined &&
+          heldPartByLockGroup[part.caseLockGroup] !== undefined &&
+          heldPartByLockGroup[part.caseLockGroup] !== part.id;
 
         return (
           <GrabbableObject
@@ -208,7 +246,11 @@ export function RepairRepairingStep({
             position={placeholderPosition}
             colliders="ball"
             handControlled
+            disabled={lockedByOther}
             label={`Prendre ${part.label}`}
+            onGrabChange={(held) => {
+              handleReplacementGrabChange(part, held);
+            }}
             onPositionChange={(position) => {
               handleReplacementPosition(part.id, position);
             }}
@@ -224,6 +266,7 @@ export function RepairRepairingStep({
                 label={part.label}
                 modelPath={part.modelPath ?? config.modelPath}
                 scale={0.36}
+                ghosted={lockedByOther}
               />
               <RepairPartPlacementFeedback state={feedbackState} />
             </group>
@@ -232,14 +275,18 @@ export function RepairRepairingStep({
       })}
 
       {brokenPartsToDeposit.map((part, index) => {
-        const startOffset =
+        const fallbackOffset =
           BROKEN_PART_START_OFFSETS[index % BROKEN_PART_START_OFFSETS.length] ??
           BROKEN_PART_START_OFFSETS[0]!;
-        const startPosition: Vector3Tuple = [
-          REPAIR_CASE_FOCUS_POSITION[0] + startOffset[0],
-          REPAIR_CASE_FOCUS_POSITION[1] + startOffset[1],
-          REPAIR_CASE_FOCUS_POSITION[2] + startOffset[2],
+        const fallbackPosition: Vector3Tuple = [
+          REPAIR_CASE_FOCUS_POSITION[0] + fallbackOffset[0],
+          REPAIR_CASE_FOCUS_POSITION[1] + fallbackOffset[1],
+          REPAIR_CASE_FOCUS_POSITION[2] + fallbackOffset[2],
         ];
+        const anchorPosition = part.targetNodeName
+          ? brokenAnchors[part.targetNodeName]
+          : undefined;
+        const startPosition: Vector3Tuple = anchorPosition ?? fallbackPosition;
         const targetPositions = getBrokenPartTargetPositions(
           part,
           placeholderTargets,
@@ -387,12 +434,12 @@ function getPlacementFeedbackColor(
 
 function getReplacementFeedbackState(
   partId: string,
-  requiredPartId: string,
+  requiredPartIds: readonly string[],
   isPlaced: boolean,
 ): RepairPartPlacementFeedbackProps["state"] {
   if (!isPlaced) return null;
 
-  return partId === requiredPartId ? "valid" : "invalid";
+  return requiredPartIds.includes(partId) ? "valid" : "invalid";
 }
 
 function getPlaceholderTargets(
@@ -466,9 +513,12 @@ function getReplacementParts(
 ): readonly RepairMissionPartConfig[] {
   if (config.replacementParts.length > 0) return config.replacementParts;
 
+  const fallbackId =
+    config.requiredReplacementPartIds[0] ?? `${config.id}-replacement`;
+
   return [
     {
-      id: config.requiredReplacementPartId,
+      id: fallbackId,
       label: config.label,
       modelPath: config.modelPath,
     },
@@ -486,5 +536,6 @@ function getBrokenPartsToDeposit(
     label: part.label,
     modelPath: part.modelPath ?? config.modelPath,
     ...(part.caseSlotName ? { caseSlotName: part.caseSlotName } : {}),
+    ...(part.targetNodeName ? { targetNodeName: part.targetNodeName } : {}),
   }));
 }

src/components/three/gameplay/RepairScanSequence.tsx

@@ -1,8 +1,7 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import * as THREE from "three";
 import { RepairBrokenPartHighlight } from "@/components/three/gameplay/RepairBrokenPartHighlight";
 import { RepairBrokenPartPrompt } from "@/components/three/gameplay/RepairBrokenPartPrompt";
-import { ExplodableModel } from "@/components/three/models/ExplodableModel";
 import { RepairScanVisual } from "@/components/three/gameplay/RepairScanVisual";
 import { REPAIR_SCAN_PART_SECONDS } from "@/data/gameplay/repairGameConfig";
 import type {
@@ -12,9 +11,20 @@ import type {
 } from "@/types/gameplay/repairMission";
 import { logger } from "@/utils/core/Logger";
 import type { ExplodedPart } from "@/utils/three/ExplodedModel";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
 
 interface RepairScanSequenceProps {
   config: RepairMissionConfig;
+  /**
+   * Parts of the (already mounted) ExplodableModel managed upstream by
+   * RepairGame. The scan sequence drives its visuals against these
+   * parts so the model isn't re-instantiated when entering the scanning
+   * phase (which would cause the explosion animation to replay and the
+   * world transform to differ between phases).
+   */
+  parts: readonly ExplodedPart[];
   onComplete: (brokenParts: readonly RepairScannedBrokenPart[]) => void;
 }
 
@@ -27,25 +37,112 @@ const warnedMissingScanParts = new Set<string>();
 
 export function RepairScanSequence({
   config,
+  parts,
   onComplete,
 }: RepairScanSequenceProps): React.JSX.Element {
-  const [parts, setParts] = useState<readonly ExplodedPart[]>([]);
   const [activePartIndex, setActivePartIndex] = useState(0);
   const activePart = parts[activePartIndex];
   const scanPartSeconds = config.scanPartSeconds ?? REPAIR_SCAN_PART_SECONDS;
-  const brokenPartMatches = getBrokenPartMatches(parts, config);
+  const brokenPartMatches = useMemo(
+    () => getBrokenPartMatches(parts, config),
+    [parts, config],
+  );
   const visibleBrokenPartMatches = brokenPartMatches.filter(
     (match) => match.partIndex <= activePartIndex,
   );
+  const onCompleteRef = useRef(onComplete);
+
+  useEffect(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
 
   useEffect(() => {
     if (parts.length === 0) return undefined;
 
+    // Look up which (if any) broken-part config corresponds to the
+    // currently active scan part. When the active part has a
+    // `voiceLineId`, gate the advance on the audio's `ended` event so
+    // the diagnostic line plays in full (with its red broken-part
+    // highlight already on screen) before transitioning to the next
+    // scan part — and ultimately to the repairing step.
+    const activeBrokenMatch = brokenPartMatches.find(
+      (match) => match.partIndex === activePartIndex,
+    );
+    const activeVoiceLineId = activeBrokenMatch?.config.voiceLineId;
+
+    if (activeVoiceLineId) {
+      let cancelled = false;
+      let activeAudio: HTMLAudioElement | null = null;
+      let fallbackTimeoutId: number | null = null;
+
+      const advance = (): void => {
+        if (cancelled) return;
+        cancelled = true;
+        setActivePartIndex((currentIndex) => {
+          const nextIndex = currentIndex + 1;
+          if (nextIndex >= parts.length) {
+            window.setTimeout(() => {
+              onCompleteRef.current(getScannedBrokenParts(parts, config));
+            }, 0);
+            return currentIndex;
+          }
+          return nextIndex;
+        });
+      };
+
+      void (async () => {
+        const manifest = await loadDialogueManifest();
+        if (cancelled) return;
+        const audio = manifest
+          ? await playDialogueById(manifest, activeVoiceLineId)
+          : null;
+        if (cancelled) {
+          if (audio && !audio.paused) {
+            audio.pause();
+            audio.currentTime = 0;
+          }
+          useSubtitleStore.getState().clearActiveSubtitle();
+          return;
+        }
+        activeAudio = audio;
+        if (audio) {
+          audio.addEventListener("ended", advance, { once: true });
+          // Fallback: if the audio errors or never fires `ended`, still
+          // advance after a generous ceiling so the flow can't stall.
+          fallbackTimeoutId = window.setTimeout(advance, 15000);
+        } else {
+          // No audio (manifest missing) — advance after the default
+          // per-part dwell so we don't get stuck on this part.
+          fallbackTimeoutId = window.setTimeout(
+            advance,
+            scanPartSeconds * 1000,
+          );
+        }
+      })();
+
+      return () => {
+        cancelled = true;
+        if (activeAudio) {
+          activeAudio.removeEventListener("ended", advance);
+          if (!activeAudio.paused) {
+            activeAudio.pause();
+            activeAudio.currentTime = 0;
+          }
+        }
+        if (fallbackTimeoutId !== null) {
+          window.clearTimeout(fallbackTimeoutId);
+        }
+        useSubtitleStore.getState().clearActiveSubtitle();
+      };
+    }
+
     const timeoutId = window.setTimeout(() => {
       setActivePartIndex((currentIndex) => {
         const nextIndex = currentIndex + 1;
         if (nextIndex >= parts.length) {
-          onComplete(getScannedBrokenParts(parts, config));
+          window.setTimeout(() => {
+            onCompleteRef.current(getScannedBrokenParts(parts, config));
+          }, 0);
           return currentIndex;
         }
 
@@ -56,16 +153,10 @@ export function RepairScanSequence({
     return () => {
       window.clearTimeout(timeoutId);
     };
-  }, [activePartIndex, config, onComplete, parts, scanPartSeconds]);
+  }, [activePartIndex, brokenPartMatches, config, parts, scanPartSeconds]);
 
   return (
     <group>
-      <ExplodableModel
-        modelPath={config.modelPath}
-        scale={config.modelScale ?? 1}
-        split
-        onPartsReady={setParts}
-      />
       <RepairScanVisual target={activePart?.object} />
       {visibleBrokenPartMatches.map((match) => {
         const part = parts[match.partIndex];
@@ -97,6 +188,9 @@ function getScannedBrokenParts(
       ...(match.config.caseSlotName
         ? { caseSlotName: match.config.caseSlotName }
         : {}),
+      ...(match.config.targetNodeName
+        ? { targetNodeName: match.config.targetNodeName }
+        : {}),
     };
   });
 }
@@ -130,6 +224,7 @@ function getBrokenPartMatches(
       logger.warn("RepairScan", "Broken parts missing from exploded model", {
         missionId: config.id,
         missingIds,
+        availablePartNames: parts.map((part) => part.object.name),
       });
     }
   }
@@ -145,11 +240,20 @@ function objectContainsNodeName(
   object: THREE.Object3D,
   nodeName: string,
 ): boolean {
-  if (object.name === nodeName) return true;
+  const normalizedNodeName = nodeName.toLowerCase();
+  const objectName = object.name.toLowerCase();
+  if (objectName === normalizedNodeName) return true;
+  if (objectName.includes(normalizedNodeName)) return true;
+  if (normalizedNodeName.includes(objectName)) return true;
 
   let found = false;
   object.traverse((child) => {
-    if (child.name === nodeName) {
+    const childName = child.name.toLowerCase();
+    if (
+      childName === normalizedNodeName ||
+      childName.includes(normalizedNodeName) ||
+      normalizedNodeName.includes(childName)
+    ) {
       found = true;
     }
   });

src/components/three/handTracking/HandTrackingGlove.tsx

@@ -12,6 +12,11 @@ import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
 import type { HandTrackingLandmark } from "@/types/handTracking/handTracking";
 import { logModelLoadError } from "@/utils/three/modelLoadLogger";
 
+// Both gloves share the same source mesh (gant_l). The right glove is
+// rendered by mirroring scale.x at the group level — this is more
+// reliable than the historical gant_r GLTF, which embeds multiple
+// skeletons (Hand_l, Hand_l_pad, Hand_r) and was breaking the finger
+// rig.
 const GLOVE_CONFIGS: Record<
   HandTrackingGloveHandedness,
   {
@@ -24,8 +29,8 @@ const GLOVE_CONFIGS: Record<
     rootNodeName: "Armature",
   },
   right: {
-    modelPath: "/models/gant_r/model.gltf",
-    rootNodeName: "Hand_r",
+    modelPath: "/models/gant_l/model.gltf",
+    rootNodeName: "Armature",
   },
 };
 
@@ -226,7 +231,10 @@ function applyFingerPose(
       _boneTargetQuaternion
         .copy(_boneDeltaQuaternion)
         .multiply(pose.restQuaternion);
-      pose.bone.quaternion.slerp(_boneTargetQuaternion, 0.45);
+      // Lower slerp factor = smoother but more latency. MediaPipe at
+      // ~10fps produces noisy landmark frames; smoothing cuts the
+      // jitter the user sees on every finger bone.
+      pose.bone.quaternion.slerp(_boneTargetQuaternion, 0.3);
     }
   }
 }
@@ -334,12 +342,18 @@ function HandTrackingGloveModel({
     _matrix.makeBasis(_xAxis, _yAxis, _zAxis);
     _targetQuaternion.setFromRotationMatrix(_matrix);
 
-    group.position.lerp(_targetPosition, Math.min(1, delta * 18));
-    group.quaternion.slerp(_targetQuaternion, Math.min(1, delta * 18));
+    // Lower factor (was 18) damps the glove jitter caused by noisy
+    // landmarks while keeping a responsive feel.
+    group.position.lerp(_targetPosition, Math.min(1, delta * 12));
+    group.quaternion.slerp(_targetQuaternion, Math.min(1, delta * 12));
 
     const palmLength = _wristPosition.distanceTo(_middlePosition);
     const scale = palmLength * GLOVE_MODEL_SCALE;
-    group.scale.setScalar(scale);
+    // Both gloves use the gant_l mesh; flip X for the right hand so the
+    // thumb ends up on the correct side instead of being a left-glove
+    // clone on the right hand.
+    const mirrorSignX = handedness === "right" ? -1 : 1;
+    group.scale.set(scale * mirrorSignX, scale, scale);
     group.updateMatrixWorld(true);
     applyFingerPose(fingerPoseChains, trackedHand.landmarks, camera);
   });

src/components/three/interaction/GrabbableObject.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { RigidBody } from "@react-three/rapier";
 import type { RapierRigidBody } from "@react-three/rapier";
@@ -34,6 +34,9 @@ interface GrabbableObjectProps {
   colliders?: ColliderShape;
   label?: string;
   handControlled?: boolean;
+  disabled?: boolean;
+  lockUntilGrab?: boolean;
+  onGrabChange?: (held: boolean) => void;
   onPositionChange?: (position: THREE.Vector3) => void;
   onSnap?: (position: THREE.Vector3) => void;
   snapDuration?: number;
@@ -131,6 +134,9 @@ export function GrabbableObject({
   colliders = GRAB_DEFAULT_COLLIDERS,
   label = GRAB_DEFAULT_LABEL,
   handControlled = false,
+  disabled = false,
+  lockUntilGrab = false,
+  onGrabChange,
   onPositionChange,
   onSnap,
   snapDuration = 0.25,
@@ -144,6 +150,7 @@ export function GrabbableObject({
   const rbRef = useRef<RapierRigidBody>(null);
   const isHolding = useRef(false);
   const isHandHolding = useRef(false);
+  const [hasBeenGrabbed, setHasBeenGrabbed] = useState(false);
   const snapTween = useRef<gsap.core.Tween | null>(null);
 
   useEffect(() => {
@@ -152,6 +159,19 @@ export function GrabbableObject({
     };
   }, []);
 
+  useEffect(() => {
+    if (!disabled) return;
+    if (isHolding.current) {
+      isHolding.current = false;
+      onGrabChange?.(false);
+    }
+    if (isHandHolding.current) {
+      isHandHolding.current = false;
+      InteractionManager.getInstance().setHandHolding(false);
+      onGrabChange?.(false);
+    }
+  }, [disabled, onGrabChange]);
+
   function snapToNearestTarget(): void {
     const body = rbRef.current;
     if (!body || snapTargets.length === 0 || snapRadius <= 0) return;
@@ -242,14 +262,16 @@ export function GrabbableObject({
   useFrame(() => {
     if (!rbRef.current) return;
 
-    const fistHand = handControlled
-      ? hands.find((hand) => hand.isFist)
-      : undefined;
-
     const t = rbRef.current.translation();
     _currentPos.set(t.x, t.y, t.z);
     onPositionChange?.(_currentPos);
 
+    if (disabled) return;
+
+    const fistHand = handControlled
+      ? hands.find((hand) => hand.isFist)
+      : undefined;
+
     if (fistHand) {
       const handCenter = getHandCenterPoint(fistHand);
 
@@ -267,15 +289,21 @@ export function GrabbableObject({
           ? getHandHit(groupRef.current, camera, _cameraPos, handCenter)
           : null;
 
-        isHandHolding.current = Boolean(hit);
-        InteractionManager.getInstance().setHandHolding(isHandHolding.current);
+        const hadHit = Boolean(hit);
+        if (hadHit) {
+          setHasBeenGrabbed(true);
+          isHandHolding.current = true;
+          InteractionManager.getInstance().setHandHolding(true);
+          onGrabChange?.(true);
+        }
       }
     } else {
       if (isHandHolding.current) {
         snapToNearestTarget();
-      }
         isHandHolding.current = false;
         InteractionManager.getInstance().setHandHolding(false);
+        onGrabChange?.(false);
+      }
     }
 
     if (!isHolding.current && !isHandHolding.current) return;
@@ -306,21 +334,27 @@ export function GrabbableObject({
     <group ref={spaceRef}>
       <RigidBody
         ref={rbRef}
-        type="dynamic"
+        type={lockUntilGrab && !hasBeenGrabbed ? "fixed" : "dynamic"}
         colliders={colliders}
         position={position}
       >
         <group ref={groupRef}>
+          {disabled ? (
+            children
+          ) : (
             <InteractableObject
               kind="grab"
               label={label}
               position={position}
               bodyRef={rbRef}
               onPress={() => {
+                setHasBeenGrabbed(true);
                 isHolding.current = true;
+                onGrabChange?.(true);
               }}
               onRelease={() => {
                 isHolding.current = false;
+                onGrabChange?.(false);
                 snapToNearestTarget();
                 if (
                   !rbRef.current ||
@@ -340,6 +374,7 @@ export function GrabbableObject({
             >
               {children}
             </InteractableObject>
+          )}
         </group>
       </RigidBody>
     </group>

src/components/three/models/ExplodableModel.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
-import { Component, useEffect, useMemo } from "react";
+import { Component, useCallback, useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
 import { useFrame } from "@react-three/fiber";
 import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
 import { useClonedObject } from "@/hooks/three/useClonedObject";
@@ -9,6 +10,10 @@ import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
 import { logModelLoadError } from "@/utils/three/modelLoadLogger";
 import { toVector3Scale } from "@/utils/three/scale";
 
+export type ExplodedNodeAnchors = Readonly<Record<string, Vector3Tuple>>;
+
+const _anchorWorld = new THREE.Vector3();
+
 interface ModelErrorBoundaryProps {
   children: ReactNode;
   modelPath: string;
@@ -66,7 +71,22 @@ interface ExplodableModelInnerProps extends ModelTransformProps {
   modelPath: string;
   split: boolean;
   splitDistance?: number;
+  /**
+   * Lerp speed for the explode/reassemble animation. Lower = slower.
+   * Defaults to ExplodedModel's internal default (6) when omitted.
+   */
+  splitSpeed?: number;
+  splitDurationSeconds?: number;
   onPartsReady?: (parts: readonly ExplodedPart[]) => void;
+  /**
+   * Fired once each time the explode/reassemble lerp converges on its
+   * target. `settledAt` is 1 when the parts have fully separated, 0
+   * when they have fully snapped back to their original positions.
+   */
+  onSplitSettled?: (settledAt: 0 | 1) => void;
+  hideNodeNames?: readonly string[];
+  nodeAnchorNames?: readonly string[];
+  onNodeAnchorsChange?: (anchors: ExplodedNodeAnchors) => void;
 }
 
 export function ExplodableModel(
@@ -92,7 +112,13 @@ function ExplodableModelInner({
   rotation = [0, 0, 0],
   scale = 1,
   splitDistance = 1.2,
+  splitSpeed,
+  splitDurationSeconds,
   onPartsReady,
+  onSplitSettled,
+  hideNodeNames,
+  nodeAnchorNames,
+  onNodeAnchorsChange,
 }: ExplodableModelInnerProps): React.JSX.Element {
   const { scene } = useLoggedGLTF(modelPath, {
     scope: "ExplodableModel",
@@ -101,11 +127,52 @@ function ExplodableModelInner({
     scale,
   });
   const model = useClonedObject(scene);
+  // Keep the latest callback in a ref so the ExplodedModel instance can
+  // be created once per `model` and still call the most recent prop
+  // when the lerp settles. Reading `.current` happens only inside the
+  // settled-callback (invoked from update(), never during render).
+  const onSplitSettledRef = useRef(onSplitSettled);
+  useEffect(() => {
+    onSplitSettledRef.current = onSplitSettled;
+  }, [onSplitSettled]);
+  const handleSettled = useCallback((settledAt: 0 | 1) => {
+    onSplitSettledRef.current?.(settledAt);
+  }, []);
+
   const explodedModel = useMemo(
-    () => new ExplodedModel(model, { distance: splitDistance }),
-    [model, splitDistance],
+    () =>
+      // The `handleSettled` callback only reads `onSplitSettledRef.current`
+      // when invoked from `update()` (useFrame), never during render.
+      // eslint-disable-next-line react-hooks/refs
+      new ExplodedModel(model, {
+        distance: splitDistance,
+        ...(splitDurationSeconds !== undefined
+          ? { durationSeconds: splitDurationSeconds }
+          : {}),
+        ...(splitSpeed !== undefined ? { speed: splitSpeed } : {}),
+        onSettled: handleSettled,
+      }),
+    [model, splitDistance, splitDurationSeconds, splitSpeed, handleSettled],
   );
   const parsedScale = toVector3Scale(scale);
+  const anchorSignatureRef = useRef("");
+
+  useEffect(() => {
+    if (!hideNodeNames || hideNodeNames.length === 0) return;
+    const hidden: THREE.Object3D[] = [];
+    model.traverse((child) => {
+      if (hideNodeNames.includes(child.name)) {
+        hidden.push(child);
+        child.visible = false;
+      }
+    });
+
+    return () => {
+      hidden.forEach((object) => {
+        object.visible = true;
+      });
+    };
+  }, [hideNodeNames, model]);
 
   useEffect(() => {
     explodedModel.setSplit(split);
@@ -117,6 +184,35 @@ function ExplodableModelInner({
 
   useFrame((_, delta) => {
     explodedModel.update(delta);
+
+    if (
+      !onNodeAnchorsChange ||
+      !nodeAnchorNames ||
+      nodeAnchorNames.length === 0
+    ) {
+      return;
+    }
+
+    const anchors: Record<string, Vector3Tuple> = {};
+    nodeAnchorNames.forEach((name) => {
+      const node = model.getObjectByName(name);
+      if (!node) return;
+      node.getWorldPosition(_anchorWorld);
+      anchors[name] = [_anchorWorld.x, _anchorWorld.y, _anchorWorld.z];
+    });
+
+    const signature = nodeAnchorNames
+      .map((name) => {
+        const a = anchors[name];
+        return a
+          ? `${name}:${a[0].toFixed(3)},${a[1].toFixed(3)},${a[2].toFixed(3)}`
+          : `${name}:?`;
+      })
+      .join("|");
+
+    if (signature === anchorSignatureRef.current) return;
+    anchorSignatureRef.current = signature;
+    onNodeAnchorsChange(anchors);
   });
 
   return (

src/components/three/models/SimpleModel.tsx

@@ -17,10 +17,29 @@ function applyShadowSettings(
   });
 }
 
+function applyOpacity(object: THREE.Object3D, opacity: number): void {
+  object.traverse((child) => {
+    if (!(child instanceof THREE.Mesh)) return;
+
+    const materials = Array.isArray(child.material)
+      ? child.material
+      : [child.material];
+
+    materials.forEach((material) => {
+      if (!(material instanceof THREE.Material)) return;
+      material.transparent = opacity < 1;
+      material.opacity = opacity;
+      material.depthWrite = opacity >= 1;
+      material.needsUpdate = true;
+    });
+  });
+}
+
 interface SimpleModelConfig extends ModelTransformProps {
   modelPath: string;
   castShadow?: boolean;
   receiveShadow?: boolean;
+  opacity?: number;
 }
 
 interface SimpleModelProps extends SimpleModelConfig {
@@ -34,6 +53,7 @@ export function SimpleModel({
   scale = 1,
   castShadow = true,
   receiveShadow = true,
+  opacity = 1,
   children,
 }: SimpleModelProps): React.JSX.Element {
   const { scene } = useLoggedGLTF(modelPath, {
@@ -48,6 +68,10 @@ export function SimpleModel({
     applyShadowSettings(model, castShadow, receiveShadow);
   }, [castShadow, model, receiveShadow]);
 
+  useEffect(() => {
+    applyOpacity(model, opacity);
+  }, [model, opacity]);
+
   const parsedScale =
     typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
 

src/components/ui/GameUI.tsx

@@ -1,23 +1,29 @@
 import { Crosshair } from "@/components/ui/Crosshair";
 import { DebugOverlayLayout } from "@/components/ui/debug/DebugOverlayLayout";
 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

@@ -0,0 +1,123 @@
+import { useHandTrackingSnapshot } from "@/hooks/handTracking/useHandTrackingSnapshot";
+import {
+  useHandTrackingGloveStatus,
+  type HandTrackingGloveHandedness,
+} from "@/hooks/handTracking/useHandTrackingGloveStatus";
+
+// Hand silhouettes used as a last-resort fallback when the rigged glove
+// model has failed to load. Both icons share a 100x120 viewBox so finger
+// lengths and the thumb angle stay anatomically readable.
+
+const OpenHandShape = (): React.JSX.Element => (
+  <path
+    d="M 28 116
+       Q 22 100 22 80
+       Q 22 65 28 58
+       Q 22 52 14 46
+       Q 6 40 8 28
+       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 => (
+  <>
+    <path
+      d="M 18 70
+         Q 14 50 24 38
+         Q 28 30 36 34
+         Q 40 26 48 30
+         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" />
+  </>
+);
+
+function getHandedness(raw: string): HandTrackingGloveHandedness | null {
+  const lower = raw.toLowerCase();
+  if (lower === "left" || lower === "right") return lower;
+  return null;
+}
+
+export function HandTrackingFallback(): React.JSX.Element | null {
+  const { hands } = useHandTrackingSnapshot();
+  const gloveStatus = useHandTrackingGloveStatus((state) => state.gloves);
+
+  const visibleHands = hands.flatMap((hand, index) => {
+    const handedness = getHandedness(hand.handedness);
+    if (!handedness) return [];
+    if (gloveStatus[handedness] !== "error") return [];
+
+    const wrist = hand.landmarks[0];
+    if (!wrist) return [];
+
+    return [{ hand, handedness, wrist, index }];
+  });
+
+  if (visibleHands.length === 0) return null;
+
+  return (
+    <div className="hand-tracking-fallback" aria-hidden="true">
+      {visibleHands.map(({ hand, handedness, wrist, index }) => {
+        // MediaPipe coords are mirrored (selfie cam), keep the same
+        // mapping the SVG visualizer uses.
+        const leftPercent = (1 - wrist.x) * 100;
+        const topPercent = wrist.y * 100;
+        const flipX = handedness === "right" ? -1 : 1;
+
+        return (
+          <svg
+            key={`${handedness}-${index}`}
+            className="hand-tracking-fallback__icon"
+            viewBox="0 0 100 120"
+            style={{
+              left: `${leftPercent}%`,
+              top: `${topPercent}%`,
+              transform: `translate(-50%, -50%) scaleX(${flipX})`,
+            }}
+          >
+            {hand.isFist ? <FistShape /> : <OpenHandShape />}
+          </svg>
+        );
+      })}
+    </div>
+  );
+}