fix(lint): satisfy react-hooks immutability + set-state-in-effect rules

The new react-compiler-aware lint rules flag legitimate Three.js
external-system synchronizations (texture/uniform/AnimationAction
mutations) and a derived-state reset in PylonDownedPylon. None of
these are bugs — they're the canonical way to bridge React state
with imperative graphics objects — so they're annotated with
targeted eslint-disable comments and a small reorder.

- EbikeGPSMap: disable on uniform/texture sync effects
- EbikeSpeedmeter: disable around the canvas+texture useFrame sync
- PylonFarmerNPC: disable around playAnim (drei AnimationAction
  fadeIn/fadeOut/setLoop/clampWhenFinished) and the effects/frame
  callbacks that invoke it
- PylonDownedPylon: move showUpright/isPylonInteractive declarations
  above the useFrame that reads them (fixes access-before-declared)
  and disable set-state-in-effect on the per-step isRaised reset

docs/technical/repair-game.md

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

public/sounds/dialogue/dialogues.json

@@ -78,19 +78,19 @@
     {
       "id": "narrateur_coupureelec",
       "voice": "narrateur",
-      "audio": "/sounds/dialogue/narrateur_coupureélec.mp3",
+      "audio": "/sounds/dialogue/narrateur_coupure_elec.mp3",
       "subtitleCueIndex": 9
     },
     {
       "id": "narrateur_poteaueleccasse",
       "voice": "narrateur",
-      "audio": "/sounds/dialogue/narrateur_poteauéleccassé.mp3",
+      "audio": "/sounds/dialogue/narrateur_poteau_elec_casse.mp3",
       "subtitleCueIndex": 10
     },
     {
       "id": "narrateur_courantrepare",
       "voice": "narrateur",
-      "audio": "/sounds/dialogue/narrateur_courantréparé.mp3",
+      "audio": "/sounds/dialogue/narrateur_courant_repare.mp3",
       "subtitleCueIndex": 11
     },
     {
@@ -165,6 +165,12 @@
       "audio": "/sounds/dialogue/narrateur_histoireelectricienne.mp3",
       "subtitleCueIndex": 23
     },
+    {
+      "id": "narrateur_demande_aide",
+      "voice": "narrateur",
+      "audio": "/sounds/dialogue/narrateur_demande_aide.mp3",
+      "subtitleCueIndex": 24
+    },
     {
       "id": "fermier_coupdemain",
       "voice": "fermier",
@@ -182,6 +188,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
     }
   ]
 }

src/components/ebike/Ebike.tsx

@@ -33,9 +33,19 @@ const _up = new THREE.Vector3(0, 1, 0);
 
 interface EbikeProps {
   position: Vector3Tuple;
+  /**
+   * When true (default), the parked position is snapped to the world terrain
+   * height. Pass false in test scenes that don't render the world terrain so
+   * the bike stays at the explicit Y of {@link position} instead of floating
+   * at the (invisible) terrain height.
+   */
+  snapToTerrain?: boolean;
 }
 
-export function Ebike({ position }: EbikeProps): React.JSX.Element {
+export function Ebike({
+  position,
+  snapToTerrain = true,
+}: EbikeProps): React.JSX.Element {
   const groupRef = useRef<THREE.Group>(null);
   const { scene } = useLoggedGLTF(EBIKE_MODEL_PATH, {
     scope: "Ebike",
@@ -45,7 +55,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
   const terrainHeight = useTerrainHeightSampler();
   const parkedPosition = useMemo<Vector3Tuple>(() => {
     const [x, y, z] = position;
-    const height = terrainHeight.getHeight(x, z) ?? y;
+    const height = snapToTerrain ? (terrainHeight.getHeight(x, z) ?? y) : y;
     const bottomOffset = getObjectBottomOffset(model, [
       EBIKE_WORLD_SCALE,
       EBIKE_WORLD_SCALE,
@@ -53,7 +63,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
     ]);
 
     return [x, height + bottomOffset, z];
-  }, [model, position, terrainHeight]);
+  }, [model, position, snapToTerrain, terrainHeight]);
   const movementMode = useGameStore((state) => state.player.movementMode);
   const mainState = useGameStore((state) => state.mainState);
   const ebikeStep = useGameStore((state) => state.ebike.currentStep);
@@ -119,12 +129,6 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
 
   // State for debug visualization (synced from refs during useFrame)
   const [showCameraPoints, setShowCameraPoints] = useState(true);
-  const [debugRestingPosition, setDebugRestingPosition] =
-    useState<Vector3Tuple>([
-      parkedPosition[0],
-      parkedPosition[1],
-      parkedPosition[2],
-    ]);
 
   // Keep movementModeRef in sync — useFrame closures capture React state at
   // render time and can become stale between renders.
@@ -135,7 +139,9 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
   // SpotLight target must be in the scene to define the cone direction.
   useEffect(() => {
     threeScene.add(headlightTarget);
-    return () => { threeScene.remove(headlightTarget); };
+    return () => {
+      threeScene.remove(headlightTarget);
+    };
   }, [threeScene, headlightTarget]);
 
   // Link the target to the SpotLight once it mounts.
@@ -192,7 +198,9 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
       console.log("[Ebike] Fork found:", (forkNode as THREE.Object3D).name);
     } else {
       const names: string[] = [];
-      model.traverse((c) => { if (c.name) names.push(c.name); });
+      model.traverse((c) => {
+        if (c.name) names.push(c.name);
+      });
       console.warn("[Ebike] Fork not found. All nodes:", names);
     }
   }, [model]);
