fix(site): unified card styles, import Nersans One font, native naming input

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 "#b8b8b8";
-    if (selected) return "#d9d9d9";
-    return "#e8e8e8";
+    if (disabled) return "rgba(255, 255, 255, 0.42)";
+    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 "none";
-    return "2px solid #ffffff";
+    if (disabled) return "3px solid rgba(255, 255, 255, 0.55)";
+    return "3px solid rgba(255, 255, 255, 0.55)";
   };
 
   const getTextColor = (): string => {
-    if (isSituation && disabled) return "rgba(77, 77, 77, 0.72)";
-    if (isSituation) return "#4d4d4d";
-    if (disabled) return "#888888";
-    return "#666666";
+    if (disabled) return "rgba(77, 77, 77, 0.72)";
+    return "#4d4d4d";
   };
 
   return (

src/components/site/SiteNamingScreen.tsx

@@ -38,16 +38,12 @@ export function SiteNamingScreen(): React.JSX.Element {
     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));
-      }
+  const handleNameChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>): void => {
+      const nextLength = Math.min(event.target.value.length, forcedName.length);
+      setCharIndex(nextLength);
     },
-    [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}
-          readOnly
+          onChange={handleNameChange}
           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",