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

src/components/game/EbikeRepairNarrator.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from "react";
-import { EBIKE_SCAN_HINT_DIALOGUE_ID } from "@/data/ebike/ebikeConfig";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
 import type { MissionStep } from "@/types/gameplay/repairMission";
@@ -7,8 +6,11 @@ import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
 import { playDialogueById } from "@/utils/dialogues/playDialogue";
 
 /**
- * Plays narrator cues during the ebike repair game:
+ * Previously played the ebike repair cues directly. `RepairGame` now
- * - `fragmented`  -> "Alors? Pas magnifique ça?... ces galets vont scanner..."
+ * owns the repair-game cue timings that gate gameplay transitions
+ * (`fragmented` waits for `narrateur_galetscan`, `done` waits for
+ * `narrateur_ebikerepare`). This component remains as the central
+ * safety cleanup for legacy/queued ebike narrator audio.
  *
  * The `narrateur_refroidisseur_diagnostic` line is triggered by the
  * scan sequence itself when it lands on the refroidisseur node
@@ -26,9 +28,7 @@ import { playDialogueById } from "@/utils/dialogues/playDialogue";
  * mission transition, etc.), the active audio is paused and the
  * subtitle is force-cleared so nothing bleeds into pylon/farm/outro.
  */
-const STEP_TO_DIALOGUE_ID: Partial<Record<MissionStep, string>> = {
+const STEP_TO_DIALOGUE_ID: Partial<Record<MissionStep, string>> = {};
-  fragmented: EBIKE_SCAN_HINT_DIALOGUE_ID,
-};
 
 function stopAudio(audio: HTMLAudioElement | null): void {
   if (!audio) return;

src/components/gameplay/pylon/PylonNarrativeFlow.tsx

@@ -5,7 +5,10 @@ import { ZoneDetection } from "@/components/zone/ZoneDetection";
 import { PylonFarmerNPC } from "@/components/gameplay/pylon/PylonFarmerNPC";
 import { PylonNarratorOutro } from "@/components/gameplay/pylon/PylonNarratorOutro";
 import { PYLON_APPROACH_ZONE, PYLON_ARRIVED_ZONE } from "@/data/gameplay/zones";
-import { PYLON_NARRATIVE_DIALOGUES } from "@/data/gameplay/pylonConfig";
+import {
+  PYLON_APPROACH_DELAY_MS,
+  PYLON_NARRATIVE_DIALOGUES,
+} from "@/data/gameplay/pylonConfig";
 import { AudioManager } from "@/managers/AudioManager";
 import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
 import { playDialogueById } from "@/utils/dialogues/playDialogue";
@@ -19,6 +22,18 @@ export function PylonNarrativeFlow(): React.JSX.Element | null {
   const setMissionStep = useGameStore((state) => state.setMissionStep);
   const setCanMove = useGameStore((state) => state.setCanMove);
 
+  useEffect(() => {
+    if (mainState !== "pylon" || step !== "tampon") return undefined;
+
+    const timeoutId = window.setTimeout(() => {
+      setMissionStep("pylon", "approaching");
+    }, PYLON_APPROACH_DELAY_MS);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [mainState, setMissionStep, step]);
+
   // ── approaching : powerdown sfx → then electricOutage dialogue ────────────
   useEffect(() => {
     if (mainState !== "pylon" || step !== "approaching") return undefined;
@@ -129,7 +144,7 @@ export function PylonNarrativeFlow(): React.JSX.Element | null {
       <ZoneDetection
         key="pylon-approach"
         zone={PYLON_APPROACH_ZONE}
-        onEnter={() => setMissionStep("pylon", "approaching")}
+        onEnter={() => setMissionStep("pylon", "tampon")}
       />
     );
   }

src/components/three/gameplay/RepairEbikeRepairTrigger.tsx

@@ -1,43 +1,32 @@
-import { useState } from "react";
 import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
-import { TriggerObject } from "@/components/three/interaction/TriggerObject";
 import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
-import { REPAIR_INTERACTION_RADIUS } from "@/data/gameplay/repairGameConfig";
 import type { Vector3Tuple } from "@/types/three/three";
 
 interface RepairEbikeRepairTriggerProps {
   anchor: Vector3Tuple;
-  onRepair: () => void;
+  installed: boolean;
 }
 
 const REPLACEMENT_MODEL_PATH = "/models/refroidisseur/model.gltf";
-const TRIGGER_OFFSET: Vector3Tuple = [0, 0.9, 0];
 
 /**
  * Ebike-specific fake replacement flow: the broken radiator node is
  * hidden in the shared ExplodableModel, a grabbable copy appears at the
- * same anchor, then pressing E respawns a fresh part with a halo before
+ * same anchor, then RepairGame/RepairMissionCase controls the install
- * the reassembly step starts.
+ * interaction and this component swaps the copy for a fresh glowing part.
  */
 export function RepairEbikeRepairTrigger({
   anchor,
-  onRepair,
+  installed,
 }: RepairEbikeRepairTriggerProps): React.JSX.Element {
-  const [isInstalled, setIsInstalled] = useState(false);
-
-  function handleRepair(): void {
-    if (isInstalled) return;
-    setIsInstalled(true);
-    window.setTimeout(onRepair, 450);
-  }
-
   return (
     <group>
-      {!isInstalled ? (
+      {!installed ? (
         <GrabbableObject
           position={anchor}
           colliders="ball"
           handControlled
+          lockUntilGrab
           label="Retirer le refroidisseur"
         >
           <RepairObjectModel
@@ -63,23 +52,6 @@ export function RepairEbikeRepairTrigger({
           </mesh>
         </group>
       )}
-
-      <TriggerObject
-        position={[
-          anchor[0] + TRIGGER_OFFSET[0],
-          anchor[1] + TRIGGER_OFFSET[1],
-          anchor[2] + TRIGGER_OFFSET[2],
-        ]}
-        colliders="ball"
-        label="Changez le refroidisseur"
-        radius={REPAIR_INTERACTION_RADIUS}
-        onTrigger={handleRepair}
-      >
-        <mesh>
-          <sphereGeometry args={[0.55, 16, 16]} />
-          <meshBasicMaterial colorWrite={false} depthWrite={false} />
-        </mesh>
-      </TriggerObject>
     </group>
   );
 }

src/components/three/gameplay/RepairGame.tsx

@@ -23,7 +23,10 @@ import {
   REPAIR_REASSEMBLY_HOLD_MS,
 } from "@/data/gameplay/repairGameConfig";
 import { REPAIR_MISSIONS } from "@/data/gameplay/repairMissions";
-import { EBIKE_REPAIRED_DIALOGUE_ID } from "@/data/ebike/ebikeConfig";
+import {
+  EBIKE_REPAIRED_DIALOGUE_ID,
+  EBIKE_SCAN_HINT_DIALOGUE_ID,
+} from "@/data/ebike/ebikeConfig";
 import { useRepairFragmentationInput } from "@/hooks/gameplay/useRepairFragmentationInput";
 import { useRepairMissionStep } from "@/hooks/gameplay/useRepairMissionStep";
 import { useTerrainSnappedPosition } from "@/hooks/three/useTerrainHeight";
@@ -58,6 +61,11 @@ interface RepairMissionAssetPreloaderProps {
   config: RepairMissionConfig;
 }
 
+interface EbikeRepairTransform {
+  position: Vector3Tuple;
+  rotationY: number;
+}
+
 function RepairMissionAssetPreloader({
   config,
 }: RepairMissionAssetPreloaderProps): null {
@@ -107,6 +115,11 @@ export function RepairGame({
   const [explodedParts, setExplodedParts] = useState<readonly ExplodedPart[]>(
     [],
   );
+  const [ebikeRepairTransform, setEbikeRepairTransform] =
+    useState<EbikeRepairTransform | null>(null);
+  const [ebikeCoolingInstalled, setEbikeCoolingInstalled] = useState(false);
+  const fragmentedSplitSettledRef = useRef(false);
+  const fragmentedDialogueDoneRef = useRef(false);
   const reassemblyDoneTimeoutRef = useRef<number | null>(null);
   // Ebike-specific: once the repair starts, keep the entire repair flow
   // exactly where the bike currently is. `Ebike` owns the live parked
@@ -115,11 +128,13 @@ export function RepairGame({
   const livePosition = useMemo<Vector3Tuple>(() => {
     if (mission !== "ebike" || step === "waiting") return position;
 
+    if (ebikeRepairTransform) return ebikeRepairTransform.position;
+
     const parked = window.ebikeParkedPosition;
     if (!parked) return position;
 
     return [parked[0], parked[1], parked[2]];
-  }, [mission, position, step]);
+  }, [ebikeRepairTransform, mission, position, step]);
   const usesLiveEbikePosition = mission === "ebike" && step !== "waiting";
   const parsedScale = toVector3Scale(scale);
   const terrainSnappedPosition = useTerrainSnappedPosition(livePosition);
@@ -133,6 +148,10 @@ export function RepairGame({
   );
   const isSplitPhase = (SPLIT_PHASES as readonly MissionStep[]).includes(step);
   const isRepairing = step === "repairing";
+  const repairModelRotation: Vector3Tuple =
+    mission === "ebike" && ebikeRepairTransform
+      ? [0, ebikeRepairTransform.rotationY, 0]
+      : (config.modelRotation ?? [0, 0, 0]);
   const ebikeBrokenNodeName = config.brokenParts[0]?.targetNodeName;
   const ebikeBrokenWorldAnchor = ebikeBrokenNodeName
     ? brokenAnchors[ebikeBrokenNodeName]
@@ -159,6 +178,7 @@ export function RepairGame({
       setCaseAnchors({});
       setBrokenAnchors({});
       setScannedBrokenParts([]);
+      setEbikeCoolingInstalled(false);
     }, 0);
 
     return () => {
@@ -166,6 +186,45 @@ export function RepairGame({
     };
   }, [mainState, mission, step]);
 
+  useEffect(() => {
+    if (mission !== "ebike") return undefined;
+
+    if (mainState !== "ebike" || step === "waiting") {
+      const timeoutId = window.setTimeout(() => {
+        setEbikeRepairTransform(null);
+        setEbikeCoolingInstalled(false);
+      }, 0);
+
+      return () => {
+        window.clearTimeout(timeoutId);
+      };
+    }
+
+    if (ebikeRepairTransform) return undefined;
+
+    const parked = window.ebikeParkedPosition;
+    const rotationY =
+      window.ebikeParkedRotation ?? config.modelRotation?.[1] ?? 0;
+    const snapshot: EbikeRepairTransform = {
+      position: parked ? [parked[0], parked[1], parked[2]] : position,
+      rotationY,
+    };
+    const timeoutId = window.setTimeout(() => {
+      setEbikeRepairTransform(snapshot);
+    }, 0);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [
+    config.modelRotation,
+    ebikeRepairTransform,
+    mainState,
+    mission,
+    position,
+    step,
+  ]);
+
   useEffect(() => {
     if (mission !== "ebike") return;
     if (mainState === "ebike") return;
@@ -221,6 +280,7 @@ export function RepairGame({
   useEffect(() => {
     if (mainState !== mission) return undefined;
     if (step !== "fragmented") return undefined;
+    if (mission === "ebike") return undefined;
 
     const timeoutId = window.setTimeout(
       () => {
@@ -234,6 +294,71 @@ export function RepairGame({
     };
   }, [mainState, mission, setMissionStep, step]);
 
+  useEffect(() => {
+    if (mainState !== mission) return undefined;
+    if (mission !== "ebike") return undefined;
+    if (step !== "fragmented") return undefined;
+
+    fragmentedSplitSettledRef.current = false;
+    fragmentedDialogueDoneRef.current = false;
+
+    let cancelled = false;
+    let activeAudio: HTMLAudioElement | null = null;
+    let fallbackTimeoutId: number | null = null;
+
+    const tryAdvance = (): void => {
+      if (cancelled) return;
+      if (!fragmentedSplitSettledRef.current) return;
+      if (!fragmentedDialogueDoneRef.current) return;
+      setMissionStep(mission, "scanning");
+    };
+
+    const markDialogueDone = (): void => {
+      if (cancelled) return;
+      fragmentedDialogueDoneRef.current = true;
+      tryAdvance();
+    };
+
+    void (async () => {
+      const manifest = await loadDialogueManifest();
+      if (cancelled) return;
+      const audio = manifest
+        ? await playDialogueById(manifest, EBIKE_SCAN_HINT_DIALOGUE_ID)
+        : null;
+      if (cancelled) {
+        if (audio && !audio.paused) {
+          audio.pause();
+          audio.currentTime = 0;
+        }
+        useSubtitleStore.getState().clearActiveSubtitle();
+        return;
+      }
+
+      activeAudio = audio;
+      if (audio) {
+        audio.addEventListener("ended", markDialogueDone, { once: true });
+        fallbackTimeoutId = window.setTimeout(markDialogueDone, 15000);
+      } else {
+        fallbackTimeoutId = window.setTimeout(markDialogueDone, 1000);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (activeAudio) {
+        activeAudio.removeEventListener("ended", markDialogueDone);
+        if (!activeAudio.paused) {
+          activeAudio.pause();
+          activeAudio.currentTime = 0;
+        }
+      }
+      if (fallbackTimeoutId !== null) {
+        window.clearTimeout(fallbackTimeoutId);
+      }
+      useSubtitleStore.getState().clearActiveSubtitle();
+    };
+  }, [mainState, mission, setMissionStep, step]);
+
   useEffect(() => {
     if (mainState !== mission) return undefined;
     if (step !== "reassembling") return undefined;
@@ -327,6 +452,13 @@ export function RepairGame({
     () => (settledAt: 0 | 1) => {
       const currentStep = stepRef.current;
       if (settledAt === 1 && currentStep === "fragmented") {
+        if (mission === "ebike") {
+          fragmentedSplitSettledRef.current = true;
+          if (fragmentedDialogueDoneRef.current) {
+            setMissionStep(mission, "scanning");
+          }
+          return;
+        }
         setMissionStep(mission, "scanning");
       }
       if (settledAt === 0 && currentStep === "reassembling") {
@@ -350,6 +482,14 @@ export function RepairGame({
     };
   }, []);
 
+  function handleEbikeCoolingInstall(): void {
+    if (ebikeCoolingInstalled) return;
+    setEbikeCoolingInstalled(true);
+    window.setTimeout(() => {
+      setMissionStep(mission, "reassembling");
+    }, 450);
+  }
+
   if (mainState !== mission) return null;
   if (step === "locked") return null;
 
@@ -376,7 +516,7 @@ export function RepairGame({
         {isRepairPhase ? (
           <ExplodableModel
             modelPath={config.modelPath}
-            rotation={config.modelRotation ?? [0, 0, 0]}
+            rotation={repairModelRotation}
             scale={config.modelScale ?? 1}
             split={isSplitPhase}
             splitSpeed={REPAIR_FRAGMENT_SPLIT_SPEED}
@@ -405,7 +545,7 @@ export function RepairGame({
         {step === "repairing" && mission === "ebike" ? (
           <RepairEbikeRepairTrigger
             anchor={ebikeBrokenLocalAnchor}
-            onRepair={() => setMissionStep(mission, "reassembling")}
+            installed={ebikeCoolingInstalled}
           />
         ) : null}
         {step === "repairing" && mission !== "ebike" ? (
@@ -441,10 +581,15 @@ export function RepairGame({
             showFragmentationPrompt={
               readyForFragmentation && mission !== "ebike"
             }
+            {...(mission === "ebike" && step === "repairing"
+              ? { interactLabel: "Changez le refroidisseur" }
+              : {})}
             onInteract={
-              readyForFragmentation && mission !== "ebike"
+              mission === "ebike" && step === "repairing"
-                ? () => setMissionStep(mission, "fragmented")
+                ? handleEbikeCoolingInstall
-                : undefined
+                : readyForFragmentation && mission !== "ebike"
+                  ? () => setMissionStep(mission, "fragmented")
+                  : undefined
             }
           />
         ) : null}

src/components/three/gameplay/RepairMissionCase.tsx

@@ -25,6 +25,7 @@ interface RepairMissionCaseProps {
   open?: boolean;
   zoomed?: boolean;
   showFragmentationPrompt?: boolean;
+  interactLabel?: string;
   onInteract?: (() => void) | undefined;
 }
 
@@ -37,6 +38,7 @@ export function RepairMissionCase({
   open = false,
   zoomed = false,
   showFragmentationPrompt = false,
+  interactLabel,
   onInteract,
 }: RepairMissionCaseProps): React.JSX.Element {
   const casePosition = zoomed
@@ -51,7 +53,7 @@ export function RepairMissionCase({
         <TriggerObject
           position={casePosition}
           colliders="ball"
-          label={`Ouvrir ${config.label}`}
+          label={interactLabel ?? `Ouvrir ${config.label}`}
           radius={REPAIR_INTERACTION_RADIUS}
           onTrigger={onInteract}
         >

src/components/three/interaction/GrabbableObject.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { RigidBody } from "@react-three/rapier";
 import type { RapierRigidBody } from "@react-three/rapier";
@@ -35,6 +35,7 @@ interface GrabbableObjectProps {
   label?: string;
   handControlled?: boolean;
   disabled?: boolean;
+  lockUntilGrab?: boolean;
   onGrabChange?: (held: boolean) => void;
   onPositionChange?: (position: THREE.Vector3) => void;
   onSnap?: (position: THREE.Vector3) => void;
@@ -134,6 +135,7 @@ export function GrabbableObject({
   label = GRAB_DEFAULT_LABEL,
   handControlled = false,
   disabled = false,
+  lockUntilGrab = false,
   onGrabChange,
   onPositionChange,
   onSnap,
@@ -148,6 +150,7 @@ export function GrabbableObject({
   const rbRef = useRef<RapierRigidBody>(null);
   const isHolding = useRef(false);
   const isHandHolding = useRef(false);
+  const [hasBeenGrabbed, setHasBeenGrabbed] = useState(false);
   const snapTween = useRef<gsap.core.Tween | null>(null);
 
   useEffect(() => {
@@ -288,6 +291,7 @@ export function GrabbableObject({
 
         const hadHit = Boolean(hit);
         if (hadHit) {
+          setHasBeenGrabbed(true);
           isHandHolding.current = true;
           InteractionManager.getInstance().setHandHolding(true);
           onGrabChange?.(true);
@@ -330,7 +334,7 @@ export function GrabbableObject({
     <group ref={spaceRef}>
       <RigidBody
         ref={rbRef}
-        type="dynamic"
+        type={lockUntilGrab && !hasBeenGrabbed ? "fixed" : "dynamic"}
         colliders={colliders}
         position={position}
       >
@@ -344,6 +348,7 @@ export function GrabbableObject({
               position={position}
               bodyRef={rbRef}
               onPress={() => {
+                setHasBeenGrabbed(true);
                 isHolding.current = true;
                 onGrabChange?.(true);
               }}

src/data/gameplay/pylonConfig.ts

@@ -41,6 +41,8 @@ export const PYLON_NARRATIVE_INTERACT_RADIUS = 3.5;
 
 export const PYLON_STRAIGHTEN_ANIMATION_DURATION_MS = 2200;
 
+export const PYLON_APPROACH_DELAY_MS = 7500;
+
 export const PYLON_NARRATIVE_DIALOGUES = {
   electricOutage: "narrateur_coupureelec",
   searchCentral: "narrateur_fouillelecentre",

src/data/gameplay/repairMissionState.ts

@@ -11,6 +11,7 @@ const REPAIR_MISSION_ID_VALUES: ReadonlySet<string> = new Set(
 export const MISSION_STEPS = [
   "locked",
   "electricienne_history",
+  "tampon",
   "approaching",
   "arrived",
   "npc-return",
@@ -26,6 +27,7 @@ export const MISSION_STEPS = [
 const MISSION_STEP_VALUES: ReadonlySet<string> = new Set(MISSION_STEPS);
 
 const PYLON_ONLY_MISSION_STEPS = new Set<MissionStep>([
+  "tampon",
   "approaching",
   "arrived",
   "npc-return",
@@ -61,9 +63,11 @@ export function getNextMissionStep(
 ): MissionStep {
   switch (step) {
     case "locked":
-      return mission === "pylon" ? "approaching" : "waiting";
+      return mission === "pylon" ? "tampon" : "waiting";
     case "electricienne_history":
       return "done";
+    case "tampon":
+      return "approaching";
     case "approaching":
       return "arrived";
     case "arrived":
@@ -98,8 +102,10 @@ export function getPreviousMissionStep(
       return "locked";
     case "electricienne_history":
       return "locked";
-    case "approaching":
+    case "tampon":
       return "locked";
+    case "approaching":
+      return "tampon";
     case "arrived":
       return "approaching";
     case "npc-return":

src/managers/stores/useGameStore.ts

@@ -146,7 +146,7 @@ function completeEbikeState(state: GameState): GameStateUpdate {
     },
     pylon: {
       ...state.pylon,
-      currentStep: "approaching",
+      currentStep: "tampon",
     },
   };
 }

src/types/gameplay/repairMission.ts

@@ -99,6 +99,7 @@ export interface RepairMissionConfig {
 
 export type MissionStep =
   | "locked"
+  | "tampon"
   | "approaching"
   | "arrived"
   | "npc-return"
@@ -113,6 +114,7 @@ export type MissionStep =
   | "electricienne_history";
 
 export const PYLON_NARRATIVE_STEPS = [
+  "tampon",
   "approaching",
   "arrived",
   "npc-return",