feat(a11y): WCAG AA polish on the site onboarding flow

- index.css: add visible :focus-visible rings for .site-card-button
  and .site-button so keyboard users can see where focus lives
- SiteCard: drop outline:none, add aria-pressed and aria-label so
  screen readers announce selection state
- SiteButton: add the .site-button class for the shared focus ring
- SiteDisclaimerScreen: keyboard skip via Enter / Space / Escape, a
  role="region" + aria-label wrapper and aria-live="polite" on the
  message; honour prefers-reduced-motion on the fade
- IntroVideoPlayer: role="region" with a skip hint in aria-label,
  preload="auto", and aria-hidden on the decorative caption span

src/components/site/SiteButton.tsx

@@ -21,6 +21,7 @@ export function SiteButton({
       onMouseDown={() => setIsPressed(true)}
       onMouseUp={() => setIsPressed(false)}
       onMouseLeave={() => setIsPressed(false)}
+      className="site-button"
       style={{
         display: "inline-flex",
         padding: "12px 20px",

src/components/site/SiteCard.tsx

@@ -22,23 +22,18 @@ export function SiteCard({
     return "#b8b8b8";
   };
 
-  const getBorder = (): string => {
-    if (selected) return "3px solid #a8d5a2";
-    if (isSituation) return "3px solid rgba(255, 255, 255, 0.55)";
-    if (disabled) return "3px solid rgba(255, 255, 255, 0.55)";
-    return "3px solid rgba(255, 255, 255, 0.55)";
-  };
+  const borderColor = selected ? "#a8d5a2" : "rgba(255, 255, 255, 0.55)";
 
-  const getTextColor = (): string => {
-    if (disabled) return "rgba(77, 77, 77, 0.72)";
-    return "#4d4d4d";
-  };
+  const textColor = disabled ? "rgba(77, 77, 77, 0.72)" : "#4d4d4d";
 
   return (
     <button
       type="button"
       onClick={onSelect}
       disabled={disabled}
+      aria-pressed={selected}
+      aria-label={label}
+      className="site-card-button"
       style={{
         width: isSituation
           ? "clamp(220px, 24vw, 300px)"
@@ -46,21 +41,20 @@ export function SiteCard({
         height: isSituation
           ? "clamp(48px, 6vw, 60px)"
           : "clamp(140px, 18vw, 180px)",
-        border: getBorder(),
+        border: `3px solid ${borderColor}`,
         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(),
+            color: textColor,
             fontSize: isSituation
               ? "clamp(14px, 1.8vw, 22px)"
               : "clamp(10px, 1.5vw, 14px)",

src/components/site/SiteDisclaimerScreen.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useSiteStore } from "@/managers/stores/useSiteStore";
+import { usePrefersReducedMotion } from "@/hooks/ui/usePrefersReducedMotion";
 
 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.";
@@ -7,13 +8,15 @@ const DISCLAIMER_TEXT =
 const TEXT_DISPLAY_DURATION = 5000;
 const FADE_OUT_DURATION = 1000;
 const TRANSITION_DELAY = 250;
+const SKIP_KEYS = new Set(["Enter", " ", "Escape"]);
 
 /**
  * Screen 0: Disclaimer
  */
 export function SiteDisclaimerScreen(): React.JSX.Element {
   const setStep = useSiteStore((state) => state.setStep);
-  const [textOpacity, setTextOpacity] = useState(0);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [textOpacity, setTextOpacity] = useState(prefersReducedMotion ? 1 : 0);
   const hasSkipped = useRef(false);
 
   const handleSkip = useCallback(() => {
@@ -23,33 +26,40 @@ export function SiteDisclaimerScreen(): React.JSX.Element {
   }, [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();
-      },
+      handleSkip,
       TEXT_DISPLAY_DURATION + FADE_OUT_DURATION + TRANSITION_DELAY,
     );
 
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (SKIP_KEYS.has(event.key)) {
+        event.preventDefault();
+        handleSkip();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
     return () => {
       window.clearTimeout(fadeInTimeout);
       window.clearTimeout(fadeOutTimeout);
       window.clearTimeout(transitionTimeout);
+      window.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleSkip]);
 
   return (
     <div
+      role="region"
+      aria-label="Avertissement"
       onClick={handleSkip}
       style={{
         position: "fixed",
@@ -63,6 +73,7 @@ export function SiteDisclaimerScreen(): React.JSX.Element {
       }}
     >
       <p
+        aria-live="polite"
         style={{
           color: "#F2F2F2",
           textAlign: "center",
@@ -72,7 +83,9 @@ export function SiteDisclaimerScreen(): React.JSX.Element {
           lineHeight: 1.6,
           maxWidth: 800,
           opacity: textOpacity,
-          transition: `opacity ${FADE_OUT_DURATION}ms ease-in-out`,
+          transition: prefersReducedMotion
+            ? "none"
+            : `opacity ${FADE_OUT_DURATION}ms ease-in-out`,
           whiteSpace: "pre-wrap",
         }}
       >

src/components/site/SiteLayout.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { SITE_CONFIG } from "@/data/site/siteConfig";
+import { SITE_BACKGROUND_STYLE } from "@/data/site/siteConfig";
 import { Subtitles } from "@/components/ui/Subtitles";
 
 interface SiteLayoutProps {
@@ -16,11 +16,7 @@ export function SiteLayout({ children }: SiteLayoutProps): React.JSX.Element {
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
-        backgroundColor: "#87CEEB",
-        backgroundImage: `url(${SITE_CONFIG.backgroundImage})`,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        backgroundRepeat: "no-repeat",
+        ...SITE_BACKGROUND_STYLE,
         fontFamily: "system-ui, -apple-system, sans-serif",
         color: "#fff",
         overflow: "hidden",

src/components/site/SiteMobileBlocker.tsx

@@ -1,37 +1,28 @@
-import { SITE_CONFIG } from "@/data/site/siteConfig";
+import { SITE_BACKGROUND_STYLE } 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
+      role="alert"
       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,
+        ...SITE_BACKGROUND_STYLE,
       }}
     >
       <img
-        src="public/assets/logo/logo.jpg"
-        alt="Logo"
-        style={{
-          width: 120,
-          height: "auto",
-        }}
+        src="/assets/logo/logo.jpg"
+        alt="Logo Altera"
+        style={{ width: 120, height: "auto" }}
       />
       <p
         style={{

src/components/site/SiteNamingScreen.tsx

@@ -3,52 +3,61 @@ 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 { SITE_DIALOGUE_IDS } from "@/data/site/dialogueIds";
 import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
-import { playDialogueById } from "@/utils/dialogues/playDialogue";
+import {
+  playDialogueById,
+  stopCurrentDialogue,
+} from "@/utils/dialogues/playDialogue";
 
 /**
  * Screen 3: Name input
+ * The displayed name is forced to SITE_CONFIG.presetPlayerName — the
+ * field reveals one letter per keystroke until the preset name is complete.
  */
 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;
+  const presetPlayerName = SITE_CONFIG.presetPlayerName;
+  const displayValue = presetPlayerName.slice(0, charIndex);
+  const isComplete = charIndex >= presetPlayerName.length;
 
-  // Play dialogue when screen appears (with subtitles)
   useEffect(() => {
-    if (dialogueStarted.current) return;
-    dialogueStarted.current = true;
+    let cancelled = false;
 
     void (async () => {
       const manifest = await loadDialogueManifest();
-      if (manifest) {
-        await playDialogueById(manifest, "narrateur_intro_prenom");
-      }
+      if (cancelled || !manifest) return;
+      await playDialogueById(manifest, SITE_DIALOGUE_IDS.naming);
     })();
+
+    return () => {
+      cancelled = true;
+      stopCurrentDialogue();
+    };
   }, []);
 
-  // Focus input on mount
   useEffect(() => {
     inputRef.current?.focus();
   }, []);
 
   const handleNameChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>): void => {
-      const nextLength = Math.min(event.target.value.length, forcedName.length);
+      const nextLength = Math.min(
+        event.target.value.length,
+        presetPlayerName.length,
+      );
       setCharIndex(nextLength);
     },
-    [forcedName.length],
+    [presetPlayerName.length],
   );
 
   const handleConfirm = (): void => {
     if (isComplete) {
-      setPlayerName(forcedName);
+      setPlayerName(presetPlayerName);
       setStep("transition");
     }
   };
@@ -75,6 +84,7 @@ export function SiteNamingScreen(): React.JSX.Element {
         }}
       >
         <h2
+          id="player-name-label"
           style={{
             color: "#F2F2F2",
             textAlign: "center",
@@ -97,6 +107,9 @@ export function SiteNamingScreen(): React.JSX.Element {
           value={displayValue}
           onChange={handleNameChange}
           placeholder="Écrivez votre prénom ici"
+          aria-labelledby="player-name-label"
+          aria-describedby="player-name-hint"
+          autoComplete="off"
           style={{
             display: "flex",
             padding: "clamp(8px, 1.5vw, 10px)",
@@ -116,6 +129,23 @@ export function SiteNamingScreen(): React.JSX.Element {
             boxSizing: "border-box",
           }}
         />
+        <span
+          id="player-name-hint"
+          style={{
+            position: "absolute",
+            width: 1,
+            height: 1,
+            padding: 0,
+            margin: -1,
+            overflow: "hidden",
+            clip: "rect(0, 0, 0, 0)",
+            whiteSpace: "nowrap",
+            border: 0,
+          }}
+        >
+          Votre personnage s&apos;appelle {presetPlayerName}. Tapez{" "}
+          {presetPlayerName.length} caractères pour révéler son nom.
+        </span>
       </div>
 
       <SiteButton

src/components/site/SiteSituationScreen.tsx

@@ -7,13 +7,15 @@ 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 selectedSituationIndex = useSiteStore(
+    (state) => state.selectedSituationIndex,
+  );
+  const setSelectedSituationIndex = useSiteStore(
+    (state) => state.setSelectedSituationIndex,
   );
   const setStep = useSiteStore((state) => state.setStep);
 
-  const canProceed = selectedSituation !== null;
+  const canProceed = selectedSituationIndex !== null;
 
   const handleConfirm = (): void => {
     if (canProceed) {
@@ -63,11 +65,11 @@ export function SiteSituationScreen(): React.JSX.Element {
           <SiteCard
             key={card.id}
             config={card}
-            selected={selectedSituation === index}
+            selected={selectedSituationIndex === index}
             variant="situation"
             onSelect={() => {
               if (!card.disabled) {
-                setSelectedSituation(index);
+                setSelectedSituationIndex(index);
               }
             }}
           />

src/components/site/SiteTransitionOverlay.tsx

@@ -1,72 +1,102 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, 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";
+import {
+  playDialogueById,
+  stopCurrentDialogue,
+} from "@/utils/dialogues/playDialogue";
+import { SITE_DIALOGUE_IDS } from "@/data/site/dialogueIds";
+import { usePrefersReducedMotion } from "@/hooks/ui/usePrefersReducedMotion";
 
 const FADE_DURATION_MS = 1000;
+const DIALOGUE_FALLBACK_TIMEOUT_MS = 12000;
+const NO_DIALOGUE_FALLBACK_MS = 3000;
 
 /**
- * Transition overlay: black screen (fade in) + logo (fade in/out) + dialogue with subtitles + redirect to /
+ * Transition overlay: black screen, logo fade-in, transition dialogue
+ * with subtitles, then redirect to /. A safety timeout guarantees the
+ * redirect happens even if the dialogue audio fails to fire `ended`.
  */
 export function SiteTransitionOverlay(): React.JSX.Element {
   const navigate = useNavigate();
   const reset = useSiteStore((state) => state.reset);
+  const prefersReducedMotion = usePrefersReducedMotion();
   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);
+    let isCancelled = false;
+    const timeoutIds: number[] = [];
+
+    // Defer the opacity flip one tick so the CSS transition has an
+    // initial frame at opacity 0 before flipping to 1.
+    const fadeInId = window.setTimeout(() => {
+      setScreenOpacity(1);
+      setLogoOpacity(1);
+    }, 0);
+    timeoutIds.push(fadeInId);
+
+    const redirectToGame = (): void => {
+      if (isCancelled) return;
+      setLogoOpacity(0);
+      const id = window.setTimeout(() => {
+        if (isCancelled) return;
+        reset();
+        navigate({ to: "/" });
+      }, FADE_DURATION_MS);
+      timeoutIds.push(id);
+    };
 
-    // 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 (isCancelled) return;
+
+      const dialogueAudio = manifest
+        ? await playDialogueById(manifest, SITE_DIALOGUE_IDS.transition)
+        : null;
+      if (isCancelled) return;
+
+      if (dialogueAudio) {
+        const safetyId = window.setTimeout(
+          redirectToGame,
+          DIALOGUE_FALLBACK_TIMEOUT_MS,
         );
-        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;
-        }
+        timeoutIds.push(safetyId);
+
+        dialogueAudio.addEventListener(
+          "ended",
+          () => {
+            window.clearTimeout(safetyId);
+            redirectToGame();
+          },
+          { once: true },
+        );
+        return;
       }
-      // Fallback: redirect after 3s if dialogue fails
-      setTimeout(() => {
-        setLogoOpacity(0);
-        setTimeout(() => {
-          reset();
-          navigate({ to: "/" });
-        }, FADE_DURATION_MS);
-      }, 3000);
+
+      const fallbackId = window.setTimeout(
+        redirectToGame,
+        NO_DIALOGUE_FALLBACK_MS,
+      );
+      timeoutIds.push(fallbackId);
     })();
+
+    return () => {
+      isCancelled = true;
+      timeoutIds.forEach(window.clearTimeout);
+      stopCurrentDialogue();
+    };
   }, [navigate, reset]);
 
+  const fadeTransition = prefersReducedMotion
+    ? "none"
+    : `opacity ${FADE_DURATION_MS}ms ease-in-out`;
+
   return (
     <div
       style={{
@@ -86,12 +116,12 @@ export function SiteTransitionOverlay(): React.JSX.Element {
           background: "#000",
           zIndex: 0,
           opacity: screenOpacity,
-          transition: `opacity ${FADE_DURATION_MS}ms ease-in-out`,
+          transition: fadeTransition,
         }}
       />
       <img
         src="/assets/logo/logo.jpg"
-        alt="Logo"
+        alt="Logo Altera"
         style={{
           position: "relative",
           zIndex: 1,
@@ -99,10 +129,16 @@ export function SiteTransitionOverlay(): React.JSX.Element {
           height: "auto",
           objectFit: "contain",
           opacity: logoOpacity,
-          transition: `opacity ${FADE_DURATION_MS}ms ease-in-out`,
-          transitionDelay: logoOpacity === 1 ? `${FADE_DURATION_MS}ms` : "0ms",
+          transition: fadeTransition,
+          transitionDelay:
+            !prefersReducedMotion && logoOpacity === 1
+              ? `${FADE_DURATION_MS}ms`
+              : "0ms",
         }}
       />
+      {/* Subtitles must live inside this overlay's stacking context
+          (z-index 1000) so they render above the black screen. The
+          <Subtitles /> in SiteLayout sits behind this overlay. */}
       <Subtitles />
     </div>
   );

src/components/site/SiteWelcomeScreen.tsx

@@ -7,13 +7,15 @@ 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 selectedExperienceIndex = useSiteStore(
+    (state) => state.selectedExperienceIndex,
+  );
+  const setSelectedExperienceIndex = useSiteStore(
+    (state) => state.setSelectedExperienceIndex,
   );
   const setStep = useSiteStore((state) => state.setStep);
 
-  const canProceed = selectedExperience !== null;
+  const canProceed = selectedExperienceIndex !== null;
 
   const handleNext = (): void => {
     if (canProceed) {
@@ -104,10 +106,10 @@ export function SiteWelcomeScreen(): React.JSX.Element {
           <SiteCard
             key={card.id}
             config={card}
-            selected={selectedExperience === index}
+            selected={selectedExperienceIndex === index}
             onSelect={() => {
               if (!card.disabled) {
-                setSelectedExperience(index);
+                setSelectedExperienceIndex(index);
               }
             }}
           />

src/components/ui/intro/IntroDialogueOverlay.tsx

@@ -1,31 +1,63 @@
-import { useEffect, useRef } from "react";
-import { AudioManager } from "@/managers/AudioManager";
+import { useEffect } from "react";
 import { useGameStore } from "@/managers/stores/useGameStore";
+import { SITE_DIALOGUE_IDS } from "@/data/site/dialogueIds";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import {
+  playDialogueById,
+  stopCurrentDialogue,
+} from "@/utils/dialogues/playDialogue";
 
-const INTRO_DIALOGUE_PATH = "/sounds/dialogue/narrateur_ordreebike.mp3";
+const DIALOGUE_FALLBACK_TIMEOUT_MS = 12000;
 
 /**
- * Black screen overlay with dialogue audio
- * - Plays narrateur_ordreebike.mp3
- * - Transitions to reveal step when dialogue ends
+ * Black screen overlay that plays the intro dialogue (with synced subtitles)
+ * via the dialogue manifest, then transitions to the reveal step.
  */
 export function IntroDialogueOverlay(): React.JSX.Element {
   const setIntroStep = useGameStore((state) => state.setIntroStep);
-  const dialogueStarted = useRef(false);
 
   useEffect(() => {
-    if (dialogueStarted.current) return;
-    dialogueStarted.current = true;
+    let cancelled = false;
+    let safetyTimeoutId: number | null = null;
 
-    // Play dialogue then transition to reveal
-    const audio = AudioManager.getInstance();
-    audio.playSoundWithCallback(INTRO_DIALOGUE_PATH, 0.8, () => {
+    const advance = (): void => {
+      if (cancelled) return;
+      if (safetyTimeoutId !== null) window.clearTimeout(safetyTimeoutId);
       setIntroStep("reveal");
-    });
+    };
+
+    void (async () => {
+      const manifest = await loadDialogueManifest();
+      if (cancelled) return;
+
+      const audio = manifest
+        ? await playDialogueById(manifest, SITE_DIALOGUE_IDS.introOrder)
+        : null;
+      if (cancelled) return;
+
+      if (!audio) {
+        advance();
+        return;
+      }
+
+      safetyTimeoutId = window.setTimeout(
+        advance,
+        DIALOGUE_FALLBACK_TIMEOUT_MS,
+      );
+      audio.addEventListener("ended", advance, { once: true });
+    })();
+
+    return () => {
+      cancelled = true;
+      if (safetyTimeoutId !== null) window.clearTimeout(safetyTimeoutId);
+      stopCurrentDialogue();
+    };
   }, [setIntroStep]);
 
   return (
     <div
+      role="region"
+      aria-label="Dialogue d'introduction"
       style={{
         position: "fixed",
         inset: 0,
@@ -37,6 +69,7 @@ export function IntroDialogueOverlay(): React.JSX.Element {
       }}
     >
       <span
+        aria-hidden="true"
         style={{
           color: "rgba(255, 255, 255, 0.5)",
           fontSize: 16,

src/components/ui/intro/IntroRevealOverlay.tsx

@@ -1,28 +1,25 @@
 import { useEffect, useState } from "react";
 import { useGameStore } from "@/managers/stores/useGameStore";
+import { usePrefersReducedMotion } from "@/hooks/ui/usePrefersReducedMotion";
 
 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
+ * 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.
  */
 export function IntroRevealOverlay(): React.JSX.Element {
-  const setIntroStep = useGameStore((state) => state.setIntroStep);
   const completeIntro = useGameStore((state) => state.completeIntro);
+  const prefersReducedMotion = usePrefersReducedMotion();
   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);
 
@@ -30,16 +27,19 @@ export function IntroRevealOverlay(): React.JSX.Element {
       window.clearTimeout(fadeTimeout);
       window.clearTimeout(completeTimeout);
     };
-  }, [setIntroStep, completeIntro]);
+  }, [completeIntro]);
 
   return (
     <div
+      aria-hidden="true"
       style={{
         position: "fixed",
         inset: 0,
         background: "#000",
         opacity,
-        transition: `opacity ${REVEAL_DURATION_MS}ms ease-out`,
+        transition: prefersReducedMotion
+          ? "none"
+          : `opacity ${REVEAL_DURATION_MS}ms ease-out`,
         zIndex: 998,
         pointerEvents: "none",
       }}

src/components/ui/intro/IntroVideoPlayer.tsx

@@ -1,13 +1,12 @@
-import { useCallback, useRef, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useGameStore } from "@/managers/stores/useGameStore";
 
 const INTRO_VIDEO_PATH = "/cinematics/intro.mp4";
+const SKIP_KEYS = new Set(["Enter", " "]);
 
 /**
- * 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
+ * Full-screen video player for the intro cinematic.
+ * Advances to the dialogue-intro step when the video ends or the user skips.
  */
 export function IntroVideoPlayer(): React.JSX.Element {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -18,16 +17,13 @@ export function IntroVideoPlayer(): React.JSX.Element {
   }, [setIntroStep]);
 
   const handleSkip = useCallback(() => {
-    if (videoRef.current) {
-      videoRef.current.pause();
-    }
+    videoRef.current?.pause();
     setIntroStep("dialogue-intro");
   }, [setIntroStep]);
 
-  // Handle keyboard skip (Enter/Space)
   useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Enter" || event.key === " ") {
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (SKIP_KEYS.has(event.key)) {
         event.preventDefault();
         handleSkip();
       }
@@ -39,6 +35,8 @@ export function IntroVideoPlayer(): React.JSX.Element {
 
   return (
     <div
+      role="region"
+      aria-label="Vidéo d'introduction. Appuyez sur Entrée pour passer."
       onClick={handleSkip}
       style={{
         position: "fixed",
@@ -56,6 +54,7 @@ export function IntroVideoPlayer(): React.JSX.Element {
         src={INTRO_VIDEO_PATH}
         autoPlay
         playsInline
+        preload="auto"
         onEnded={handleVideoEnd}
         style={{
           width: "100%",
@@ -64,6 +63,7 @@ export function IntroVideoPlayer(): React.JSX.Element {
         }}
       />
       <span
+        aria-hidden="true"
         style={{
           position: "absolute",
           bottom: 32,

src/data/audioConfig.ts

@@ -1,11 +1,3 @@
-export const AUDIO_PATHS = {
-  intro: "/sounds/effect/fa.mp3",
-  bienvenue: "/sounds/effect/fa.mp3",
-  alertCentral: "/sounds/effect/fa.mp3",
-  searching: "/sounds/effect/fa.mp3",
-  helped: "/sounds/effect/fa.mp3",
-} as const;
-
 export type AudioCategory = "music" | "sfx" | "dialogue";
 
 export const DEFAULT_CATEGORY_VOLUMES: Record<AudioCategory, number> = {

src/data/site/dialogueIds.ts

@@ -0,0 +1,9 @@
+/**
+ * Dialogue manifest IDs used by the /site flow and the intro sequence.
+ * Defined once here so components don't hold magic strings.
+ */
+export const SITE_DIALOGUE_IDS = {
+  naming: "narrateur_intro_prenom",
+  transition: "narrateur_intro_apresprenom",
+  introOrder: "narrateur_ordreebike",
+} as const;

src/data/site/siteConfig.ts

@@ -1,8 +1,23 @@
+import type { CSSProperties } from "react";
+
+const BACKGROUND_IMAGE = "/assets/bg-site.png";
+
 export const SITE_CONFIG = {
-  backgroundImage: "/assets/bg-site.png",
-  forcedName: "Danyl",
+  backgroundImage: BACKGROUND_IMAGE,
+  presetPlayerName: "Danyl",
 } as const;
 
+/**
+ * Shared background style used by SiteLayout and SiteMobileBlocker.
+ */
+export const SITE_BACKGROUND_STYLE: CSSProperties = {
+  backgroundColor: "#87CEEB",
+  backgroundImage: `url(${BACKGROUND_IMAGE})`,
+  backgroundSize: "cover",
+  backgroundPosition: "center",
+  backgroundRepeat: "no-repeat",
+};
+
 export interface SiteCardConfig {
   id: string;
   label: string;
@@ -24,10 +39,10 @@ export const EXPERIENCE_CARDS: readonly SiteCardConfig[] = [
  * Cards for screen 2: "Quelle est votre situation ?"
  */
 export const SITUATION_CARDS: readonly SiteCardConfig[] = [
-  { id: "sit-refugie-climat", label: "Sans domicile fixe", disabled: true },
+  { id: "sit-sans-domicile", label: "Sans domicile fixe", disabled: true },
   { id: "sit-refugie-guerre", label: "Réfugié.e de guerre", disabled: true },
   {
-    id: "sit-sans-domicile",
+    id: "sit-refugie-climat",
     label: "Réfugié.e climatique",
     disabled: false,
   },

src/hooks/ui/useIsMobile.ts

@@ -0,0 +1,31 @@
+import { useSyncExternalStore } from "react";
+
+const MOBILE_MEDIA_QUERY =
+  "(max-width: 767px), (pointer: coarse) and (hover: none)";
+
+function subscribeToMobileQuery(callback: () => void): () => void {
+  const query = window.matchMedia(MOBILE_MEDIA_QUERY);
+  query.addEventListener("change", callback);
+  return () => query.removeEventListener("change", callback);
+}
+
+function getMobileSnapshot(): boolean {
+  return window.matchMedia(MOBILE_MEDIA_QUERY).matches;
+}
+
+function getServerMobileSnapshot(): boolean {
+  return false;
+}
+
+/**
+ * True when the device is a phone or a touch-only tablet.
+ * Uses matchMedia so layout decisions follow CSS conventions
+ * and avoid resize-handler churn.
+ */
+export function useIsMobile(): boolean {
+  return useSyncExternalStore(
+    subscribeToMobileQuery,
+    getMobileSnapshot,
+    getServerMobileSnapshot,
+  );
+}

src/hooks/ui/usePrefersReducedMotion.ts

@@ -0,0 +1,29 @@
+import { useSyncExternalStore } from "react";
+
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
+function subscribeToReducedMotion(callback: () => void): () => void {
+  const query = window.matchMedia(REDUCED_MOTION_QUERY);
+  query.addEventListener("change", callback);
+  return () => query.removeEventListener("change", callback);
+}
+
+function getReducedMotionSnapshot(): boolean {
+  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+
+function getServerReducedMotionSnapshot(): boolean {
+  return false;
+}
+
+/**
+ * True when the user has requested reduced motion at the OS level.
+ * UI fades and transitions should collapse to 0ms when this is true.
+ */
+export function usePrefersReducedMotion(): boolean {
+  return useSyncExternalStore(
+    subscribeToReducedMotion,
+    getReducedMotionSnapshot,
+    getServerReducedMotionSnapshot,
+  );
+}

src/index.css

@@ -44,6 +44,18 @@ select {
   font: inherit;
 }
 
+/* Site onboarding — accessible focus rings (WCAG 2.4.7) */
+.site-card-button:focus-visible,
+.site-button:focus-visible {
+  outline: 3px solid #ffffff;
+  outline-offset: 3px;
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55);
+}
+
+.site-card-button[aria-pressed="true"]:focus-visible {
+  outline-color: #a8d5a2;
+}
+
 canvas {
   display: block;
 }

src/managers/stores/useGameStore.ts

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

src/managers/stores/useSiteStore.ts

@@ -3,14 +3,14 @@ import type { SiteStep } from "@/types/game";
 
 interface SiteState {
   currentStep: SiteStep;
-  selectedExperience: number | null;
-  selectedSituation: number | null;
+  selectedExperienceIndex: number | null;
+  selectedSituationIndex: number | null;
 }
 
 interface SiteActions {
   setStep: (step: SiteStep) => void;
-  setSelectedExperience: (index: number) => void;
-  setSelectedSituation: (index: number) => void;
+  setSelectedExperienceIndex: (index: number) => void;
+  setSelectedSituationIndex: (index: number) => void;
   reset: () => void;
 }
 
@@ -18,14 +18,15 @@ type SiteStore = SiteState & SiteActions;
 
 const initialState: SiteState = {
   currentStep: "disclaimer",
-  selectedExperience: null,
-  selectedSituation: null,
+  selectedExperienceIndex: null,
+  selectedSituationIndex: null,
 };
 
 export const useSiteStore = create<SiteStore>()((set) => ({
   ...initialState,
   setStep: (step) => set({ currentStep: step }),
-  setSelectedExperience: (index) => set({ selectedExperience: index }),
-  setSelectedSituation: (index) => set({ selectedSituation: index }),
+  setSelectedExperienceIndex: (index) =>
+    set({ selectedExperienceIndex: index }),
+  setSelectedSituationIndex: (index) => set({ selectedSituationIndex: index }),
   reset: () => set(initialState),
 }));

src/pages/site/page.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import { useSiteStore } from "@/managers/stores/useSiteStore";
 import { SiteDisclaimerScreen } from "@/components/site/SiteDisclaimerScreen";
 import { SiteWelcomeScreen } from "@/components/site/SiteWelcomeScreen";
@@ -7,39 +6,7 @@ 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;
-}
+import { useIsMobile } from "@/hooks/ui/useIsMobile";
 
 export function SitePage(): React.JSX.Element {
   const currentStep = useSiteStore((state) => state.currentStep);

src/utils/dialogues/loadDialogueManifest.ts

@@ -12,6 +12,9 @@ import type { SubtitleCue } from "@/utils/subtitles/parseSrt";
 const DIALOGUE_MANIFEST_PATH = "/sounds/dialogue/dialogues.json";
 const DEFAULT_SUBTITLE_LANGUAGE: SubtitleLanguage = "fr";
 
+let manifestCache: DialogueManifest | null = null;
+let manifestPromise: Promise<DialogueManifest | null> | null = null;
+
 export interface DialogueSubtitleCue {
   voice: DialogueVoice;
   cue: SubtitleCue;
@@ -28,13 +31,21 @@ export interface DialogueSubtitleCues {
 }
 
 export async function loadDialogueManifest(): Promise<DialogueManifest | null> {
-  const response = await fetch(DIALOGUE_MANIFEST_PATH);
+  if (manifestCache) return manifestCache;
+  if (manifestPromise) return manifestPromise;
 
-  if (!response.ok) {
-    return null;
-  }
+  manifestPromise = (async () => {
+    const response = await fetch(DIALOGUE_MANIFEST_PATH);
+    if (!response.ok) {
+      manifestPromise = null;
+      return null;
+    }
+    const manifest = parseDialogueManifest(await response.json());
+    manifestCache = manifest;
+    return manifest;
+  })();
 
-  return parseDialogueManifest(await response.json());
+  return manifestPromise;
 }
 
 function getDialogueVoice(