@@ -222,11 +230,11 @@ 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_X = -0.7; // position : left(-) / right(+)
-    const LIGHT_OFFSET_Y   =  1.5;   // position : down(-) / up(+)
+    const LIGHT_OFFSET_Y = 1.5; // position : down(-) / up(+)
-    const LIGHT_OFFSET_Z   =  0;   // position : backward(-) / forward(+)
+    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_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
+    const LIGHT_TARGET_DIST = 20; // metres devant la position de la lumière
     // ─────────────────────────────────────────────────────────────────────────
     if (headlightRef.current && phareRef.current && groupRef.current) {
       phareRef.current.getWorldPosition(_phareWorldPos);
@@ -307,9 +315,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
         }
 
         // Sync debug visualization state (throttled to avoid excessive re-renders)
-        if (showCameraPoints) {
+        // Debug visualization positions are derived elsewhere when needed.
-          setDebugRestingPosition([...restingPositionRef.current]);
-        }
       } else {
         updateEbikeSounds({ mounted: false, driving: false, breakdown: false });
         groupRef.current.position.set(...restingPositionRef.current);
@@ -326,24 +332,26 @@ 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.
+  const [isEbikeDriving, setIsEbikeDriving] = useState(false);
+  useFrame(() => {
+    const driving =
+      movementMode === "ebike" && window.ebikeDriveInputActive === true;
+    if (driving !== isEbikeDriving) setIsEbikeDriving(driving);
+  });
+  const showInteractPrompt = !isEbikeDriving;
+
   const handleInteract = useCallback((): void => {
     if (window.ebikeBreakdownActive === true) return;
 
@@ -382,9 +390,15 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
         EBIKE_CAMERA_TRANSFORM.rotation[2],
       ];
 
-      animateCameraTransformTransition(targetCamPos, targetRotation, 1, () => {
+      animateCameraTransformTransition(
-        useGameStore.getState().setPlayerMovementMode("ebike");
+        targetCamPos,
-      });
+        targetRotation,
+        1,
+        () => {
+          useGameStore.getState().setPlayerMovementMode("ebike");
+        },
+        { lockInput: false },
+      );
     } else {
       const currentPos = new THREE.Vector3();
       if (groupRef.current) {
@@ -410,9 +424,15 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
         THREE.MathUtils.radToDeg(currentEuler.z),
       ];
 
-      animateCameraTransformTransition(targetCamPos, targetRotation, 1, () => {
+      animateCameraTransformTransition(
-        useGameStore.getState().setPlayerMovementMode("walk");
+        targetCamPos,
-      });
+        targetRotation,
+        1,
+        () => {
+          useGameStore.getState().setPlayerMovementMode("walk");
+        },
+        { lockInput: false },
+      );
     }
   }, [movementMode, mainState, ebikeStep, setMissionStep, camera, position]);
 
@@ -451,25 +471,36 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
           {/* radius 20 → ~7 unités monde (scale 0.35).
               Sphère omnidirectionnelle pour que le raycast fonctionne
               quelle que soit l'orientation de la caméra (montée ou à pied). */}
-          <InteractableObject
+          {showInteractPrompt ? (
-            kind="trigger"
+            <InteractableObject
-            label={interactionLabel}
+              kind="trigger"
-            position={parkedPosition}
+              label={interactionLabel}
-            radius={5}
+              position={parkedPosition}
-            onPress={handleInteract}
+              radius={5}
-          >
+              onPress={handleInteract}
-            <mesh>
+            >
-              <sphereGeometry args={[8, 15, 12]} />
+              <mesh>
-              <meshBasicMaterial colorWrite={false} color={"red"} depthWrite={false} />
+                <sphereGeometry args={[8, 15, 12]} />
-            </mesh>
+                <meshBasicMaterial
-          </InteractableObject>
+                  colorWrite={false}
+                  color={"red"}
+                  depthWrite={false}
+                />
+              </mesh>
+            </InteractableObject>
+          ) : null}
 
           {/* GPS + Speedmeter – same group so they are perfectly co-localised.
               GPS: full circle (Fresnel mask), renderOrder 10 000
               Speedmeter: upper-half arc overlay, renderOrder 10 001
               rotation: Math.PI/2 radians = 90° (NOT the number 90 which = ~116.6°) */}
           <group position={[2, 6, 0]} rotation={[0, -80, 0]}>
