src/components/ui/intro/IntroDialogueOverlay.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { Subtitles } from "@/components/ui/Subtitles";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { SITE_DIALOGUE_IDS } from "@/data/site/dialogueIds";
 import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
@@ -63,21 +64,9 @@ export function IntroDialogueOverlay(): React.JSX.Element {
         inset: 0,
         background: "#000",
         zIndex: 999,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
       }}
     >
-      <span
-        aria-hidden="true"
-        style={{
-          color: "rgba(255, 255, 255, 0.5)",
-          fontSize: 16,
-          fontFamily: "system-ui, sans-serif",
-        }}
-      >
-        ...
-      </span>
+      <Subtitles />
     </div>
   );
 }

src/components/ui/intro/IntroRevealOverlay.tsx

@@ -6,8 +6,8 @@ const REVEAL_DURATION_MS = 2000;
 
 /**
  * Fade-out overlay revealing the game world.
- * Calls completeIntro() when the fade is done — completeIntro also flips
- * intro.currentStep to "playing" so no separate setIntroStep call is needed.
+ * Calls completeIntro() when the fade is done — completeIntro also marks
+ * intro.currentStep as "completed" so no separate setIntroStep call is needed.
  */
 export function IntroRevealOverlay(): React.JSX.Element {
   const completeIntro = useGameStore((state) => state.completeIntro);

src/data/game/gameStateConfig.ts

@@ -19,7 +19,7 @@ export const GAME_STEPS: readonly GameStep[] = [
   "video",
   "dialogue-intro",
   "reveal",
-  "playing",
+  "completed",
 ];
 
 export const MAIN_GAME_STATES: readonly MainGameState[] = [

src/managers/stores/useGameStore.ts

@@ -121,7 +121,7 @@ function completeIntroState(state: GameState): GameStateUpdate {
     mainState: "ebike",
     intro: {
       ...state.intro,
-      currentStep: "playing",
+      currentStep: "completed",
       hasCompleted: true,
       isEbikeUnlocked: true,
     },

src/types/game.ts

@@ -19,6 +19,6 @@ export type GameStep =
   | "video" // Vidéo intro.mp4
   | "dialogue-intro" // Dialogues post-vidéo (écran noir)
   | "reveal" // Fondu noir → jeu visible
-  | "playing"; // Intro terminée, jeu actif
+  | "completed"; // Intro terminée
 
 export type MainGameState = "intro" | RepairMissionId | "outro";