Ajoute une image de couverture sur les cards de jeu

- Champ `cover` dans lib/games.ts
- Branché sur la card home, la liste des jeux et le hero page projet
- Fallback placeholder logo si pas d'image

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/games/[slug]/page.tsx

@@ -65,15 +65,26 @@ export default async function GamePage({ params }: Props) {
       />
       {/* HERO */}
       <section className="relative aspect-[21/9] sm:aspect-[21/8] bg-surface border-b border-border overflow-hidden">
-        <div className="absolute inset-0 flex items-center justify-center">
+        {game.cover ? (
           <Image
-            src="/image/Studio/Logo Flat.png"
-            alt=""
-            width={220}
-            height={148}
-            className="opacity-20"
+            src={game.cover}
+            alt={game.title}
+            fill
+            priority
+            sizes="100vw"
+            className="object-cover"
           />
-        </div>
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <Image
+              src="/image/Studio/Logo Flat.png"
+              alt=""
+              width={220}
+              height={148}
+              className="opacity-20"
+            />
+          </div>
+        )}
         <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
         <div className="absolute bottom-0 left-0 right-0 px-6 lg:px-10 pb-10">
           <div className="max-w-6xl mx-auto">

app/games/page.tsx

@@ -32,15 +32,25 @@ export default function GamesPage() {
               href={`/games/${game.slug}`}
               className="group relative aspect-[16/9] sm:aspect-[21/9] bg-surface border border-border overflow-hidden block hover:border-accent transition-colors"
             >
-              <div className="absolute inset-0 flex items-center justify-center">
+              {game.cover ? (
                 <Image
-                  src="/image/Studio/Logo Flat.png"
-                  alt=""
-                  width={140}
-                  height={94}
-                  className="opacity-15 group-hover:opacity-25 group-hover:scale-105 transition-all duration-700"
+                  src={game.cover}
+                  alt={game.title}
+                  fill
+                  sizes="(max-width: 1024px) 100vw, 1024px"
+                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                 />
-              </div>
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Image
+                    src="/image/Studio/Logo Flat.png"
+                    alt=""
+                    width={140}
+                    height={94}
+                    className="opacity-15 group-hover:opacity-25 group-hover:scale-105 transition-all duration-700"
+                  />
+                </div>
+              )}
               <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-background via-background/80 to-transparent">
                 <p className="font-display text-xs tracking-[0.3em] text-accent mb-2">
                   {statusLabel[game.status]}

app/page.tsx

@@ -3,6 +3,9 @@
 import Image from "next/image";
 import Link from "next/link";
 import { motion } from "framer-motion";
+import { games } from "@/lib/games";
+
+const featured = games[0];
 
 // Screenshots WIP du projet.
 // Pour en ajouter : dépose l'image dans /public/image/Emberwild/
@@ -190,15 +193,25 @@ export default function Home() {
               href="/games/emberwild"
               className="group relative aspect-[16/9] bg-surface border border-border overflow-hidden block hover:border-accent transition-colors duration-500"
             >
-              <div className="absolute inset-0 flex items-center justify-center">
+              {featured?.cover ? (
                 <Image
-                  src="/image/Studio/Logo Flat.png"
-                  alt="Game placeholder"
-                  width={120}
-                  height={80}
-                  className="opacity-20 group-hover:opacity-30 group-hover:scale-105 transition-all duration-700 ease-out"
+                  src={featured.cover}
+                  alt={featured.title}
+                  fill
+                  sizes="(max-width: 1152px) 100vw, 1152px"
+                  className="object-cover group-hover:scale-105 transition-transform duration-700 ease-out"
                 />
-              </div>
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Image
+                    src="/image/Studio/Logo Flat.png"
+                    alt="Game placeholder"
+                    width={120}
+                    height={80}
+                    className="opacity-20 group-hover:opacity-30 group-hover:scale-105 transition-all duration-700 ease-out"
+                  />
+                </div>
+              )}
               <div
                 aria-hidden
                 className="absolute inset-0 bg-accent/0 group-hover:bg-accent/[0.03] transition-colors duration-500"

lib/games.ts

@@ -7,6 +7,10 @@ export type Game = {
   genres: string[];
   releaseWindow?: string;
   steamUrl?: string;
+  // Image de couverture affichée sur les cards (home, liste, page projet).
+  // Dépose l'image dans /public/image/Emberwild/ puis renseigne le chemin,
+  // ex: "/image/Emberwild/cover.jpg". Laisse vide pour un placeholder.
+  cover?: string;
 };
 
 export const games: Game[] = [
@@ -19,6 +23,7 @@ export const games: Game[] = [
       "Inspired by Raft and Aloft. Build, explore, and survive across drifting worlds. A new survival adventure currently in early development. The first world from Highland Games Studio.",
     genres: ["Survival", "Crafting", "Exploration"],
     releaseWindow: "TBA",
+    // cover: "/image/Emberwild/cover.jpg",
   },
 ];