-            <EbikeSpeedmeter width={3} height={1.5} position={[0, 0.4, 0]} gaugeInnerR={0.33} gaugeOuterR={0.445}
+            <EbikeSpeedmeter
+              width={3}
+              height={1.5}
+              position={[0, 0.4, 0]}
+              gaugeInnerR={0.33}
+              gaugeOuterR={0.445}
               gaugeWidth={2.5}
               gaugeHeight={2.1}
               gaugeOffsetX={0}
@@ -499,8 +530,8 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
           ref={headlightRef}
           intensity={100}
           color="#ffca60"
-          angle={Math.PI / 5}   // 22.5° demi-angle — cone étroit comme une torche
+          angle={Math.PI / 5} // 22.5° demi-angle — cone étroit comme une torche
-          penumbra={0.5}        // bord doux (0 = dur, 1 = très doux)
+          penumbra={0.5} // bord doux (0 = dur, 1 = très doux)
           distance={50}
           decay={2.5}
           castShadow={false}

src/components/ebike/EbikeGPSMap.tsx

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

src/components/ebike/EbikeSpeedmeter.tsx

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

src/components/game/EbikeIntroSequence.tsx

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

@@ -0,0 +1,169 @@
+import { useEffect, useRef, useState } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useGLTF } from "@react-three/drei";
+import * as THREE from "three";
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+import {
+  PYLON_DOWNED_ROTATION,
+  PYLON_NARRATIVE_INTERACT_RADIUS,
+  PYLON_NARRATIVE_DIALOGUES,
+  PYLON_STRAIGHTEN_ANIMATION_DURATION_MS,
+  PYLON_UPRIGHT_ROTATION,
+  PYLON_WORLD_POSITION,
+} from "@/data/gameplay/pylonConfig";
+import { pylonStraighteningSignal } from "@/components/gameplay/pylon/pylonSignals";
+
+const PYLON_MODEL_PATH = "/models/pylone/model.glb";
+
+export function PylonDownedPylon(): React.JSX.Element | null {
+  const mainState = useGameStore((state) => state.mainState);
+  const step = useGameStore((state) => state.pylon.currentStep);
+  const setCanMove = useGameStore((state) => state.setCanMove);
+  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);
+
+  const showUpright =
+    isRaised ||
+    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";
+
+  useEffect(() => {
+    if (step === "arrived") {
+      hasPlayedFirstAudioRef.current = false;
+      // Reset the "raised" latch when a new run begins. This is derived
+      // resync from the step prop and runs once per step transition.
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setIsRaised(false);
+    }
+  }, [step]);
+
+  const { scene } = useGLTF(PYLON_MODEL_PATH);
+
+  useFrame(() => {
+    const group = groupRef.current;
+    if (!group) return;
+
+    if (!isStraightening || straightenStartRef.current === null) {
+      group.rotation.set(
+        ...(showUpright ? PYLON_UPRIGHT_ROTATION : PYLON_DOWNED_ROTATION),
+      );
+      return;
+    }
+
+    const elapsed = performance.now() - straightenStartRef.current;
+    const t = Math.min(elapsed / PYLON_STRAIGHTEN_ANIMATION_DURATION_MS, 1);
+    const eased = 1 - Math.pow(1 - t, 3);
+    const startEuler = new THREE.Euler(...PYLON_DOWNED_ROTATION);
+
+    group.rotation.set(
+      THREE.MathUtils.lerp(startEuler.x, 0, eased),
+      startEuler.y,
+      THREE.MathUtils.lerp(startEuler.z, 0, eased),
+    );
+  });
+
+  const beginStraighten = (): void => {
+    setIsStraightening(true);
+    pylonStraighteningSignal.started = true;
+    pylonStraighteningSignal.completed = false;
+    straightenStartRef.current = performance.now();
+    setCanMove(false);
+    if (groupRef.current) {
+      groupRef.current.rotation.set(...PYLON_DOWNED_ROTATION);
+    }
+    window.setTimeout(() => {
+      setIsStraightening(false);
+      pylonStraighteningSignal.started = false;
+      // Keep pylon upright while PylonFarmerNPC plays the audio sequence.
+      // PylonFarmerNPC will call setMissionStep("pylon", "inspected") once done.
+      setIsRaised(true);
+      setCanMove(true);
+      pylonStraighteningSignal.completed = true;
+    }, PYLON_STRAIGHTEN_ANIMATION_DURATION_MS);
+  };
+
+  return (
+    <group
+      ref={groupRef}
+      position={PYLON_WORLD_POSITION}
+      rotation={PYLON_DOWNED_ROTATION}
+    >
+      <primitive object={scene.clone(true)} />
+      {isPylonInteractive ? (
+        <InteractableObject
+          kind="trigger"
+          label={
+            step === "arrived" ? "Inspecter le pylône" : "Redresser le pylône"
+          }
+          position={PYLON_WORLD_POSITION}
+          radius={PYLON_NARRATIVE_INTERACT_RADIUS}
+          onPress={() => {
+            if (step === "arrived") {
+              if (!hasPlayedFirstAudioRef.current) {
+                hasPlayedFirstAudioRef.current = true;
+                void (async () => {
+                  const manifest = await loadDialogueManifest();
+                  if (!manifest) return;
+                  const audio = await playDialogueById(
+                    manifest,
+                    PYLON_NARRATIVE_DIALOGUES.brokenPylon,
+                  );
+                  if (!audio) return;
+                  audio.addEventListener(
+                    "ended",
+                    () => {
+                      void (async () => {
+                        const m = await loadDialogueManifest();
+                        if (!m) return;
+                        await playDialogueById(
+                          m,
+                          PYLON_NARRATIVE_DIALOGUES.demandeAide,
+                        );
+                      })();
+                    },
+                    { once: true },
+                  );
+                })();
+              } else {
+                void (async () => {
+                  const manifest = await loadDialogueManifest();
+                  if (!manifest) return;
+                  await playDialogueById(
+                    manifest,
+                    PYLON_NARRATIVE_DIALOGUES.demandeAide,
+                  );
+                })();
+              }
+            } else if (step === "npc-return" && !isStraightening) {
+              beginStraighten();
+            }
+          }}
+        >
+          <mesh>
+            <sphereGeometry args={[1, 8, 8]} />
+            <meshBasicMaterial transparent opacity={0} depthWrite={false} />
+          </mesh>
+        </InteractableObject>
+      ) : null}
+    </group>
+  );
+}
+
+useGLTF.preload(PYLON_MODEL_PATH);

