src/components/site/SiteCard.tsx

@@ -18,24 +18,20 @@ export function SiteCard({
 
   const getBackground = (): string => {
     if (imagePath) return `url(${imagePath}) center/cover`;
-    if (isSituation) return "rgba(255, 255, 255, 0.42)";
+    if (disabled) return "rgba(255, 255, 255, 0.42)";
-    if (disabled) return "#b8b8b8";
+    return "#b8b8b8";
-    if (selected) return "#d9d9d9";
-    return "#e8e8e8";
   };
 
   const getBorder = (): string => {
     if (selected) return "3px solid #a8d5a2";
     if (isSituation) return "3px solid rgba(255, 255, 255, 0.55)";
-    if (disabled) return "none";
+    if (disabled) return "3px solid rgba(255, 255, 255, 0.55)";
-    return "2px solid #ffffff";
+    return "3px solid rgba(255, 255, 255, 0.55)";
   };
 
   const getTextColor = (): string => {
-    if (isSituation && disabled) return "rgba(77, 77, 77, 0.72)";
+    if (disabled) return "rgba(77, 77, 77, 0.72)";
-    if (isSituation) return "#4d4d4d";
+    return "#4d4d4d";
-    if (disabled) return "#888888";
-    return "#666666";
   };
 
   return (

src/components/site/SiteNamingScreen.tsx

@@ -38,16 +38,12 @@ export function SiteNamingScreen(): React.JSX.Element {
     inputRef.current?.focus();
   }, []);
 
-  const handleKeyDown = useCallback(
+  const handleNameChange = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    (event: React.ChangeEvent<HTMLInputElement>): void => {
-      e.preventDefault();
+      const nextLength = Math.min(event.target.value.length, forcedName.length);
-
+      setCharIndex(nextLength);
-      // 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],
+    [forcedName.length],
   );
 
   const handleConfirm = (): void => {
@@ -99,8 +95,7 @@ export function SiteNamingScreen(): React.JSX.Element {
           ref={inputRef}
           type="text"
           value={displayValue}
-          onKeyDown={handleKeyDown}
+          onChange={handleNameChange}
-          readOnly
           placeholder="Écrivez votre prénom ici"
           style={{
             display: "flex",
@@ -114,7 +109,7 @@ export function SiteNamingScreen(): React.JSX.Element {
             background: "#D9D9D9",
             outline: "none",
             color: "#333",
-            caretColor: "transparent",
+            caretColor: "#333",
             fontFamily: "Inter, system-ui, sans-serif",
             fontSize: "clamp(16px, 2.5vw, 20px)",
             textAlign: "left",

src/data/site/siteConfig.ts

@@ -24,11 +24,11 @@ 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: "Réfugié.e climatique", disabled: true },
+  { id: "sit-refugie-climat", label: "Sans domicile fixe", disabled: true },
   { id: "sit-refugie-guerre", label: "Réfugié.e de guerre", disabled: true },
   {
     id: "sit-sans-domicile",
-    label: "Sans domicile fixe",
+    label: "Réfugié.e climatique",
     disabled: false,
   },
   { id: "sit-autre", label: "Autre", disabled: true },

src/index.css

@@ -1,5 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 
+@font-face {
+  font-family: "Nersans One";
+  src:
+    url("/fonts/NersansOne.woff2") format("woff2"),
+    url("/fonts/NersansOne.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* Base document reset */
 :root {
   color-scheme: dark;