diff --git a/.planning/phases/02-content/02-UI-SPEC.md b/.planning/phases/02-content/02-UI-SPEC.md
new file mode 100644
index 0000000..fcaf832
--- /dev/null
+++ b/.planning/phases/02-content/02-UI-SPEC.md
@@ -0,0 +1,224 @@
+---
+phase: 2
+slug: content
+status: draft
+shadcn_initialized: false
+preset: none
+created: 2026-04-10
+---
+
+# Phase 2 — Content — UI Design Contract
+
+> Contrat visuel et d'interaction pour la phase Content. Genere par gsd-ui-researcher, verifie par gsd-ui-checker.
+
+---
+
+## Design System
+
+| Property | Value |
+|----------|-------|
+| Tool | Nuxt UI v3 (UCard, UButton, UIcon, etc.) — source: CLAUDE.md |
+| Preset | not applicable |
+| Component library | Nuxt UI v3 (basé sur Radix primitives via reka-ui) |
+| Icon library | Lucide via `i-lucide-*` (UIcon) — source: HeroSection.vue existant |
+| Font | Inter ou system-ui (hérité de Nuxt UI v3 default) |
+
+Note: shadcn non applicable — stack Nuxt 4 + Nuxt UI v3 + Tailwind v4.
+Registry safety gate: non applicable (Nuxt UI v3 est la source officielle, pas de tiers).
+
+---
+
+## Spacing Scale
+
+Déclaré (multiples de 4, aligné avec l'échelle Tailwind utilisée dans le codebase existant):
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| xs | 4px | Gaps icônes, padding inline (gap-1, p-1) |
+| sm | 8px | Espacement compact — badges, labels (gap-2, p-2) |
+| md | 16px | Espacement default — padding cartes, champs (p-4, gap-4) |
+| lg | 24px | Section padding interne — entre éléments de section (p-6, gap-6) |
+| xl | 32px | Gaps layout — grilles pricing (gap-8) |
+| 2xl | 48px | Séparations de sections majeures (py-12) |
+| 3xl | 64px | Espacement page — sections hero/content (py-16 à py-24) |
+
+Exceptions:
+- Touch targets boutons CTA: min 44px de hauteur (`py-3` + hauteur de texte = ~44px OK)
+- Carousel testimonials: padding horizontal -mx-4 px-4 conservé pour débordement visuel (pattern existant)
+- Hero section: py-16 md:py-24 conservé tel quel (source: HeroSection.vue)
+
+---
+
+## Typography
+
+Détectée dans le codebase existant — reproduire exactement ces valeurs:
+
+| Role | Size | Weight | Line Height |
+|------|------|--------|-------------|
+| Body / quote testimonial | 14px (text-sm) | 400 (regular) | 1.5 (leading-relaxed) |
+| Label / meta / badge | 14px (text-sm) | 500 (medium) | 1.4 |
+| Heading section (h2) | 30-48px responsif (text-3xl→text-5xl) | 700 (bold) | 1.2 |
+| Display / H1 hero | 36-72px responsif (text-4xl→text-7xl) | 800 (extrabold) | 1.1 (tracking-tight) |
+
+Règles supplémentaires:
+- Accent décoratif mono: `font-mono text-sm` pour labels de section (ex: `// testimonials`, `// pricing`)
+- Gradient text sur H1 et H2: `bg-gradient-to-r from-brand-500 via-brand-400 to-emerald-400 bg-clip-text text-transparent` (pattern existant)
+- Sous-titres de sections: `text-lg text-gray-500 dark:text-gray-400 leading-relaxed`
+- Prix dans grille tarifaire: `text-3xl font-bold` pour le montant, `text-sm text-gray-500` pour la période/unité
+
+---
+
+## Color
+
+Palette détectée dans `app/assets/css/main.css` + composants existants:
+
+| Role | Value | Usage |
+|------|-------|-------|
+| Dominant (60%) | `bg-white dark:bg-gray-950` | Fond page, sections principales |
+| Secondary (30%) | `bg-gray-50 dark:bg-gray-900` / `bg-white/80 dark:bg-gray-900/60` | Cartes, terminal hero, cartes témoignages, cartes pricing |
+| Accent (10%) | `brand-500` = `#85cb85` (vert) | Voir liste ci-dessous |
+| Destructive | Non applicable dans cette phase — aucune action destructive |
+
+Accent réservé exclusivement à:
+1. Badge "Disponible pour vos projets" — fond `bg-brand-500/10`, texte `text-brand-700 dark:text-brand-400`
+2. Curseur et highlight terminal hero — `bg-brand-500`, `text-brand-500`
+3. Bouton CTA primaire — `bg-brand-500 hover:bg-brand-600`
+4. Stats témoignages (chiffres) — gradient `from-brand-400 to-brand-600`
+5. Hover border cartes testimonials/pricing — `hover:border-brand-500/40`
+6. Étoiles rating: `text-yellow-400` (NON brand-500 — jaune uniquement pour étoiles)
+7. Gradient H1 hero — `from-brand-500 via-brand-400 to-emerald-400`
+
+Dark mode: systématiquement déclaré en paire `light dark:dark` sur chaque token de couleur.
+
+---
+
+## Composants Nuxt UI v3 — Inventaire Phase 2
+
+| Composant | Usage | Props clés |
+|-----------|-------|-----------|
+| `UCard` | Cartes pricing, cartes témoignages page /hytale | `class` pour override padding |
+| `UButton` | CTA "Demander un devis", CTA Discord, CTA Contact | `color="primary"` ou outline |
+| `UBadge` | Badge "Disponible pour vos projets", badge tier pricing | `color`, `variant` |
+| `UIcon` | Toutes icônes (i-lucide-*) | `name`, `class` pour taille |
+| `UDivider` | Séparation entre stats témoignages | vertical |
+| `NuxtLink` | Navigation interne — liens /contact, /hytale | `localePath()` obligatoire |
+| `NuxtImg` | Avatars témoignages | `loading="lazy"`, `width`, `height` |
+
+Pas de composant carousel natif Nuxt UI v3 — utiliser le pattern scroll horizontal existant (`overflow-x-auto snap-x snap-mandatory`) déjà en place dans TestimonialsSection.vue.
+
+---
+
+## Copywriting Contract
+
+### Hero Homepage (refonte CONT-01)
+
+| Element | FR | EN |
+|---------|----|----|
+| H1 | "Hytale Plugin Developer" (gradient sur les 2 derniers mots) | "Hytale Plugin Developer" |
+| Sous-titre | "Des plugins performants et sur-mesure pour votre serveur Hytale" | "High-performance, custom plugins for your Hytale server" |
+| Badge statut | "Disponible pour vos projets" | "Available for projects" |
+| CTA primaire | "Rejoindre sur Discord" | "Join on Discord" |
+| CTA secondaire | "Me contacter" | "Contact me" |
+| Floating card stats | "50+ projets" / "Note 5.0" | "50+ projects" / "5.0 rating" |
+| Terminal — role | `'Hytale Plugin Developer'` (remplace 'Full Stack Dev') | idem |
+
+### Page /hytale — Hero dédié (CONT-02)
+
+| Element | FR | EN |
+|---------|----|----|
+| Label mono | `// hytale` | `// hytale` |
+| H1 | "Plugins Hytale sur-mesure" | "Custom Hytale Plugins" |
+| Sous-titre | "Développement de plugins performants pour votre serveur Hytale, de la conception à la livraison." | "High-performance plugin development for your Hytale server, from design to delivery." |
+
+### Grille Tarifaire — 5 tiers (CONT-03 / D-09 / D-10)
+
+| Tier | FR label | EN label | Prix FR | Prix EN | CTA |
+|------|----------|----------|---------|---------|-----|
+| Plugin Simple | "Plugin Simple" | "Simple Plugin" | "À partir de 50€" | "From €50" | "Demander un devis" / "Request a quote" |
+| Plugin Complexe | "Plugin Complexe" | "Complex Plugin" | "Sur devis" | "Custom quote" | "Demander un devis" / "Request a quote" |
+| Sur-Mesure | "Développement Sur-Mesure" | "Custom Development" | "Sur devis" | "Custom quote" | "Demander un devis" / "Request a quote" |
+| Maintenance | "Maintenance & Support" | "Maintenance & Support" | "À partir de 30€/mois" | "From €30/month" | "Demander un devis" / "Request a quote" |
+| Web | "Développement Web" | "Web Development" | "Sur devis" | "Custom quote" | "Demander un devis" / "Request a quote" |
+
+CTA universel pricing: "Demander un devis" → redirige `/contact` (source: D-11).
+
+### Témoignages (CONT-04)
+
+| Element | FR | EN |
+|---------|----|----|
+| Label mono section | `// témoignages` | `// testimonials` |
+| Titre section | (existant — conserver, passer en i18n si hardcodé) | (existant) |
+| Stat — clients | "avis clients" | "client reviews" |
+| Stat — note | "note moyenne" | "average rating" |
+| Stat — projets | "projets livrés" | "projects delivered" |
+| totalReviews corrigé | `5` (source: D-16, FIX-04) | `5` |
+
+### États vides et erreurs
+
+| Element | Copy FR | Copy EN |
+|---------|---------|---------|
+| État vide témoignages (si aucun chargé) | "Aucun témoignage disponible pour l'instant." | "No testimonials available yet." |
+| Erreur chargement image avatar | Masquer l'image, afficher initiales (fallback silencieux) | idem |
+| Pas de cas de destruction dans cette phase | n/a | n/a |
+
+Aucune action destructive dans cette phase — pas de confirmation dialog requise.
+
+---
+
+## Patterns d'Interaction
+
+### Carousel / Scroll horizontal (homepage + /hytale)
+
+- Pattern: `overflow-x-auto snap-x snap-mandatory scrollbar-hide` (source: TestimonialsSection.vue existant)
+- Homepage: 2-3 témoignages featured (source: D-15)
+- Page /hytale: les 5 témoignages complets avec plus de détails (source: D-15)
+- Pas de navigation dots/arrows requise en v1 — scroll natif suffit
+
+### Cartes Pricing
+
+- Layout: grille responsive `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3` (5 tiers → 2+3 ou 3+2)
+- Hover: `hover:border-brand-500/40 hover:shadow-xl hover:shadow-brand-500/10 hover:-translate-y-1` (pattern cartes existant)
+- Tier le plus populaire: badge "Populaire" / "Popular" en `UBadge color="primary"`
+- CTA de chaque carte: `UButton` full-width vers `/contact`
+
+### Lien Discord (D-02, D-07)
+
+- Bouton hero primaire: ouvre profil Discord personnel dans un nouvel onglet (`target="_blank" rel="noopener"`)
+- Icône: `i-lucide-message-circle` ou `i-simple-icons-discord` si disponible dans Nuxt UI
+
+### Badge "Disponible"
+
+- Composant: inline-flex avec point animé `animate-ping` (pattern existant HeroSection.vue)
+- Passer la string en i18n (source: D-03) — clé: `hero.badge.available`
+
+---
+
+## SEO & i18n — Contraintes Visuelles
+
+- Toutes les strings visibles dans cette phase doivent avoir une clé i18n dans `fr.json` et `en.json` (source: I18N-03)
+- Pas de strings hardcodées dans les templates — 0 exception pour cette phase
+- Titre de page /hytale: `useSeoMeta()` avec `title` et `ogTitle` spécifiques (source: I18N-04)
+- `totalReviews` dans `testimonials.ts` corrigé à `5` avant affichage (source: FIX-04 / D-16)
+
+---
+
+## Registry Safety
+
+| Registry | Blocks Used | Safety Gate |
+|----------|-------------|-------------|
+| Nuxt UI v3 (officiel) | UCard, UButton, UBadge, UIcon, UDivider | not required — officiel Nuxt |
+| shadcn | aucun | not applicable — projet Nuxt/Vue |
+| tiers | aucun | not applicable |
+
+---
+
+## Checker Sign-Off
+
+- [ ] Dimension 1 Copywriting: PASS
+- [ ] Dimension 2 Visuals: PASS
+- [ ] Dimension 3 Color: PASS
+- [ ] Dimension 4 Typography: PASS
+- [ ] Dimension 5 Spacing: PASS
+- [ ] Dimension 6 Registry Safety: PASS
+
+**Approval:** pending