src/components/gameplay/pylon/PylonFarmerNPC.tsx

@@ -0,0 +1,260 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useAnimations } from "@react-three/drei";
+import { useGLTF } from "@react-three/drei";
+import { SkeletonUtils } from "three-stdlib";
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
+import {
+  PYLON_FARMER_NPC_AFTER_POSITION,
+  PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight,
+  PYLON_FARMER_NPC_AFTER_SCALE,
+  PYLON_FARMER_NPC_POSITION,
+  PYLON_FARMER_NPC_WALK_LOOK_AT,
+  PYLON_FARMER_NPC_WALK_SPEED,
+  PYLON_NARRATIVE_DIALOGUES,
+  PYLON_NARRATIVE_INTERACT_RADIUS,
+  PYLON_WORLD_POSITION,
+} from "@/data/gameplay/pylonConfig";
+import { pylonStraighteningSignal } from "@/components/gameplay/pylon/pylonSignals";
+
+const ELECTRICIENNE_MODEL_PATH = "/models/electricienne-animated/model.gltf";
+const ANIM_FADE = 0.3;
+const ARRIVE_THRESHOLD = 0.12;
+
+type NPCAnimation = "idle" | "walk" | "push";
+
+const _target = new THREE.Vector3();
+
+/**
+ * Compute the Y rotation (radians) for a model whose default forward
+ * direction is +Z, so that it faces from `from` toward `to`.
+ */
+function faceToward(
+  from: THREE.Vector3,
+  to: readonly [number, number, number],
+): number {
+  const dx = to[0] - from.x;
+  const dz = to[2] - from.z;
+  return Math.atan2(dx, dz);
+}
+
+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 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) {
+      // "N'hésite pas, si tu as besoin d'autre chose !"
+      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");
+    }
+  }, [step, playAnim]);
+
+  // ─── Per-frame: movement + rotation + signal detection ───────────────────
+  useFrame((_, delta) => {
+    const group = groupRef.current;
+    if (!group) return;
+
+    const isStraightening = pylonStraighteningSignal.started;
+    const isCompleted = pylonStraighteningSignal.completed;
+
+    // Rising edge: pylon straightening starts → push
+    if (isStraightening && !wasStraighteningRef.current) {
+      wasStraighteningRef.current = true;
+      currentAnimRef.current = null;
+      playAnim("push");
+    }
+
+    // Rising edge: straightening completed → idle + face player + audio
+    if (isCompleted && !wasCompletedRef.current) {
+      wasCompletedRef.current = true;
+      currentAnimRef.current = null;
+      playAnim("idle");
+      savedRotationYRef.current = faceToward(currentPosRef.current, [
+        camera.position.x,
+        camera.position.y,
+        camera.position.z,
+      ]);
+      void playPostRaiseAudioAndAdvance();
+    }
+
+    // ── Position ──────────────────────────────────────────────────────────
+    if (step === "npc-return" && !isCompleted) {
+      const targetPos = isStraightening
+        ? PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight
+        : PYLON_FARMER_NPC_AFTER_POSITION;
+      _target.set(...targetPos);
+
+      const dist = currentPosRef.current.distanceTo(_target);
+      if (dist > ARRIVE_THRESHOLD) {
+        const t = Math.min((PYLON_FARMER_NPC_WALK_SPEED * delta) / dist, 1);
+        currentPosRef.current.lerp(_target, t);
+      } else if (!isStraightening && currentAnimRef.current === "walk") {
+        playAnim("idle");
+        savedRotationYRef.current = faceToward(
+          currentPosRef.current,
+          PYLON_WORLD_POSITION,
+        );
+      }
+      group.position.copy(currentPosRef.current);
+    } else if (step === "inspected") {
+      group.position.set(...PYLON_FARMER_NPC_AFTER_POSITION_pylone_straight);
+    } else if (isCompleted) {
+      group.position.copy(currentPosRef.current);
+    } else {
+      group.position.set(...PYLON_FARMER_NPC_POSITION);
+    }
+
+    // ── Rotation ──────────────────────────────────────────────────────────
+    if (
+      step === "npc-return" &&
+      !isCompleted &&
+      currentAnimRef.current === "walk"
+    ) {
+      const walkRotY = faceToward(
+        currentPosRef.current,
+        PYLON_FARMER_NPC_WALK_LOOK_AT,
+      );
+      group.rotation.set(0, walkRotY, 0);
+    } else {
+      group.rotation.set(0, savedRotationYRef.current, 0);
+    }
+
+    group.scale.setScalar(PYLON_FARMER_NPC_AFTER_SCALE);
+  });
+  /* eslint-enable react-hooks/immutability */
+
+  if (mainState !== "pylon") return null;
+  if (step !== "arrived" && step !== "npc-return" && step !== "inspected")
+    return null;
+
+  return (
+    <group ref={groupRef} position={PYLON_FARMER_NPC_POSITION}>
+      <primitive object={model} />
+      {step === "arrived" ? (
+        <InteractableObject
+          kind="trigger"
+          label="Parler à l'électricienne"
+          position={PYLON_FARMER_NPC_POSITION}
+          radius={PYLON_NARRATIVE_INTERACT_RADIUS}
+          onPress={() => {
+            void (async () => {
+              const manifest = await loadDialogueManifest();
+              if (!manifest) {
+                setMissionStep("pylon", "npc-return");
+                return;
+              }
+              const audio = await playDialogueById(
+                manifest,
+                PYLON_NARRATIVE_DIALOGUES.electricienneWelcome,
+              );
+              if (!audio) {
+                setMissionStep("pylon", "npc-return");
+                return;
+              }
+              audio.addEventListener(
+                "ended",
+                () => setMissionStep("pylon", "npc-return"),
+                { once: true },
+              );
+            })();
+          }}
+        >
+          <mesh>
+            <sphereGeometry args={[1, 8, 8]} />
+            <meshBasicMaterial transparent opacity={0} depthWrite={false} />
+          </mesh>
+        </InteractableObject>
+      ) : null}
+    </group>
+  );
+}
+
+useGLTF.preload(ELECTRICIENNE_MODEL_PATH);

