Ajoute une couche de micro-animations sur tout le site

Deux courbes partagées dans lib/motion.ts, pour que le CSS et Framer
aient le même feeling, et quatre primitives que Tailwind ne sait pas
exprimer : reflet de bouton, halo qui suit le curseur, soulignement qui
se dessine, secousse d'erreur.

Nouveaux composants : Stagger (les collections se distribuent une par
une), Spotlight (trouve son parent tout seul, donc les cartes restent
des composants serveur), ScrollProgress, BackToTop, Parallax, Spinner,
CheckMark. Reveal accepte maintenant une direction.

Côté rendu : le trait de nav glisse d'un onglet à l'autre, les cartes
se soulèvent, le hero réagit au scroll, les piliers entrent en zig-zag,
la lightbox glisse dans le sens demandé et les formulaires répondent.

prefers-reduced-motion est respecté partout : Framer coupe via
useReducedMotion, le CSS via la media query déjà en place.

Le commit embarque aussi la réorganisation des composants par domaine
qui était en cours dans l'arbre de travail — les deux étaient trop
imbriquées pour être séparées proprement.

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

TODO.md

@@ -1,7 +1,7 @@
 # TODO — Highland Games Studio Website
 
 Liste des tâches restantes, classées par priorité.
-Dernière mise à jour : 2026-06-22
+Dernière mise à jour : 2026-07-31
 
 ---
 
@@ -10,9 +10,14 @@ Dernière mise à jour : 2026-06-22
 - [ ] **Vidéo 84 Mo dans Git** (`public/Video/Header_Video.mp4`)
   - [ ] Compresser la vidéo (cible < 5 Mo, ~1080p) avec ffmpeg
   - [ ] La sortir de l'historique Git (BFG ou `git-filter-repo`) — sinon elle reste à vie dans le repo
-  - [ ] Ajouter un `poster` (image) sur la balise `<video>` de la page d'accueil
+  - [ ] Extraire une image du 1er plan et la renseigner dans `HERO_VIDEO.poster`
+        (`lib/site.ts`) — le champ existe déjà et attend juste un chemin
   - [ ] Idéalement : servir le fichier hors-Git (CDN / objet statique)
 
+- [ ] **Screenshots en PNG 5 Mo** (`public/image/Games/Emberwild/Capture_*.png`)
+  - Next les réencode à la volée, mais le premier build/visiteur les paie plein pot.
+  - [ ] Les réexporter en JPEG/WebP qualité ~85 (cible < 400 Ko chacun)
+
 - [ ] **Formulaires non fonctionnels** (perdent les données, juste un `console.log`)
   - [x] Choisir un service email → **Resend**
   - [x] Brancher le formulaire de contact → `app/actions/contact.ts`
@@ -34,16 +39,19 @@ Dernière mise à jour : 2026-06-22
 
 - [ ] **Remplacer tout le contenu placeholder**
   - [x] Vrai nom du jeu → **Emberwild** (`lib/games.ts`, slug `emberwild`)
-  - [ ] Vrais noms / bios de l'équipe (au lieu de « Founder One / Two ») → `app/studio/page.tsx`
-  - [ ] Vrais liens réseaux sociaux (actuellement tous en `href="#"`) → `app/components/SocialLinks.tsx`
-  - [ ] Vraies images de jeu / screenshots (le logo sert de placeholder partout)
+  - [x] Vrais noms / bios de l'équipe → `app/studio/page.tsx`
+  - [x] Vraies images de jeu / screenshots (key art, bannière, galerie)
+  - [ ] Vrais liens réseaux sociaux → `SOCIAL_LINKS` dans `lib/site.ts`
+        (les entrées à `href: null` sont masquées, plus de liens morts vers `#`)
+  - [ ] Photos de Kevin et Axel → `app/studio/page.tsx` (le logo sert de placeholder)
 
 - [ ] **Configurer l'URL du site**
   - [x] Centralisée dans `lib/site.ts` (pilotable par `NEXT_PUBLIC_SITE_URL`)
   - [ ] Confirmer le domaine final et définir la variable d'env en production
 
-- [ ] **Asset inutilisé** : `public/image/Studio/Full Logo.png` n'est référencé nulle part
-  - [ ] L'utiliser quelque part, ou le supprimer
+- [x] **Asset inutilisé** : `Full Logo.png` sert maintenant de source à
+      `Wordmark.png` (version transparente utilisée dans le footer),
+      généré par `node scripts/build-wordmark.mjs`
 
 ---
 
@@ -57,6 +65,32 @@ Dernière mise à jour : 2026-06-22
 
 ---
 
+## ✅ Refonte UX / structure (2026-07-31)
+
+- [x] **Incohérence home ↔ page jeu corrigée** : la home affichait « PROJECT ONE »
+      avec ses propres textes et sa propre liste de screenshots codés en dur.
+      Tout vient maintenant de `lib/games.ts` (`keyArt`, `banner`, `screenshots`),
+      et les screenshots apparaissent enfin sur `/games/emberwild`.
+- [x] **Lisibilité** : plus aucun texte posé sur une image. Le key art est crème et
+      les captures sont très claires — le texte crème par-dessus était illisible.
+      Cards = image d'un côté, texte sur panneau plein de l'autre.
+- [x] **Logo** : plus de déformation (1344×768 rendu en 36×36, 120×80…), passe par
+      `components/ui/Logo.tsx` qui déduit la hauteur.
+- [x] **Design system** : `Section`, `SectionHeading`, `PageHeader`, `ButtonLink`,
+      `StatusBadge`, `Reveal`, `GameCard`, `ScreenshotGallery`, `PostList` —
+      plus de duplication de `statusLabel` / `formatDate` / cards / boutons.
+- [x] **Composants rangés** par domaine (`ui/`, `layout/`, `game/`, `home/`,
+      `devblog/`, `forms/`).
+- [x] **Home rendue côté serveur** (elle était entièrement `"use client"`).
+- [x] **Galerie avec lightbox** (clavier ←/→/Échap, scroll bloqué, légendes sur
+      fond plein).
+- [x] **Accessibilité** : `prefers-reduced-motion` respecté (pas de vidéo ni
+      d'animations), page active signalée dans la navbar, focus visibles,
+      `formatDate` en UTC (la date d'un post ne décale plus d'un jour).
+- [x] **Typo mobile** : titres 6xl/7xl qui débordaient sur 375 px réduits en 4xl/5xl.
+- [x] **Contact** : emails en `text-xs` qui débordaient de leur colonne → `text-sm`
+      + `break-all`, cartes en 1 colonne sur mobile.
+
 ## ✅ Déjà fait (2026-06-22)
 
 - [x] Supprimé les 5 SVG par défaut de create-next-app (inutilisés)