src/components/site/SiteCard.tsx

@@ -4,17 +4,21 @@ 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 (isSituation) return "rgba(255, 255, 255, 0.42)";
     if (disabled) return "#b8b8b8";
     if (selected) return "#d9d9d9";
     return "#e8e8e8";
@@ -22,11 +26,14 @@ export function SiteCard({
 
   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";
   };
 
   const getTextColor = (): string => {
+    if (isSituation && disabled) return "rgba(77, 77, 77, 0.72)";
+    if (isSituation) return "#4d4d4d";
     if (disabled) return "#888888";
     return "#666666";
   };
@@ -37,8 +44,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 +65,13 @@ export function SiteCard({
         <span
           style={{
             color: getTextColor(),
-            fontSize: "clamp(10px, 1.5vw, 14px)",
+            fontSize: isSituation
-            fontWeight: 500,
+              ? "clamp(18px, 2.3vw, 27px)"
+              : "clamp(10px, 1.5vw, 14px)",
+            fontWeight: isSituation ? 700 : 500,
             textAlign: "center",
             padding: 8,
+            lineHeight: 1,
           }}
         >
           {label}

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: "Réfugié.e climatique", 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: "Sans domicile fixe",
     disabled: false,
   },
-  { id: "sit-seniors", label: "Seniors Hyper-Connectés", disabled: true },
+  { id: "sit-autre", label: "Autre", disabled: true },
 ];