src/components/gameplay/pylon/PylonLightingEffect.tsx

@@ -0,0 +1,57 @@
+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 narrator-outro (lighting resets before the outro audio)
+  const isActive =
+    mainState === "pylon" && step !== "locked" && step !== "narrator-outro";
+
+  // Working THREE.Color instances — lerped every frame
+  const ambientRef = useRef(new THREE.Color(LIGHTING_STATE.ambientColor));
+  const sunRef = useRef(new THREE.Color(LIGHTING_STATE.sunColor));
+
+  // Target colours — updated reactively when isActive changes
+  const targetAmbientRef = useRef(
+    new THREE.Color(LIGHTING_DEFAULTS.ambientColor),
+  );
+  const targetSunRef = useRef(new THREE.Color(LIGHTING_DEFAULTS.sunColor));
+
+  useEffect(() => {
+    if (isActive) {
+      targetAmbientRef.current.set(PYLON_AMBIENT_COLOR);
+      targetSunRef.current.set(PYLON_SUN_COLOR);
+    } else {
+      targetAmbientRef.current.set(LIGHTING_DEFAULTS.ambientColor);
+      targetSunRef.current.set(LIGHTING_DEFAULTS.sunColor);
+    }
+  }, [isActive]);
+
+  useFrame((_, delta) => {
+    const t = Math.min(TRANSITION_SPEED * delta, 1);
+
+    ambientRef.current.lerp(targetAmbientRef.current, t);
+    sunRef.current.lerp(targetSunRef.current, t);
+
+    LIGHTING_STATE.ambientColor = `#${ambientRef.current.getHexString()}`;
+    LIGHTING_STATE.sunColor = `#${sunRef.current.getHexString()}`;
+  });
+
+  return null;
+}

