Merge branch 'develop' of https://git.fabrik.mathieu-chavanel.fr/math-pixel/La-Fabrik into develop

While the player is mounted on the e-bike and pressing a movement key,
the persistent 'Descendre du bike' prompt was visible on screen and
polluted the view during gameplay. The InteractableObject is now
unmounted as soon as window.ebikeDriveInputActive flips to true and
remounted the moment the bike comes to a stop.

The driving signal is read in a useFrame and only flips React state
on transitions, so this adds zero per-frame re-renders.

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:

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);
@@ -135,7 +145,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 +204,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 +236,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);
@@ -339,11 +353,24 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
   ];
   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;
 
@@ -451,25 +478,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 +537,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/EbikeSpeedmeter.tsx

@@ -151,7 +151,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 +164,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)
@@ -212,11 +212,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/gameplay/pylon/PylonDownedPylon.tsx

@@ -44,7 +44,9 @@ export function PylonDownedPylon(): React.JSX.Element | null {
     if (!group) return;
 
     if (!isStraightening || straightenStartRef.current === null) {
-      group.rotation.set(...(showUpright ? PYLON_UPRIGHT_ROTATION : PYLON_DOWNED_ROTATION));
+      group.rotation.set(
+        ...(showUpright ? PYLON_UPRIGHT_ROTATION : PYLON_DOWNED_ROTATION),
+      );
       return;
     }
 
@@ -127,7 +129,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 },
@@ -137,7 +142,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/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/data/gameplay/repairMissionState.ts

@@ -24,6 +24,20 @@ export const MISSION_STEPS = [
 ] 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);
 }

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,

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/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/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;

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/GameStageContent.tsx

@@ -1,5 +1,6 @@
 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";
@@ -16,18 +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;
@@ -92,6 +88,7 @@ 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);
@@ -102,7 +99,7 @@ export function GameStageContent(): React.JSX.Element {
       <Ebike position={EBIKE_WORLD_POSITION} />
       <PylonLightingEffect />
       <PylonDownedPylon />
-      {isDebugEnabled() ? (
+      {isDebugEnabled() && !repairFocusActive ? (
         <>
           <ZoneDebugVisual zone={PYLON_APPROACH_ZONE} active={false} />
           <ZoneDebugVisual zone={PYLON_ARRIVED_ZONE} active={false} />
@@ -121,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/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) {