Merge branch 'develop' into feat/polish-mission-2

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_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
+    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);
@@ -307,9 +315,7 @@ 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);
@@ -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, () => {
-        useGameStore.getState().setPlayerMovementMode("ebike");
-      });
+      animateCameraTransformTransition(
+        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, () => {
-        useGameStore.getState().setPlayerMovementMode("walk");
-      });
+      animateCameraTransformTransition(
+        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
-            kind="trigger"
-            label={interactionLabel}
-            position={parkedPosition}
-            radius={5}
-            onPress={handleInteract}
-          >
-            <mesh>
-              <sphereGeometry args={[8, 15, 12]} />
-              <meshBasicMaterial colorWrite={false} color={"red"} depthWrite={false} />
-            </mesh>
-          </InteractableObject>
+          {showInteractPrompt ? (
+            <InteractableObject
+              kind="trigger"
+              label={interactionLabel}
+              position={parkedPosition}
+              radius={5}
+              onPress={handleInteract}
+            >
+              <mesh>
+                <sphereGeometry args={[8, 15, 12]} />
+                <meshBasicMaterial
+                  colorWrite={false}
+                  color={"red"}
+                  depthWrite={false}
+                />
+              </mesh>
+            </InteractableObject>
+          ) : null}
 
           {/* GPS + Speedmeter – same group so they are perfectly co-localised.
               GPS: full circle (Fresnel mask), renderOrder 10 000
               Speedmeter: upper-half arc overlay, renderOrder 10 001
               rotation: Math.PI/2 radians = 90° (NOT the number 90 which = ~116.6°) */}
           <group position={[2, 6, 0]} rotation={[0, -80, 0]}>
-            <EbikeSpeedmeter width={3} height={1.5} position={[0, 0.4, 0]} gaugeInnerR={0.33} gaugeOuterR={0.445}
+            <EbikeSpeedmeter
+              width={3}
+              height={1.5}
+              position={[0, 0.4, 0]}
+              gaugeInnerR={0.33}
+              gaugeOuterR={0.445}
               gaugeWidth={2.5}
               gaugeHeight={2.1}
               gaugeOffsetX={0}
@@ -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
-          penumbra={0.5}        // bord doux (0 = dur, 1 = très doux)
+          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}

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]}>
-        <mesh
-          position={[0, needleHeight / 2, 0]}
-          renderOrder={renderOrder + 1}
-        >
+      <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}

src/components/gameplay/pylon/PylonDownedPylon.tsx

@@ -49,6 +49,9 @@ export function PylonDownedPylon(): React.JSX.Element | null {
   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]);
@@ -133,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 },
@@ -143,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

@@ -34,7 +34,10 @@ 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 {
+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);
@@ -92,6 +95,12 @@ function PylonFarmerNPCContent(): React.JSX.Element {
   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;
@@ -110,6 +119,7 @@ function PylonFarmerNPCContent(): React.JSX.Element {
     },
     [actions],
   );
+  /* eslint-enable react-hooks/immutability */
 
   // ─── Async audio after pylon is raised ────────────────────────────────────
   const playPostRaiseAudioAndAdvance = useCallback(async () => {
@@ -131,6 +141,9 @@ function PylonFarmerNPCContent(): React.JSX.Element {
   }, [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") {
@@ -196,7 +209,10 @@ function PylonFarmerNPCContent(): React.JSX.Element {
         currentPosRef.current.lerp(_target, t);
       } else if (!isStraightening && currentAnimRef.current === "walk") {
         playAnim("idle");
-        savedRotationYRef.current = faceToward(currentPosRef.current, PYLON_WORLD_POSITION);
+        savedRotationYRef.current = faceToward(
+          currentPosRef.current,
+          PYLON_WORLD_POSITION,
+        );
       }
       group.position.copy(currentPosRef.current);
     } else if (step === "inspected" || step === "done") {
@@ -208,8 +224,15 @@ function PylonFarmerNPCContent(): React.JSX.Element {
     }
 
     // ── Rotation ──────────────────────────────────────────────────────────
-    if (step === "npc-return" && !isCompleted && currentAnimRef.current === "walk") {
-      const walkRotY = faceToward(currentPosRef.current, PYLON_FARMER_NPC_WALK_LOOK_AT);
+    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);
@@ -217,6 +240,7 @@ function PylonFarmerNPCContent(): React.JSX.Element {
 
     group.scale.setScalar(PYLON_FARMER_NPC_AFTER_SCALE);
   });
+  /* eslint-enable react-hooks/immutability */
 
   return (
     <group ref={groupRef} position={PYLON_FARMER_NPC_POSITION}>

src/components/gameplay/pylon/PylonLightingEffect.tsx

@@ -32,7 +32,9 @@ export function PylonLightingEffect(): null {
   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 targetAmbientRef = useRef(
+    new THREE.Color(LIGHTING_DEFAULTS.ambientColor),
+  );
   const targetSunRef = useRef(new THREE.Color(LIGHTING_DEFAULTS.sunColor));
 
   useEffect(() => {

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

@@ -5,7 +5,6 @@ import { HandTrackingFallback } from "@/components/ui/HandTrackingFallback";
 import { HandTrackingVisualizer } from "@/components/ui/HandTrackingVisualizer";
 import { InteractPrompt } from "@/components/ui/InteractPrompt";
 import { OutroVideoOverlay } from "@/components/ui/OutroVideoOverlay";
-import { RepairMovementLockIndicator } from "@/components/ui/RepairMovementLockIndicator";
 import { Subtitles } from "@/components/ui/Subtitles";
 import { TalkieDialogueOverlay } from "@/components/ui/TalkieDialogueOverlay";
 
@@ -14,7 +13,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") {