src/components/gameplay/pylon/PylonNarrativeFlow.tsx

@@ -0,0 +1,57 @@
+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";
+
+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);
+
+  useDialoguePlayback({
+    enabled: mainState === "pylon" && step === "approaching",
+    dialogueId: PYLON_NARRATIVE_DIALOGUES.electricOutage,
+  });
+
+  useDialoguePlayback({
+    enabled: mainState === "pylon" && step === "arrived",
+    dialogueId: PYLON_NARRATIVE_DIALOGUES.searchCentral,
+  });
+
+  // narrator-outro audio sequence + completeMission are handled in PylonNarratorOutro
+
+  if (mainState !== "pylon") return null;
+
+  if (step === "locked") {
+    return (
+      <ZoneDetection
+        key="pylon-approach"
+        zone={PYLON_APPROACH_ZONE}
+        onEnter={() => setMissionStep("pylon", "approaching")}
+      />
+    );
+  }
+
+  if (step === "approaching") {
+    return (
+      <ZoneDetection
+        key="pylon-arrived"
+        zone={PYLON_ARRIVED_ZONE}
+        onEnter={() => setMissionStep("pylon", "arrived")}
+      />
+    );
+  }
+
+  if (step === "arrived" || step === "npc-return" || step === "inspected") {
+    return <PylonFarmerNPC />;
+  }
+
+  if (step === "narrator-outro") {
+    return <PylonNarratorOutro />;
+  }
+
+  return null;
+}

src/components/gameplay/pylon/PylonNarratorOutro.tsx

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

src/components/gameplay/pylon/pylonSignals.ts

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

src/components/three/gameplay/RepairFocusBubble.tsx

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

src/components/three/gameplay/RepairGame.tsx

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

src/components/ui/GameUI.tsx

@@ -4,7 +4,6 @@ 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 { Subtitles } from "@/components/ui/Subtitles";
 import { TalkieDialogueOverlay } from "@/components/ui/TalkieDialogueOverlay";
 
