diff --git a/docs/stories/4.4.page-decouvrir-passions.md b/docs/stories/4.4.page-decouvrir-passions.md
index 93c1ae8..7397f8a 100644
--- a/docs/stories/4.4.page-decouvrir-passions.md
+++ b/docs/stories/4.4.page-decouvrir-passions.md
@@ -2,7 +2,7 @@
 
 ## Status
 
-Ready for Dev
+review
 
 ## Story
 
@@ -20,23 +20,23 @@ Ready for Dev
 
 ## Tasks / Subtasks
 
-- [] **Task 1 : Ajouter la section dans about.php** (AC: 1)
-  - [] Titre "En dehors du code" ou "Mes passions"
-  - [] Sous-titre engageant
+- [x] **Task 1 : Ajouter la section dans about.php** (AC: 1)
+  - [x] Titre "En dehors du code" ou "Mes passions"
+  - [x] Sous-titre engageant
 
-- [] **Task 2 : Lister les hobbies** (AC: 1, 3)
-  - [] 3-4 passions maximum (3 passions)
-  - [] Description courte pour chaque
-  - [] Garder un ton professionnel
+- [x] **Task 2 : Lister les hobbies** (AC: 1, 3)
+  - [x] 3-4 passions maximum (3 passions)
+  - [x] Description courte pour chaque
+  - [x] Garder un ton professionnel
 
-- [] **Task 3 : Ajouter des visuels** (AC: 2, 5)
-  - [] Placeholders SVG avec gradients pour chaque passion
-  - [] Grille responsive (1→2→3 colonnes)
-  - [] Effet hover sur les cartes
+- [x] **Task 3 : Ajouter des visuels** (AC: 2, 5)
+  - [x] Placeholders SVG avec gradients pour chaque passion
+  - [x] Grille responsive (1→2→3 colonnes)
+  - [x] Effet hover sur les cartes
 
