feat(dialogues): support multi-cue subtitles

public/sounds/dialogue/dialogues.json

@@ -38,7 +38,7 @@
       "id": "narrateur_intro_prenom",
       "voice": "narrateur",
       "audio": "/sounds/dialogue/narrateur_intro_prenom.mp3",
-      "subtitleCueIndex": 2
+      "subtitleCueIndices": [1, 2]
     },
     {
       "id": "narrateur_intro_apresprenom",

public/sounds/dialogue/subtitles/fr/narrateur.srt

@@ -1,9 +1,9 @@
 1
-00:00:00,000 --> 00:00:02,760
+00:00:00,000 --> 00:00:09,000
 Bonjour à toi, futur habitant d'Altéra ! Aujourd'hui tu vas découvrir le rôle de technicien au sein de La Fabrik qui s'occupe des technologies et réparation Low-Tech.
 
 2
-00:00:00,000 --> 00:00:11,592
+00:00:09,000 --> 00:00:11,592
 Avant de commencer, comment tu t'appelles ?
 
 3

src/components/ebike/Ebike.tsx

@@ -263,7 +263,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
             height={0.8}
             startPos={gpsStartPos}
             destPos={destPos}
-            mapImageUrl="/assets/gps/map_background.png"
+            mapImageUrl="/assets/world/gps/map_background.png"
             worldBounds={{
               minX: -166,
               maxX: 163,

src/components/editor/EditorDialogueManifestPanel.tsx

@@ -6,6 +6,10 @@ import type {
   DialogueSpeaker,
   DialogueVoiceId,
 } from "@/types/dialogues/dialogues";
+import {
+  getDialogueCueIndices,
+  getDialogueFirstCueIndex,
+} from "@/types/dialogues/dialogues";
 import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
 import { playDialogueById } from "@/utils/dialogues/playDialogue";
 import { parseSrt } from "@/utils/subtitles/parseSrt";
@@ -34,7 +38,7 @@ function getNextCueIndex(
 ): number {
   const cueIndexes = manifest.dialogues
     .filter((dialogue) => dialogue.voice === voice)
-    .map((dialogue) => dialogue.subtitleCueIndex);
+    .flatMap((dialogue) => getDialogueCueIndices(dialogue));
 
   return Math.max(0, ...cueIndexes) + 1;
 }
@@ -93,12 +97,15 @@ async function createFrenchSrtCue(
   manifest: DialogueManifest,
   dialogue: DialogueDefinition,
 ): Promise<void> {
+  const firstCueIndex = getDialogueFirstCueIndex(dialogue);
+  if (firstCueIndex === undefined) return;
+
   const srtPath = getFrenchSrtPath(dialogue.voice);
   const response = await fetch(srtPath);
   const content = response.ok ? await response.text() : "";
   const nextContent = appendSrtCueIfMissing(
     content,
-    dialogue.subtitleCueIndex,
+    firstCueIndex,
     getVoiceSpeaker(manifest, dialogue.voice),
   );
 
@@ -122,7 +129,8 @@ function getManifestErrors(manifest: DialogueManifest | null): string[] {
       errors.push(`${label}: audio doit commencer par /sounds/dialogue/.`);
     }
 
-    if (!Number.isInteger(dialogue.subtitleCueIndex)) {
+    const cueIndices = getDialogueCueIndices(dialogue);
+    if (cueIndices.length === 0) {
       errors.push(`${label}: cue SRT invalide.`);
     }
 
@@ -160,9 +168,18 @@ function getPatchedDialogue(
     id: patch.id ?? dialogue.id,
     voice: patch.voice ?? dialogue.voice,
     audio: patch.audio ?? dialogue.audio,
-    subtitleCueIndex: patch.subtitleCueIndex ?? dialogue.subtitleCueIndex,
   };
 
+  if (patch.subtitleCueIndex !== undefined) {
+    nextDialogue.subtitleCueIndex = patch.subtitleCueIndex;
+  } else if (dialogue.subtitleCueIndex !== undefined) {
+    nextDialogue.subtitleCueIndex = dialogue.subtitleCueIndex;
+  }
+
+  if (dialogue.subtitleCueIndices !== undefined) {
+    nextDialogue.subtitleCueIndices = dialogue.subtitleCueIndices;
+  }
+
   if ("timecode" in patch) {
     if (patch.timecode !== undefined) nextDialogue.timecode = patch.timecode;
   } else if (dialogue.timecode !== undefined) {
@@ -252,8 +269,9 @@ export function EditorDialogueManifestPanel(): React.JSX.Element {
 
     try {
       await createFrenchSrtCue(nextManifest, dialogue);
+      const cueIndex = getDialogueFirstCueIndex(dialogue) ?? "?";
       setStatus(
-        `Nouveau dialogue ajoute avec cue FR ${dialogue.subtitleCueIndex}. Sauvegarde le manifeste pour le garder.`,
+        `Nouveau dialogue ajoute avec cue FR ${cueIndex}. Sauvegarde le manifeste pour le garder.`,
       );
     } catch (err) {
       const message = err instanceof Error ? err.message : "Erreur inconnue";
@@ -333,12 +351,13 @@ export function EditorDialogueManifestPanel(): React.JSX.Element {
   async function handleCreateFrenchSrtCue(): Promise<void> {
     if (!manifest || !selectedDialogue) return;
 
+    const cueIndex = getDialogueFirstCueIndex(selectedDialogue) ?? "?";
     setIsCreatingSrtCue(true);
-    setStatus(`Creation de la cue FR ${selectedDialogue.subtitleCueIndex}...`);
+    setStatus(`Creation de la cue FR ${cueIndex}...`);
 
     try {
       await createFrenchSrtCue(manifest, selectedDialogue);
-      setStatus(`Cue FR ${selectedDialogue.subtitleCueIndex} prete.`);
+      setStatus(`Cue FR ${cueIndex} prete.`);
     } catch (err) {
       const message = err instanceof Error ? err.message : "Erreur inconnue";
       setStatus(message);
@@ -478,7 +497,7 @@ export function EditorDialogueManifestPanel(): React.JSX.Element {
               type="number"
               min="1"
               step="1"
-              value={selectedDialogue.subtitleCueIndex}
+              value={getDialogueFirstCueIndex(selectedDialogue) ?? ""}
               onChange={(event) =>
                 updateSelectedDialogue({
                   subtitleCueIndex: Math.max(1, Number(event.target.value)),

src/components/editor/EditorSrtPanel.tsx

@@ -7,6 +7,10 @@ import type {
   DialogueSpeaker,
   DialogueVoiceId,
 } from "@/types/dialogues/dialogues";
+import {
+  getDialogueCueIndices,
+  getDialogueFirstCueIndex,
+} from "@/types/dialogues/dialogues";
 import { logger } from "@/utils/core/Logger";
 import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
 import {
@@ -181,7 +185,7 @@ function getExpectedCueIndexes(
   voice: DialogueVoiceId,
 ): number[] {
   return getExpectedDialogues(manifest, voice)
-    .map((dialogue) => dialogue.subtitleCueIndex)
+    .flatMap((dialogue) => getDialogueCueIndices(dialogue))
     .filter(
       (cueIndex, index, cueIndexes) => cueIndexes.indexOf(cueIndex) === index,
     )
@@ -196,7 +200,11 @@ function getExpectedDialogues(
 
   return [...manifest.dialogues]
     .filter((dialogue) => dialogue.voice === voice)
-    .sort((a, b) => a.subtitleCueIndex - b.subtitleCueIndex);
+    .sort((a, b) => {
+      const aIndex = getDialogueFirstCueIndex(a) ?? 0;
+      const bIndex = getDialogueFirstCueIndex(b) ?? 0;
+      return aIndex - bIndex;
+    });
 }
 
 function findCueBlockRange(
@@ -577,7 +585,7 @@ export function EditorSrtPanel(): React.JSX.Element {
             )}
             {expectedDialogues.map((dialogue) => (
               <option key={dialogue.id} value={dialogue.id}>
-                Cue {dialogue.subtitleCueIndex} - {dialogue.id}
+                Cue {getDialogueFirstCueIndex(dialogue) ?? "?"} - {dialogue.id}
               </option>
             ))}
           </select>
@@ -585,7 +593,7 @@ export function EditorSrtPanel(): React.JSX.Element {
 
         {selectedDialogue && (
           <div className="editor-srt-audio-card">
-            <span>Cue {selectedDialogue.subtitleCueIndex}</span>
+            <span>Cue {getDialogueFirstCueIndex(selectedDialogue) ?? "?"}</span>
             <strong>{selectedDialogue.id}</strong>
             <audio
               key={selectedDialogue.audio}
@@ -609,39 +617,52 @@ export function EditorSrtPanel(): React.JSX.Element {
             <div className="editor-srt-time-actions">
               <button
                 type="button"
-                onClick={() =>
+                disabled={
-                  handleSetCueTime(selectedDialogue.subtitleCueIndex, "start")
+                  getDialogueFirstCueIndex(selectedDialogue) === undefined
                 }
+                onClick={() => {
+                  const cueIndex = getDialogueFirstCueIndex(selectedDialogue);
+                  if (cueIndex !== undefined)
+                    handleSetCueTime(cueIndex, "start");
+                }}
               >
                 Set start
               </button>
               <button
                 type="button"
-                onClick={() =>
+                disabled={
-                  handleSetCueTime(selectedDialogue.subtitleCueIndex, "end")
+                  getDialogueFirstCueIndex(selectedDialogue) === undefined
                 }
+                onClick={() => {
+                  const cueIndex = getDialogueFirstCueIndex(selectedDialogue);
+                  if (cueIndex !== undefined) handleSetCueTime(cueIndex, "end");
+                }}
               >
                 Set end
               </button>
               <button
                 type="button"
-                onClick={() =>
+                disabled={
-                  handleNudgeCue(
+                  getDialogueFirstCueIndex(selectedDialogue) === undefined
-                    selectedDialogue.subtitleCueIndex,
-                    -CUE_NUDGE_SECONDS,
-                  )
                 }
+                onClick={() => {
+                  const cueIndex = getDialogueFirstCueIndex(selectedDialogue);
+                  if (cueIndex !== undefined)
+                    handleNudgeCue(cueIndex, -CUE_NUDGE_SECONDS);
+                }}
               >
                 -100ms
               </button>
               <button
                 type="button"
-                onClick={() =>
+                disabled={
-                  handleNudgeCue(
+                  getDialogueFirstCueIndex(selectedDialogue) === undefined
-                    selectedDialogue.subtitleCueIndex,
-                    CUE_NUDGE_SECONDS,
-                  )
                 }
+                onClick={() => {
+                  const cueIndex = getDialogueFirstCueIndex(selectedDialogue);
+                  if (cueIndex !== undefined)
+                    handleNudgeCue(cueIndex, CUE_NUDGE_SECONDS);
+                }}
               >
                 +100ms
               </button>
@@ -649,9 +670,15 @@ export function EditorSrtPanel(): React.JSX.Element {
             <button
               className="editor-srt-jump-button"
               type="button"
-              onClick={() => handleJumpToCue(selectedDialogue.subtitleCueIndex)}
+              disabled={
+                getDialogueFirstCueIndex(selectedDialogue) === undefined
+              }
+              onClick={() => {
+                const cueIndex = getDialogueFirstCueIndex(selectedDialogue);
+                if (cueIndex !== undefined) handleJumpToCue(cueIndex);
+              }}
             >
-              Aller a la cue {selectedDialogue.subtitleCueIndex}
+              Aller a la cue {getDialogueFirstCueIndex(selectedDialogue) ?? "?"}
             </button>
           </div>
         )}

src/components/site/SiteButton.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+
+interface SiteButtonProps {
+  label: string;
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export function SiteButton({
+  label,
+  disabled = false,
+  onClick,
+}: SiteButtonProps): React.JSX.Element {
+  const [isPressed, setIsPressed] = useState(false);
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      onMouseDown={() => setIsPressed(true)}
+      onMouseUp={() => setIsPressed(false)}
+      onMouseLeave={() => setIsPressed(false)}
+      style={{
+        display: "inline-flex",
+        padding: "12px 20px",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 10,
+        background: disabled ? "#b0b0b0" : "#FFF",
+        boxShadow: disabled
+          ? "none"
+          : isPressed
+            ? "0 4px 10px 0 rgba(0, 0, 0, 0.35)"
+            : "0 7px 14.4px 0 rgba(0, 0, 0, 0.25)",
+        border: "none",
+        cursor: disabled ? "not-allowed" : "pointer",
+        color: disabled ? "#888888" : "#000",
+        fontFamily: "Inter, system-ui, sans-serif",
+        fontSize: "clamp(18px, 3vw, 26px)",
+        fontStyle: "normal",
+        fontWeight: 700,
+        lineHeight: "normal",
+        letterSpacing: "-1.3px",
+        textTransform: "uppercase",
+        transition: "box-shadow 0.15s ease",
+      }}
+    >
+      {label}
+    </button>
+  );
+}

src/components/site/SiteCard.tsx

@@ -0,0 +1,68 @@
+import type { SiteCardConfig } from "@/data/site/siteConfig";
+
+interface SiteCardProps {
+  config: SiteCardConfig;
+  selected: boolean;
+  onSelect: () => void;
+}
+
+export function SiteCard({
+  config,
+  selected,
+  onSelect,
+}: SiteCardProps): React.JSX.Element {
+  const { label, imagePath, disabled } = config;
+
+  const getBackground = (): string => {
+    if (imagePath) return `url(${imagePath}) center/cover`;
+    if (disabled) return "#b8b8b8";
+    if (selected) return "#d9d9d9";
+    return "#e8e8e8";
+  };
+
+  const getBorder = (): string => {
+    if (selected) return "3px solid #a8d5a2";
+    if (disabled) return "none";
+    return "2px solid #ffffff";
+  };
+
+  const getTextColor = (): string => {
+    if (disabled) return "#888888";
+    return "#666666";
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      disabled={disabled}
+      style={{
+        width: "clamp(120px, 15vw, 160px)",
+        height: "clamp(140px, 18vw, 180px)",
+        border: getBorder(),
+        background: getBackground(),
+        cursor: disabled ? "not-allowed" : "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.15s ease",
+        outline: "none",
+        flexShrink: 0,
+      }}
+    >
+      {!imagePath && (
+        <span
+          style={{
+            color: getTextColor(),
+            fontSize: "clamp(10px, 1.5vw, 14px)",
+            fontWeight: 500,
+            textAlign: "center",
+            padding: 8,
+          }}
+        >
+          {label}
+        </span>
+      )}
+    </button>
+  );
+}

src/components/site/SiteDisclaimerScreen.tsx

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useSiteStore } from "@/managers/stores/useSiteStore";
+
+const DISCLAIMER_TEXT =
+  "Ce site a été conçu pour être utilisé sur ordinateur.\nPour une meilleure expérience, assurez-vous d'avoir une bonne connexion internet et une machine performante.";
+
+const TEXT_DISPLAY_DURATION = 5000;
+const FADE_OUT_DURATION = 1000;
+const TRANSITION_DELAY = 250;
+
+/**
+ * Screen 0: Disclaimer
+ */
+export function SiteDisclaimerScreen(): React.JSX.Element {
+  const setStep = useSiteStore((state) => state.setStep);
+  const [textOpacity, setTextOpacity] = useState(0);
+  const hasSkipped = useRef(false);
+
+  const handleSkip = useCallback(() => {
+    if (hasSkipped.current) return;
+    hasSkipped.current = true;
+    setStep("welcome");
+  }, [setStep]);
+
+  useEffect(() => {
+    // Fade in text
+    const fadeInTimeout = window.setTimeout(() => {
+      setTextOpacity(1);
+    }, 100);
+
+    // Start fade out after display duration
+    const fadeOutTimeout = window.setTimeout(() => {
+      setTextOpacity(0);
+    }, TEXT_DISPLAY_DURATION);
+
+    // Transition to welcome after fade out + delay
+    const transitionTimeout = window.setTimeout(
+      () => {
+        handleSkip();
+      },
+      TEXT_DISPLAY_DURATION + FADE_OUT_DURATION + TRANSITION_DELAY,
+    );
+
+    return () => {
+      window.clearTimeout(fadeInTimeout);
+      window.clearTimeout(fadeOutTimeout);
+      window.clearTimeout(transitionTimeout);
+    };
+  }, [handleSkip]);
+
+  return (
+    <div
+      onClick={handleSkip}
+      style={{
+        position: "fixed",
+        inset: 0,
+        background: "#000",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 48,
+        cursor: "pointer",
+      }}
+    >
+      <p
+        style={{
+          color: "#F2F2F2",
+          textAlign: "center",
+          fontFamily: "Inter, system-ui, sans-serif",
+          fontSize: 20,
+          fontWeight: 400,
+          lineHeight: 1.6,
+          maxWidth: 800,
+          opacity: textOpacity,
+          transition: `opacity ${FADE_OUT_DURATION}ms ease-in-out`,
+          whiteSpace: "pre-wrap",
+        }}
+      >
+        {DISCLAIMER_TEXT}
+      </p>
+    </div>
+  );
+}

src/components/site/SiteLayout.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { SITE_CONFIG } from "@/data/site/siteConfig";
+import { Subtitles } from "@/components/ui/Subtitles";
+
+interface SiteLayoutProps {
+  children: ReactNode;
+}
+
+export function SiteLayout({ children }: SiteLayoutProps): React.JSX.Element {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#87CEEB",
+        backgroundImage: `url(${SITE_CONFIG.backgroundImage})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        color: "#fff",
+        overflow: "hidden",
+      }}
+    >
+      {children}
+      <Subtitles />
+    </div>
+  );
+}

src/components/site/SiteMobileBlocker.tsx

@@ -0,0 +1,53 @@
+import { SITE_CONFIG } from "@/data/site/siteConfig";
+
+const MOBILE_TEXT =
+  "Ce site a été conçu pour être utilisé sur ordinateur. Veuillez réessayer sur votre ordinateur pour une expérience optimale.";
+
+/**
+ * Mobile blocker screen
+ */
+export function SiteMobileBlocker(): React.JSX.Element {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "#87CEEB",
+        backgroundImage: `url(${SITE_CONFIG.backgroundImage})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 32,
+        gap: 48,
+      }}
+    >
+      <img
+        src="public/assets/logo/logo.jpg"
+        alt="Logo"
+        style={{
+          width: 120,
+          height: "auto",
+        }}
+      />
+      <p
+        style={{
+          color: "#F2F2F2",
+          textAlign: "center",
+          textShadow: "0 4px 10px rgba(0, 0, 0, 0.4)",
+          fontFamily: "Inter, system-ui, sans-serif",
+          fontSize: 18,
+          fontWeight: 500,
+          lineHeight: 1.6,
+          maxWidth: 320,
+          margin: 0,
+        }}
+      >
+        {MOBILE_TEXT}
+      </p>
+    </div>
+  );
+}

src/components/site/SiteNamingScreen.tsx

@@ -0,0 +1,133 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { useSiteStore } from "@/managers/stores/useSiteStore";
+import { SiteButton } from "@/components/site/SiteButton";
+import { SITE_CONFIG } from "@/data/site/siteConfig";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+
+/**
+ * Screen 3: Name input
+ */
+export function SiteNamingScreen(): React.JSX.Element {
+  const setStep = useSiteStore((state) => state.setStep);
+  const setPlayerName = useGameStore((state) => state.setPlayerName);
+  const [charIndex, setCharIndex] = useState(0);
+  const dialogueStarted = useRef(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const forcedName = SITE_CONFIG.forcedName;
+  const displayValue = forcedName.slice(0, charIndex);
+  const isComplete = charIndex >= forcedName.length;
+
+  // Play dialogue when screen appears (with subtitles)
+  useEffect(() => {
+    if (dialogueStarted.current) return;
+    dialogueStarted.current = true;
+
+    void (async () => {
+      const manifest = await loadDialogueManifest();
+      if (manifest) {
+        await playDialogueById(manifest, "narrateur_intro_prenom");
+      }
+    })();
+  }, []);
+
+  // Focus input on mount
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>): void => {
+      e.preventDefault();
+
+      // Only process if not complete and it's a letter key
+      if (!isComplete && e.key.length === 1 && /[a-zA-Z]/.test(e.key)) {
+        setCharIndex((prev) => Math.min(prev + 1, forcedName.length));
+      }
+    },
+    [isComplete, forcedName.length],
+  );
+
+  const handleConfirm = (): void => {
+    if (isComplete) {
+      setPlayerName(forcedName);
+      setStep("transition");
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 80,
+        padding: 24,
+        width: "100%",
+        maxWidth: 950,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 48,
+        }}
+      >
+        <h2
+          style={{
+            color: "#F2F2F2",
+            textAlign: "center",
+            textShadow: "0 7px 14.4px rgba(0, 0, 0, 0.25)",
+            fontFamily: "Inter, system-ui, sans-serif",
+            fontSize: "clamp(18px, 3vw, 26px)",
+            fontStyle: "normal",
+            fontWeight: 700,
+            lineHeight: "normal",
+            letterSpacing: "-1.3px",
+            margin: 0,
+          }}
+        >
+          Quel est votre prénom ?
+        </h2>
+
+        <input
+          ref={inputRef}
+          type="text"
+          value={displayValue}
+          onKeyDown={handleKeyDown}
+          readOnly
+          placeholder="Écrivez votre prénom ici"
+          style={{
+            display: "flex",
+            padding: "clamp(8px, 1.5vw, 10px)",
+            alignItems: "center",
+            width: "100%",
+            maxWidth: 800,
+            minWidth: 280,
+            gap: 10,
+            border: "4px solid #FFF",
+            background: "#D9D9D9",
+            outline: "none",
+            color: "#333",
+            caretColor: "transparent",
+            fontFamily: "Inter, system-ui, sans-serif",
+            fontSize: "clamp(16px, 2.5vw, 20px)",
+            textAlign: "left",
+            boxSizing: "border-box",
+          }}
+        />
+      </div>
+
+      <SiteButton
+        label="CONFIRMER"
+        disabled={!isComplete}
+        onClick={handleConfirm}
+      />
+    </div>
+  );
+}

src/components/site/SiteSituationScreen.tsx

@@ -0,0 +1,82 @@
+import { useSiteStore } from "@/managers/stores/useSiteStore";
+import { SiteCard } from "@/components/site/SiteCard";
+import { SiteButton } from "@/components/site/SiteButton";
+import { SITUATION_CARDS } from "@/data/site/siteConfig";
+
+/**
+ * Screen 2: Situation selection
+ */
+export function SiteSituationScreen(): React.JSX.Element {
+  const selectedSituation = useSiteStore((state) => state.selectedSituation);
+  const setSelectedSituation = useSiteStore(
+    (state) => state.setSelectedSituation,
+  );
+  const setStep = useSiteStore((state) => state.setStep);
+
+  const canProceed = selectedSituation !== null;
+
+  const handleConfirm = (): void => {
+    if (canProceed) {
+      setStep("naming");
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 40,
+        padding: 24,
+        width: "100%",
+        maxWidth: 1208,
+      }}
+    >
+      <h2
+        style={{
+          color: "#F2F2F2",
+          textAlign: "center",
+          textShadow: "0 7px 14.4px rgba(0, 0, 0, 0.25)",
+          fontFamily: "Inter, system-ui, sans-serif",
+          fontSize: "clamp(20px, 4vw, 32px)",
+          fontStyle: "normal",
+          fontWeight: 700,
+          lineHeight: "normal",
+          letterSpacing: "-1.6px",
+          margin: 0,
+        }}
+      >
+        Quelle est votre situation ?
+      </h2>
+
+      <div
+        style={{
+          display: "flex",
+          gap: 16,
+          flexWrap: "wrap",
+          justifyContent: "center",
+        }}
+      >
+        {SITUATION_CARDS.map((card, index) => (
+          <SiteCard
+            key={card.id}
+            config={card}
+            selected={selectedSituation === index}
+            onSelect={() => {
+              if (!card.disabled) {
+                setSelectedSituation(index);
+              }
+            }}
+          />
+        ))}
+      </div>
+
+      <SiteButton
+        label="CONFIRMER"
+        disabled={!canProceed}
+        onClick={handleConfirm}
+      />
+    </div>
+  );
+}

src/components/site/SiteTransitionOverlay.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { useSiteStore } from "@/managers/stores/useSiteStore";
+import { Subtitles } from "@/components/ui/Subtitles";
+import { setSiteVisited } from "@/utils/cookies/siteVisitCookie";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+
+const FADE_DURATION_MS = 1000;
+
+/**
+ * Transition overlay: black screen (fade in) + logo (fade in/out) + dialogue with subtitles + redirect to /
+ */
+export function SiteTransitionOverlay(): React.JSX.Element {
+  const navigate = useNavigate();
+  const reset = useSiteStore((state) => state.reset);
+  const [screenOpacity, setScreenOpacity] = useState(0);
+  const [logoOpacity, setLogoOpacity] = useState(0);
+  const transitionStarted = useRef(false);
+
+  useEffect(() => {
+    if (transitionStarted.current) return;
+    transitionStarted.current = true;
+
+    // Fade in black screen
+    setScreenOpacity(1);
+
+    // Set cookie
+    setSiteVisited();
+
+    // Fade in logo after the black screen transition delay.
+    setLogoOpacity(1);
+
+    // Play transition dialogue (with subtitles) then fade out logo and redirect
+    void (async () => {
+      const manifest = await loadDialogueManifest();
+      if (manifest) {
+        const dialogueAudio = await playDialogueById(
+          manifest,
+          "narrateur_intro_apresprenom",
+        );
+        if (dialogueAudio) {
+          dialogueAudio.addEventListener(
+            "ended",
+            () => {
+              // Fade out logo
+              setLogoOpacity(0);
+              // Redirect after logo fade out
+              setTimeout(() => {
+                reset();
+                navigate({ to: "/" });
+              }, FADE_DURATION_MS);
+            },
+            { once: true },
+          );
+          return;
+        }
+      }
+      // Fallback: redirect after 3s if dialogue fails
+      setTimeout(() => {
+        setLogoOpacity(0);
+        setTimeout(() => {
+          reset();
+          navigate({ to: "/" });
+        }, FADE_DURATION_MS);
+      }, 3000);
+    })();
+  }, [navigate, reset]);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 1000,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: "#000",
+          zIndex: 0,
+          opacity: screenOpacity,
+          transition: `opacity ${FADE_DURATION_MS}ms ease-in-out`,
+        }}
+      />
+      <img
+        src="/assets/logo/logo.jpg"
+        alt="Logo"
+        style={{
+          position: "relative",
+          zIndex: 1,
+          width: "min(300px, 45vw)",
+          height: "auto",
+          objectFit: "contain",
+          opacity: logoOpacity,
+          transition: `opacity ${FADE_DURATION_MS}ms ease-in-out`,
+          transitionDelay: logoOpacity === 1 ? `${FADE_DURATION_MS}ms` : "0ms",
+        }}
+      />
+      <Subtitles />
+    </div>
+  );
+}

src/components/site/SiteWelcomeScreen.tsx

@@ -0,0 +1,120 @@
+import { useSiteStore } from "@/managers/stores/useSiteStore";
+import { SiteCard } from "@/components/site/SiteCard";
+import { SiteButton } from "@/components/site/SiteButton";
+import { EXPERIENCE_CARDS } from "@/data/site/siteConfig";
+
+/**
+ * Screen 1: Welcome
+ */
+export function SiteWelcomeScreen(): React.JSX.Element {
+  const selectedExperience = useSiteStore((state) => state.selectedExperience);
+  const setSelectedExperience = useSiteStore(
+    (state) => state.setSelectedExperience,
+  );
+  const setStep = useSiteStore((state) => state.setStep);
+
+  const canProceed = selectedExperience !== null;
+
+  const handleNext = (): void => {
+    if (canProceed) {
+      setStep("situation");
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 40,
+        padding: 24,
+        width: "100%",
+        maxWidth: 1208,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <h1
+          style={{
+            color: "#F2F2F2",
+            textShadow: "0 7px 14.4px rgba(0, 0, 0, 0.25)",
+            fontFamily: '"Nersans One", system-ui, sans-serif',
+            fontSize: "clamp(40px, 8vw, 64px)",
+            fontStyle: "normal",
+            fontWeight: 400,
+            lineHeight: "normal",
+            letterSpacing: "-3px",
+            margin: 0,
+            textAlign: "center",
+          }}
+        >
+          BIENVENUE A ALTERA
+        </h1>
+        <p
+          style={{
+            color: "#F2F2F2",
+            textAlign: "center",
+            textShadow: "0 7px 14.4px rgba(0, 0, 0, 0.25)",
+            fontFamily: "Inter, system-ui, sans-serif",
+            fontSize: "clamp(18px, 3vw, 26px)",
+            fontStyle: "normal",
+            fontWeight: 400,
+            lineHeight: "normal",
+            letterSpacing: "-1.3px",
+            margin: 0,
+          }}
+        >
+          Communauté convivialiste
+        </p>
+      </div>
+
+      <h2
+        style={{
+          color: "#F2F2F2",
+          textAlign: "center",
+          textShadow: "0 7px 14.4px rgba(0, 0, 0, 0.25)",
+          fontFamily: "Inter, system-ui, sans-serif",
+          fontSize: "clamp(20px, 4vw, 32px)",
+          fontStyle: "normal",
+          fontWeight: 700,
+          lineHeight: "normal",
+          letterSpacing: "-1.6px",
+          margin: 0,
+        }}
+      >
+        Choisissez une expérience :
+      </h2>
+
+      <div
+        style={{
+          display: "flex",
+          gap: 16,
+          flexWrap: "wrap",
+          justifyContent: "center",
+        }}
+      >
+        {EXPERIENCE_CARDS.map((card, index) => (
+          <SiteCard
+            key={card.id}
+            config={card}
+            selected={selectedExperience === index}
+            onSelect={() => {
+              if (!card.disabled) {
+                setSelectedExperience(index);
+              }
+            }}
+          />
+        ))}
+      </div>
+
+      <SiteButton label="SUIVANT" disabled={!canProceed} onClick={handleNext} />
+    </div>
+  );
+}

src/components/ui/intro/IntroDialogueOverlay.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from "react";
+import { AudioManager } from "@/managers/AudioManager";
+import { useGameStore } from "@/managers/stores/useGameStore";
+
+const INTRO_DIALOGUE_PATH = "/sounds/dialogue/narrateur_ordreebike.mp3";
+
+/**
+ * Black screen overlay with dialogue audio
+ * - Plays narrateur_ordreebike.mp3
+ * - Transitions to reveal step when dialogue ends
+ */
+export function IntroDialogueOverlay(): React.JSX.Element {
+  const setIntroStep = useGameStore((state) => state.setIntroStep);
+  const dialogueStarted = useRef(false);
+
+  useEffect(() => {
+    if (dialogueStarted.current) return;
+    dialogueStarted.current = true;
+
+    // Play dialogue then transition to reveal
+    const audio = AudioManager.getInstance();
+    audio.playSoundWithCallback(INTRO_DIALOGUE_PATH, 0.8, () => {
+      setIntroStep("reveal");
+    });
+  }, [setIntroStep]);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        background: "#000",
+        zIndex: 999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <span
+        style={{
+          color: "rgba(255, 255, 255, 0.5)",
+          fontSize: 16,
+          fontFamily: "system-ui, sans-serif",
+        }}
+      >
+        ...
+      </span>
+    </div>
+  );
+}

src/components/ui/intro/IntroRevealOverlay.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { useGameStore } from "@/managers/stores/useGameStore";
+
+const REVEAL_DURATION_MS = 2000;
+
+/**
+ * Fade-out overlay for reveal transition
+ * - Starts fully black
+ * - Fades out to reveal the game world
+ * - Transitions to playing step when done
+ */
+export function IntroRevealOverlay(): React.JSX.Element {
+  const setIntroStep = useGameStore((state) => state.setIntroStep);
+  const completeIntro = useGameStore((state) => state.completeIntro);
+  const [opacity, setOpacity] = useState(1);
+
+  useEffect(() => {
+    // Start fade out
+    const fadeTimeout = window.setTimeout(() => {
+      setOpacity(0);
+    }, 100);
+
+    // Complete intro after fade
+    const completeTimeout = window.setTimeout(() => {
+      setIntroStep("playing");
+      completeIntro();
+    }, REVEAL_DURATION_MS);
+
+    return () => {
+      window.clearTimeout(fadeTimeout);
+      window.clearTimeout(completeTimeout);
+    };
+  }, [setIntroStep, completeIntro]);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        background: "#000",
+        opacity,
+        transition: `opacity ${REVEAL_DURATION_MS}ms ease-out`,
+        zIndex: 998,
+        pointerEvents: "none",
+      }}
+    />
+  );
+}

src/components/ui/intro/IntroVideoPlayer.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useRef, useEffect } from "react";
+import { useGameStore } from "@/managers/stores/useGameStore";
+
+const INTRO_VIDEO_PATH = "/cinematics/intro.mp4";
+
+/**
+ * Full-screen video player for intro cinematic
+ * - Plays intro.mp4 in fullscreen
+ * - Automatically advances to dialogue-intro step when video ends
+ * - Allows skipping with Enter/Space/Click
+ */
+export function IntroVideoPlayer(): React.JSX.Element {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const setIntroStep = useGameStore((state) => state.setIntroStep);
+
+  const handleVideoEnd = useCallback(() => {
+    setIntroStep("dialogue-intro");
+  }, [setIntroStep]);
+
+  const handleSkip = useCallback(() => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+    }
+    setIntroStep("dialogue-intro");
+  }, [setIntroStep]);
+
+  // Handle keyboard skip (Enter/Space)
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleSkip();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleSkip]);
+
+  return (
+    <div
+      onClick={handleSkip}
+      style={{
+        position: "fixed",
+        inset: 0,
+        background: "#000",
+        zIndex: 1000,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <video
+        ref={videoRef}
+        src={INTRO_VIDEO_PATH}
+        autoPlay
+        playsInline
+        onEnded={handleVideoEnd}
+        style={{
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
+      />
+      <span
+        style={{
+          position: "absolute",
+          bottom: 32,
+          right: 32,
+          color: "rgba(255, 255, 255, 0.6)",
+          fontSize: 14,
+          fontFamily: "system-ui, sans-serif",
+        }}
+      >
+        Appuyez pour passer
+      </span>
+    </div>
+  );
+}

src/components/ui/intro/index.ts

@@ -0,0 +1,3 @@
+export { IntroVideoPlayer } from "./IntroVideoPlayer";
+export { IntroDialogueOverlay } from "./IntroDialogueOverlay";
+export { IntroRevealOverlay } from "./IntroRevealOverlay";

src/data/gameplay/repairMissions.ts

@@ -4,8 +4,8 @@ import type {
   RepairMissionId,
 } from "@/types/gameplay/repairMission";
 
-const REPAIR_INTERACT_UI_PATH = "/assets/UI/interagir.webm";
+const REPAIR_INTERACT_UI_PATH = "/assets/world/UI/interagir.webm";
-const REPAIR_BROKEN_UI_PATH = "/assets/UI/cassé.webm";
+const REPAIR_BROKEN_UI_PATH = "/assets/world/UI/cassé.webm";
 
 const DEFAULT_REPAIR_CASE = {
   position: [0, 0.4, 1.8],
@@ -21,7 +21,7 @@ export const REPAIR_MISSIONS: Record<RepairMissionId, RepairMissionConfig> = {
       "Repair the damaged cooling module before relaunching the bike",
     modelPath: "/models/ebike/model.gltf",
     modelScale: 0.3,
-    stageUiPath: "/assets/UI/ebike.webm",
+    stageUiPath: "/assets/world/UI/ebike.webm",
     interactUiPath: REPAIR_INTERACT_UI_PATH,
     brokenUiPath: REPAIR_BROKEN_UI_PATH,
     case: DEFAULT_REPAIR_CASE,
@@ -59,7 +59,7 @@ export const REPAIR_MISSIONS: Record<RepairMissionId, RepairMissionConfig> = {
     description:
       "Restore the pylon lamp relay and damaged panel before reconnecting the grid",
     modelPath: "/models/pylone/model.gltf",
-    stageUiPath: "/assets/UI/centrale.webm",
+    stageUiPath: "/assets/world/UI/centrale.webm",
     interactUiPath: REPAIR_INTERACT_UI_PATH,
     brokenUiPath: REPAIR_BROKEN_UI_PATH,
     case: DEFAULT_REPAIR_CASE,
@@ -104,7 +104,7 @@ export const REPAIR_MISSIONS: Record<RepairMissionId, RepairMissionConfig> = {
     description:
       "Stabilize the irrigation loop and humidity sensor before restarting the farm",
     modelPath: "/models/fermeverticale/model.gltf",
-    stageUiPath: "/assets/UI/laferme.webm",
+    stageUiPath: "/assets/world/UI/laferme.webm",
     interactUiPath: REPAIR_INTERACT_UI_PATH,
     brokenUiPath: REPAIR_BROKEN_UI_PATH,
     case: DEFAULT_REPAIR_CASE,

src/data/site/siteConfig.ts

@@ -0,0 +1,35 @@
+export const SITE_CONFIG = {
+  backgroundImage: "/assets/bg-site.png",
+  forcedName: "Danyl",
+} as const;
+
+export interface SiteCardConfig {
+  id: string;
+  label: string;
+  imagePath?: string;
+  disabled: boolean;
+}
+
+/**
+ * Cards for screen 1: "Choisissez une expérience"
+ */
+export const EXPERIENCE_CARDS: readonly SiteCardConfig[] = [
+  { id: "exp-fabrik", label: "La Fabrik", disabled: false },
+  { id: "exp-ferme", label: "La Ferme verticale", disabled: true },
+  { id: "exp-energie", label: "La Zone d'énergie", disabled: true },
+  { id: "exp-ecole", label: "L'École", disabled: true },
+];
+
+/**
+ * Cards for screen 2: "Quelle est votre situation ?"
+ */
+export const SITUATION_CARDS: readonly SiteCardConfig[] = [
+  { id: "sit-habitants", label: "Habitants d'Altera", disabled: true },
+  { id: "sit-apprentis", label: "Apprentis-Citoyens", disabled: true },
+  {
+    id: "sit-refugies",
+    label: "Réfugiés Climatiques arrivants",
+    disabled: false,
+  },
+  { id: "sit-seniors", label: "Seniors Hyper-Connectés", disabled: true },
+];

src/managers/stores/useSiteStore.ts

@@ -0,0 +1,31 @@
+import { create } from "zustand";
+import type { SiteStep } from "@/types/game";
+
+interface SiteState {
+  currentStep: SiteStep;
+  selectedExperience: number | null;
+  selectedSituation: number | null;
+}
+
+interface SiteActions {
+  setStep: (step: SiteStep) => void;
+  setSelectedExperience: (index: number) => void;
+  setSelectedSituation: (index: number) => void;
+  reset: () => void;
+}
+
+type SiteStore = SiteState & SiteActions;
+
+const initialState: SiteState = {
+  currentStep: "disclaimer",
+  selectedExperience: null,
+  selectedSituation: null,
+};
+
+export const useSiteStore = create<SiteStore>()((set) => ({
+  ...initialState,
+  setStep: (step) => set({ currentStep: step }),
+  setSelectedExperience: (index) => set({ selectedExperience: index }),
+  setSelectedSituation: (index) => set({ selectedSituation: index }),
+  reset: () => set(initialState),
+}));

src/pages/backgroundmap/page.tsx

@@ -157,7 +157,7 @@ function CameraManager({
       const dataUrl = gl.domElement.toDataURL("image/png");
       const a = document.createElement("a");
       a.href = dataUrl;
-      a.download = "/assets/gps/map_background.png";
+      a.download = "map_background.png";
       a.click();
     };
     return () => {

src/pages/page.tsx

@@ -1,18 +1,35 @@
 import { Suspense, useCallback, useEffect, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
 import { Canvas } from "@react-three/fiber";
 import * as THREE from "three";
 import { DebugPerf } from "@/components/debug/DebugPerf";
 import { DialogMessage } from "@/components/ui/DialogMessage";
 import { GameUI } from "@/components/ui/GameUI";
+import {
+  IntroDialogueOverlay,
+  IntroRevealOverlay,
+  IntroVideoPlayer,
+} from "@/components/ui/intro";
 import { SceneLoadingOverlay } from "@/components/ui/SceneLoadingOverlay";
 import { INITIAL_SCENE_LOADING_STATE } from "@/data/world/sceneLoadingConfig";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { HandTrackingProvider } from "@/providers/gameplay/HandTrackingProvider";
 import type { SceneLoadingState } from "@/types/world/sceneLoading";
+import { hasSiteBeenVisitedToday } from "@/utils/cookies/siteVisitCookie";
 import { logger } from "@/utils/core/Logger";
 import { World } from "@/world/World";
 
 export function HomePage(): React.JSX.Element {
+  const navigate = useNavigate();
+  const introStep = useGameStore((state) => state.intro.currentStep);
+  const setIntroStep = useGameStore((state) => state.setIntroStep);
+
+  useEffect(() => {
+    if (!hasSiteBeenVisitedToday()) {
+      navigate({ to: "/site", replace: true });
+    }
+  }, [navigate]);
+
   const dialogMessage = useGameStore(
     (state) => state.missionFlow.dialogMessage,
   );
@@ -49,6 +66,12 @@ export function HomePage(): React.JSX.Element {
     [],
   );
 
+  useEffect(() => {
+    if (introStep === "loading-map" && sceneLoadingState.status === "ready") {
+      setIntroStep("video");
+    }
+  }, [introStep, sceneLoadingState.status, setIntroStep]);
+
   const handleCanvasCreated = useCallback(
     ({ gl }: { gl: THREE.WebGLRenderer }) => {
       const canvas = gl.domElement;
@@ -75,6 +98,19 @@ export function HomePage(): React.JSX.Element {
     [],
   );
 
+  const renderIntroOverlay = () => {
+    switch (introStep) {
+      case "video":
+        return <IntroVideoPlayer />;
+      case "dialogue-intro":
+        return <IntroDialogueOverlay />;
+      case "reveal":
+        return <IntroRevealOverlay />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <HandTrackingProvider>
       <Canvas
@@ -100,7 +136,10 @@ export function HomePage(): React.JSX.Element {
           onClose={hideDialog}
         />
       ) : null}
-      <SceneLoadingOverlay state={sceneLoadingState} />
+      {introStep === "loading-map" && (
+        <SceneLoadingOverlay state={sceneLoadingState} />
+      )}
+      {renderIntroOverlay()}
     </HandTrackingProvider>
   );
 }

src/pages/site/page.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { useSiteStore } from "@/managers/stores/useSiteStore";
+import { SiteDisclaimerScreen } from "@/components/site/SiteDisclaimerScreen";
+import { SiteWelcomeScreen } from "@/components/site/SiteWelcomeScreen";
+import { SiteSituationScreen } from "@/components/site/SiteSituationScreen";
+import { SiteNamingScreen } from "@/components/site/SiteNamingScreen";
+import { SiteTransitionOverlay } from "@/components/site/SiteTransitionOverlay";
+import { SiteMobileBlocker } from "@/components/site/SiteMobileBlocker";
+import { SiteLayout } from "@/components/site/SiteLayout";
+
+/**
+ * Check if user is on mobile device
+ */
+function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = (): void => {
+      const userAgent = navigator.userAgent.toLowerCase();
+      const mobileKeywords = [
+        "android",
+        "webos",
+        "iphone",
+        "ipad",
+        "ipod",
+        "blackberry",
+        "windows phone",
+      ];
+      const isMobileDevice = mobileKeywords.some((keyword) =>
+        userAgent.includes(keyword),
+      );
+      const isSmallScreen = window.innerWidth < 768;
+      setIsMobile(isMobileDevice || isSmallScreen);
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  return isMobile;
+}
+
+export function SitePage(): React.JSX.Element {
+  const currentStep = useSiteStore((state) => state.currentStep);
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return <SiteMobileBlocker />;
+  }
+
+  if (currentStep === "disclaimer") {
+    return <SiteDisclaimerScreen />;
+  }
+
+  return (
+    <SiteLayout>
+      {currentStep === "welcome" && <SiteWelcomeScreen />}
+      {currentStep === "situation" && <SiteSituationScreen />}
+      {currentStep === "naming" && <SiteNamingScreen />}
+      {currentStep === "transition" && <SiteTransitionOverlay />}
+    </SiteLayout>
+  );
+}

src/router.tsx

@@ -5,6 +5,7 @@ import {
   createRouter,
 } from "@tanstack/react-router";
 import { HomePage } from "@/pages/page";
+import { SitePage } from "@/pages/site/page";
 import { EditorPage } from "@/pages/editor/page";
 import { GalleryPage } from "@/pages/gallery/page";
 import { WaypointEditorPage } from "@/pages/waypoint/page";
@@ -42,6 +43,12 @@ const indexRoute = createRoute({
   component: HomePage,
 });
 
+const siteRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/site",
+  component: SitePage,
+});
+
 const editorRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/editor",
@@ -102,6 +109,7 @@ const docsChildRoutes = [
 
 const routeTree = rootRoute.addChildren([
   indexRoute,
+  siteRoute,
   editorRoute,
   galleryRoute,
   waypointRoute,

src/types/dialogues/dialogues.ts

@@ -13,7 +13,8 @@ export interface DialogueDefinition {
   id: string;
   voice: DialogueVoiceId;
   audio: string;
-  subtitleCueIndex: number;
+  subtitleCueIndex?: number;
+  subtitleCueIndices?: number[];
   timecode?: number;
 }
 
@@ -22,3 +23,20 @@ export interface DialogueManifest {
   voices: DialogueVoice[];
   dialogues: DialogueDefinition[];
 }
+
+export function getDialogueCueIndices(dialogue: DialogueDefinition): number[] {
+  if (dialogue.subtitleCueIndices && dialogue.subtitleCueIndices.length > 0) {
+    return dialogue.subtitleCueIndices;
+  }
+  if (dialogue.subtitleCueIndex !== undefined) {
+    return [dialogue.subtitleCueIndex];
+  }
+  return [];
+}
+
+export function getDialogueFirstCueIndex(
+  dialogue: DialogueDefinition,
+): number | undefined {
+  const indices = getDialogueCueIndices(dialogue);
+  return indices[0];
+}

src/types/game.ts

@@ -4,6 +4,7 @@ import type { RepairMissionId } from "@/types/gameplay/repairMission";
  * Steps for the /site onboarding page
  */
 export type SiteStep =
+  | "disclaimer" // Écran 0: Avertissement (ordi recommandé, bonne connexion)
   | "welcome" // Écran 1: Bienvenue à Altera
   | "situation" // Écran 2: Quelle est votre situation
   | "naming" // Écran 3: Quel est votre prénom (Danyl)

src/utils/cookies/siteVisitCookie.ts

@@ -0,0 +1,35 @@
+const COOKIE_NAME = "siteVisited";
+const EXPIRY_HOURS = 24;
+
+/**
+ * Check if the site has been visited today (within 24 hours)
+ */
+export function hasSiteBeenVisitedToday(): boolean {
+  const cookies = document.cookie.split(";");
+
+  for (const cookie of cookies) {
+    const [name, value] = cookie.trim().split("=");
+    if (name === COOKIE_NAME && value === "true") {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Set the site visited cookie with 24-hour expiration
+ */
+export function setSiteVisited(): void {
+  const expiryDate = new Date();
+  expiryDate.setTime(expiryDate.getTime() + EXPIRY_HOURS * 60 * 60 * 1000);
+
+  document.cookie = `${COOKIE_NAME}=true; expires=${expiryDate.toUTCString()}; path=/; SameSite=Strict`;
+}
+
+/**
+ * Clear the site visited cookie (useful for debugging)
+ */
+export function clearSiteVisited(): void {
+  document.cookie = `${COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}

src/utils/dialogues/dialogueManifestValidation.ts

@@ -93,13 +93,26 @@ function parseDialogueDefinition(
     throw new Error(`Dialogue ${data.id} has an invalid audio path`);
   }
 
+  // Support both subtitleCueIndex (legacy) and subtitleCueIndices (new)
   const subtitleCueIndex = data.subtitleCueIndex;
-  if (
+  const subtitleCueIndices = data.subtitleCueIndices;
-    typeof subtitleCueIndex !== "number" ||
+
-    !Number.isInteger(subtitleCueIndex) ||
+  const hasLegacyIndex =
-    subtitleCueIndex < 1
+    typeof subtitleCueIndex === "number" &&
-  ) {
+    Number.isInteger(subtitleCueIndex) &&
-    throw new Error(`Dialogue ${data.id} has an invalid subtitle cue index`);
+    subtitleCueIndex >= 1;
+
+  const hasNewIndices =
+    Array.isArray(subtitleCueIndices) &&
+    subtitleCueIndices.length > 0 &&
+    subtitleCueIndices.every(
+      (idx) => typeof idx === "number" && Number.isInteger(idx) && idx >= 1,
+    );
+
+  if (!hasLegacyIndex && !hasNewIndices) {
+    throw new Error(
+      `Dialogue ${data.id} must have subtitleCueIndex or subtitleCueIndices`,
+    );
   }
 
   const timecode = data.timecode;
@@ -111,9 +124,14 @@ function parseDialogueDefinition(
     id: data.id,
     voice: data.voice,
     audio: data.audio,
-    subtitleCueIndex,
   };
 
+  if (hasNewIndices) {
+    dialogue.subtitleCueIndices = subtitleCueIndices as number[];
+  } else if (hasLegacyIndex) {
+    dialogue.subtitleCueIndex = subtitleCueIndex;
+  }
+
   if (timecode !== undefined) dialogue.timecode = timecode;
 
   return dialogue;

src/utils/dialogues/loadDialogueManifest.ts

@@ -3,6 +3,7 @@ import type {
   DialogueManifest,
   DialogueVoice,
 } from "@/types/dialogues/dialogues";
+import { getDialogueCueIndices } from "@/types/dialogues/dialogues";
 import type { SubtitleLanguage } from "@/types/settings/settings";
 import { parseDialogueManifest } from "@/utils/dialogues/dialogueManifestValidation";
 import { parseSrt } from "@/utils/subtitles/parseSrt";
@@ -17,6 +18,15 @@ export interface DialogueSubtitleCue {
   subtitlePath: string;
 }
 
+/**
+ * Multiple subtitle cues for a single dialogue
+ */
+export interface DialogueSubtitleCues {
+  voice: DialogueVoice;
+  cues: SubtitleCue[];
+  subtitlePath: string;
+}
+
 export async function loadDialogueManifest(): Promise<DialogueManifest | null> {
   const response = await fetch(DIALOGUE_MANIFEST_PATH);
 
@@ -39,21 +49,40 @@ export async function loadDialogueSubtitleCue(
   dialogue: DialogueDefinition,
   language: SubtitleLanguage,
 ): Promise<DialogueSubtitleCue | null> {
+  const result = await loadDialogueSubtitleCues(manifest, dialogue, language);
+  const firstCue = result?.cues[0];
+  if (!result || !firstCue) return null;
+
+  return {
+    voice: result.voice,
+    cue: firstCue,
+    subtitlePath: result.subtitlePath,
+  };
+}
+
+export async function loadDialogueSubtitleCues(
+  manifest: DialogueManifest,
+  dialogue: DialogueDefinition,
+  language: SubtitleLanguage,
+): Promise<DialogueSubtitleCues | null> {
   const voice = getDialogueVoice(manifest, dialogue.voice);
   if (!voice) return null;
 
   const subtitles = await loadVoiceSubtitleCues(voice, language);
   if (!subtitles) return null;
 
-  const cue = subtitles.cues.find(
+  const cueIndices = getDialogueCueIndices(dialogue);
-    (item) => item.index === dialogue.subtitleCueIndex,
+  if (cueIndices.length === 0) return null;
-  );
 
-  if (!cue) return null;
+  const cues = cueIndices
+    .map((index) => subtitles.cues.find((item) => item.index === index))
+    .filter((cue): cue is SubtitleCue => cue !== undefined);
+
+  if (cues.length === 0) return null;
 
   return {
     voice,
-    cue,
+    cues,
     subtitlePath: subtitles.path,
   };
 }

src/utils/dialogues/playDialogue.ts

@@ -3,7 +3,8 @@ import { useSettingsStore } from "@/managers/stores/useSettingsStore";
 import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
 import type { DialogueManifest } from "@/types/dialogues/dialogues";
 import { logger } from "@/utils/core/Logger";
-import { loadDialogueSubtitleCue } from "@/utils/dialogues/loadDialogueManifest";
+import { loadDialogueSubtitleCues } from "@/utils/dialogues/loadDialogueManifest";
+import type { SubtitleCue } from "@/utils/subtitles/parseSrt";
 
 interface QueuedDialogueRequest {
   manifest: DialogueManifest;
@@ -15,6 +16,8 @@ const DIALOGUE_PLAY_START_TIMEOUT_MS = 800;
 const dialogueQueue: QueuedDialogueRequest[] = [];
 let isDialogueQueuePlaying = false;
 
+let currentDialogueAudio: HTMLAudioElement | null = null;
+
 export function queueDialogueById(
   manifest: DialogueManifest,
   dialogueId: string,
@@ -31,15 +34,26 @@ export function clearQueuedDialogues(): void {
   }
 }
 
+export function stopCurrentDialogue(): void {
+  if (currentDialogueAudio && !currentDialogueAudio.paused) {
+    currentDialogueAudio.pause();
+    currentDialogueAudio.currentTime = 0;
+  }
+  currentDialogueAudio = null;
+  useSubtitleStore.getState().clearActiveSubtitle();
+}
+
 export async function playDialogueById(
   manifest: DialogueManifest,
   dialogueId: string,
 ): Promise<HTMLAudioElement | null> {
+  stopCurrentDialogue();
+
   const dialogue = manifest.dialogues.find((item) => item.id === dialogueId);
   if (!dialogue) return null;
 
   const subtitleLanguage = useSettingsStore.getState().subtitleLanguage;
-  const subtitle = await loadDialogueSubtitleCue(
+  const subtitleData = await loadDialogueSubtitleCues(
     manifest,
     dialogue,
     subtitleLanguage,
@@ -48,7 +62,11 @@ export async function playDialogueById(
     category: "dialogue",
   });
 
-  if (!subtitle) return audio;
+  currentDialogueAudio = audio;
+
+  if (!subtitleData || subtitleData.cues.length === 0) return audio;
+
+  const { voice, cues } = subtitleData;
 
   const clearSubtitle = (): void => {
     useSubtitleStore.getState().clearActiveSubtitle();
@@ -60,18 +78,28 @@ export async function playDialogueById(
     audio.removeEventListener("ended", cleanup);
     audio.removeEventListener("pause", cleanup);
     clearSubtitle();
+    if (currentDialogueAudio === audio) {
+      currentDialogueAudio = null;
+    }
+  };
+
+  const findActiveCue = (currentTime: number): SubtitleCue | null => {
+    for (const cue of cues) {
+      if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
+        return cue;
+      }
+    }
+    return null;
   };
 
   const syncSubtitle = (): void => {
     const currentTime = audio.currentTime;
-    const shouldShowSubtitle =
+    const activeCue = findActiveCue(currentTime);
-      currentTime >= subtitle.cue.startTime &&
-      currentTime <= subtitle.cue.endTime;
 
-    if (shouldShowSubtitle) {
+    if (activeCue) {
       useSubtitleStore.getState().setActiveSubtitle({
-        speaker: subtitle.voice.speaker,
+        speaker: voice.speaker,
-        text: subtitle.cue.text,
+        text: activeCue.text,
       });
       return;
     }

src/world/debug/TestMap.tsx

@@ -275,7 +275,7 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
             height={4}
             startPos={{ x: 10, y: 0, z: -10 }}
             destPos={{ x: -40, y: 0, z: 30 }}
-            mapImageUrl="/assets/gps/map_background.png"
+            mapImageUrl="/assets/world/gps/map_background.png"
             worldBounds={{
               minX: -166,
               maxX: 163,