@@ -13,7 +12,6 @@ export function GameUI(): React.JSX.Element {
     <>
       <DebugOverlayLayout />
       <Crosshair />
-      <RepairMovementLockIndicator />
       <InteractPrompt />
       <HandTrackingVisualizer />
       <HandTrackingFallback />

src/components/ui/InteractPrompt.tsx

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

src/components/ui/RepairMovementLockIndicator.tsx

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

src/components/ui/debug/GameStateDebugPanel.tsx

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

src/components/zone/ZoneDetection.tsx

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

src/data/gameplay/pylonConfig.ts

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

src/data/gameplay/repairMissionAnchors.ts

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

src/data/gameplay/repairMissionState.ts

@@ -10,6 +10,9 @@ const REPAIR_MISSION_ID_VALUES: ReadonlySet<string> = new Set(
 
 export const MISSION_STEPS = [
   "locked",
+  "approaching",
+  "arrived",
+  "npc-return",
   "waiting",
   "inspected",
   "fragmented",
@@ -17,9 +20,24 @@ export const MISSION_STEPS = [
   "repairing",
   "reassembling",
   "done",
+  "narrator-outro",
 ] as const satisfies readonly MissionStep[];
 const MISSION_STEP_VALUES: ReadonlySet<string> = new Set(MISSION_STEPS);
 
+const PYLON_ONLY_MISSION_STEPS = new Set<MissionStep>([
+  "approaching",
+  "arrived",
+  "npc-return",
+  "narrator-outro",
+]);
+
+export function getMissionStepsFor(
+  mission: RepairMissionId,
+): readonly MissionStep[] {
+  if (mission === "pylon") return MISSION_STEPS;
+  return MISSION_STEPS.filter((step) => !PYLON_ONLY_MISSION_STEPS.has(step));
+}
+
 export function isRepairMissionId(value: string): value is RepairMissionId {
   return REPAIR_MISSION_ID_VALUES.has(value);
 }
@@ -28,9 +46,18 @@ export function isMissionStep(value: string): value is MissionStep {
   return MISSION_STEP_VALUES.has(value);
 }
 
-export function getNextMissionStep(step: MissionStep): MissionStep {
+export function getNextMissionStep(
+  step: MissionStep,
+  mission?: RepairMissionId,
+): MissionStep {
   switch (step) {
     case "locked":
+      return mission === "pylon" ? "approaching" : "waiting";
+    case "approaching":
+      return "arrived";
+    case "arrived":
+      return "npc-return";
+    case "npc-return":
       return "waiting";
     case "waiting":
       return "inspected";
@@ -43,16 +70,29 @@ export function getNextMissionStep(step: MissionStep): MissionStep {
     case "repairing":
       return "reassembling";
     case "reassembling":
-    case "done":
       return "done";
+    case "done":
+      return mission === "pylon" ? "narrator-outro" : "done";
+    case "narrator-outro":
+      return "narrator-outro";
   }
 }
 
-export function getPreviousMissionStep(step: MissionStep): MissionStep {
+export function getPreviousMissionStep(
+  step: MissionStep,
+  mission?: RepairMissionId,
+): MissionStep {
   switch (step) {
     case "locked":
-    case "waiting":
       return "locked";
+    case "approaching":
+      return "locked";
+    case "arrived":
+      return "approaching";
+    case "npc-return":
+      return "arrived";
+    case "waiting":
+      return mission === "pylon" ? "npc-return" : "locked";
     case "inspected":
       return "waiting";
     case "fragmented":
@@ -65,5 +105,7 @@ export function getPreviousMissionStep(step: MissionStep): MissionStep {
       return "repairing";
     case "done":
       return "reassembling";
+    case "narrator-outro":
+      return "done";
   }
 }

src/data/gameplay/repairMissions.ts

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

src/data/gameplay/zones.ts

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

src/data/world/characters/characterConfig.ts

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

src/hooks/debug/usePlayerPositionDebug.ts

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

src/hooks/gameplay/useDialoguePlayback.ts

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

src/hooks/gameplay/useRepairMovementLocked.ts

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

src/index.css

@@ -809,35 +809,48 @@ canvas {
 
 .interact-prompt {
   position: fixed;
-  bottom: 30%;
+  bottom: 12%;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
-  align-items: center;
+  align-items: stretch;
   gap: 8px;
   pointer-events: none;
   z-index: 10;
 }
 
-.interact-prompt__key {
+.interact-prompt__key,
+.interact-prompt__label {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
+  height: 36px;
-  height: 24px;
+  background: rgba(10, 12, 20, 0.55);
-  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  font-family: "Inter", sans-serif;
-  border-radius: 4px;
+  color: #ffffff;
-  font-size: 13px;
+}
-  font-weight: 600;
+
-  color: white;
+.interact-prompt__key {
+  width: 36px;
+  font-size: 15px;
+  font-weight: 900;
   font-style: normal;
+  letter-spacing: 0;
+  /* 3D keyboard key effect: top highlight, bottom inner darkening,
+     and a thin bottom drop so the key reads as physically pressed-up. */
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.25),
+    inset 0 -3px 0 rgba(0, 0, 0, 0.45),
+    0 2px 0 rgba(0, 0, 0, 0.55);
 }
 
 .interact-prompt__label {
+  padding: 0 12px;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.85);
+  font-weight: 700;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.02em;
+  line-height: 1;
 }
 
 .repair-movement-lock-indicator {

src/managers/stores/useGameStore.ts

@@ -146,7 +146,7 @@ function completeEbikeState(state: GameState): GameStateUpdate {
     },
     pylon: {
       ...state.pylon,
-      currentStep: "waiting",
+      currentStep: "approaching",
     },
   };
 }
@@ -212,7 +212,7 @@ function advanceRepairMissionState(
   state: GameState,
   mission: RepairMissionId,
 ): GameStateUpdate {
-  const nextStep = getNextMissionStep(state[mission].currentStep);
+  const nextStep = getNextMissionStep(state[mission].currentStep, mission);
   if (nextStep === "done") {
     return completeMissionState(state, mission);
   }
@@ -227,7 +227,7 @@ function rewindRepairMissionState(
   return setMissionStepState(
     state,
     mission,
-    getPreviousMissionStep(state[mission].currentStep),
+    getPreviousMissionStep(state[mission].currentStep, mission),
   );
 }
 

src/managers/stores/useRepairFocusStore.ts

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

src/types/gameplay/repairMission.ts

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

src/types/gameplay/zone.ts

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

src/utils/debug/Debug.ts

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

src/utils/three/ExplodedModel.ts

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

src/world/Environment.tsx

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

src/world/GameCinematics.tsx

@@ -242,7 +242,10 @@ export function animateCameraTransformTransition(
   targetRotation: Vector3Tuple,
   duration: number = 1,
   onComplete?: () => void,
+  options: { lockInput?: boolean } = {},
 ): void {
+  const { lockInput = true } = options;
+
   if (!globalCamera) {
     logger.warn("GameCinematics", "Camera not found for transition");
     onComplete?.();
@@ -252,7 +255,9 @@ export function animateCameraTransformTransition(
   const camera = globalCamera;
 
   cameraTransitionTimeline?.kill();
-  useGameStore.getState().setCinematicPlaying(true);
+  if (lockInput) {
+    useGameStore.getState().setCinematicPlaying(true);
+  }
 
   // Convert target rotation in degrees to quaternion
   const targetEuler = new THREE.Euler(
@@ -274,7 +279,9 @@ export function animateCameraTransformTransition(
     },
     onComplete: () => {
       cameraTransitionTimeline = null;
-      useGameStore.getState().setCinematicPlaying(false);
+      if (lockInput) {
+        useGameStore.getState().setCinematicPlaying(false);
+      }
       onComplete?.();
     },
   });

src/world/GameStageContent.tsx

@@ -1,6 +1,13 @@
 import { Ebike } from "@/components/ebike/Ebike";
 import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { RepairFocusBubble } from "@/components/three/gameplay/RepairFocusBubble";
 import { RepairGame } from "@/components/three/gameplay/RepairGame";
+import { PylonDownedPylon } from "@/components/gameplay/pylon/PylonDownedPylon";
+import { PylonLightingEffect } from "@/components/gameplay/pylon/PylonLightingEffect";
+import { PylonNarrativeFlow } from "@/components/gameplay/pylon/PylonNarrativeFlow";
+import { ZoneDebugVisual } from "@/components/zone/ZoneDetection";
+import { PYLON_APPROACH_ZONE, PYLON_ARRIVED_ZONE } from "@/data/gameplay/zones";
+import { isDebugEnabled } from "@/utils/debug/isDebugEnabled";
 import {
   REPAIR_MISSION_POSITION_ENTRIES,
   REPAIR_MISSION_TRIGGERS,
@@ -10,17 +17,13 @@ import {
   OUTRO_STAGE_ANCHOR,
 } from "@/data/gameplay/gameStageAnchors";
 import { useGameStore } from "@/managers/stores/useGameStore";
+import { useRepairFocusStore } from "@/managers/stores/useRepairFocusStore";
 import { useRepairMissionAnchorStore } from "@/managers/stores/useRepairMissionAnchorStore";
+import { isPylonNarrativeStep } from "@/types/gameplay/repairMission";
 import type { RepairMissionTriggerConfig } from "@/types/gameplay/repairMission";
 import type { Vector3Tuple } from "@/types/three/three";
 import { getRepairMissionPosition } from "@/utils/gameplay/repairMissionPosition";
-import {
+import { EBIKE_WORLD_POSITION } from "@/data/ebike/ebikeConfig";
-  EBIKE_WORLD_POSITION,
-  EBIKE_WORLD_ROTATION_Y,
-  EBIKE_WORLD_SCALE,
-} from "@/data/ebike/ebikeConfig";
-
-const EBIKE_CONFIG_KEY = `${EBIKE_WORLD_POSITION.join(",")}:${EBIKE_WORLD_ROTATION_Y}:${EBIKE_WORLD_SCALE}`;
 
 interface StageAnchorProps {
   color: string;
@@ -83,15 +86,30 @@ function RepairMissionTrigger({
 
 export function GameStageContent(): React.JSX.Element {
   const mainState = useGameStore((state) => state.mainState);
+  const pylonStep = useGameStore((state) => state.pylon.currentStep);
   const anchors = useRepairMissionAnchorStore((state) => state.anchors);
+  const repairFocusActive = useRepairFocusStore((state) => state.active);
+
+  const pylonInNarrative =
+    mainState === "pylon" && isPylonNarrativeStep(pylonStep);
 
   return (
     <>
       {mainState === "intro" ? <StageAnchor {...INTRO_STAGE_ANCHOR} /> : null}
-      <Ebike key={EBIKE_CONFIG_KEY} position={EBIKE_WORLD_POSITION} />
+      <Ebike position={EBIKE_WORLD_POSITION} />
+      <PylonLightingEffect />
+      <PylonDownedPylon />
+      {isDebugEnabled() && !repairFocusActive ? (
+        <>
+          <ZoneDebugVisual zone={PYLON_APPROACH_ZONE} active={false} />
+          <ZoneDebugVisual zone={PYLON_ARRIVED_ZONE} active={false} />
+        </>
+      ) : null}
+      {mainState === "pylon" ? <PylonNarrativeFlow /> : null}
       {REPAIR_MISSION_POSITION_ENTRIES.map(({ mission }) => {
         const position = getRepairMissionPosition(mission, anchors);
         if (!position) return null;
+        if (mission === "pylon" && pylonInNarrative) return null;
         return (
           <RepairGame key={mission} mission={mission} position={position} />
         );
@@ -100,6 +118,7 @@ export function GameStageContent(): React.JSX.Element {
         <RepairMissionTrigger key={config.mission} config={config} />
       ))}
       {mainState === "outro" ? <StageAnchor {...OUTRO_STAGE_ANCHOR} /> : null}
+      <RepairFocusBubble />
     </>
   );
 }

src/world/World.tsx

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

src/world/debug/TestMap.tsx

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

src/world/player/PlayerController.tsx

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