docs(02-02): complete layout shell plan (header + footer + default layout)

.planning/REQUIREMENTS.md

@@ -15,13 +15,13 @@
 
 - [x] **I18N-01**: Le site supporte FR et EN avec stratégie `prefix_except_default` (FR à `/`, EN à `/en/*`)
 - [x] **I18N-02**: La locale est détectée depuis le navigateur au premier accès et persistée en cookie
-- [ ] **I18N-03**: L'utilisateur peut changer de langue via un switcher dans le header
+- [x] **I18N-03**: L'utilisateur peut changer de langue via un switcher dans le header
 - [x] **I18N-04**: Le serveur lit le cookie et rend la bonne langue sans hydration mismatch
 - [x] **I18N-05**: Les fichiers de traduction FR/EN sont migrés depuis les locales existantes
 
 ### Theme
 
-- [ ] **THEME-01**: L'utilisateur peut basculer entre dark et light mode via un toggle dans le header
+- [x] **THEME-01**: L'utilisateur peut basculer entre dark et light mode via un toggle dans le header
 - [x] **THEME-02**: Le thème est persisté en cookie SSR-safe (pas localStorage)
 - [x] **THEME-03**: Aucun FOUC au chargement — le serveur rend le bon thème dès la première requête
 
@@ -49,8 +49,8 @@
 - [ ] **COMP-02**: Formulaire contact — UForm + UFormField + UInput + UTextarea + validation Zod + envoi EmailJS
 - [ ] **COMP-03**: FAQ accordion — UAccordion pour la page Fiverr, localisé FR/EN
 - [ ] **COMP-04**: Section témoignages clients — UCard pour chaque témoignage
-- [ ] **COMP-05**: Header avec navigation desktop (UNavigationMenu) + mobile (UDrawer) + toggles langue/thème
+- [x] **COMP-05**: Header avec navigation desktop (UNavigationMenu) + mobile (UDrawer) + toggles langue/thème
-- [ ] **COMP-06**: Footer avec liens et informations
+- [x] **COMP-06**: Footer avec liens et informations
 
 ### Data
 
@@ -110,18 +110,18 @@
 | INFRA-03 | Phase 1 | Pending |
 | I18N-01 | Phase 2 | Complete |
 | I18N-02 | Phase 2 | Complete |
-| I18N-03 | Phase 2 | Pending |
+| I18N-03 | Phase 2 | Complete |
 | I18N-04 | Phase 2 | Complete |
 | I18N-05 | Phase 2 | Complete |
-| THEME-01 | Phase 2 | Pending |
+| THEME-01 | Phase 2 | Complete |
 | THEME-02 | Phase 2 | Complete |
 | THEME-03 | Phase 2 | Complete |
 | SEO-01 | Phase 2 | Complete |
 | SEO-02 | Phase 2 | Complete |
 | SEO-03 | Phase 2 | Complete |
 | SEO-04 | Phase 2 | Complete |
-| COMP-05 | Phase 2 | Pending |
+| COMP-05 | Phase 2 | Complete |
-| COMP-06 | Phase 2 | Pending |
+| COMP-06 | Phase 2 | Complete |
 | PAGE-01 | Phase 3 | Pending |
 | PAGE-02 | Phase 3 | Pending |
 | PAGE-03 | Phase 3 | Pending |

.planning/ROADMAP.md

@@ -45,7 +45,7 @@ Plans:
 **Plans**: 3 plans
 Plans:
 - [x] 02-01-PLAN.md — Design system, color-mode, i18n translations, sitemap config
-- [ ] 02-02-PLAN.md — Header, footer, default layout with nav and toggles
+- [x] 02-02-PLAN.md — Header, footer, default layout with nav and toggles
 - [x] 02-03-PLAN.md — Per-route SEO metadata and JSON-LD structured data
 **UI hint**: yes
 

.planning/STATE.md

@@ -3,15 +3,15 @@ gsd_state_version: 1.0
 milestone: v1.0
 milestone_name: milestone
 status: executing
-stopped_at: Completed 02-03-PLAN.md
+stopped_at: Completed 02-02-PLAN.md
-last_updated: "2026-04-08T14:25:59.906Z"
+last_updated: "2026-04-08T14:26:56.840Z"
 last_activity: 2026-04-08 -- Phase 2 planning complete
 progress:
   total_phases: 3
-  completed_phases: 1
+  completed_phases: 2
   total_plans: 5
-  completed_plans: 4
+  completed_plans: 5
-  percent: 80
+  percent: 100
 ---
 
 # Project State