-- [] **Task 4 : Mentionner les projets personnels** (AC: 4)
-  - [] Lien vers GitHub (https://github.com/skycel)
-  - [] Carte dédiée aux projets open source
+- [x] **Task 4 : Mentionner les projets personnels** (AC: 4)
+  - [x] Lien vers GitHub (https://github.com/skycel)
+  - [x] Carte dédiée aux projets open source
 
 ## Dev Notes
 
@@ -158,12 +158,14 @@ Le contenu doit :
 ## Dev Agent Record
 
 ### Agent Model Used
-Claude Opus 4.5 (claude-opus-4-5-20251101)
+GPT-5 Codex
 
 ### File List
 | File | Action | Description |
 |------|--------|-------------|
 | `pages/about.php` | Modified | Ajout section "En dehors du code" |
+| `tests/passions.test.php` | Created | Tests passions |
+| `tests/run.ps1` | Modified | Ajout tests passions |
 
 ### Completion Notes
 - 3 cartes passion avec placeholders SVG et gradients colorés
@@ -174,7 +176,7 @@ Claude Opus 4.5 (claude-opus-4-5-20251101)
 - Chaque carte a un effet hover sur le groupe
 - Design cohérent avec les cartes du reste du site
 - Ton professionnel : chaque passion est reliée à des compétences transférables
-- Note: Les placeholders peuvent être remplacés par des vraies photos dans `/assets/img/hobbies/`
+- Tests: `powershell -ExecutionPolicy Bypass -File tests/run.ps1`
 
 ### Debug Log References
 Aucun problème rencontré.
@@ -184,4 +186,4 @@ Aucun problème rencontré.
 | Date | Version | Description | Author |
 |------|---------|-------------|--------|
 | 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
-| 2026-01-23 | 1.0 | Implémentation complète | James (Dev) |
+| 2026-02-04 | 1.0 | Implémentation complète | Amelia |
diff --git a/pages/about.php b/pages/about.php
index 474f6aa..46ab945 100644
--- a/pages/about.php
+++ b/pages/about.php
@@ -132,6 +132,70 @@ include_template('navbar', compact('currentPage'));
         </div>
     </section>
 
+    <section class="section">
+        <div class="container-content">
+            <div class="section-header">
+                <h2 class="section-title">En Dehors du Code</h2>
+                <p class="section-subtitle">
+                    Parce qu'un développeur a aussi une vie en dehors de l'écran.
+                </p>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="card group">
+                    <div class="aspect-video overflow-hidden bg-gradient-to-br from-purple-500/20 to-pink-500/10 flex items-center justify-center">
+                        <svg class="w-16 h-16 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-2v13"/>
+                            <circle cx="6" cy="18" r="3"/>
+                            <circle cx="18" cy="16" r="3"/>
+                        </svg>
+                    </div>
+                    <div class="card-body">
+                        <h3 class="text-lg font-semibold mb-2">Musique</h3>
+                        <p class="text-text-secondary text-sm">
+                            Pratique régulière qui cultive la rigueur et l'écoute, des qualités utiles pour le travail d'équipe.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="card group">
+                    <div class="aspect-video overflow-hidden bg-gradient-to-br from-emerald-500/20 to-cyan-500/10 flex items-center justify-center">
+                        <svg class="w-16 h-16 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h8a4 4 0 014 4v2a4 4 0 01-4 4H8a4 4 0 01-4-4v-2a4 4 0 014-4z"/>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11h2M15 11h2"/>
+                        </svg>
+                    </div>
+                    <div class="card-body">
+                        <h3 class="text-lg font-semibold mb-2">Jeux vidéo</h3>
+                        <p class="text-text-secondary text-sm">
+                            Passion qui nourrit la curiosité, l'optimisation et la recherche d'expériences fluides.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="card group">
+                    <div class="aspect-video overflow-hidden bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center">
+                        <svg class="w-16 h-16 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+                        </svg>
+                    </div>
+                    <div class="card-body">
+                        <h3 class="text-lg font-semibold mb-2">Projets Open Source</h3>
+                        <p class="text-text-secondary text-sm mb-3">
+                            Je contribue à des projets open source et développe mes propres outils sur mon temps libre.
+                        </p>
+                        <a href="https://github.com/skycel" target="_blank" rel="noopener" class="text-primary text-sm hover:underline inline-flex items-center gap-1">
+                            Voir sur GitHub
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <section class="section bg-surface">
         <div class="container-content text-center">
             <h2 class="text-heading mb-4">Envie d'en savoir plus ?</h2>
diff --git a/tests/passions.test.php b/tests/passions.test.php
new file mode 100644
index 0000000..0736432
--- /dev/null
+++ b/tests/passions.test.php
@@ -0,0 +1,17 @@
+<?php
+require_once __DIR__ . '/../includes/functions.php';
+
+function assertTrue($cond, $msg) {
+    if (!$cond) {
+        fwrite(STDERR, $msg . PHP_EOL);
+        exit(1);
+    }
+}
+
+$content = file_get_contents(__DIR__ . '/../pages/about.php');
+assertTrue(strpos($content, 'En Dehors du Code') !== false, 'missing passions section');
+assertTrue(strpos($content, 'Projets Open Source') !== false, 'missing open source card');
+assertTrue(strpos($content, 'https://github.com/skycel') !== false, 'missing github link');
+assertTrue(strpos($content, 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3') !== false, 'missing responsive grid');
+
+fwrite(STDOUT, "OK\n");
\ No newline at end of file
diff --git a/tests/run.ps1 b/tests/run.ps1
index 823caf2..d2014c1 100644
--- a/tests/run.ps1
+++ b/tests/run.ps1
@@ -18,4 +18,5 @@ php (Join-Path $here 'images.test.php')
 php (Join-Path $here 'skills.test.php')
 php (Join-Path $here 'tools.test.php')
 php (Join-Path $here 'about.test.php')
+php (Join-Path $here 'passions.test.php')
 'OK'
\ No newline at end of file