Story 1.1: initialisation projet

2026-02-04 02:14:17 +01:00
parent c9f95d39a0
commit e3f062249b
38 changed files with 10300 additions and 0 deletions
--- a/docs/front-end-spec.md
+++ b/docs/front-end-spec.md
@@ -0,0 +1,784 @@
+# Portfolio Développeur Web - Spécification UI/UX
+
+## 1. Introduction
+
+Ce document définit les objectifs d'expérience utilisateur, l'architecture de l'information, les flux utilisateurs et les spécifications de design visuel pour l'interface utilisateur du **Portfolio Développeur Web**. Il sert de fondation pour le design visuel et le développement frontend, assurant une expérience cohérente et centrée sur l'utilisateur.
+
+### 1.1 Objectifs UX & Principes de Design
+
+#### Personas Utilisateurs Cibles
+
+| Persona | Description |
+|---------|-------------|
+| **Recruteur** | Professionnel RH ou technique cherchant un candidat fiable, compétent, avec des preuves vérifiables de ses compétences |
+| **Client Potentiel** | Entrepreneur ou responsable projet souhaitant évaluer la capacité à livrer un projet freelance, sensible à la qualité et au professionnalisme |
+| **Curieux / Pair** | Développeur ou professionnel tech consultant le portfolio par curiosité ou benchmark |
+
+#### Objectifs d'Utilisabilité
+
+- **Découverte rapide** : Comprendre en <10 secondes qui est le développeur et ce qu'il propose
+- **Navigation intuitive** : Trouver n'importe quelle section en maximum 2 clics
+- **Zéro friction** : Aucun obstacle du premier clic jusqu'au formulaire de contact envoyé
+- **Preuves accessibles** : Chaque compétence/affirmation liée à une preuve cliquable
+- **Mobile-first** : Expérience optimale sur smartphone (prioritaire)
+
+#### Principes de Design
+
+1. **Le design au service du message** — L'interface reste au second plan, le contenu prime
+2. **Montrer plutôt que dire** — Chaque affirmation soutenue par une preuve tangible
+3. **Progressive disclosure** — Projets vedettes en détail, projets secondaires en liste
+4. **Feedback immédiat** — Toute action a une réponse visuelle claire
+5. **Accessible par défaut** — Contrastes, navigation clavier, structure sémantique
+
+### 1.2 Journal des modifications
+
+| Date | Version | Description | Auteur |
+|------|---------|-------------|--------|
+| 2026-01-22 | 0.1 | Création initiale | Sally (UX Expert) |
+
+## 2. Architecture de l'Information (IA)
+
+### 2.1 Site Map / Inventaire des Écrans
+
+```mermaid
+graph TD
+    A[🏠 Accueil] --> B[📁 Projets]
+    A --> C[🛠 Compétences]
+    A --> D[👤 Me Découvrir]
+    A --> E[✉️ Contact]
+
+    B --> B1[Projets Vedettes]
+    B --> B2[Projets Secondaires]
+    B1 --> B3[Page Projet 1]
+    B1 --> B4[Page Projet 2]
+    B1 --> B5[Page Projet N...]
+
+    C --> C1[Technologies de Dev]
+    C --> C2[Outils Démontrables]
+    C --> C3[Autres Outils]
+
+    D --> D1[Parcours]
+    D --> D2[Motivations]
+    D --> D3[Passions]
+    D --> D4[Témoignages]
+
+    E --> E1[Formulaire]
+    E --> E2[Liens Secondaires]
+```
+
+### 2.2 Structure de Navigation
+
+**Navigation Primaire (Navbar sticky)** :
+
+| Élément | URL | Notes |
+|---------|-----|-------|
+| Accueil | `/` | Logo cliquable |
+| Projets | `/projets` | Liste vedettes + secondaires |
+| Compétences | `/competences` | Technos + outils |
+| Me Découvrir | `/a-propos` | Parcours + témoignages |
+| **Me Contacter** | `/contact` | **CTA bouton distinct** |
+
+**Navigation Secondaire** :
+- **Footer** : Liens réseaux sociaux (LinkedIn, GitHub), mentions légales
+- **Breadcrumbs** : Sur pages projet uniquement (`Accueil > Projets > Nom du projet`)
+
+**Stratégie de Breadcrumb** :
+- Activé uniquement sur les pages projet individuelles
+- Format : Texte cliquable pour chaque niveau
+- Dernier élément (page actuelle) non cliquable
+
+## 3. Flux Utilisateurs
+
+### 3.1 Découverte et Exploration d'un Projet
+
+**Objectif utilisateur** : Évaluer les compétences du développeur à travers un projet concret
+
+**Points d'entrée** :
+- Page d'accueil (CTA "Découvrir mes projets")
+- Navbar (lien "Projets")
+- Page Compétences (lien technologie → projets associés)
+
+**Critères de succès** : L'utilisateur visite le projet en ligne ou consulte les captures d'écran
+
+```mermaid
+graph TD
+    A[Entrée: Accueil/Navbar] --> B[Page Projets]
+    B --> C{Choix du projet}
+    C --> D[Page Projet Détaillée]
+    D --> E[Lecture: Contexte]
+    E --> F[Lecture: Solution Technique]
+    F --> G[Lecture: Réalisation]
+    G --> H{Projet en ligne?}
+    H -->|Oui| I[🔗 Visite du projet]
+    H -->|Non| J[📷 Galerie captures]
+    I --> K{Convaincu?}
+    J --> K
+    K -->|Oui| L[CTA: Me Contacter]
+    K -->|Non| M[Retour liste projets]
+    M --> C
+```
+
+**Edge Cases & Gestion d'erreurs** :
+- Projet hors ligne : Afficher "Projet non disponible" + captures d'écran
+- Lien externe cassé : Vérification périodique, fallback vers captures
+- Projet confidentiel : Mention "Projet sous NDA" + description anonymisée
+
+---
+
+### 3.2 Prise de Contact (Conversion)
+
+**Objectif utilisateur** : Envoyer un message au développeur
+
+**Points d'entrée** :
+- Bouton CTA navbar (toutes pages)
+- Fin de page projet
+- Fin de page "Me Découvrir"
+
+**Critères de succès** : Message envoyé avec confirmation visible
+
+```mermaid
+graph TD
+    A[CTA: Me Contacter] --> B[Page Contact]
+    B --> C[Remplissage formulaire]
+    C --> D{Données persistées?}
+    D -->|Oui| E[Pré-remplissage auto]
+    D -->|Non| F[Formulaire vierge]
+    E --> G[Complétion]
+    F --> G
+    G --> H[Validation temps réel]
+    H --> I{Erreurs?}
+    I -->|Oui| J[Affichage erreurs inline]
+    J --> G
+    I -->|Non| K[Clic Envoyer]
+    K --> L[Spinner + bouton désactivé]
+    L --> M{reCAPTCHA OK?}
+    M -->|Non| N[Erreur discrète, retry]
+    M -->|Oui| O[Envoi PHP]
+    O --> P{Succès?}
+    P -->|Oui| Q[✅ Message de confirmation]
+    P -->|Non| R[❌ Erreur + données conservées]
+    Q --> S[localStorage vidé]
+    R --> G
+```
+
+**Edge Cases & Gestion d'erreurs** :
+- Utilisateur quitte et revient : Données restaurées depuis localStorage
+- reCAPTCHA échoue : Dégradation gracieuse, formulaire reste fonctionnel
+- Erreur serveur : Message explicite, données préservées pour retry
+- Double soumission : Bouton désactivé pendant traitement
+
+---
+
+### 3.3 Vérification des Compétences
+
+**Objectif utilisateur** : Valider que le développeur maîtrise une technologie spécifique
+
+**Points d'entrée** :
+- Navbar (lien "Compétences")
+- Badge technologie sur carte projet
+
+**Critères de succès** : L'utilisateur trouve la preuve de maîtrise (projet ou lien externe)
+
+```mermaid
+graph TD
+    A[Page Compétences] --> B{Type de compétence?}
+    B -->|Techno Dev| C[Liste technologies]
+    B -->|Outil| D[Liste outils]
+    C --> E[Clic sur technologie]
+    E --> F[Voir projets associés]
+    F --> G[Navigation vers projet]
+    D --> H{Démontrable?}
+    H -->|Oui| I[🔗 Lien preuve externe]
+    H -->|Non| J[📝 Contexte d'utilisation]
+    I --> K[Visite preuve: GitHub, Notion...]
+```
+
+**Edge Cases & Gestion d'erreurs** :
+- Technologie sans projet associé : Masquer ou afficher avec mention "En apprentissage"
+- Lien externe cassé : Vérification régulière, fallback texte descriptif
+
+## 4. Wireframes & Mockups
+
+**Approche Design** : Wireframes low-fidelity en description textuelle. Le développement se fera directement en HTML/Tailwind CSS, ce document sert de référence.
+
+### 4.1 Page d'Accueil
+
+**Objectif** : Accroche immédiate + orientation vers les sections
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  NAVBAR (sticky)                                            │
+│  [Logo]    Accueil  Projets  Compétences  À propos  [CTA]  │
+├─────────────────────────────────────────────────────────────┤
+│                        HERO SECTION                         │
+│                    [Photo ou Illustration]                  │
+│                      Prénom NOM                             │
+│                   Développeur Web Full-Stack                │
+│            "Phrase d'accroche percutante"                   │
+│              [ Découvrir mes projets → ]                    │
+├─────────────────────────────────────────────────────────────┤
+│                    SECTIONS RAPIDES                         │
+│   ┌─────────────┐  ┌─────────────┐  ┌─────────────┐        │
+│   │   📁        │  │   🛠        │  │   👤        │        │
+│   │  Projets    │  │ Compétences │  │ Me Découvrir│        │
+│   │  [Voir →]   │  │  [Voir →]   │  │  [Voir →]   │        │
+│   └─────────────┘  └─────────────┘  └─────────────┘        │
+├─────────────────────────────────────────────────────────────┤
+│  FOOTER  LinkedIn  GitHub  Email  © 2026                   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Interactions** : Fade-in au chargement, hover sur cartes (élévation)
+
+---
+
+### 4.2 Page Projets
+
+**Objectif** : Présenter les projets vedettes + secondaires
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  NAVBAR                                                     │
+├─────────────────────────────────────────────────────────────┤
+│   Mes Projets                                               │
+│   Découvrez les réalisations qui illustrent mon travail     │
+├─────────────────────────────────────────────────────────────┤
+│                   PROJETS VEDETTES                          │
+│   ┌──────────────────┐  ┌──────────────────┐               │
+│   │ [Thumbnail]      │  │ [Thumbnail]      │               │
+│   │ Titre Projet     │  │ Titre Projet     │               │
+│   │ [PHP] [JS] [CSS] │  │ [React] [Node]   │               │
+│   └──────────────────┘  └──────────────────┘               │
+├─────────────────────────────────────────────────────────────┤
+│                   AUTRES PROJETS                            │
+│   • Projet A — Description courte — [PHP, JS]               │
+│   • Projet B — Description courte — [WordPress]             │
+├─────────────────────────────────────────────────────────────┤
+│  FOOTER                                                     │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Interactions** : Hover cartes (ombre/élévation), badges cliquables
+
+---
+
+### 4.3 Page Projet Individuelle
+
+**Objectif** : Détailler un projet avec preuves
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  NAVBAR                                                     │
+├─────────────────────────────────────────────────────────────┤
+│  Accueil > Projets > Nom du Projet  (breadcrumb)           │
+├─────────────────────────────────────────────────────────────┤
+│   TITRE DU PROJET                                           │
+│   [PHP] [JavaScript] [Tailwind CSS]                        │
+│   ┌─────────────────────────────────────────┐              │
+│   │         [Image principale]              │              │
+│   └─────────────────────────────────────────┘              │
+│   [ Voir le projet en ligne → ]                            │
+├─────────────────────────────────────────────────────────────┤
+│   CONTEXTE — Description du projet                          │
+├─────────────────────────────────────────────────────────────┤
+│   SOLUTION TECHNIQUE — Technologies et argumentation        │
+├─────────────────────────────────────────────────────────────┤
+│   TRAVAIL D'ÉQUIPE — Rôle, organisation (si applicable)    │
+├─────────────────────────────────────────────────────────────┤
+│   RÉALISATION — Durée + Galerie [img1] [img2] [img3]       │
+├─────────────────────────────────────────────────────────────┤
+│   💬 TÉMOIGNAGE — "Citation..." — Nom, Rôle                │
+├─────────────────────────────────────────────────────────────┤
+│   [ ← Retour aux projets ]    [ Me contacter → ]           │
+├─────────────────────────────────────────────────────────────┤
+│  FOOTER                                                     │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+### 4.4 Page Contact
+
+**Objectif** : Conversion sans friction
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  NAVBAR                                                     │
+├─────────────────────────────────────────────────────────────┤
+│   Me Contacter                                              │
+│   Une question, un projet ? Parlons-en !                    │
+├─────────────────────────────────────────────────────────────┤
+│   ┌─────────────────────────────────────────┐              │
+│   │  Nom *              Prénom *            │              │
+│   │  [_______________]  [_______________]   │              │
+│   │  Email *            Entreprise          │              │
+│   │  [_______________]  [_______________]   │              │
+│   │  Catégorie *  [▼ Sélectionner...]       │              │
+│   │  Objet *      [_____________________]   │              │
+│   │  Message *    [_____________________]   │              │
+│   │               [_____________________]   │              │
+│   │         [ Envoyer le message ]          │              │
+│   │  [Effacer le formulaire]                │              │
+│   └─────────────────────────────────────────┘              │
+├─────────────────────────────────────────────────────────────┤
+│   Retrouvez-moi aussi sur :                                │
+│   [LinkedIn]   [GitHub]   [Email direct]                   │
+├─────────────────────────────────────────────────────────────┤
+│  FOOTER                                                     │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Interactions** : Validation temps réel, spinner à l'envoi, message de confirmation
+
+## 5. Component Library / Design System
+
+**Stratégie** : Utilisation de Tailwind CSS avec des classes utilitaires. Pas de design system externe. Les composants sont définis comme des patterns HTML/Tailwind réutilisables.
+
+### 5.1 Bouton Principal (CTA)
+
+| Propriété | Valeur |
+|-----------|--------|
+| **Objectif** | Action principale (Contact, Voir projet) |
+| **Variantes** | Primary (rempli), Secondary (outline), Ghost (texte) |
+| **États** | Default, Hover, Focus, Disabled, Loading |
+
+```
+Primary:   [████████████]  → Fond accent, texte blanc
+Secondary: [────────────]  → Bordure accent, fond transparent
+Ghost:     [ Texte →    ]  → Texte accent, pas de bordure
+```
+
+### 5.2 Carte Projet
+
+| Propriété | Valeur |
+|-----------|--------|
+| **Objectif** | Aperçu cliquable d'un projet vedette |
+| **Variantes** | Standard (grille), Compact (liste secondaires) |
+| **États** | Default, Hover (élévation + ombre) |
+
+**Structure** : Thumbnail (16:9, lazy loading) → Titre (H3) → Badges technologies (max 4)
+
+### 5.3 Badge Technologie
+
+| Propriété | Valeur |
+|-----------|--------|
+| **Objectif** | Afficher une technologie/outil |
+| **Variantes** | Standard (petit), Large (page compétences) |
+| **États** | Default, Hover (si cliquable) |
+
+Exemple : `[PHP]  [JavaScript]  [Tailwind CSS]  [+3]`
+
+### 5.4 Champ de Formulaire
+
+| Propriété | Valeur |
+|-----------|--------|
+| **Objectif** | Saisie utilisateur |
+| **Variantes** | Text, Email, Textarea, Select |
+| **États** | Default, Focus, Error, Disabled, Filled |
+
+**Structure** : Label (*) → Input avec bordure → Message d'erreur inline
+
+### 5.5 Navbar
+
+| Propriété | Valeur |
+|-----------|--------|
+| **Objectif** | Navigation globale persistante |
+| **Variantes** | Desktop (horizontal), Mobile (hamburger) |
+| **États** | Default, Scrolled (ombre), Menu ouvert |
+
+**Structure** : Logo → Liens navigation (état actif) → Bouton CTA → Hamburger (mobile)
+
+### 5.6 Section Témoignage
+
+| Propriété | Valeur |
+|-----------|--------|
+| **Objectif** | Afficher une citation client/employeur |
+| **Variantes** | Inline (page projet), Card (section dédiée) |
+
+**Structure** : Guillemets → Citation (italique) → Auteur (nom, rôle, entreprise) → Photo (optionnel)
+
+### 5.7 Breadcrumb
+
+| Propriété | Valeur |
+|-----------|--------|
+| **Objectif** | Indiquer la position dans la hiérarchie |
+| **Usage** | Pages projet individuelles uniquement |
+
+Format : `Accueil > Projets > Nom du Projet` (derniers éléments cliquables sauf actuel)
+
+### 5.8 Footer
+
+| Propriété | Valeur |
+|-----------|--------|
+| **Objectif** | Informations secondaires et liens réseaux |
+
+**Structure** : Icônes réseaux sociaux → Copyright → Mentions légales
+
+## 6. Branding & Style Guide
+
+### 6.1 Identité Visuelle
+
+**Thème** : Sombre (Dark Mode)
+**Logo** : Imposé, disponible dans `assets/img/`
+**Style** : Moderne, clean, technique mais accessible
+
+### 6.2 Palette de Couleurs (Thème Sombre)
+
+| Type | Hex | Tailwind Config | Usage |
+|------|-----|-----------------|-------|
+| **Primary** | `#FA784F` | `primary` | CTA, liens, éléments d'accent |
+| **Primary Hover** | `#FB9570` | `primary-light` | Hover sur primary |
+| **Primary Dark** | `#E5623A` | `primary-dark` | Active/pressed |
+| **Background** | `#17171F` | `background` | Fond de page principal |
+| **Surface** | `#1E1E28` | `surface` | Cartes, navbar, composants |
+| **Surface Light** | `#2A2A36` | `surface-light` | Hover cartes, inputs focus |
+| **Border** | `#3A3A48` | `border` | Bordures, séparateurs |
+| **Text Primary** | `#F5F5F7` | `text-primary` | Titres, texte principal |
+| **Text Secondary** | `#A1A1AA` | `text-secondary` | Texte secondaire, labels |
+| **Text Muted** | `#71717A` | `text-muted` | Placeholders, désactivé |
+| **Success** | `#34D399` | `success` | Confirmations |
+| **Warning** | `#FBBF24` | `warning` | Avertissements |
+| **Error** | `#F87171` | `error` | Erreurs |
+| **Info** | `#60A5FA` | `info` | Informations |
+
+### 6.3 Configuration Tailwind
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#FA784F',
+          light: '#FB9570',
+          dark: '#E5623A',
+        },
+        background: '#17171F',
+        surface: {
+          DEFAULT: '#1E1E28',
+          light: '#2A2A36',
+        },
+        border: '#3A3A48',
+        text: {
+          primary: '#F5F5F7',
+          secondary: '#A1A1AA',
+          muted: '#71717A',
+        },
+        success: '#34D399',
+        warning: '#FBBF24',
+        error: '#F87171',
+        info: '#60A5FA',
+      },
+    },
+  },
+}
+```
+
+### 6.4 Typographie
+
+| Usage | Police | Fallback |
+|-------|--------|----------|
+| **Titres & Corps** | Inter | system-ui, sans-serif |
+| **Code** | JetBrains Mono | monospace |
+
+**Échelle Typographique** :
+
+| Élément | Taille | Poids | Line Height |
+|---------|--------|-------|-------------|
+| H1 | 2.5rem (40px) | 700 | 1.2 |
+| H2 | 2rem (32px) | 600 | 1.3 |
+| H3 | 1.5rem (24px) | 600 | 1.4 |
+| Body | 1rem (16px) | 400 | 1.6 |
+| Small | 0.875rem (14px) | 400 | 1.5 |
+
+### 6.5 Iconographie
+
+**Bibliothèque** : Heroicons (outline navigation, solid états actifs)
+**Tailles** : 24px (nav), 20px (inline), 16px (badges)
+**Couleur** : Hérite du texte parent
+
+### 6.6 Espacements
+
+**Système** : Base 4px, classes Tailwind standard
+
+| Token | Valeur | Usage |
+|-------|--------|-------|
+| sm | 8px | Entre éléments proches |
+| md | 16px | Padding composants |
+| lg | 24px | Entre sections |
+| xl | 32px | Marges de section |
+| 2xl | 48px | Séparation majeure |
+
+## 7. Exigences d'Accessibilité
+
+### 7.1 Niveau de Conformité
+
+**Standard** : WCAG 2.1 Niveau AA (bonnes pratiques, pas de certification formelle)
+
+### 7.2 Contrastes de Couleurs
+
+| Élément | Couleurs | Ratio | Conformité |
+|---------|----------|-------|------------|
+| Texte principal / fond | `#F5F5F7` / `#17171F` | 15.5:1 | AAA |
+| Texte secondaire / fond | `#A1A1AA` / `#17171F` | 6.8:1 | AA |
+| Primary / fond | `#FA784F` / `#17171F` | 5.2:1 | AA |
+| Texte / bouton primary | `#17171F` / `#FA784F` | 5.2:1 | AA |
+
+### 7.3 Indicateurs de Focus
+
+- **Style** : `outline: 2px solid #FA784F; outline-offset: 2px;`
+- **Visibilité** : Toujours visible, jamais supprimé
+- **Cohérence** : Identique sur tous les éléments interactifs
+
+### 7.4 Navigation Clavier
+
+| Touche | Action |
+|--------|--------|
+| `Tab` | Navigation séquentielle |
+| `Shift+Tab` | Navigation inverse |
+| `Enter` | Activation liens/boutons |
+| `Escape` | Fermeture menu mobile |
+
+**Ordre** : `tabindex` naturel du DOM respecté
+
+### 7.5 Support Lecteur d'Écran
+
+- **Landmarks** : `<header>`, `<nav>`, `<main>`, `<footer>`
+- **Titres** : Hiérarchie H1 → H2 → H3 sans saut
+- **Labels** : Tous les inputs associés à un `<label>`
+- **États** : `aria-expanded`, `aria-invalid` utilisés
+
+### 7.6 Textes Alternatifs
+
+| Type | Traitement |
+|------|------------|
+| Décorative | `alt=""` |
+| Informative | `alt` descriptif |
+| Thumbnail projet | `alt="Aperçu du projet [Nom]"` |
+| Icône avec texte | `aria-hidden="true"` |
+| Icône seule | `aria-label` descriptif |
+
+### 7.7 Cibles Tactiles
+
+- **Taille minimum** : 44x44px
+- **Espacement** : 8px entre cibles adjacentes
+
+### 7.8 Stratégie de Test
+
+| Outil | Usage |
+|-------|-------|
+| Lighthouse | Score accessibilité > 90 |
+| axe DevTools | Erreurs ARIA |
+| Navigation clavier | Test manuel |
+| Contrast Checker | Validation ratios |
+
+## 8. Stratégie Responsive
+
+### 8.1 Breakpoints
+
+| Breakpoint | Min Width | Max Width | Appareils |
+|------------|-----------|-----------|-----------|
+| **Mobile** | 0px | 639px | Smartphones |
+| **Tablet** | 640px | 1023px | Tablettes |
+| **Desktop** | 1024px | 1279px | Laptops |
+| **Wide** | 1280px | — | Grands écrans |
+
+**Classes Tailwind** : `sm:` (640px), `md:` (768px), `lg:` (1024px), `xl:` (1280px)
+
+### 8.2 Patterns d'Adaptation Layout
+
+| Élément | Mobile | Tablet | Desktop |
+|---------|--------|--------|---------|
+| Conteneur | 100% - 16px padding | 100% - 24px padding | Max 1280px centré |
+| Grille projets | 1 colonne | 2 colonnes | 3 colonnes |
+| Cartes accueil | Empilées | 3 colonnes | 3 colonnes |
+| Formulaire | Champs empilés | Empilés | Nom/Prénom côte à côte |
+
+### 8.3 Navigation Responsive
+
+| Élément | Mobile | Desktop |
+|---------|--------|---------|
+| Menu | Hamburger → overlay | Liens horizontaux |
+| CTA Contact | Dans menu hamburger | Bouton navbar visible |
+| Logo | Centré/gauche | Gauche |
+
+### 8.4 Adaptation des Interactions
+
+| Comportement | Mobile | Desktop |
+|--------------|--------|---------|
+| Hover cartes | `:active` uniquement | Élévation + ombre |
+| Hover boutons | `:active` | Changement couleur |
+| Galerie | Swipe horizontal | Clic agrandissement |
+
+### 8.5 Exemple Tailwind
+
+```html
+<!-- Grille projets responsive -->
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+  <!-- Cartes projet -->
+</div>
+```
+
+## 9. Animations & Micro-interactions
+
+### 9.1 Principes de Motion Design
+
+1. **Subtilité** — Guider l'œil sans distraire du contenu
+2. **Intention** — Chaque animation a un but (feedback, orientation)
+3. **Performance** — Uniquement `transform` et `opacity` (GPU-accelerated)
+4. **Accessibilité** — Respect de `prefers-reduced-motion`
+
+### 9.2 Animations Clés
+
+| Animation | Élément | Durée | Easing |
+|-----------|---------|-------|--------|
+| Fade-in Hero | Titre, sous-titre, CTA | 600ms (staggered +100ms) | ease-out |
+| Hover Cartes | Cartes projet | 200ms | ease-in-out |
+| Hover Boutons | CTA | 150ms | ease |
+| Menu Mobile | Overlay | 300ms | ease-out |
+| Focus Input | Champs formulaire | 150ms | ease |
+| Spinner | Bouton envoi | 1000ms loop | linear |
+| Confirmation | Toast succès | 300ms | ease-out |
+
+### 9.3 Exemples CSS
+
+```css
+/* Hover carte projet */
+.project-card {
+  transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
+}
+.project-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+
+/* Hover bouton primary */
+.btn-primary {
+  background-color: #FA784F;
+  transition: background-color 150ms ease;
+}
+.btn-primary:hover {
+  background-color: #FB9570;
+}
+
+/* Focus input */
+input:focus {
+  border-color: #FA784F;
+  box-shadow: 0 0 0 3px rgba(250, 120, 79, 0.2);
+}
+```
+
+### 9.4 Accessibilité Motion
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+## 10. Considérations de Performance
+
+### 10.1 Objectifs
+
+| Métrique | Objectif | Source PRD |
+|----------|----------|------------|
+| **Lighthouse Performance** | > 90 | NFR9 |
+| **First Contentful Paint (FCP)** | < 1.5s | NFR10 |
+| **Cumulative Layout Shift (CLS)** | < 0.1 | NFR11 |
+| **Time to Interactive (TTI)** | < 3s | NFR12 |
+| **CSS après purge** | < 50kb | Story 1.2 |
+
+### 10.2 Stratégies Images
+
+| Technique | Implémentation |
+|-----------|----------------|
+| Format WebP | `<picture>` avec fallback JPG/PNG |
+| Lazy loading | `loading="lazy"` sur toutes les images |
+| Dimensions | `width` et `height` explicites (évite CLS) |
+| Thumbnails | Max 400px, qualité 80% |
+
+```html
+<picture>
+  <source srcset="image.webp" type="image/webp">
+  <img src="image.jpg" alt="..." width="400" height="225" loading="lazy">
+</picture>
+```
+
+### 10.3 Stratégies CSS/JS
+
+**CSS (Tailwind)** :
+- Purge automatique via config `content`
+- Minification avec `--minify`
+- Objectif : < 50kb
+
+**JavaScript** :
+- Vanilla JS (pas de framework)
+- Attribut `defer` sur les scripts
+- Scripts en fin de `<body>`
+
+### 10.4 Stratégies Fonts
+
+```html
+<link rel="preload" href="fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
+```
+
+- `font-display: swap` (évite FOIT)
+- Fallback : `system-ui, sans-serif`
+
+### 10.5 Outils de Test
+
+| Outil | Usage |
+|-------|-------|
+| Lighthouse | Audit complet (Chrome DevTools) |
+| PageSpeed Insights | Test conditions réelles |
+| WebPageTest | Analyse waterfall |
+
+## 11. Prochaines Étapes
+
+### 11.1 Actions Immédiates
+
+1. **Revue avec les parties prenantes** — Valider cette spécification UI/UX
+2. **Passage à l'Architecte** — Transmettre ce document pour l'architecture technique
+3. **Préparation des assets** — Rassembler le logo, préparer les images des projets
+
+### 11.2 Checklist de Validation Design
+
+- [x] Objectifs UX et personas définis
+- [x] Architecture de l'information complète
+- [x] Flux utilisateurs documentés
+- [x] Wireframes des écrans clés
+- [x] Composants UI identifiés
+- [x] Palette de couleurs (thème sombre) validée
+- [x] Typographie définie
+- [x] Exigences d'accessibilité documentées
+- [x] Stratégie responsive définie
+- [x] Animations spécifiées
+- [x] Objectifs de performance établis
+
+### 11.3 Handoff vers l'Architecte
+
+| Élément | Référence |
+|---------|-----------|
+| Stack technique | PRD Section 4 |
+| Palette couleurs | Section 6.2 |
+| Config Tailwind | Section 6.3 |
+| Composants | Section 5 |
+| Performance | Section 10 |
+
+### 11.4 Questions Ouvertes
+
+| Question | Statut |
+|----------|--------|
+| Contenu exact de l'accroche Hero | À rédiger |
+| Sélection des 5-10 projets vedettes | À définir |
+| Photos/visuels pour "Me Découvrir" | À préparer |
+| Témoignages clients | À collecter |
+
+---
+
+*Document généré par Sally (UX Expert) - Méthode BMAD*
+