@@ -54,6 +54,7 @@ Progress: [░░░░░░░░░░] 0%
 *Updated after each plan completion*
 | Phase 02 P01 | 394s | 2 tasks | 6 files |
 | Phase 02-ssr-shell P03 | 48s | 1 tasks | 6 files |
+| Phase 02 P02 | 112s | 2 tasks | 6 files |
 
 ## Accumulated Context
 
@@ -69,6 +70,7 @@ Recent decisions affecting current work:
 - [Phase 02]: Brand color #85cb85 as Nuxt UI primary via CSS @theme + app.config.ts
 - [Phase 02]: Emojis stripped from migrated i18n translations for clean SSR
 - [Phase 02-ssr-shell]: JSON-LD values hardcoded per threat model T-02-06
+- [Phase 02]: Renamed a11y.github to a11y.gitea to match actual Gitea hosting
 
 ### Pending Todos
 
@@ -82,6 +84,6 @@ None yet.
 
 ## Session Continuity
 
-Last session: 2026-04-08T14:25:59.904Z
+Last session: 2026-04-08T14:26:56.838Z
-Stopped at: Completed 02-03-PLAN.md
+Stopped at: Completed 02-02-PLAN.md
 Resume file: None

.planning/phases/02-ssr-shell/02-02-SUMMARY.md

@@ -0,0 +1,62 @@
+---
+phase: 02-ssr-shell
+plan: 02
+subsystem: layout-header-footer
+tags: [header, footer, layout, i18n-toggle, color-mode, mobile-drawer, a11y]
+dependency_graph:
+  requires: [02-01]
+  provides: [app-header, app-footer, default-layout, locale-head]
+  affects: [app/app.vue, app/locales/fr.json, app/locales/en.json]
+tech_stack:
+  added: []
+  patterns: [useSetLocale, useColorMode, useLocaleHead, UDrawer]
+key_files:
+  created:
+    - app/components/layout/AppHeader.vue
+    - app/components/layout/AppFooter.vue
+    - app/layouts/default.vue
+  modified:
+    - app/app.vue
+    - app/locales/fr.json
+    - app/locales/en.json
+decisions:
+  - "Language toggle shows opposite locale text (FR when en, EN when fr) per D-04"
+  - "Renamed a11y.github key to a11y.gitea in both locale files to match actual Gitea link"
+  - "Social icons: Gitea + LinkedIn + Fiverr per user correction over D-05"
+metrics:
+  duration: 112s
+  completed: 2026-04-08
+---
+
+# Phase 02 Plan 02: Layout Shell (Header + Footer + Default Layout) Summary
+
+Sticky AppHeader with desktop nav, FR/EN text toggle (useSetLocale), dark/light icon toggle (useColorMode), mobile UDrawer; AppFooter with copyright + Gitea/LinkedIn/Fiverr social icons; default.vue layout wrapping header+slot+footer; app.vue updated with useLocaleHead for global hreflang/canonical.
+
+## Tasks Completed
+
+| Task | Name | Commit | Files |
+|------|------|--------|-------|
+| 1 | AppHeader with nav, language toggle, theme toggle, mobile drawer | 23fa399 | app/components/layout/AppHeader.vue |
+| 2 | AppFooter + default layout + app.vue update | cfe0180 | app/components/layout/AppFooter.vue, app/layouts/default.vue, app/app.vue, app/locales/fr.json, app/locales/en.json |
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 2 - Correctness] Renamed a11y.github to a11y.gitea in locale files**
+- **Found during:** Task 2
+- **Issue:** a11y.github key text referenced "GitHub" but the actual link points to Gitea (gitea.kamisama.ovh)
+- **Fix:** Renamed key from `a11y.github` to `a11y.gitea` and updated text to say "Gitea" in both fr.json and en.json
+- **Files modified:** app/locales/fr.json, app/locales/en.json
+- **Commit:** cfe0180
+
+## Verification Results
+
+- AppHeader contains sticky, z-[1020], useColorMode, useSetLocale, UDrawer, heroicons icons: PASS
+- AppHeader has min-w-11 min-h-11 touch targets, focus-visible:ring-2, aria-current: PASS
+- AppFooter contains simple-icons:gitea, simple-icons:linkedin, simple-icons:fiverr: PASS
+- AppFooter has target="_blank" rel="noopener noreferrer": PASS
+- default.vue contains AppHeader, AppFooter, slot: PASS
+- app.vue contains useLocaleHead, NuxtLayout, no NuxtRouteAnnouncer: PASS
+
+## Self-Check: PASSED