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

src/components/site/SiteCard.tsx

@@ -4,31 +4,34 @@ interface SiteCardProps {
   config: SiteCardConfig;
   selected: boolean;
   onSelect: () => void;
+  variant?: "default" | "situation";
 }
 
 export function SiteCard({
   config,
   selected,
   onSelect,
+  variant = "default",
 }: SiteCardProps): React.JSX.Element {
   const { label, imagePath, disabled } = config;
+  const isSituation = variant === "situation";
 
   const getBackground = (): string => {
     if (imagePath) return `url(${imagePath}) center/cover`;
-    if (disabled) return "#b8b8b8";
+    if (disabled) return "rgba(255, 255, 255, 0.42)";
-    if (selected) return "#d9d9d9";
+    return "#b8b8b8";
-    return "#e8e8e8";
   };
 
   const getBorder = (): string => {
     if (selected) return "3px solid #a8d5a2";
-    if (disabled) return "none";
+    if (isSituation) return "3px solid rgba(255, 255, 255, 0.55)";
-    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 (disabled) return "#888888";
+    if (disabled) return "rgba(77, 77, 77, 0.72)";
-    return "#666666";
+    return "#4d4d4d";
   };
 
   return (
@@ -37,8 +40,12 @@ export function SiteCard({
       onClick={onSelect}
       disabled={disabled}
       style={{
-        width: "clamp(120px, 15vw, 160px)",
+        width: isSituation
-        height: "clamp(140px, 18vw, 180px)",
+          ? "clamp(220px, 24vw, 300px)"
+          : "clamp(120px, 15vw, 160px)",
+        height: isSituation
+          ? "clamp(48px, 6vw, 60px)"
+          : "clamp(140px, 18vw, 180px)",
         border: getBorder(),
         background: getBackground(),
         cursor: disabled ? "not-allowed" : "pointer",
@@ -54,10 +61,13 @@ export function SiteCard({
         <span
           style={{
             color: getTextColor(),
-            fontSize: "clamp(10px, 1.5vw, 14px)",
+            fontSize: isSituation
-            fontWeight: 500,
+              ? "clamp(14px, 1.8vw, 22px)"
+              : "clamp(10px, 1.5vw, 14px)",
+            fontWeight: isSituation ? 700 : 500,
             textAlign: "center",
             padding: 8,
+            lineHeight: 1,
           }}
         >
           {label}

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/components/site/SiteSituationScreen.tsx

@@ -52,10 +52,11 @@ export function SiteSituationScreen(): React.JSX.Element {
 
       <div
         style={{
-          display: "flex",
+          display: "grid",
-          gap: 16,
+          gridTemplateColumns: "repeat(2, minmax(220px, 300px))",
-          flexWrap: "wrap",
+          gap: "24px 28px",
           justifyContent: "center",
+          width: "100%",
         }}
       >
         {SITUATION_CARDS.map((card, index) => (
@@ -63,6 +64,7 @@ export function SiteSituationScreen(): React.JSX.Element {
             key={card.id}
             config={card}
             selected={selectedSituation === index}
+            variant="situation"
             onSelect={() => {
               if (!card.disabled) {
                 setSelectedSituation(index);

src/data/site/siteConfig.ts

@@ -24,12 +24,12 @@ export const EXPERIENCE_CARDS: readonly SiteCardConfig[] = [
  * 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-refugie-climat", label: "Sans domicile fixe", disabled: true },
-  { id: "sit-apprentis", label: "Apprentis-Citoyens", disabled: true },
+  { id: "sit-refugie-guerre", label: "Réfugié.e de guerre", disabled: true },
   {
-    id: "sit-refugies",
+    id: "sit-sans-domicile",
-    label: "Réfugiés Climatiques arrivants",
+    label: "Réfugié.e climatique",
     disabled: false,
   },
-  { id: "sit-seniors", label: "Seniors Hyper-Connectés", disabled: true },
+  { 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;