diff --git a/.archive/CLAUDE.md b/.archive/CLAUDE.md
new file mode 100644
index 0000000..7ab2387
--- /dev/null
+++ b/.archive/CLAUDE.md
@@ -0,0 +1,11 @@
+
+# Recent Activity
+
+
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5236 | 1:28 PM | ๐ต | Archived TabataGo PRD v1.1 discovered - comprehensive product requirements document | ~462 |
+
\ No newline at end of file
diff --git a/.archive/TabataGo_BDSD_v1.0.md b/.archive/TabataGo_BDSD_v1.0.md
new file mode 100644
index 0000000..67f0e25
--- /dev/null
+++ b/.archive/TabataGo_BDSD_v1.0.md
@@ -0,0 +1,599 @@
+# TabataGo โ Brand Design Specification Document (BDSD) v1.0
+
+> Ce document dรฉfinit l'identitรฉ visuelle, le positionnement premium, et les principes esthรฉtiques de TabataGo. Il guide toutes les dรฉcisions de design UI.
+
+---
+
+## 1. Vision de Marque
+
+### 1.1 Essence
+
+**TabataGo = รnergie pure, designรฉ pour performer.**
+
+Si TabataGo รฉtait une marque existante, ce serait **Gymshark** : jeune, audacieux, communautรฉ, et visuellement impactant. Mais avec une touche **premium exclusive** qui รฉlรจve l'expรฉrience.
+
+### 1.2 Positionnement
+
+| Attribut | Dรฉfinition |
+|-----------|------------|
+| **รmotion primaire** | รnergie / Vitalitรฉ โ l'utilisateur doit se sentir vivant et motivรฉ au premier regard |
+| **Positionnement** | Premium exclusif โ haut de gamme, design soignรฉ, pas une app "gratuite gรฉnรฉrique" |
+| **Adjectifs clรฉs** | Dynamic โข Vibrant โข Energetic |
+| **Mood global** | Action Sports โ comme รชtre dans une salle de sport high-end, la nuit, avec des nรฉons |
+
+### 1.3 Personnalitรฉ de Marque
+
+TabataGo est :
+- **Audacieux** โ pas peur d'รชtre vibrant et lumineux
+- **รnergique** โ chaque รฉlรฉment respire le mouvement
+- **Premium** โ jamais cheap, toujours soignรฉ
+- **Motivant** โ l'UI pousse l'utilisateur ร se dรฉpasser
+
+---
+
+## 2. Direction Visuelle
+
+### 2.1 Palette de Couleurs
+
+#### Couleur Primaire : Orange Energy
+
+L'orange est le cลur de l'identitรฉ โ il reprรฉsente l'รฉnergie, la chaleur, l'action.
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `ENERGY_500` | `#F97316` | Brand primary, CTA, accents principaux |
+| `ENERGY_400` | `#FB923C` | Glow effects, hover states |
+| `ENERGY_600` | `#EA580C` | Phase WORK, intensity |
+
+#### Fond : Soft Dark
+
+Un dark mode doux et riche, pas un noir pur agressif.
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `DARK_BASE` | `#1A1A1E` | Background principal |
+| `DARK_RAISED` | `#222226` | Cards level 1 |
+| `DARK_ELEVATED` | `#2A2A2E` | Cards level 2, modals |
+| `DARK_SURFACE` | `#0A0A0E` | Zones de focus, timer |
+
+#### Accents & Phases
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `GLOW_NEON` | `#F97316` + glow | Flamme streak, highlights |
+| `PHASE_WORK` | `#F97316` | Gradient work |
+| `PHASE_REST` | `#3B82F6` | Gradient rest (bleu calme) |
+| `PHASE_READY` | `#EAB308` | Gradient prรฉparation |
+| `SUCCESS` | `#22C55E` | Complรฉtion, streak maintenu |
+
+#### Textes
+
+| Token | Valeur | Usage |
+|-------|--------|-------|
+| `TEXT_PRIMARY` | `#FFFFFF` | Titres, รฉlรฉments principaux |
+| `TEXT_SECONDARY` | `rgba(255,255,255,0.85)` | Body text |
+| `TEXT_MUTED` | `rgba(255,255,255,0.60)` | Labels secondaires |
+| `TEXT_HINT` | `rgba(255,255,255,0.45)` | Placeholders, hints |
+
+### 2.2 Gradients
+
+**Philosophie : Subtils mais prรฉsents.** Les gradients ajoutent de la profondeur sans รชtre agressifs.
+
+#### Gradients de Phase
+
+```css
+/* GET_READY - Ambre chaleureux */
+--gradient-ready: linear-gradient(135deg, #451A03, #92400E, #D97706);
+
+/* WORK - Orange intense avec touche rouge */
+--gradient-work: linear-gradient(135deg, #450A0A, #991B1B, #EA580C);
+
+/* REST - Bleu calme, rรฉcupรฉration */
+--gradient-rest: linear-gradient(135deg, #0C1929, #1E3A5F, #2563EB);
+
+/* COMPLETE - Vert succรจs */
+--gradient-complete: linear-gradient(135deg, #052E16, #166534, #16A34A);
+```
+
+#### Gradients UI
+
+```css
+/* Hero backgrounds - subtle */
+--gradient-dark: linear-gradient(135deg, #0A0A14, #1A0E28, #2D1810);
+
+/* Card hover - trรจs subtil */
+--gradient-card-hover: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(249,115,22,0.02));
+
+/* Button CTA - dimension */
+--gradient-cta: linear-gradient(135deg, #F97316, #FB923C);
+```
+
+### 2.3 Glow & Neon Effects
+
+L'identitรฉ TabataGo repose sur des **effets lumineux** qui donnent vie ร l'interface.
+
+#### Glow Colors
+
+```css
+/* Glow orange - principal */
+--glow-energy: 0 0 40px rgba(249, 115, 22, 0.5);
+--glow-energy-intense: 0 0 80px rgba(249, 115, 22, 0.7);
+
+/* Glow blanc - รฉlรฉments actifs */
+--glow-white: 0 0 20px rgba(255, 255, 255, 0.3);
+
+/* Neon flame effect */
+--neon-flame:
+ 0 0 10px rgba(249, 115, 22, 0.8),
+ 0 0 20px rgba(249, 115, 22, 0.6),
+ 0 0 40px rgba(249, 115, 22, 0.4);
+```
+
+#### Applications du Glow
+
+| รlรฉment | Effet |
+|---------|-------|
+| Bouton START | Glow breathing animรฉ (pulse) |
+| Flamme streak | Neon flame effect |
+| Card sรฉlectionnรฉe | Subtle glow border |
+| Phase WORK active | Ambient glow en fond |
+| Countdown โค3s | Glow rouge qui pulse |
+
+---
+
+## 3. Typographie
+
+### 3.1 Police : Inter
+
+**Pourquoi Inter ?**
+- Excellent rendu sur รฉcran
+- Large gamme de weights pour le contrast mix
+- Tabular nums pour le timer (pas de jitter)
+- Google Fonts โ gratuit et performant
+
+### 3.2 Contrast Mix Philosophy
+
+**Heavy pour les titres, light pour le body.** Ce contraste crรฉe de l'impact et de l'รฉlรฉgance.
+
+| Usage | Weight | Size | Exemple |
+|-------|--------|------|---------|
+| Timer countdown | 900 (Black) | 140px | **20** |
+| Brand title | 900 (Black) | 56px | **TABATA** |
+| Headlines | 800 (ExtraBold) | 32px | **Terminรฉ !** |
+| Body text | 400 (Regular) | 16px | Description du programme |
+| Captions | 500 (Medium) | 14px | Labels, hints |
+
+### 3.3 Scale Typographique
+
+```css
+/* Display - Impact maximal */
+--font-countdown: 900 140px/1 Inter;
+--font-display: 900 42px/1.1 Inter;
+--font-headline: 800 28px/1.2 Inter;
+
+/* Interactive */
+--font-button-hero: 900 30px/1 Inter;
+--font-button: 700 18px/1 Inter;
+
+/* Body */
+--font-body: 400 16px/1.5 Inter;
+--font-caption: 500 14px/1.4 Inter;
+--font-overline: 600 11px/1.2 Inter;
+```
+
+### 3.4 Rรจgles Typographiques
+
+1. **Toujours tabular-nums** pour les chiffres du timer
+2. **Letter-spacing gรฉnรฉreux** sur les all-caps (+2px minimum)
+3. **Jamais de italic** sauf pour les citations
+4. **Line-height serrรฉ** sur les grands titres (1.1)
+
+---
+
+## 4. Iconographie
+
+### 4.1 Style : iOS Native
+
+Utiliser des icรดnes qui s'intรจgrent naturellement ร l'รฉcosystรจme iOS, avec le style SF Symbols.
+
+**Caractรฉristiques :**
+- Lignes medium (ni trop fines ni trop รฉpaisses)
+- Coins arrondis
+- Consistance visuelle
+- Reconnaissance instantanรฉe
+
+### 4.2 Icรดnes Systรจme
+
+| Action | Icรดne | Style |
+|--------|-------|-------|
+| Play | โถ๏ธ | SF Symbol `play.fill` |
+| Pause | โธ๏ธ | SF Symbol `pause.fill` |
+| Stop | โน๏ธ | SF Symbol `stop.fill` |
+| Skip | โญ๏ธ | SF Symbol `forward.fill` |
+| Settings | โ๏ธ | SF Symbol `gearshape.fill` |
+| Home | ๐ | SF Symbol `house.fill` |
+| History | ๐ | SF Symbol `clock.fill` |
+
+### 4.3 Tailles d'Icรดnes
+
+| Contexte | Taille |
+|----------|--------|
+| Navigation tabs | 24ร24px |
+| Boutons controls | 28ร28px |
+| Cards (badges) | 16ร16px |
+| Headers | 20ร20px |
+
+---
+
+## 5. Imagerie & Illustrations
+
+### 5.1 Style : Realistic Photos
+
+**Pas de cartoon, pas d'abstrait.** Des vraies personnes qui font du sport.
+
+**Caractรฉristiques des photos :**
+- Athlรจtes en action, pas poses statiques
+- รclairage dynamique, contrastรฉ
+- Background flou/sombre
+- Diversitรฉ de corps et d'origines
+- Qualitรฉ haute rรฉsolution
+
+### 5.2 Traitement des Photos
+
+```css
+/* Overlay pour intรฉgration dark mode */
+.photo-overlay {
+ background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
+}
+
+/* Warm tint pour cohรฉrence brand */
+.photo-tint {
+ filter: saturate(1.1) sepia(0.1);
+}
+```
+
+### 5.3 GIFs d'Exercices
+
+- Durรฉe : 1-2 secondes, loop seamless
+- Format : 200ร200px minimum
+- Fond transparent ou sombre
+- Modรจle en tenue fitness neutre
+
+---
+
+## 6. Composants UI
+
+### 6.1 Boutons
+
+#### Primary CTA (Pill Filled)
+
+```css
+.cta-primary {
+ background: linear-gradient(135deg, #F97316, #FB923C);
+ border-radius: 9999px; /* Full pill */
+ padding: 16px 40px;
+ box-shadow: 0 0 40px rgba(249, 115, 22, 0.4);
+}
+
+.cta-primary:active {
+ transform: scale(0.95);
+ box-shadow: 0 0 20px rgba(249, 115, 22, 0.6);
+}
+```
+
+#### Secondary Button
+
+```css
+.cta-secondary {
+ background: rgba(255, 255, 255, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 16px;
+ padding: 12px 24px;
+}
+```
+
+### 6.2 Cards
+
+#### Soft Elevated Cards
+
+```css
+.card {
+ background: rgba(34, 34, 38, 0.8); /* DARK_RAISED */
+ border-radius: 20px;
+ border: 1px solid rgba(255, 255, 255, 0.06);
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+.card-selected {
+ border-color: rgba(249, 115, 22, 0.3);
+ background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(249,115,22,0.02));
+ box-shadow: 0 0 30px rgba(249, 115, 22, 0.2);
+}
+```
+
+### 6.3 Progress Indicators
+
+#### Progress Bar
+
+```css
+.progress-bar {
+ height: 6px;
+ background: rgba(255, 255, 255, 0.08);
+ border-radius: 9999px;
+ overflow: hidden;
+}
+
+.progress-fill {
+ background: linear-gradient(90deg, #F97316, #FB923C);
+ border-radius: 9999px;
+ transition: width 0.3s ease-out;
+}
+```
+
+#### Creative Loading
+
+Style : barre de progression stylisรฉe avec glow.
+
+```css
+.loading-bar {
+ height: 4px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 9999px;
+ overflow: hidden;
+}
+
+.loading-fill {
+ width: 30%;
+ height: 100%;
+ background: linear-gradient(90deg, #F97316, #FB923C);
+ box-shadow: 0 0 10px rgba(249, 115, 22, 0.8);
+ animation: loading-slide 1.5s ease-in-out infinite;
+}
+```
+
+---
+
+## 7. Motion & Animation
+
+### 7.1 Philosophie : Bouncy & Playful
+
+**Les animations doivent sentir vivantes, pas robotiques.**
+
+| Type | Durรฉe | Easing |
+|------|-------|--------|
+| Micro-interactions | 100-200ms | Ease-out |
+| Transitions standard | 300-400ms | Ease-in-out |
+| Animations bouncy | 400-600ms | Spring (damping: 12, stiffness: 180) |
+| Breathing loops | 2000-4000ms | Ease-in-out (loop) |
+
+### 7.2 Animations Clรฉs
+
+#### Glow Breathing (Bouton START)
+
+```css
+@keyframes glow-breathe {
+ 0%, 100% {
+ box-shadow: 0 0 30px rgba(249, 115, 22, 0.3);
+ transform: scale(1);
+ }
+ 50% {
+ box-shadow: 0 0 60px rgba(249, 115, 22, 0.5);
+ transform: scale(1.02);
+ }
+}
+```
+
+#### Pulse (Countdown)
+
+```css
+@keyframes countdown-pulse {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.03); }
+ 100% { transform: scale(1); }
+}
+/* 200ms per tick */
+```
+
+#### Bouncy Pop (Victory)
+
+```css
+@keyframes victory-pop {
+ 0% { transform: scale(0.5); opacity: 0; }
+ 60% { transform: scale(1.1); }
+ 100% { transform: scale(1); opacity: 1; }
+}
+/* 500ms total */
+```
+
+#### Pulsing Circles (Hero)
+
+```css
+@keyframes hero-pulse {
+ 0% {
+ transform: scale(0.8);
+ opacity: 0.8;
+ }
+ 100% {
+ transform: scale(2);
+ opacity: 0;
+ }
+}
+/* 2000ms, staggered */
+```
+
+### 7.3 Micro-interactions Premium
+
+| Interaction | Feedback |
+|-------------|----------|
+| Tap bouton | `scale(0.95)` + haptic light |
+| Tap card | `scale(0.98)` + border glow fade |
+| Focus input | Border glow animation |
+| Swipe | Resistance elastique |
+| Phase change | Cross-fade 400ms + haptic medium |
+
+---
+
+## 8. Effets Dรฉcoratifs
+
+### 8.1 Flamme Neon (Streak)
+
+La flamme reprรฉsente le streak โ elle doit รชtre **lumineuse, dynamic, motivante**.
+
+**Spรฉcifications :**
+- Style : Neon glow flame
+- Animation : Scale pulse + opacity flicker
+- Couleurs : Orange avec halo lumineux
+- Taille : 48-80px selon contexte
+
+```css
+.neon-flame {
+ filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.8))
+ drop-shadow(0 0 20px rgba(249, 115, 22, 0.6))
+ drop-shadow(0 0 40px rgba(249, 115, 22, 0.4));
+ animation: flame-flicker 800ms ease-in-out infinite;
+}
+
+@keyframes flame-flicker {
+ 0%, 100% { opacity: 0.9; transform: scale(1); }
+ 50% { opacity: 1; transform: scale(1.05); }
+}
+```
+
+### 8.2 Pulsing Circles (Background Hero)
+
+Utilisรฉs pour les moments de victoire et les รฉcrans hero.
+
+```css
+.hero-circles::before,
+.hero-circles::after {
+ content: '';
+ position: absolute;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(249,115,22,0.3), transparent 70%);
+ animation: hero-pulse 2000ms ease-out infinite;
+}
+
+.hero-circles::after {
+ animation-delay: 1000ms;
+}
+```
+
+### 8.3 Floating Particles
+
+Particules subtiles qui flottent en arriรจre-plan pour ajouter de la vie.
+
+**Spรฉcifications :**
+- Nombre : 20-50 particules
+- Taille : 2-6px
+- Couleur : `rgba(255,255,255,0.1)` ร `rgba(249,115,22,0.2)`
+- Mouvement : Slow drift, random
+- Opacitรฉ : 0.1-0.3
+
+---
+
+## 9. Spacing & Layout
+
+### 9.1 Whitespace Gรฉnรฉreux
+
+Le premium respire. **Plus d'espace = plus d'impact.**
+
+| Token | Valeur | Usage |
+|-------|--------|-------|
+| `space-xs` | 4px | Inline gaps |
+| `space-sm` | 8px | Between related items |
+| `space-md` | 16px | Section padding |
+| `space-lg` | 24px | Between sections |
+| `space-xl` | 40px | Major sections |
+| `space-2xl` | 64px | Hero spacing |
+
+### 9.2 Rounded Corners
+
+| Token | Valeur | Usage |
+|-------|--------|-------|
+| `radius-sm` | 8px | Tags, small elements |
+| `radius-md` | 12px | Buttons medium |
+| `radius-lg` | 16px | Cards |
+| `radius-xl` | 20px | Large cards, bottom sheets |
+| `radius-full` | 9999px | Pills, circles |
+
+---
+
+## 10. Son Design
+
+### 10.1 Philosophie
+
+Les sons doivent รชtre **subtils mais mรฉmorables**. Ils renforcent le feedback sans รชtre intrusifs.
+
+### 10.2 Sons Clรฉs
+
+| รvรฉnement | Son | Caractรฉristiques |
+|-----------|-----|------------------|
+| Bip phase start | Court, percutant | 200ms, frรฉquence montante |
+| Countdown tick | Click subtil | 100ms, tone medium |
+| Phase WORK start | "Go!" ou bip fort | 300ms, รฉnergique |
+| Victoire complรจte | Fanfare courte | 1000ms, cรฉlรฉbration |
+| Haptic sync | Synchronisรฉ au son | Feedback tactile |
+
+### 10.3 Intรฉgration
+
+- Volume par dรฉfaut : 80% pour sons, 60% pour musique
+- Ducking : Sons de phase prioritaire sur musique
+- Respect silent mode (option override)
+
+---
+
+## 11. Inspirations & Rรฉfรฉrences
+
+### 11.1 Apple Fitness+
+
+**Ce qu'on en reprend :**
+- Dark mode รฉlรฉgant avec accents colorรฉs
+- Gradients subtils de phase
+- Typography bold et impactante
+- Animations fluides et premium
+- Rings de progression stylisรฉs
+
+### 11.2 Gymshark
+
+**Ce qu'on en reprend :**
+- รnergie et dynamisme
+- Communautรฉ et motivation
+- Photography realistic fitness
+- Brand bold et young
+
+### 11.3 Gaming UI (rรฉfรฉrence secondaire)
+
+**Ce qu'on en reprend :**
+- Effets neon/glow
+- Animations bouncy
+- Feedback immรฉdiat et satisfaisant
+- Progress bars crรฉatives
+
+---
+
+## 12. Checklist Brand Consistency
+
+Avant chaque release, vรฉrifier :
+
+- [ ] **Orange utilisรฉ comme accent dominant** (pas diluรฉ)
+- [ ] **Glow effects prรฉsents** sur les รฉlรฉments interactifs clรฉs
+- [ ] **Animations bouncy** et non robotiques
+- [ ] **Whitespace gรฉnรฉreux** โ pas de surcharge visuelle
+- [ ] **Rounded corners** partout (pas de corners carrรฉs)
+- [ ] **Photos realistic** et non illustrรฉes
+- [ ] **Haptics synchronisรฉs** avec les interactions
+- [ ] **Dark mode soft grey** et non true black
+- [ ] **Contrast typo** (heavy titles, light body)
+- [ ] **Feedback sonore subtil** mais prรฉsent
+
+---
+
+## 13. Versions
+
+| Version | Date | Changements |
+|---------|------|-------------|
+| 1.0 | 18 fรฉvrier 2026 | Crรฉation initiale |
+
+---
+
+*Document crรฉรฉ le 18 fรฉvrier 2026 โ TabataGo BDSD v1.0*
diff --git a/.archive/TabataGo_PDD_v1.0.md b/.archive/TabataGo_PDD_v1.0.md
new file mode 100644
index 0000000..4b70cb6
--- /dev/null
+++ b/.archive/TabataGo_PDD_v1.0.md
@@ -0,0 +1,1994 @@
+# TabataGo โ Product Design Document (PDD) v1.0
+
+> Ce document dรฉfinit l'identitรฉ visuelle, les patterns UI/UX, et les spรฉcifications d'interaction pour l'application TabataGo.
+
+---
+
+## 1. Vision Design
+
+### 1.1 Philosophie
+
+**"Immersion totale. Zรฉro friction. Maximum d'intensitรฉ."**
+
+TabataGo n'est pas une simple minuterie โ c'est une **expรฉrience**. Chaque รฉlรฉment visuel et sonore est conรงu pour :
+
+1. **Plonger l'utilisateur** dans un รฉtat de focus intense pendant les 20 secondes de travail
+2. **รliminer toute distraction** cognitive (pas de dรฉcisions ร prendre pendant l'effort)
+3. **Crรฉer une boucle รฉmotionnelle** positive qui encourage la rรฉgularitรฉ
+
+### 1.3 Principes Directeurs
+
+| Principe | Application |
+|----------|-------------|
+| **Dark-first** | L'app est conรงue pour le mode sombre par dรฉfaut โ l'expรฉrience en mode clair est secondaire |
+| **Plein รฉcran immersif** | Pendant la sรฉance, RIEN ne doit distraire : ni barre de navigation, ni notifications |
+| **Feedback immรฉdiat** | Chaque action gรฉnรจre une rรฉponse visuelle, sonore, et/ou haptique |
+| **Progressive disclosure** | L'info complexe est rรฉvรฉlรฉe progressivement, jamais en bloc |
+| **Gym-friendly** | L'interface doit รชtre lisible ร 2 mรจtres, avec des gestes simples |
+
+---
+
+## 2. Systรจme de Design
+
+### 2.1 Palette de Couleurs
+
+#### Couleurs de Phase (Cลur de l'expรฉrience)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ IDLE โ Charcoal Night โ
+โ โ #1E1E2E โ Gradient profond violet/bleu โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ GET_READY โ Jaune Ambre โ
+โ โ #EAB308 โ "Prรฉpare-toi, รงa arrive" โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ WORK โ Orange Intense (Brand) โ
+โ โ #F97316 โ "Donne tout, maintenant !" โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ REST โ Bleu Calme โ
+โ โ #3B82F6 โ "Respire, rรฉcupรจre" โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ COMPLETE โ Vert Succรจs โ
+โ โ #22C55E โ "Bravo, tu l'as fait !" โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+#### Tokens de Couleur
+
+```typescript
+// === ACCENT ===
+ORANGE: '#F97316' // Brand primary - CTA, timer actif
+ORANGE_GLOW: '#FB923C' // Glow effects
+RED_HOT: '#EF4444' // Danger, derniers secondes
+GOLD: '#FBBF24' // Streaks, badges
+WHITE: '#FFFFFF'
+
+// === TEXT ===
+PRIMARY: '#FFFFFF' // Titres
+SECONDARY: 'rgba(255,255,255,0.85)' // Body
+TERTIARY: 'rgba(255,255,255,0.75)' // Labels
+MUTED: 'rgba(255,255,255,0.60)' // Texte secondaire
+HINT: 'rgba(255,255,255,0.45)' // Placeholders, hints
+
+// === SURFACE ===
+BASE: '#0A0A14' // Background profond
+RAISED: '#12101F' // Cards level 1
+ELEVATED: '#1E1E2E' // Cards level 2
+OVERLAY_LIGHT: 'rgba(255,255,255,0.08)' // Hover states
+OVERLAY_MEDIUM: 'rgba(255,255,255,0.15)' // Active states
+OVERLAY_STRONG: 'rgba(255,255,255,0.25)' // Selected states
+
+// === GLASS (Blur + Translucence) ===
+FILL: 'rgba(255,255,255,0.03)'
+BORDER: 'rgba(255,255,255,0.08)'
+BLUR_HEAVY: 40 // iOS-style toolbar blur
+```
+
+### 2.2 Typographie
+
+**Police principale : Inter** (Google Fonts, variable font)
+
+| Token | Taille | Poids | Usage |
+|-------|--------|-------|-------|
+| `countdown` | 140px | 900 (Black) | Chiffre principal du timer |
+| `timeDisplay` | 72px | 900 (Black) | Durรฉe totale (รฉcran complete) |
+| `brandTitle` | 56px | 900 (Black) | "TABATA" dans le logo |
+| `displayLarge` | 42px | 900 (Black) | Titres onboarding |
+| `displaySmall` | 32px | 900 (Black) | "GO" dans le logo |
+| `buttonHero` | 30px | 900 (Black) | Bouton START principal |
+| `heading` | 24px | 800 (ExtraBold) | Noms d'exercice, sections |
+| `buttonMedium` | 20px | 700 (Bold) | Boutons secondaires |
+| `body` | 18px | 700 (Bold) | Texte courant |
+| `caption` | 16px | 500 (Medium) | Sous-titres |
+| `label` | 15px | 800 (ExtraBold) | Badges, tags |
+| `overline` | 11px | 600 (SemiBold) | Labels uppercase |
+
+**Note importante :** Toutes les valeurs numรฉriques (timer, durรฉes) utilisent `fontVariant: ['tabular-nums']` pour รฉviter le jitter visuel.
+
+### 2.3 Espacement (Spacing Scale)
+
+```typescript
+SPACING = {
+ 0: 0,
+ 0.5: 2,
+ 1: 4,
+ 1.5: 6,
+ 2: 8,
+ 2.5: 10,
+ 3: 12,
+ 3.5: 14,
+ 4: 16,
+ 5: 20,
+ 6: 24,
+ 7: 28,
+ 8: 32,
+ 9: 36,
+ 10: 40,
+ 12: 48,
+ 14: 56,
+ 16: 64,
+}
+```
+
+### 2.4 Border Radius
+
+```typescript
+RADIUS = {
+ XS: 4, // Chips, small tags
+ SM: 6, // Small buttons
+ MD: 8, // Cards small, badges
+ LG: 12, // Cards medium
+ XL: 16, // Cards large, modals
+ 2XL: 20, // Bottom sheets
+ 3XL: 24, // Full-width buttons
+ FULL: 9999, // Pills, circular avatars
+}
+```
+
+---
+
+## 3. Composants UI Principaux
+
+### 3.1 Timer Display (รcran Sรฉance)
+
+**Layout en 4 zones :**
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ ZONE HAUTE (10%) โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ ๐๏ธ Burpees 3/8 โ โ
+โ โ (Nom exercice) (Badge round) โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ โ
+โ ZONE CENTRALE (55%) โ
+โ โ
+โ PRรPARE-TOI โ
+โ โ
+โ 17 โ
+โ (140px, pulsation) โ
+โ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ ZONE BASSE (35%) โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ โ โ โ โ โ โ (Indicateurs rounds) โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โธ๏ธ โน๏ธ โญ๏ธ (Contrรดles) โ โ
+โ โ (Toolbar glass-morphism) โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Comportement par phase :**
+
+| Phase | Fond | Timer | Label | Animation |
+|-------|------|-------|-------|-----------|
+| IDLE | Gradient sombre | โ | โ | Glow breathing |
+| GET_READY | Gradient jaune/ambre | Pulsation | "PRรPARE-TOI" | Fade in du nom d'exercice |
+| WORK | Gradient rouge/orange | Pulsation forte | "GO !" | Glow orange intensif |
+| REST | Gradient bleu | Pulsation douce | "REPOS" | Affiche "Prochain : [exercice]" |
+| COMPLETE | Gradient vert | โ | "TERMINร !" | Spring bouncy |
+
+**Transitions :**
+- Cross-fade 400ms entre les gradients de phase
+- Pulse du chiffre ร chaque seconde รฉcoulรฉe
+- Flash rouge si โค3 secondes restantes
+
+### 3.2 Bouton Start (IDLE Screen)
+
+**Spรฉcifications :**
+- Taille : 150ร150px, parfaitement rond
+- Couleur : `#F97316` (Orange brand)
+- Glow : `#F97316` avec `opacity: 0.3 โ 0.6` en breathing (4s cycle)
+- Shadow : `0 0 60px rgba(249,115,22,0.5)`
+- Press state : `scale(0.95)`
+
+**Animation breathing :**
+```typescript
+Animated.loop(
+ Animated.sequence([
+ Animated.timing(glowAnim, { toValue: 1, duration: 2000 }),
+ Animated.timing(glowAnim, { toValue: 0, duration: 2000 }),
+ ])
+)
+```
+
+### 3.3 Controls Bar (Toolbar)
+
+**Style glass-morphism iOS :**
+```typescript
+
+ {/* Round indicators */}
+ {/* Pause / Stop / Skip buttons */}
+
+```
+
+**Boutons :**
+- Fond : `rgba(255,255,255,0.15)` avec border `rgba(255,255,255,0.08)`
+- Taille : 56ร56px
+- Border radius : 16px
+- Press : `scale(0.92)` + haptics lรฉger
+
+### 3.4 Indicateurs de Round
+
+**8 dots horizontaux :**
+- Dot vide : 8ร8px, `rgba(255,255,255,0.15)`
+- Dot rempli : 8ร8px, `rgba(255,255,255,0.85)`
+- Dot actif : 12ร12px, `#FFFFFF` avec glow blanc
+
+### 3.5 Program Card (Home Screen)
+
+**Dimensions :** `SCREEN_WIDTH - 48` de largeur
+
+**Structure :**
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ (selected) BEGINNER (badge) โ (mode) โ
+โ โ
+โ Tabata Classic โ
+โ 8 rounds de Burpees pour commencer en force โ
+โ โ
+โ โโโโโโโโโโโโโโโโ + โโโโโโโโโโโโโโโโ โ
+โ โ Burpees โ โ Squats โ โ
+โ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ 8 rounds โ 4 min โ 1 ex. โ
+โ โ
+โ Toucher pour dรฉtails โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**รtats :**
+- Default : fond `rgba(255,255,255,0.03)`, border `rgba(255,255,255,0.08)`
+- Selected : fond avec gradient orange `rgba(249,115,22,0.12)` + checkmark orange
+
+---
+
+## 4. Flows Utilisateur
+
+### 4.1 Onboarding (6 รcrans)
+
+**Navigation :** Boutons Prรฉcรฉdent / Suivant en bas de chaque รฉcran
+
+**Indicateurs de progression :** 6 dots en bas, le dot actif est rempli
+
+---
+
+#### รcran 1 โ Le Problรจme (Accroche)
+
+**Objectif :** Identifier la douleur (manque de temps)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ โ
+โ โฐ โ
+โ (Animation horloge qui se fragmente) โ
+โ โ
+โ โ
+โ "Tu n'as pas 1 heure โ
+โ pour la salle. โ
+โ Personne n'en a." โ
+โ โ
+โ "Et pourtant tu veux โ
+โ progresser. โ
+โ On a la solution." โ
+โ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SUIVANT โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โ โ โ โ โ โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Spรฉcifications :**
+| รlรฉment | Valeur |
+|---------|--------|
+| Animation horloge | Lottie 120ร120px, loop |
+| Titre principal | `TYPOGRAPHY.displayLarge` (42px), `TEXT.PRIMARY` |
+| Sous-titre | `TYPOGRAPHY.body`, `TEXT.MUTED` |
+| Bouton | Full-width pill, `BRAND.PRIMARY` |
+| Haptic | `impactAsync(Medium)` au tap |
+
+---
+
+#### รcran 2 โ L'Empathie (Choix)
+
+**Objectif :** Faire sentir l'utilisateur compris
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ "Qu'est-ce qui t'empรชche โ
+โ de t'entraรฎner ?" โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ ๐ฐ Manque de temps โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ ๐ Motivation en berne โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ ๐ค Je ne sais pas quoi faire โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ ๐ Je n'ai pas accรจs ร une salle โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SUIVANT โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โ โ โ โ โ โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Spรฉcifications :**
+| รlรฉment | Valeur |
+|---------|--------|
+| Question | `TYPOGRAPHY.heading`, `TEXT.PRIMARY` |
+| Option card | Height 56px, `SURFACE.OVERLAY_LIGHT` |
+| Option sรฉlectionnรฉe | Border `BRAND.PRIMARY`, bg `rgba(249,115,22,0.1)` |
+| Emoji | 24px |
+| Texte option | `TYPOGRAPHY.body`, `TEXT.SECONDARY` |
+
+**Comportement :**
+- Multi-select autorisรฉ (jusqu'ร 2 choix)
+- La rรฉponse est stockรฉe pour personnaliser la suite
+- Le bouton "Suivant" est dรฉsactivรฉ tant qu'aucun choix
+
+---
+
+#### รcran 3 โ La Solution (Preuves)
+
+**Objectif :** Convaincre avec des preuves scientifiques + comparaison
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ "4 minutes." โ
+โ "Vraiment transformatrices." โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ ๐ TABATA (4 min) vs CARDIO (30 min) โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โ โ
+โ โ 85 kcal 90 kcal โ โ
+โ โ โ โ
+โ โ "Autant de calories en 7x moins de temps" โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ ๐งฌ "La mรฉthode Tabata augmente la capacitรฉ โ โ
+โ โ aรฉrobie et anaรฉrobie simultanรฉment." โ โ
+โ โ โ โ
+โ โ โ Dr. Izumi Tabata, 1996 โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SUIVANT โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โ โ โ โ โ โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Spรฉcifications :**
+| รlรฉment | Valeur |
+|---------|--------|
+| Titre | `TYPOGRAPHY.displayLarge`, `TEXT.PRIMARY` |
+| Graphique | Barres comparatives animรฉes |
+| Barre Tabata | `BRAND.PRIMARY` |
+| Barre Cardio | `TEXT.MUTED` |
+| Citation | `TYPOGRAPHY.caption`, `TEXT.TERTIARY`, italique |
+| Auteur | `TYPOGRAPHY.overline`, `TEXT.HINT` |
+
+**Animation :**
+- Les barres grandissent de 0 ร leur hauteur finale (600ms)
+- La citation fade-in aprรจs les barres (300ms delay)
+
+---
+
+#### รcran 4 โ Le Moment "Wow" (Mini-Dรฉmo)
+
+**C'est le moment critique de conversion.**
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ "Essaie maintenant" โ
+โ "20 secondes. Juste pour sentir." โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ GET READY โ โ
+โ โ โ โ
+โ โ 10 โ โ
+โ โ (Mini-timer 140px) โ โ
+โ โ โ โ
+โ โ [GIF exercice - Burpees 120ร120] โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ "Prรฉpare-toi... Le timer va bientรดt commencer !" โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ C'รTAIT FACILE ! โ โ
+โ โ (Apparaรฎt aprรจs completion) โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โ โ โ โ โ โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Sรฉquence :**
+1. Affichage initial : Timer ร 10s GET_READY
+2. Timer dรฉcompte 10โ0 avec sons + haptics
+3. Transition automatique vers 20s WORK
+4. Timer dรฉcompte 20โ0 avec phase orange
+5. Fin โ Affichage "C'รฉtait facile !" en fade-in + haptics succรจs
+
+**Comportement :**
+- Auto-start aprรจs 2 secondes sur l'รฉcran
+- Sons + vibrations activรฉs
+- Le bouton n'apparaรฎt qu'aprรจs completion
+- Tap "C'รฉtait facile !" โ รฉcran suivant
+
+---
+
+#### รcran 5 โ Personnalisation
+
+**Objectif :** Crรฉer un investissement personnel
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ "Configurons ta premiรจre semaine." โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ Ton niveau fitness โ โ
+โ โ โ โ
+โ โ โ Dรฉbutant โ Intermรฉdiaire โ Avancรฉ โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ Ton objectif โ โ
+โ โ โ โ
+โ โ โ Perte de poids โ Cardio โ Force โ Zen โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ Frรฉquence souhaitรฉe โ โ
+โ โ โ โ
+โ โ โ 2x/semaine โ 3x/semaine โ 5x/semaine โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ Comment tu t'appelles ? [________Marie________] โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SUIVANT โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โ โ โ โ โ โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Spรฉcifications :**
+| รlรฉment | Valeur |
+|---------|--------|
+| Titre section | `TYPOGRAPHY.overline`, `TEXT.HINT` |
+| Options | Radio buttons horizontaux |
+| Option sรฉlectionnรฉe | `BRAND.PRIMARY` border + fill |
+| Input prรฉnom | Full-width, bg `SURFACE.OVERLAY_LIGHT` |
+
+**Donnรฉes collectรฉes :**
+- Niveau โ influence les programmes suggรฉrรฉs
+- Objectif โ influence le ton des messages
+- Frรฉquence โ influence les rappels de notification
+- Prรฉnom โ personnalise le greeting sur Home
+
+---
+
+#### รcran 6 โ Paywall
+
+**Objectif :** Convertir avec l'essai gratuit
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ "Continue sur ta lancรฉe. โ
+โ Sans limite." โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ โจ Passe Premium โ โ
+โ โ โ โ
+โ โ โ Programmes illimitรฉs โ โ
+โ โ โ Cycles multiples โ โ
+โ โ โ Stats avancรฉes โ โ
+โ โ โ Widgets iOS/Android โ โ
+โ โ โ Sans publicitรฉ โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ $4.99/mois โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ โ $29.99/an รCONOMISE 50% โ
BEST โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ COMMENCER L'ESSAI GRATUIT โ โ
+โ โ (7 jours) โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ Annule ร tout moment โข Satisfait ou remboursรฉ โ
+โ โ
+โ [ Continuer sans abonnement ] โ
+โ โ
+โ โ โ โ โ โ โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Spรฉcifications :**
+| รlรฉment | Valeur |
+|---------|--------|
+| Titre | `TYPOGRAPHY.heading`, `TEXT.PRIMARY` |
+| Liste avantages | `TYPOGRAPHY.body`, `TEXT.SECONDARY` |
+| Checkmark | `BRAND.SUCCESS` |
+| Prix | `TYPOGRAPHY.heading`, `TEXT.PRIMARY` |
+| Badge "BEST" | Small pill, `BRAND.PRIMARY` |
+| CTA principal | Full-width, `BRAND.PRIMARY` |
+| Lien secondaire | `TYPOGRAPHY.caption`, `TEXT.HINT` |
+
+**Comportement :**
+- Essai gratuit 7 jours sรฉlectionnรฉ par dรฉfaut
+- "Continuer sans abonnement" โ accรจs limitรฉ Free
+- RevenueCat gรจre l'abonnement
+
+---
+
+### 4.2 Flow Principal (Post-Onboarding)
+
+```
+โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ
+โ โ โ โ โ โ
+โ HOME โโโโโโถโ PROGRAM โโโโโโถโ TIMER โ
+โ (Tab 1) โ โ DETAIL โ โ (Active) โ
+โ โ โ (Modal) โ โ โ
+โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ
+ โ โ
+ โ โ
+ โผ โผ
+โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ
+โ HISTORY โ โ COMPLETE โ
+โ (Tab 2) โ โ (Victory) โ
+โ โ โ โ
+โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ
+```
+
+### 4.3 Flow Timer Dรฉtaillรฉ
+
+```
+IDLE โโโ(START)โโโถ GET_READY โโโ(auto)โโโถ WORK โโโ(auto)โโโถ REST
+ โ โ โ โ
+ โ โ โ โ
+ โ โ โ โ
+ โผ โผ โผ โผ
+ โ 10 secondes 20 secondes 10 secondes
+ โ โ โ โ
+ โ โ โ โ
+ โ โโโโโโโโโโโโโโโโโโโโโโโโโดโโโโโโโโโโโโโโโ
+ โ โ
+ โ (Boucle ร rounds)
+ โ โ
+ โ โผ
+ โ COMPLETE
+ โ โ
+ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Interactions pendant le timer :**
+- โธ๏ธ Pause : Gรจle le timer, affiche "EN PAUSE"
+- โถ๏ธ Resume : Reprend lร oรน on s'รฉtait arrรชtรฉ
+- โน๏ธ Stop : Confirme l'arrรชt โ retour HOME
+- โญ๏ธ Skip : Passe ร la phase suivante (haptic lรฉger)
+
+---
+
+## 5. Animations & Motion
+
+### 5.1 Constantes d'Animation
+
+```typescript
+// Durรฉes
+DURATION = {
+ INSTANT: 100, // Feedback immรฉdiat
+ FAST: 200, // Micro-interactions
+ NORMAL: 300, // Transitions standards
+ SLOW: 400, // Cross-fades, reveals
+ BREATHING: 2000, // Animations cycliques
+}
+
+// Easing
+EASING = {
+ STANDARD: Easing.inOut(Easing.cubic),
+ DECELERATE: Easing.out(Easing.cubic),
+ BOUNCE: Easing.elastic(1.2),
+}
+
+// Spring configs
+SPRING = {
+ GENTLE: { damping: 20, stiffness: 150 },
+ BOUNCY: { damping: 12, stiffness: 180 },
+ SNAPPY: { damping: 25, stiffness: 300 },
+}
+```
+
+### 5.2 Animations par Composant
+
+| Composant | Animation | Durรฉe | Easing |
+|-----------|-----------|-------|--------|
+| Timer countdown | Pulse scale (1.0 โ 1.03 โ 1.0) | 200ms | Decelerate |
+| Phase gradient | Cross-fade opacity | 400ms | Standard |
+| Button press | Scale (1.0 โ 0.95) | 100ms | Instant |
+| Card selection | Border glow fade-in | 200ms | Standard |
+| Victory title | Scale spring (0.5 โ 1.0) | 500ms | Bouncy |
+| Glow breathing | Opacity (0.3 โ 0.6 โ 0.3) | 4000ms | Standard |
+
+### 5.3 Haptics
+
+| รvรฉnement | Type Haptic |
+|-----------|-------------|
+| Appui sur bouton | `impactAsync(Light)` |
+| Changement de phase | `impactAsync(Medium)` |
+| Fin de sรฉance | `notificationAsync(Success)` |
+| Derniรจres 3 secondes | `impactAsync(Light)` ร chaque seconde |
+| Skip phase | `impactAsync(Light)` |
+
+---
+
+## 6. Responsive Design
+
+### 6.1 Breakpoints
+
+```typescript
+// Dimensions cibles
+const SCREEN = {
+ WIDTH: Dimensions.get('window').width,
+ HEIGHT: Dimensions.get('window').height,
+}
+
+// Adaptations
+const isSmallDevice = SCREEN.WIDTH < 375 // iPhone SE
+const isLargeDevice = SCREEN.WIDTH > 414 // iPhone Plus/Max
+```
+
+### 6.2 Adaptations
+
+| รlรฉment | Small (<375px) | Default | Large (>414px) |
+|---------|----------------|---------|----------------|
+| Timer font | 120px | 140px | 160px |
+| Card padding | 16px | 24px | 28px |
+| Button height | 48px | 54px | 60px |
+| CTA width | 130px | 150px | 170px |
+
+### 6.3 Safe Areas
+
+Tous les รฉcrans respectent `react-native-safe-area-context` :
+- `paddingTop: insets.top` pour le notch
+- `paddingBottom: insets.bottom` pour la home indicator
+
+---
+
+## 7. Accessibilitรฉ
+
+### 7.1 Requirements Minimum
+
+| Critรจre | Implรฉmentation |
+|---------|----------------|
+| Contraste | WCAG AA minimum (4.5:1 pour texte) |
+| Taille tactile | Minimum 44ร44px pour tous les boutons |
+| Font scaling | Respecter `Dynamic Type` iOS et font scale Android |
+| VoiceOver | Labels sur tous les รฉlรฉments interactifs |
+| Rรฉduction mouvement | Respecter `AccessibilityInfo.reduceMotionEnabled` |
+
+### 7.2 Labels VoiceOver
+
+```typescript
+
+```
+
+---
+
+## 8. รtats & Edge Cases
+
+### 8.1 รtats de Timer
+
+| รtat | Affichage |
+|------|-----------|
+| IDLE | Bouton START pulsant, config visible |
+| RUNNING | Timer actif, contrรดles visibles |
+| PAUSED | "EN PAUSE" overlay, timer figรฉ |
+| BACKGROUND | Notification sticky avec countdown |
+| COMPLETE | รcran victoire avec stats |
+
+### 8.2 Gestion d'Erreurs
+
+| Erreur | Comportement UI |
+|--------|-----------------|
+| Audio load fail | Toast discret "Son non disponible" |
+| Network error | "Mode offline activรฉ" |
+| Storage full | Alerte + suggestion de cleanup |
+
+### 8.3 Interruptions
+
+| Interruption | Comportement |
+|--------------|--------------|
+| Appel entrant | Pause automatique |
+| App backgrounded | Timer continue, notification visible |
+| App killed | Au retour : "Sรฉance interrompue โ Reprendre ?" |
+
+---
+
+## 9. Iconographie
+
+### 9.1 Icรดnes Timer Controls
+
+| Action | Icรดne | Source |
+|--------|-------|--------|
+| Play | โถ๏ธ | Ionicons `play` |
+| Pause | โธ๏ธ | Ionicons `pause` |
+| Stop | โน๏ธ | Ionicons `stop` |
+| Skip | โญ๏ธ | Ionicons `play-skip-forward` |
+
+### 9.2 Icรดnes Tab Bar
+
+| Tab | Icรดne | Label |
+|-----|-------|-------|
+| Home | ๐ | `home` |
+| History | ๐ | `time` |
+| Settings | โ๏ธ | `settings` |
+
+---
+
+## 10. Spรฉcifications par รcran
+
+### 10.1 Home Screen (Tab 1)
+
+**Objectif :** Motiver l'utilisateur avec sa progression (streak #1) + lancer rapidement une sรฉance
+
+**รmotion cible :** รnergie / Motivation โ "Je peux le faire, c'est parti !"
+
+---
+
+#### 10.1.1 Layout Global (Scroll Vertical)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ NOTCH / STATUS BAR โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 1 : HEADER + GREETING โ โ
+โ โ โ โ
+โ โ ๐ 7 JOURS ๐ฅ (flamme animรฉe) โ โ
+โ โ โ โ
+โ โ "Bonjour Marie, prรชt ร transpirer ?" โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 2 : MINI CALENDRIER (semaine) โ โ
+โ โ โ โ
+โ โ L M M J V S D โ โ
+โ โ โ โ โ โ โ โ โ โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 3 : STATS RAPIDES โ โ
+โ โ โ โ
+โ โ ๐ 24 sรฉances ๐ฅ 1,250 kcal โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 4 : PROGRAMME SUGGรRร (Hero Card) โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
RECOMMANDร BEGINNER โ โ โ
+โ โ โ โ โ โ
+โ โ โ Tabata Classic โ โ โ
+โ โ โ 8 rounds de Burpees pour commencer โ โ โ
+โ โ โ โ โ โ
+โ โ โ โโโโโโโโโโโโ โ โ โ
+โ โ โ โ Burpees โ 8 rounds โข 4 min โข 1 ex. โ โ โ
+โ โ โ โโโโโโโโโโโโ โ โ โ
+โ โ โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 5 : AUTRES PROGRAMMES (Liste verticale) โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ Tabata Duo โ INTERM โ โ โ
+โ โ โ Squats + Push-ups alternรฉs โ โ โ
+โ โ โ 8 rounds โข 4 min โข 2 ex. โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ Cardio Burn โ ADVANCE โ โ โ
+โ โ โ High knees + Burpees + Jump squats โ โ โ
+โ โ โ 8 rounds โข 4 min โข 4 ex. โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ [ Voir tous les programmes โ ] โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ SECTION 6 : CTA FIXE (sticky bottom) โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ START โ โ
+โ โ (Bouton pulsant 150ร150) โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ Tabata Classic โข 4 min โข 8 rounds โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ TAB BAR (Home | History | Settings) โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+---
+
+#### 10.1.2 Section par Section
+
+##### **Section 1 : Header + Greeting**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Streak counter | `TYPOGRAPHY.displaySmall` (32px, 900), `BRAND.PRIMARY` |
+| Flamme | Animation Lottie ou sรฉquence d'images (60ร60px) |
+| Greeting | "Bonjour [Prรฉnom], prรชt ร transpirer ?" โ `TYPOGRAPHY.body` (18px) |
+| Couleur texte | `TEXT.PRIMARY` pour le streak, `TEXT.SECONDARY` pour le greeting |
+
+**Animation flamme :**
+- Cycle 800ms : scale 1.0 โ 1.1 โ 1.0
+- Opacity flicker subtil : 0.9 โ 1.0 โ 0.9
+- Trigger : si streak โฅ 3 jours
+
+##### **Section 2 : Mini Calendrier Semaine**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Layout | 7 colonnes รฉgales (L M M J V S D) |
+| Jour actif (sรฉance faite) | Dot plein 12ร12px, `BRAND.PRIMARY` |
+| Jour inactif | Dot vide 12ร12px, border `BORDER.LIGHT` |
+| Jour actuel | Dot 16ร16px avec glow `BRAND.PRIMARY` |
+| Labels | `TYPOGRAPHY.overline` (11px), `TEXT.HINT` |
+
+**Gamification :**
+- Si 7/7 jours actifs โ animation de cรฉlรฉbration (confettis ou badge "Parfait !")
+
+##### **Section 3 : Stats Rapides**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Layout | 2 colonnes รฉgales |
+| Icรดne | 24ร24px, `TEXT.MUTED` |
+| Valeur | `TYPOGRAPHY.heading` (24px, 800), `TEXT.PRIMARY` |
+| Label | `TYPOGRAPHY.caption` (16px), `TEXT.MUTED` |
+
+**Donnรฉes :**
+- Sรฉances totales : nombre de sรฉances complรฉtรฉes depuis le dรฉbut
+- Calories : estimation basรฉe sur durรฉe ร intensitรฉ (arrondi)
+
+##### **Section 4 : Programme Suggรฉrรฉ (Hero Card)**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Badge "RECOMMANDร" | `TYPOGRAPHY.overline`, bg `rgba(249,115,22,0.15)`, `BRAND.PRIMARY` |
+| Badge difficultรฉ | Voir 10.1.4 ci-dessous |
+| Titre programme | `TYPOGRAPHY.heading` (24px, 800), `TEXT.PRIMARY` |
+| Description | `TYPOGRAPHY.body` (18px, 700), `TEXT.MUTED` |
+| Exercice tag | Pill `RADIUS.MD`, bg `rgba(249,115,22,0.12)`, `BRAND.PRIMARY` |
+| Mรฉtadonnรฉes | `TYPOGRAPHY.caption`, `TEXT.HINT` |
+
+**Logique de suggestion :**
+- J+1 aprรจs onboarding โ "Tabata Classic" (beginner)
+- Si sรฉance faite hier โ programme diffรฉrent suggรฉrรฉ
+- Si 7+ sรฉances โ programme plus avancรฉ suggรฉrรฉ
+
+##### **Section 5 : Autres Programmes (Liste)**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Card height | 100px approx |
+| Card bg | `SURFACE.OVERLAY_LIGHT`, border `BORDER.LIGHT` |
+| Press state | `SURFACE.OVERLAY_MEDIUM` + `scale(0.98)` |
+| Mode icรดne | โ SINGLE, โ DUO, โ CIRCUIT โ `BRAND.PRIMARY` |
+
+**Interactions :**
+- Tap card โ sรฉlectionne le programme + met ร jour le CTA
+- "Voir tous les programmes โ" โ modal plein รฉcran avec tous les programmes
+
+##### **Section 6 : CTA Fixe (Sticky Bottom)**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Container | `position: absolute, bottom: TAB_BAR_HEIGHT + insets.bottom` |
+| Bouton | 150ร150px, circulaire, `BRAND.PRIMARY` |
+| Glow | 172ร172px derriรจre, opacity 0.3โ0.6 en breathing (4s) |
+| Texte | "START" โ `TYPOGRAPHY.buttonHero` (30px, 900) |
+| Hint | Programme sรฉlectionnรฉ + durรฉe + rounds โ `TYPOGRAPHY.caption` |
+
+**Animation bouton pulsant :**
+```typescript
+Animated.loop(
+ Animated.sequence([
+ Animated.timing(pulseAnim, {
+ toValue: 1.05,
+ duration: 800,
+ easing: EASING.STANDARD,
+ }),
+ Animated.timing(pulseAnim, {
+ toValue: 1,
+ duration: 800,
+ easing: EASING.STANDARD,
+ }),
+ ])
+)
+```
+
+**Press :**
+- `scale(0.95)` + `Haptics.impactAsync(Medium)`
+- Navigate vers `/timer`
+
+---
+
+#### 10.1.3 Badges de Difficultรฉ
+
+| Niveau | Couleur texte | Background |
+|--------|---------------|------------|
+| BEGINNER | `#4ADE80` (vert) | `rgba(74, 222, 128, 0.15)` |
+| INTERMEDIATE | `#FBBF24` (or) | `rgba(251, 191, 36, 0.15)` |
+| ADVANCED | `#F87171` (rouge) | `rgba(248, 113, 113, 0.15)` |
+
+#### 10.1.4 Mode Icรดnes (Programmes)
+
+| Mode | Icรดne | Description |
+|------|-------|-------------|
+| SINGLE | โ | 1 exercice rรฉpรฉtรฉ ร 8 rounds |
+| DUO | โ | 2 exercices alternรฉs |
+| CIRCUIT_4 | โ | 4 exercices en circuit |
+
+---
+
+#### 10.1.5 รtats Spรฉciaux
+
+| รtat | Affichage |
+|------|-----------|
+| Nouvel utilisateur (J+0) | Streak = 0, message "Commence ton aventure !" |
+| Streak cassรฉ | "Ton streak รฉtait de X jours. Relance-le !" |
+| Nouveau record (7 jours) | Confettis + badge "๐ฅ 7 jours de suite !" |
+| Pas de sรฉance hier | Message doux : "Hier c'รฉtait repos. Aujourd'hui on y va !" |
+
+---
+
+#### 10.1.6 Interactions Rรฉsumรฉes
+
+| Action | Rรฉsultat |
+|--------|----------|
+| Tap sur Hero Card | Dรฉplie les dรฉtails (exercices, durรฉe) |
+| Tap sur autre programme | Sรฉlectionne + met ร jour le CTA |
+| Tap "Voir tous" | Modal plein รฉcran avec grille de programmes |
+| Tap START | Haptic + navigate `/timer` |
+| Scroll | Le CTA reste sticky en bas |
+
+---
+
+### 10.2 Timer Screen (Plein รฉcran)
+
+**Objectif :** Focus total, zรฉro distraction โ l'utilisateur ne voit QUE ce qui compte
+
+**รmotion cible :** Immersion intense, flow state
+
+---
+
+#### 10.2.1 Layout (Single View)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ GRADIENT DE PHASE (fond plein รฉcran) โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ ZONE HAUTE (15%) โ โ
+โ โ โ โ
+โ โ ๐๏ธ Burpees 3/8 โ โ
+โ โ (Nom exercice) (Badge round) โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ ZONE CENTRALE (60%) โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ โ โ
+โ โ โ [GIF EXERCICE 180ร180] โ โ โ
+โ โ โ (Animation boucle) โ โ โ
+โ โ โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ PRรPARE-TOI โ โ
+โ โ (Label phase) โ โ
+โ โ โ โ
+โ โ 17 โ โ
+โ โ (140px countdown) โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ ZONE BASSE (25%) โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ (Progress bar - progression totale de la sรฉance) โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโ SWIPE GAUCHE = Skip โ SWIPE BAS = Stop โโถ โ
+โ (Hints invisibles, appris lors de l'onboarding) โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+---
+
+#### 10.2.2 Zones Dรฉtaillรฉes
+
+##### **Zone Haute (15%)**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Nom exercice | `TYPOGRAPHY.body` (18px), `TEXT.SECONDARY` |
+| Badge round | `TYPOGRAPHY.label`, bg `SURFACE.OVERLAY_MEDIUM`, pill |
+| Position | Alignรฉ gauche (nom) / droite (badge) |
+| Animation | Fade in/out lors des transitions d'exercice |
+
+##### **Zone Centrale (60%)**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| GIF exercice | 180ร180px, border radius `RADIUS.XL` (16px) |
+| GIF border | `BORDER.LIGHT` (rgba 0.06) |
+| Label phase | `TYPOGRAPHY.heading` (24px), `TEXT.TERTIARY`, letter-spacing 6px |
+| Countdown | `TYPOGRAPHY.countdown` (140px, 900), `TEXT.PRIMARY` |
+
+**Animation countdown :**
+- Pulse scale ร chaque seconde : `1.0 โ 1.03 โ 1.0` (200ms)
+- Si โค3 secondes : couleur `ACCENT.RED_HOT` + pulse plus fort
+
+##### **Zone Basse (25%) - Progress Bar**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Hauteur | 6px |
+| Position | 32px au-dessus du bottom safe area |
+| Background | `SURFACE.OVERLAY_LIGHT` (rgba 0.08) |
+| Fill | `BRAND.PRIMARY` (#F97316) |
+| Border radius | `RADIUS.FULL` (pill) |
+| Animation | Width animรฉe progressivement |
+
+**Calcul progression :**
+```typescript
+const progress = (
+ (currentRound - 1) * (workDuration + restDuration) +
+ (phase === 'WORK' ? workDuration - secondsLeft : workDuration + restDuration - secondsLeft)
+) / (totalRounds * (workDuration + restDuration))
+```
+
+---
+
+#### 10.2.3 Phases Visuelles
+
+##### **Couleurs de Phase (Gradients)**
+
+| Phase | Gradient | Label | Son |
+|-------|----------|-------|-----|
+| GET_READY | `['#451A03', '#92400E', '#D97706']` | "PRรPARE-TOI" | 3 bips courts |
+| WORK | `['#450A0A', '#991B1B', '#EA580C']` | "GO !" | Bip long + haptic fort |
+| REST | `['#0C1929', '#1E3A5F', '#2563EB']` | "REPOS" | Double bip + haptic lรฉger |
+
+**Transition de phase :**
+- Cross-fade du gradient : 400ms, `EASING.STANDARD`
+- Le label change instantanรฉment
+- Son jouรฉ au moment du changement
+
+##### **Labels par Phase**
+
+| Phase | Label | Couleur texte |
+|-------|-------|---------------|
+| GET_READY | "PRรPARE-TOI" | `TEXT.TERTIARY` |
+| WORK | "GO !" | `ACCENT.ORANGE` |
+| REST | "REPOS" + "Prochain : [exercice]" | `TEXT.TERTIARY` |
+
+---
+
+#### 10.2.4 Gestures (Contrรดles Invisibles)
+
+| Gesture | Action | Feedback |
+|---------|--------|----------|
+| **Tap** | Pause | Haptic lรฉger + overlay pause |
+| **Swipe gauche** | Skip phase | Modal confirmation |
+| **Swipe bas** | Stop sรฉance | Modal confirmation "Quitter ?" |
+
+**Apprentissage des gestures :**
+- Montrรฉs uniquement lors de l'รฉcran 4 (Wow Moment) de l'onboarding
+- Hint "Tap pour pause" disparaรฎt aprรจs 3 utilisations
+- Pas d'hints permanents pour ne pas distraire
+
+---
+
+#### 10.2.5 รtat PAUSE (Auto-resume 10s)
+
+**Dรฉclenchement :** Tap sur l'รฉcran pendant la sรฉance active
+
+**Affichage :**
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ GRADIENT ASSOMBI (overlay noir 0.4) โ
+โ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ โธ๏ธ โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ EN PAUSE โ
+โ โ
+โ Reprise dans โ
+โ โ
+โ 10 โ
+โ (Dรฉcompte auto) โ
+โ โ
+โ [ Reprendre maintenant ] โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Spรฉcifications :**
+| รlรฉment | Valeur |
+|---------|--------|
+| Overlay | `rgba(0,0,0,0.4)` |
+| Icรดne pause | 80ร80px, `TEXT.MUTED` |
+| Label "EN PAUSE" | `TYPOGRAPHY.heading`, `TEXT.SECONDARY` |
+| Dรฉcompte | `TYPOGRAPHY.timeDisplay` (72px), `TEXT.PRIMARY` |
+| Bouton reprendre | Pill, `BRAND.PRIMARY`, `TYPOGRAPHY.buttonMedium` |
+
+**Comportement :**
+- Dรฉcompte de 10 secondes
+- Si 0 โ auto-resume automatiquement
+- Tap sur "Reprendre maintenant" โ resume immรฉdiat
+- Tap ailleurs โ resume immรฉdiat
+
+---
+
+#### 10.2.6 Skip Phase (Confirmation)
+
+**Dรฉclenchement :** Swipe gauche
+
+**Affichage :**
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ โ
+โ Passer cette phase ? โ
+โ โ
+โ โโโโโโโโโโโ โโโโโโโโโโโ โ
+โ โ Annuler โ โ Passer โ โ
+โ โโโโโโโโโโโ โโโโโโโโโโโ โ
+โ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Comportement :**
+- "Annuler" โ ferme le modal, sรฉance continue
+- "Passer" โ passe ร la phase suivante + haptic lรฉger
+
+---
+
+#### 10.2.7 Stop Sรฉance (Confirmation)
+
+**Dรฉclenchement :** Swipe bas
+
+**Affichage :**
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ โ
+โ โ ๏ธ Quitter la sรฉance ? โ
+โ โ
+โ Tu as fait 3/8 rounds. โ
+โ โ
+โ โโโโโโโโโโโ โโโโโโโโโโโ โ
+โ โ Continuerโ โ Quitter โ โ
+โ โโโโโโโโโโโ โโโโโโโโโโโ โ
+โ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Comportement :**
+- "Continuer" โ ferme le modal, sรฉance continue
+- "Quitter" โ sauvegarde la sรฉance partielle โ retour Home
+
+---
+
+#### 10.2.8 รcran COMPLETE (Victoire)
+
+**Dรฉclenchement :** Dernier round terminรฉ
+
+**Layout :**
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ GRADIENT VERT SUCCESS โ
+โ ['#052E16', '#166534', '#16A34A'] โ
+โ โ
+โ โ
+โ ๐ฅ โ
+โ (Flamme animรฉe 80px) โ
+โ โ
+โ TERMINร ! โ
+โ โ
+โ 4:00 โ
+โ (Durรฉe totale) โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ 8 rounds 85 kcal โ โ
+โ โ (Stats en ligne) โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ ๐ Streak : 8 jours ! โ
+โ (Si nouveau record ou maintenu) โ
+โ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ TERMINER โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Spรฉcifications :**
+| รlรฉment | Valeur |
+|---------|--------|
+| Flamme | Animation Lottie 80ร80px, loop |
+| "TERMINร !" | `TYPOGRAPHY.displayLarge` (42px), `TEXT.PRIMARY` |
+| Durรฉe | `TYPOGRAPHY.timeDisplay` (72px), `TEXT.PRIMARY` |
+| Stats | `TYPOGRAPHY.body`, `TEXT.TERTIARY` |
+| Streak update | `TYPOGRAPHY.heading`, `BRAND.GOLD` |
+| Bouton "Terminer" | Pill `RADIUS.3XL`, `SURFACE.OVERLAY_MEDIUM` |
+
+**Animations de cรฉlรฉbration :**
+1. **Flamme animรฉe** : scale pulse 1.0 โ 1.15 โ 1.0 (600ms loop)
+2. **Haptics succรจs** : `Haptics.notificationAsync(Success)`
+3. **Son victoire** : Fanfare / cloche de victoire
+
+---
+
+#### 10.2.9 Comportements Techniques
+
+| Comportement | Implรฉmentation |
+|--------------|----------------|
+| StatusBar | `hidden` pendant toute la sรฉance |
+| Keep awake | `expo-keep-awake` activรฉ |
+| Back button | Affiche modal "Quitter ?" |
+| Appel entrant | Pause automatique |
+| Background | Timer continue, notification sticky |
+| App killed | Au retour : "Sรฉance interrompue โ Reprendre ?" |
+
+---
+
+### 10.3 History Screen (Tab 2)
+
+**Objectif :** Visualiser sa progression et ressentir de la fiertรฉ
+
+**รmotion cible :** Fiertรฉ / Accomplissement โ "Regarde tout ce que j'ai fait !"
+
+---
+
+#### 10.3.1 Layout Global (Scroll Vertical)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ NOTCH / STATUS BAR โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 1 : HEADER + STREAK HERO โ โ
+โ โ โ โ
+โ โ ๐ฅ 7 โ โ
+โ โ (Flamme + nombre) โ โ
+โ โ โ โ
+โ โ JOURS DE SUITE โ โ
+โ โ (Animation pulse sur le chiffre) โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 2 : STATS GLOBALES (Ligne) โ โ
+โ โ โ โ
+โ โ ๐ 24 sรฉances ๐ฅ 1,250 kcal ๐ 12 (best) โ โ
+โ โ (All-time) (All-time) (All-time) โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 3 : CALENDRIER MENSUEL โ โ
+โ โ โ โ
+โ โ โ Fรฉvrier 2026 โถ โ โ
+โ โ โ โ
+โ โ L M M J V S D โ โ
+โ โ โ โ
+โ โ 1 2 3 4 โ โ
+โ โ โ โ โ โ โ โ โ (Points colorรฉs) โ โ
+โ โ 5 6 7 8 9 10 11 โ โ
+โ โ โ โ
+โ โ โ โ โ โ โ โ โ โ โ
+โ โ 12 13 14 15 16 17 18 โ โ
+โ โ โ โ
+โ โ ... โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 4 : GRAPHIQUES (Cette semaine) โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ SรANCES CETTE SEMAINE โ โ โ
+โ โ โ โ โ โ
+โ โ โ โโ โ โ โ
+โ โ โ โโ โโ โโ โ โ โ
+โ โ โ โโ โโ โโ โโ โโ โโ โโ โ โ โ
+โ โ โ L M M J V S D โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ CALORIES CETTE SEMAINE โ โ โ
+โ โ โ โ โ โ
+โ โ โ โโโโ โ โ โ
+โ โ โ โโโโ โโ โโโโ โโโโ โ โ โ
+โ โ โ โโโโ โโ โโโโ โโโโ โโ โโ โ โ โ
+โ โ โ L M M J V S D โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ รVOLUTION DU STREAK โ โ โ
+โ โ โ โ โ โ
+โ โ โ โโโโโ โ โ โ
+โ โ โ โโโโโโโโโ โ โ โ
+โ โ โ โโโโโ โ โ โ
+โ โ โ โโโ โ โ โ
+โ โ โ S1 S2 S3 S4 S5 S6 โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ TAB BAR (Home | History | Settings) โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+---
+
+#### 10.3.2 Section 1 : Streak Hero
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Flamme | 48ร48px, animation Lottie (pulse) |
+| Nombre streak | `TYPOGRAPHY.displayLarge` (42px, 900), `BRAND.GOLD` |
+| Label | `TYPOGRAPHY.overline` (11px), `TEXT.HINT` |
+| Container | Centrรฉ, padding vertical `SPACING[8]` |
+
+**Animation pulse (au chargement de l'รฉcran) :**
+```typescript
+Animated.sequence([
+ Animated.timing(streakScale, { toValue: 1.15, duration: 300 }),
+ Animated.timing(streakScale, { toValue: 1, duration: 200 }),
+])
+```
+
+**รtats spรฉciaux :**
+| Streak | Affichage |
+|--------|-----------|
+| 0 | "Commence ton streak !" |
+| 1-6 | Normal |
+| 7 | "Une semaine complรจte !" |
+| 30+ | Badge spรฉcial + flamme dorรฉe |
+
+---
+
+#### 10.3.3 Section 2 : Stats Globales (All-time)
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Layout | 3 colonnes รฉgales, centrรฉes |
+| Icรดne | 20ร20px, `TEXT.MUTED` |
+| Valeur | `TYPOGRAPHY.heading` (24px, 800), `TEXT.PRIMARY` |
+| Label | `TYPOGRAPHY.caption` (12px), `TEXT.HINT` |
+
+**Donnรฉes :**
+- **Sรฉances totales** : Nombre de sรฉances depuis le dรฉbut
+- **Calories totales** : Somme des calories estimรฉes
+- **Best streak** : Meilleur streak personnel atteint
+
+---
+
+#### 10.3.4 Section 3 : Calendrier Mensuel
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Header | Mois + annรฉe, flรจches navigation `<` `>` |
+| Jours labels | `TYPOGRAPHY.overline` (11px), `TEXT.HINT` |
+| Numรฉros | `TYPOGRAPHY.caption` (14px), `TEXT.MUTED` |
+| Jour actif | Point 8ร8px, `BRAND.PRIMARY` |
+| Jour inactif | Pas de point |
+| Aujourd'hui | Border `BRAND.PRIMARY` autour du numรฉro |
+| Grid | 7 colonnes, 5-6 lignes |
+
+**Navigation :**
+- Swipe horizontal โ mois prรฉcรฉdent/suivant
+- Tap sur flรจche โ mois prรฉcรฉdent/suivant
+
+---
+
+#### 10.3.5 Section 4 : Graphiques (Cette semaine)
+
+##### **Graphique 1 : Sรฉances par jour**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Titre | "SรANCES CETTE SEMAINE", `TYPOGRAPHY.overline` |
+| Type | Bar chart vertical |
+| Bar height | Max 120px, proportionnel au nombre de sรฉances |
+| Bar color | `BRAND.PRIMARY` |
+| Labels X | L M M J V S D, `TYPOGRAPHY.caption` |
+| Animation | Bars grow from 0 ร valeur au chargement |
+
+##### **Graphique 2 : Calories par jour**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Titre | "CALORIES CETTE SEMAINE", `TYPOGRAPHY.overline` |
+| Type | Bar chart vertical |
+| Bar color | `BRAND.SECONDARY` (gold) |
+| Animation | Bars grow from 0 ร valeur au chargement |
+
+##### **Graphique 3 : รvolution du Streak**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Titre | "รVOLUTION DU STREAK", `TYPOGRAPHY.overline` |
+| Type | Line chart |
+| Line color | `BRAND.PRIMARY` |
+| Point | Cercle 6ร6px sur chaque data point |
+| Labels X | S1, S2, S3... (semaines), `TYPOGRAPHY.caption` |
+| Animation | Line draws from left to right |
+
+**Animation des graphiques :**
+```typescript
+// Bar chart animation
+Animated.timing(barHeight, {
+ toValue: finalHeight,
+ duration: 600,
+ easing: EASING.DECELERATE,
+})
+
+// Line chart animation
+Animated.timing(lineProgress, {
+ toValue: 1,
+ duration: 1000,
+ easing: EASING.STANDARD,
+})
+```
+
+---
+
+#### 10.3.6 Interactions
+
+| Action | Rรฉsultat |
+|--------|----------|
+| Swipe calendrier | Change de mois |
+| Tap sur un jour | Affiche dรฉtail de la sรฉance (si active) |
+| Scroll | Navigue entre les sections |
+| Tap sur graphique | Affiche tooltip avec valeur exacte |
+
+---
+
+#### 10.3.7 รtats Spรฉciaux
+
+| รtat | Affichage |
+|------|-----------|
+| Nouvel utilisateur | "Ton historique est vide. Commence ta premiรจre sรฉance !" |
+| Aucune sรฉance cette semaine | "Pas encore de sรฉance cette semaine. C'est le moment !" |
+| Nouveau record streak | Badge animรฉ + confettis |
+
+---
+
+### 10.4 Settings Screen (Tab 3)
+
+**Objectif :** Personnaliser l'expรฉrience et gรฉrer son compte
+
+**Style visuel :** Cards groupรฉes avec icรดnes
+
+---
+
+#### 10.4.1 Layout Global (Scroll Vertical)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ NOTCH / STATUS BAR โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 1 : PROFIL โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ ๐ค Prรฉnom Marie โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ Langue Franรงais โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 2 : TIMER (Avancรฉ) โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โฑ๏ธ Durรฉe travail 20s โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ค Durรฉe repos 10s โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ข Nombre de rounds 8 โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ โณ Prรฉparation (Get Ready) 10s โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ Cycles (Premium) 1 ๐ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ โ Pause entre cycles (Premium) 60s ๐ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 3 : AUDIO โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ ๐ต Volume musique โโโโโโโโโโโโ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ Volume sons โโโโโโโโโโโโ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ง Ambiance Electro โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ณ Haptics โ On โ Off โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 4 : NOTIFICATIONS โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โฐ Rappel quotidien โ On 09:00 โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ข Rappel inactivitรฉ โ On 2 jours โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ Fรฉlicitations streak โ On โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 5 : ABONNEMENT (Paywall intรฉgrรฉe) โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ โ โ
+โ โ โ โจ Passe Premium โ โ โ
+โ โ โ โ โ โ
+โ โ โ โ Programmes illimitรฉs โ โ โ
+โ โ โ โ Cycles multiples โ โ โ
+โ โ โ โ Stats avancรฉes โ โ โ
+โ โ โ โ Widgets โ โ โ
+โ โ โ โ โ โ
+โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ โ
+โ โ โ โ $4.99/mois ou $29.99/an (-50%) โ โ โ โ
+โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ โ
+โ โ โ โ โ โ
+โ โ โ [ Essai gratuit 7 jours ] โ โ โ
+โ โ โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 6 : ร PROPOS โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โน๏ธ Version 1.0.0 โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ Conditions d'utilisation โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ ๐ Politique de confidentialitรฉ โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ โ๏ธ Contacter le support โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ โ
+โ โ โ โญ Noter l'app โถ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SECTION 7 : DANGER โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ ๏ธ Rรฉinitialiser toutes les donnรฉes โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ TAB BAR (Home | History | Settings) โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+---
+
+#### 10.4.2 Section 1 : Profil
+
+| Row | Icรดne | Label | Valeur | Action |
+|-----|-------|-------|--------|--------|
+| Prรฉnom | ๐ค | Prรฉnom | "Marie" | Modal input |
+| Langue | ๐ | Langue | "Franรงais" | Picker modal |
+
+**Langues disponibles :** FR, EN, ES, DE, PT-BR
+
+---
+
+#### 10.4.3 Section 2 : Timer (Avancรฉ)
+
+| Row | Icรดne | Label | Valeur dรฉfaut | Range | Premium ? |
+|-----|-------|-------|---------------|-------|-----------|
+| Durรฉe travail | โฑ๏ธ | Durรฉe travail | 20s | 5-60s | Non |
+| Durรฉe repos | ๐ค | Durรฉe repos | 10s | 5-60s | Non |
+| Rounds | ๐ข | Rounds | 8 | 1-30 | Non |
+| Prรฉparation | โณ | Get Ready | 10s | 0-30s | Non |
+| Cycles | ๐ | Cycles | 1 | 1-10 | **Oui** ๐ |
+| Pause cycles | โ | Pause cycles | 60s | 10-300s | **Oui** ๐ |
+
+**UI pour les valeurs :**
+- Tap โ Modal avec slider + input numรฉrique
+- Lock ๐ โ Affiche "Dรฉbloquer avec Premium"
+
+---
+
+#### 10.4.4 Section 3 : Audio
+
+| Row | Type | Spรฉcification |
+|-----|------|---------------|
+| Volume musique | Slider | 0-100%, default 70% |
+| Volume sons | Slider | 0-100%, default 100% |
+| Ambiance | Picker | Electro / Hip-Hop / Rock / Silence |
+| Haptics | Toggle | On / Off |
+
+**Slider style :**
+- Track height : 4px
+- Thumb : 24ร24px, `BRAND.PRIMARY`
+- Track color : `SURFACE.OVERLAY_MEDIUM` / `BRAND.PRIMARY` (filled)
+
+---
+
+#### 10.4.5 Section 4 : Notifications
+
+| Row | Type | Spรฉcification |
+|-----|------|---------------|
+| Rappel quotidien | Toggle + Time | Heure picker (default 09:00) |
+| Rappel inactivitรฉ | Toggle + Days | "Aprรจs X jours sans sรฉance" (default 2) |
+| Fรฉlicitations streak | Toggle | On/Off |
+
+**Permission request :**
+- Premier toggle โ demande de permission systรจme
+- Si refusรฉ โ message "Active les notifications dans les rรฉglages iOS"
+
+---
+
+#### 10.4.6 Section 5 : Abonnement (Paywall Intรฉgrรฉe)
+
+**Si Free User :**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Titre | "โจ Passe Premium" |
+| Liste avantages | 4 lignes avec โ |
+| Pricing | `$4.99/mois` ou `$29.99/an (-50%)` |
+| CTA | "Essai gratuit 7 jours" |
+| Secondary | "Restaurer les achats" |
+
+**Si Premium User :**
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Statut | "โจ Premium Actif" |
+| Renouvellement | "Renouvellement le 15 mars 2026" |
+| CTA | "Gรฉrer l'abonnement" (ouvre App Store) |
+
+---
+
+#### 10.4.7 Section 6 : ร Propos
+
+| Row | Action |
+|-----|--------|
+| Version | Statique (lecture seule) |
+| CGU | Ouvre browser / WebView |
+| Confidentialitรฉ | Ouvre browser / WebView |
+| Support | Ouvre mailto: ou formulaire |
+| Noter l'app | `expo-store-review` โ App Store |
+
+---
+
+#### 10.4.8 Section 7 : Danger
+
+| Row | Action |
+|-----|--------|
+| Rรฉinitialiser | Modal confirmation โ Supprime toutes les donnรฉes locales |
+
+**Modal de confirmation :**
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ โ ๏ธ Rรฉinitialiser les donnรฉes ? โ
+โ โ
+โ Cette action supprimera votre historique, โ
+โ votre streak et vos prรฉfรฉrences. โ
+โ โ
+โ Cette action est irrรฉversible. โ
+โ โ
+โ โโโโโโโโโโโ โโโโโโโโโโโ โ
+โ โ Annuler โ โ Effacer โ โ
+โ โโโโโโโโโโโ โโโโโโโโโโโ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+---
+
+#### 10.4.9 Style des Cards
+
+| รlรฉment | Spรฉcification |
+|---------|---------------|
+| Card bg | `SURFACE.OVERLAY_LIGHT` (rgba 0.08) |
+| Card border | `BORDER.LIGHT` (rgba 0.06) |
+| Card radius | `RADIUS.XL` (16px) |
+| Row height | 56px |
+| Row separator | `BORDER.SUBTLE` (1px line) |
+| Icรดne | 24ร24px, `TEXT.MUTED` |
+| Label | `TYPOGRAPHY.body` (18px), `TEXT.PRIMARY` |
+| Value | `TYPOGRAPHY.caption`, `TEXT.MUTED` |
+| Chevron | `TEXT.HINT` |
+
+---
+
+#### 10.4.10 Interactions
+
+| Action | Rรฉsultat |
+|--------|----------|
+| Tap row avec chevron | Ouvre modal / picker |
+| Tap toggle | Toggle immรฉdiat + haptic |
+| Drag slider | Update valeur + haptic au release |
+| Tap "Effacer" | Confirmation puis reset |
+
+---
+
+## 10.5 Modals & Bottom Sheets
+
+### 10.5.1 Program Detail Bottom Sheet
+
+**Dรฉclenchement :** Tap sur une card programme depuis le Home Screen
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ (รcran Home floutรฉ en arriรจre-plan) โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โโโโโโ โ โ
+โ โ (Handle drag) โ โ
+โ โ โ โ
+โ โ Tabata Classic BEGINNER โ โ
+โ โ โ โ
+โ โ 8 rounds de Burpees pour commencer en force โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ EXERCICES โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ 1. ๐๏ธ Burpees โ โ โ
+โ โ โ Cardio complet, full body โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ (Rรฉpรฉtรฉ ร 8 rounds) โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ CONFIGURATION โ โ
+โ โ โ โ
+โ โ โฑ๏ธ 20s travail ๐ค 10s repos ๐ข 8 rounds โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ C'EST PARTI ! โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ Changer de programme โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Spรฉcifications :**
+| รlรฉment | Valeur |
+|---------|--------|
+| Height | ~70% de l'รฉcran |
+| Handle | 36ร4px pill, `TEXT.HINT` |
+| Background | `SURFACE.BASE` (#0A0A14) |
+| Border top | `BORDER.MEDIUM` + radius `RADIUS.2XL` (20px) |
+| Animation | Slide up from bottom, 300ms |
+
+**Interactions :**
+- Swipe down โ ferme le bottom sheet
+- Tap "C'est parti !" โ navigue vers Timer
+- Tap "Changer de programme" โ ferme le sheet + scroll vers autres programmes
+
+---
+
+### 10.5.2 Paywall Contextuel (Popup)
+
+**Dรฉclenchement :** Tap sur une feature premium (cadenas ๐)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ (รcran floutรฉ + overlay noir 0.6) โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ ๐ โ โ
+โ โ โ โ
+โ โ "Dรฉbloquer les cycles multiples" โ โ
+โ โ โ โ
+โ โ Passe Premium pour accรฉder ร โ โ
+โ โ cette fonctionnalitรฉ. โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ ESSAI GRATUIT 7 JOURS โ โ โ
+โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โ $4.99/mois ou $29.99/an โ โ
+โ โ โ โ
+โ โ โ Fermer โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Spรฉcifications :**
+| รlรฉment | Valeur |
+|---------|--------|
+| Modal width | 85% de l'รฉcran |
+| Modal radius | `RADIUS.2XL` (20px) |
+| Background | `SURFACE.ELEVATED` (#1E1E2E) |
+| Overlay | `rgba(0,0,0,0.6)` |
+| Animation | Scale + fade in, 250ms |
+
+**Dรฉclencheurs :**
+- Settings โ Cycles (๐)
+- Settings โ Pause entre cycles (๐)
+- Home โ Programme premium (๐)
+- History โ Stats avancรฉes (๐)
+
+---
+
+### 10.5.3 Modals de Confirmation
+
+**Style gรฉnรฉrique pour toutes les confirmations :**
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ (รcran floutรฉ + overlay) โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ [ICรNE] โ โ
+โ โ โ โ
+โ โ [TITRE] โ โ
+โ โ โ โ
+โ โ [DESCRIPTION] โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โ โ
+โ โ โ Annuler โ โ Confirmer โ โ โ
+โ โ โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+**Variantes :**
+
+| Type | Icรดne | Titre exemple |
+|------|-------|---------------|
+| Danger | โ ๏ธ | "Supprimer les donnรฉes ?" |
+| Stop | โน๏ธ | "Quitter la sรฉance ?" |
+| Skip | โญ๏ธ | "Passer cette phase ?" |
+| Info | โน๏ธ | "Activer les notifications ?" |
+
+**Couleurs boutons :**
+- Annuler : `SURFACE.OVERLAY_MEDIUM`
+- Confirmer (normal) : `BRAND.PRIMARY`
+- Confirmer (danger) : `BRAND.DANGER`
+
+---
+
+## 11. Annexe : Checklist Design Review
+
+Avant chaque release, vรฉrifier :
+
+- [ ] Contraste WCAG AA sur tous les textes
+- [ ] Taille minimum 44px sur tous les boutons touchables
+- [ ] Animations fluides ร 60fps (pas de jitter)
+- [ ] Haptics prรฉsents sur toutes les interactions principales
+- [ ] Transitions de phase fluides (cross-fade)
+- [ ] Safe areas respectรฉes sur iPhone X+
+- [ ] VoiceOver labels sur รฉlรฉments interactifs
+- [ ] Mode rรฉduction mouvement respectรฉ
+- [ ] Timer prรฉcis (pas de drift visible)
+- [ ] Notifications background fonctionnelles
+
+---
+
+*Document crรฉรฉ le 18 fรฉvrier 2026 โ TabataGo PDD v1.0*
diff --git a/.archive/TabataGo_PRD_v1.1.md b/.archive/TabataGo_PRD_v1.1.md
new file mode 100644
index 0000000..cebeb1a
--- /dev/null
+++ b/.archive/TabataGo_PRD_v1.1.md
@@ -0,0 +1,597 @@
+
+
+| ๐ฅ TABATAGO Application Mobile de Minuterie Tabata *Product Requirements Document (PRD) v1.1* Framework : Expo (React Native) ยท Cible : iOS & Android ยท Fรฉvrier 2026 |
+| :---: |
+
+# **1\. Rรฉsumรฉ Exรฉcutif**
+
+TabataGo est une application mobile premium dรฉdiรฉe ร l'entraรฎnement par intervalles en mรฉthode Tabata (20 secondes d'effort / 10 secondes de repos). Elle cible les personnes qui veulent des sรฉances courtes, intenses et guidรฉes โ sans abonnement ร une salle. Le marchรฉ des applications de fitness dรฉpasse 1,5 milliard de dollars en revenus annuels et le Tabata reste un mot-clรฉ ร forte demande (popularitรฉ \> 70\) avec une difficultรฉ ASO modรฉrรฉe (\< 50).
+
+| Indicateur | Valeur cible |
+| :---- | :---- |
+| Marchรฉ visรฉ | Fitness enthousiasts 25-45 ans, Home workout, HIIT lovers |
+| Plateformes | iOS (prioritรฉ) \+ Android |
+| Framework | Expo (React Native) โ SDK 52+ |
+| Modรจle รฉconomique | Freemium \+ Abonnement mensuel/annuel via RevenueCat |
+| Prix cible (US) | $4.99/mois ou $29.99/an |
+| Objectif J+30 | 5 000 tรฉlรฉchargements, taux de conversion essai \> 30% |
+| Objectif J+90 | MRR $5 000, note App Store โฅ 4.6 |
+
+# **2\. Fonctionnalitรฉs Core โ Spรฉcifications Dรฉtaillรฉes**
+
+TabataGo repose sur trois piliers fonctionnels indissociables : le Timer (moteur de l'expรฉrience), la Musique (moteur รฉmotionnel), et l'Exercice (moteur pรฉdagogique). Ces trois composants doivent fonctionner en parfaite synchronisation.
+
+## **2.1 Le Timer โ Moteur Central**
+
+Le timer est la fonctionnalitรฉ principale et vitale de l'application. Son implรฉmentation doit รชtre irrรฉprochable : prรฉcision, fluiditรฉ visuelle, comportement en arriรจre-plan.
+
+### **2.1.1 Structure d'une Sรฉance Tabata Standard**
+
+| Phase | Durรฉe par dรฉfaut | Configurable ? | Couleur รฉcran | Signal |
+| :---- | :---- | :---- | :---- | :---- |
+| Prรฉparation (Get Ready) | 10 secondes | Oui (5โ30s) | Jaune \#EAB308 | Bip court ร 3 \+ vibration lรฉgรจre |
+| Travail (Work) | 20 secondes | Oui (5โ60s) | Orange vif \#F97316 | Bip long au dรฉmarrage \+ haptique fort |
+| Repos (Rest) | 10 secondes | Oui (5โ60s) | Bleu calme \#3B82F6 | Double bip court \+ haptique lรฉger |
+| Fin de round | Instantanรฉ | โ | Flash blanc | Son de cloche \+ vibration |
+| Fin de sรฉance | รcran rรฉsultat | โ | Vert \#22C55E | Fanfare \+ longue vibration |
+
+### **2.1.2 Paramรจtres Configurables du Timer**
+
+| Paramรจtre | Valeur par dรฉfaut | Min | Max | Accรจs |
+| :---- | :---- | :---- | :---- | :---- |
+| Durรฉe Work | 20s | 5s | 60s | Tous |
+| Durรฉe Rest | 10s | 5s | 60s | Tous |
+| Nombre de rounds | 8 | 1 | 30 | Tous |
+| Durรฉe Get Ready | 10s | 0s | 30s | Tous |
+| Nombre de cycles | 1 | 1 | 10 | Premium |
+| Pause entre cycles | 60s | 10s | 300s | Premium |
+| Cycles de rรฉcupรฉration | โ | โ | โ | Premium |
+
+### **2.1.3 Affichage Timer โ รcran Sรฉance (plein รฉcran)**
+
+| ๐ฑ LAYOUT โ รcran Timer Plein รcran |
+| :---- |
+| โธ Zone HAUTE (20%) : Nom de l'exercice en cours \+ numรฉro de round (ex: "Burpees โ Round 3/8") |
+| โธ Zone CENTRALE (50%) : Chiffre du compte ร rebours โ trรจs grand (96-120px), police monospace, couleur de phase |
+| โธ Zone BASSE HAUTE (15%) : Barre de progression de la sรฉance complรจte (rounds) \+ indicateur phase actuelle |
+| โธ Zone BASSE (15%) : Boutons Pause / Stop / Skip โ discrets pour ne pas distraire |
+| โธ FOND : Couleur dynamique selon la phase (orange work, bleu rest, jaune prep) avec transition animรฉe |
+| โธ ANIMATION : Pulsation subtile du chiffre ร chaque seconde \+ ring circulaire de progression |
+
+### **2.1.4 Comportement Technique du Timer**
+
+* Prรฉcision : Utiliser expo-background-fetch \+ Date.now() delta pour compenser les drifts โ tolรฉrance \< 50ms
+
+* Background : Le timer continue en arriรจre-plan (notification sticky affichant le compte ร rebours)
+
+* Verrouillage รฉcran : รcran reste allumรฉ pendant la sรฉance (expo-keep-awake)
+
+* Interruptions : Pause automatique si appel tรฉlรฉphonique entrant (AppState listener)
+
+* Reprise : Si l'app est tuรฉe, afficher une notification "Sรฉance interrompue โ Reprendre ?" au retour
+
+* OTA update safe : Le state du timer est isolรฉ du cycle de render React pour รฉviter les glitches
+
+## **2.2 La Musique โ Moteur รmotionnel**
+
+La musique transforme une simple minuterie en expรฉrience motivante. Elle doit s'adapter dynamiquement ร chaque phase de la sรฉance (work vs rest) et ne jamais entrer en conflit avec la musique de l'utilisateur ou les signaux sonores.
+
+### **2.2.1 Architecture Sonore**
+
+| Couche audio | Description | Technologie | Contrรดle utilisateur |
+| :---- | :---- | :---- | :---- |
+| Musique d'ambiance | Tracks BPM-synchronisรฉes intรฉgrรฉes ร l'app | expo-av (AVAudioSession) | Volume indรฉpendant, on/off |
+| Signaux de phase | Bips, voix, cloche โ changement work/rest | expo-av (prioritรฉ haute) | Volume indรฉpendant, choix du son |
+| Voix coach | Annonces vocales (optionnel) : "Go\!", "Rest", "Last round\!" | expo-av (TTS ou fichiers prรฉ-enregistrรฉs) | On/off, langue |
+| Haptiques | Vibrations synchronisรฉes aux signaux | expo-haptics | On/off |
+
+### **2.2.2 Catalogue Musical Intรฉgrรฉ (Offline)**
+
+| ๐ต TRACKS INTรGRรES โ 3 ambiances ร 3 intensitรฉs \= 9 tracks minimum |
+| :---- |
+| โธ Ambiance ELECTRO : Low (rรฉcup), Medium (standard), High (intense) โ BPM 120/140/160 |
+| โธ Ambiance HIP-HOP : Low (rรฉcup), Medium (standard), High (intense) โ BPM 85/100/115 |
+| โธ Ambiance ROCK/METAL : Low (rรฉcup), Medium (standard), High (intense) โ BPM 130/150/170 |
+| โธ Mode SILENCE : Aucune musique, uniquement les signaux sonores de phase |
+| โธ Mode SPOTIFY/APPLE MUSIC : L'app n'interfรจre pas avec la musique de l'utilisateur (coexistence audio) |
+| โธ Toutes les tracks sont royalty-free et embarquรฉes dans le bundle โ aucun streaming requis |
+
+### **2.2.3 Synchronisation Musique โ Timer**
+
+* Phase WORK : Passer automatiquement ร la track haute intensitรฉ de l'ambiance sรฉlectionnรฉe
+
+* Phase REST : Transition en fade-out 1s vers la track basse intensitรฉ (ambiance calme)
+
+* Phase GET READY : Intro de 10s sur la track principale
+
+* Transition douce : Cross-fade 500ms entre les phases pour รฉviter les coupures brutales
+
+* BPM adaptatif (Premium) : L'app dรฉtecte le rythme de la track et aligne le bip de fin de phase sur le beat
+
+* Pas de conflit : Si l'utilisateur a sa propre musique, les signaux de phase s'y superposent en ducking audio (baisse temporaire du volume)
+
+### **2.2.4 Signaux Sonores de Phase โ Options**
+
+| Signal | Options disponibles | Par dรฉfaut | Premium uniquement ? |
+| :---- | :---- | :---- | :---- |
+| Dรฉbut Work | Bip long, Whistle, Voix "Go\!", Air horn, Clap | Bip long | Non |
+| Dรฉbut Rest | Double bip, Voix "Rest", Bell, Ding | Double bip | Non |
+| Dรฉcompte 3-2-1 | Bips courts, Voix "3, 2, 1", Silence | Bips courts | Non |
+| Fin de round | Cloche, Applaudissements, Voix "Round X done\!" | Cloche | Oui |
+| Fin de sรฉance | Fanfare, Applaudissements, Voix "Workout complete\!" | Fanfare | Non |
+| Dernier round | Voix "Last round\!", Alarm, Son spรฉcial | Voix | Oui |
+
+### **2.2.5 Gestion Technique Audio (expo-av)**
+
+* Session audio iOS : AVAudioSessionCategoryPlayback avec MixWithOthers โ permet de jouer avec la musique utilisateur
+
+* Focus audio Android : AudioManager.AUDIOFOCUS\_GAIN\_TRANSIENT\_MAY\_DUCK pour les signaux
+
+* Prรฉchargement : Tous les sons de phase sont chargรฉs en mรฉmoire au dรฉmarrage de la sรฉance (zรฉro latence)
+
+* Mode silencieux iOS : Les signaux de phase respectent le switch mute SAUF si l'utilisateur a activรฉ "override" dans les settings
+
+* Headphones dรฉtection : Si รฉcouteurs branchรฉs, dรฉsactiver les haptiques de phase par dรฉfaut
+
+## **2.3 L'Exercice โ Moteur Pรฉdagogique**
+
+Chaque round du timer doit รชtre associรฉ ร un exercice spรฉcifique, affichรฉ clairement pendant la phase de travail. C'est ce qui diffรฉrencie TabataGo d'une simple minuterie gรฉnรฉrique.
+
+### **2.3.1 Bibliothรจque d'Exercices**
+
+| Catรฉgorie | Exemples d'exercices | Nb exercices V1 | Nb exercices V2 |
+| :---- | :---- | :---- | :---- |
+| Cardio / Full body | Burpees, Jumping Jacks, Mountain Climbers, High Knees | 8 | 20 |
+| Bas du corps | Squats, Fentes, Jump Squats, Glute Bridges, Wall Sit | 8 | 20 |
+| Haut du corps | Push-ups, Pike Push-ups, Tricep Dips, Shoulder Taps | 6 | 15 |
+| Abdos / Core | Crunches, Planche, Russian Twists, Bicycle Crunches | 6 | 15 |
+| Sans saut (low impact) | Slow Squats, Modified Push-ups, Step Touch, March | 6 | 15 |
+| Avec matรฉriel | Kettlebell Swings, Dumbbell Thrusters, Jump Rope | 4 | 10 |
+
+### **2.3.2 Fiche Exercice โ Donnรฉes par Exercice**
+
+| ๐ MODรLE DE DONNรES โ Exercice |
+| :---- |
+| โธ id : identifiant unique (ex: "burpee\_classic") |
+| โธ name : Nom localisรฉ (FR: "Burpee", EN: "Burpee", ES: "Burpee") |
+| โธ category : cardio | lower\_body | upper\_body | core | low\_impact | equipment |
+| โธ difficulty : beginner | intermediate | advanced |
+| โธ musclesTargeted : string\[\] (ex: \["quadriceps", "pectoraux", "cardio"\]) |
+| โธ description : Instruction courte (max 80 car.) โ affichรฉe pendant la phase Rest |
+| โธ cues : string\[\] โ 2-3 points clรฉs de forme (ex: "Dos droit", "Genoux alignรฉs") |
+| โธ gifUrl : Animation GIF courte (1-2s, loop) โ 200ร200px max โ embarquรฉe offline |
+| โธ thumbnailUrl : Image statique pour la bibliothรจque |
+| โธ hasModification : bool โ si une variante plus facile existe |
+| โธ modificationId : id de l'exercice de remplacement (ex: "burpee\_modified") |
+| โธ equipmentNeeded : string\[\] (ex: \[\] pour aucun, \["tapis"\] pour matรฉriel simple) |
+
+### **2.3.3 Affichage de l'Exercice Pendant la Sรฉance**
+
+| Phase | Affichage exercice | Taille | Information complรฉmentaire |
+| :---- | :---- | :---- | :---- |
+| GET READY (10s) | Nom \+ GIF animรฉ de dรฉmonstration | Grande โ focus total | "Voici l'exercice suivant" โ prรฉpare mentalement |
+| WORK (20s) | Nom en haut \+ compteur central โ GIF en petit coin | Nom moyen, timer dominant | 1-2 cues de forme affichรฉs sous le nom |
+| REST (10s) | Nom de l'EXERCICE SUIVANT \+ vignette | Taille moyenne | "Prochain : \[Nom\]" โ anticipation |
+| FIN DE ROUND | Rรฉsumรฉ rapide du round (1s) | Plein รฉcran flash | Round X complรฉtรฉ \+ prochain exercice |
+
+### **2.3.4 Types de Programmes Tabata**
+
+| ๐๏ธ PROGRAMMES DISPONIBLES โ V1 |
+| :---- |
+| โธ MODE 1 โ Exercice unique rรฉpรฉtรฉ : Le mรชme exercice sur les 8 rounds (ex: 8 rounds de Burpees) โ Tabata classique |
+| โธ MODE 2 โ Circuit 2 exercices : Alternance A/B sur 8 rounds (ex: Squats / Push-ups ร 4 rรฉpรฉtitions) โ Tabata duo |
+| โธ MODE 3 โ Circuit 4 exercices : 4 exercices ร 2 rounds chacun โ Tabata circuit (Premium) |
+| โธ MODE 4 โ Programme libre : L'utilisateur assigne manuellement un exercice ร chaque round (Premium) |
+| โธ MODE 5 โ Programme IA : Sรฉlection automatique selon niveau, objectif et historique (Premium V2) |
+
+### **2.3.5 Crรฉateur de Programme Personnalisรฉ (Premium)**
+
+* Interface drag & drop pour assigner les exercices ร chaque round
+
+* Sauvegarde illimitรฉe de programmes personnalisรฉs (nom, description, tags)
+
+* Partage de programme par lien deep link (ex: tabatago://program/abc123)
+
+* Import de programme depuis un lien partagรฉ par un autre utilisateur
+
+* Favoris : marquer des exercices pour les retrouver rapidement
+
+### **2.3.6 Contenu Offline & Performance**
+
+* Tous les GIFs d'exercices V1 (38 exercices ร 1 GIF โ 150KB chacun โ \~6MB total) โ embarquรฉs dans le bundle
+
+* Lazy loading pour les exercices V2+ : tรฉlรฉchargement ร la demande, mis en cache localement
+
+* Fallback : Si pas de GIF disponible, afficher une icรดne \+ description textuelle
+
+* Accessibilitรฉ : alt text sur chaque GIF pour VoiceOver/TalkBack
+
+## **2.4 Synchronisation Timer ร Musique ร Exercice**
+
+Les trois composants doivent former une expรฉrience unifiรฉe et cohรฉrente. Ce tableau dรฉcrit les รฉvรฉnements et leurs effets croisรฉs :
+
+| รvรฉnement Timer | Effet sur la Musique | Effet sur l'Exercice | Haptique |
+| :---- | :---- | :---- | :---- |
+| Dรฉbut GET READY | Fade-in track principale | Afficher GIF exercice Round 1 | Lรฉger |
+| Dรฉcompte 3-2-1 | Volume augmente | Animation pulsation sur le GIF | Bip ร 3 |
+| Dรฉbut WORK | Switch vers track high BPM | Afficher nom \+ cues en grand | Fort |
+| Milieu WORK (10s) | Rien | "Halfway\!" en overlay 1s | Aucun |
+| Fin WORK | Switch vers track low BPM | Afficher exercice SUIVANT | Moyen |
+| Dรฉbut REST | Track calme | "Next: \[Exercice\]" \+ vignette | Lรฉger |
+| Dernier round warning | Effet sonore spรฉcial | Badge "LAST ROUND" sur nom | Vibration longue |
+| Fin de sรฉance | Fade-out \+ fanfare | รcran rรฉsultat avec tous les exercices | Cรฉlรฉbration |
+
+# **3\. Validation du Marchรฉ & Stratรฉgie ASO**
+
+## **3.1 Analyse des Mots-Clรฉs Cibles**
+
+Les mots-clรฉs suivants ont รฉtรฉ validรฉs via Astro (difficultรฉ \< 55, popularitรฉ \> 20\) :
+
+| Mot-clรฉ | Popularitรฉ | Difficultรฉ | Marchรฉ |
+| :---- | :---- | :---- | :---- |
+| tabata timer | 72 | 48 | EN ๐บ๐ธ |
+| hiit timer app | 68 | 52 | EN ๐บ๐ธ |
+| minuterie tabata | 35 | 28 | FR ๐ซ๐ท |
+| temporizador tabata | 41 | 31 | ES ๐ช๐ธ |
+| tabata training timer | 55 | 44 | EN ๐ฌ๐ง |
+| intervall timer workout | 38 | 29 | DE ๐ฉ๐ช |
+
+## **3.2 Analyse Concurrentielle**
+
+Principaux concurrents identifiรฉs et opportunitรฉs de diffรฉrenciation :
+
+| Concurrent | Forces | Faiblesses (notre opportunitรฉ) |
+| :---- | :---- | :---- |
+| Tabata Timer (App Store Top 1\) | Notoriรฉtรฉ, simplicitรฉ | UI datรฉe, pas de suivi streak, pas de localisation |
+| Seconds Pro | Trรจs complet, flexible | Trop complexe, prix รฉlevรฉ, courbe d'apprentissage |
+| HIIT Interval Training Timer | Gratuit, fonctionnel | Pub intrusive, pas d'onboarding รฉmotionnel |
+| Tabata Stopwatch Pro | Simple, rapide | Pas de personnalisation, no streak, no widget |
+
+Notre avantage : onboarding รฉmotionnel fort \+ design moderne \+ widgets iOS/Android \+ streaks \+ localisation dans 5 langues.
+
+# **4\. Onboarding โ La Sรฉquence Critique**
+
+L'onboarding est la prioritรฉ absolue : 80% des revenus sont gรฉnรฉrรฉs ici. L'objectif est de crรฉer un investissement รฉmotionnel avant d'afficher le paywall. La sรฉquence suit le schรฉma : Problรจme โ Empathie โ Solution โ Moment Wow โ Paywall.
+
+## **4.1 รcrans d'Onboarding (sรฉquence de 6 รฉcrans)**
+
+### **รcran 1 โ Le Problรจme (Identifier la douleur)**
+
+| ๐ฏ OBJECTIF : Identification |
+| :---- |
+| โธ Titre : "Tu n'as pas 1 heure pour la salle. Personne n'en a." |
+| โธ Sous-titre : "Et pourtant tu veux progresser. On a la solution." |
+| โธ Visuel : Animation subtile d'une horloge qui se fragmente puis se reconstruit en 20 min |
+| โธ CTA : "Montre-moi comment" (bouton orange pleine largeur) |
+
+### **รcran 2 โ L'Empathie (L'utilisateur se sent compris)**
+
+| ๐ฌ OBJECTIF : Connexion รฉmotionnelle |
+| :---- |
+| โธ Titre : "Qu'est-ce qui t'empรชche de t'entraรฎner ?" |
+| โธ Choix interactifs (tap) : Manque de temps / Motivation en berne / Je ne sais pas quoi faire / Je n'ai pas accรจs ร une salle |
+| โธ Mรฉcanisme : stocker la rรฉponse โ personnaliser le reste de l'onboarding |
+| โธ Transition : "On a conรงu TabataGo exactement pour รงa." |
+
+### **รcran 3 โ La Solution (Prรฉsenter la mรฉthode)**
+
+| โก OBJECTIF : Comprendre la valeur |
+| :---- |
+| โธ Titre : "4 minutes. Vraiment transformatrices." |
+| โธ Animation interactive : timeline Tabata (20s work / 10s rest ร 8 rounds) |
+| โธ Stats affichรฉes : Brรปle autant de calories qu'un jogging de 30 min / Prouvรฉ scientifiquement depuis 1996 (Dr. Tabata) |
+| โธ Visuel : compteur animรฉ qui tourne โ preview de l'app |
+
+### **รcran 4 โ Le Moment "Wow" (Dรฉmo interactive)**
+
+| ๐ฅ OBJECTIF : Engagement actif (ne pas juste regarder) |
+| :---- |
+| โธ Titre : "Essaie maintenant. 20 secondes." |
+| โธ Mini-minuterie Tabata LIVE intรฉgrรฉe dans l'รฉcran d'onboarding |
+| โธ L'utilisateur tape sur "Go" et vit 20s de compte ร rebours \+ son \+ vibration |
+| โธ Aprรจs : "Tu viens de faire ta premiรจre sรฉrie Tabata. 7 de plus et c'est une sรฉance complรจte." |
+| โธ Note : Ce moment est le plus diffรฉrenciant โ crรฉer une mini-expรฉrience rรฉelle |
+
+### **รcran 5 โ Personnalisation (Engagement supplรฉmentaire)**
+
+| โ๏ธ OBJECTIF : Investissement personnel |
+| :---- |
+| โธ Titre : "Configurons ta premiรจre semaine." |
+| โธ Sรฉlection : Niveau (Dรฉbutant / Intermรฉdiaire / Avancรฉ) |
+| โธ Sรฉlection : Objectif (Perte de poids / Cardio / Force / Bien-รชtre) |
+| โธ Sรฉlection : Frรฉquence souhaitรฉe (2x / 3x / 5x par semaine) |
+| โธ Rรฉsultat : "Ton programme personnalisรฉ est prรชt." (sensation de valeur avant paiement) |
+
+### **รcran 6 โ Paywall (Aprรจs l'investissement รฉmotionnel)**
+
+| ๐ณ OBJECTIF : Conversion |
+| :---- |
+| โธ Titre : "Continue sur ta lancรฉe. Sans limite." |
+| โธ Prรฉsenter l'essai gratuit 7 jours en premier (bouton principal orange) |
+| โธ Options : Mensuel $4.99 / Annuel $29.99 (รฉconomie 50% mise en รฉvidence) |
+| โธ Garantie visible : "Annule ร tout moment" \+ "Satisfait ou remboursรฉ 30j" |
+| โธ Lien "Continuer sans abonnement" en petit en bas (ne pas le cacher) |
+| โธ Intรฉgration RevenueCat โ avec A/B test activรฉ dรจs le lancement |
+
+# **5\. Design & Identitรฉ Visuelle**
+
+## **5.1 Palette de Couleurs**
+
+| Rรดle | Couleur | Hex | Usage |
+| :---- | :---- | :---- | :---- |
+| Primaire / Action | Orange Tabata | \#F97316 | Boutons CTA, accents, timer actif |
+| Fond Dark (dรฉfaut) | Charcoal Night | \#1E1E2E | Background principal mode sombre |
+| Fond Light | Warm White | \#FFF7ED | Background mode clair |
+| Texte principal Dark | Stone 900 | \#1C1917 | Titres mode clair |
+| Texte secondaire | Stone 600 | \#57534E | Body text, descriptions |
+| Succรจs / Streak | Green 500 | \#22C55E | Streaks, complรฉtion, feedback positif |
+| Danger / Alerte | Red 500 | \#EF4444 | Erreurs, derniers secondes |
+
+## **5.2 Typographie**
+
+| Usage | Police | Poids | Taille |
+| :---- | :---- | :---- | :---- |
+| Timer principal | Inter (monospace fallback) | Black (900) | 96-120px |
+| Titres H1 | Inter | Bold (700) | 28-32px |
+| Titres H2 | Inter | SemiBold (600) | 22-24px |
+| Body / Labels | Inter | Regular (400) | 14-16px |
+| Micro-labels | Inter | Medium (500) | 11-12px |
+
+## **5.3 Principes Design**
+
+* Mode sombre par dรฉfaut (immersif pendant l'entraรฎnement)
+
+* Timer en plein รฉcran pendant la sรฉance โ aucune distraction
+
+* Animations fluides (60fps) pour les transitions et le compteur
+
+* Haptiques natifs : vibration lรฉgรจre ร chaque changement de phase
+
+* Support Dynamic Type (iOS) et font scaling (Android)
+
+* Icรดne app : fond noir, lettre T stylisรฉe en orange avec une flamme
+
+# **6\. Architecture Technique & Dรฉveloppement (Expo)**
+
+## **6.1 Stack Technique**
+
+| Composant | Solution choisie | Justification |
+| :---- | :---- | :---- |
+| Framework | Expo SDK 52 (React Native) | Cross-platform, OTA updates, accรจs natif facile |
+| Navigation | Expo Router v3 (file-based) | Standard moderne, deep linking natif |
+| State management | Zustand \+ AsyncStorage | Lรฉger, performant, persistance simple |
+| Timer engine | expo-background-fetch \+ useInterval custom | Prรฉcision \+ exรฉcution background |
+| Audio | expo-av | Sons de dรฉcompte et alertes phase |
+| Haptiques | expo-haptics | Retour tactile natif iOS/Android |
+| Notifications | expo-notifications | Rappels d'entraรฎnement \+ streaks |
+| Widget | react-native-widget-extension | Widget iOS 14+ (Live Activity) |
+| Paiements | react-native-purchases (RevenueCat) | Abonnements \+ A/B testing \+ analytics |
+| Analytics | PostHog (react-native-posthog) | Funnel tracking, drop-off analysis |
+| Storage | expo-secure-store \+ AsyncStorage | Donnรฉes utilisateur \+ prรฉfรฉrences |
+| In-App Review | expo-store-review | Prompt aprรจs streak 7 jours |
+
+## **6.2 Features โ MoSCoW Priorisation**
+
+### **Must Have (V1 โ Lancement)**
+
+| โ
MUST HAVE โ Indispensables au lancement |
+| :---- |
+| โธ Timer Tabata complet โ voir Section 2.1 (toutes phases, sons, haptiques, background) |
+| โธ Musique intรฉgrรฉe โ voir Section 2.2 (3 ambiances ร 3 intensitรฉs, signaux de phase, coexistence audio) |
+| โธ Exercices avec GIFs โ voir Section 2.3 (38 exercices, modes 1 et 2, affichage GET READY/WORK/REST) |
+| โธ Synchronisation Timer ร Musique ร Exercice โ voir Section 2.4 |
+| โธ Modes : Tabata classique, HIIT personnalisรฉ, Pause active |
+| โธ Affichage plein รฉcran pendant la sรฉance (mode portrait \+ paysage) |
+| โธ Historique des sรฉances (date, durรฉe, rounds complรฉtรฉs) |
+| โธ Systรจme de Streak (consรฉcutivitรฉ quotidienne, animation de feu) |
+| โธ Notifications de rappel configurables |
+| โธ Onboarding 6 รฉcrans avec mini-dรฉmo live |
+| โธ Paywall \+ RevenueCat (essai 7j, mensuel, annuel) |
+| โธ Dark mode \+ Light mode |
+| โธ Localisation : EN, FR, ES, DE, PT |
+
+### **Should Have (V1.1 โ Semaine 4-8)**
+
+| ๐ก SHOULD HAVE โ Valeur ajoutรฉe forte |
+| :---- |
+| โธ Widget iOS (Home Screen) โ affiche le streak et le dernier entraรฎnement |
+| โธ Widget Android (Glance API) |
+| โธ Bibliothรจque de programmes prรฉ-dรฉfinis (Dรฉbutant / Cardio / Force) |
+| โธ Statistiques hebdomadaires et mensuelles avec graphiques |
+| โธ Sons personnalisรฉs (voix, bip, musique d'ambiance) |
+| โธ Integration Apple Health / Google Fit (calories, activitรฉ) |
+| โธ Partage social (carte rรฉcapitulative de la sรฉance) |
+
+### **Could Have (V2 โ Mois 3+)**
+
+| ๐ต COULD HAVE โ Diffรฉrenciation long terme |
+| :---- |
+| โธ Mode Coach IA : suggestions de sรฉances basรฉes sur l'historique |
+| โธ Challenges communautaires (leaderboard hebdomadaire) |
+| โธ Apple Watch companion app |
+| โธ Import/Export de programmes (partage entre utilisateurs) |
+| โธ Mode TV / AirPlay pour entraรฎnement sur grand รฉcran |
+
+# **7\. Structure de Navigation (Expo Router)**
+
+Architecture file-based avec Expo Router v3 :
+
+| Route | รcran | Accรจs |
+| :---- | :---- | :---- |
+| / | Home โ Hub central avec raccourcis et streak | Tous |
+| /onboarding | Sรฉquence onboarding 6 รฉtapes | Nouveaux utilisateurs |
+| /timer | Minuterie plein รฉcran โ sรฉance active | Tous |
+| /programs | Bibliothรจque de programmes | Premium |
+| /history | Historique des sรฉances \+ stats | Tous (limitรฉ free) |
+| /settings | Prรฉfรฉrences, sons, notifications, compte | Tous |
+| /paywall | รcran d'abonnement RevenueCat | Free users |
+| /(modals)/review | In-App Review prompt | Streak 7j |
+
+# **8\. Paiements, Pricing & RevenueCat**
+
+## **8.1 Structure des Offres**
+
+| Offre | Prix US | Prix FR | Prix BR | Contenu |
+| :---- | :---- | :---- | :---- | :---- |
+| Gratuit | Free | Free | Free | Timer standard, 7j historique, pas de widget |
+| Essai Premium | 7 jours gratuits | 7 jours gratuits | 7 jours gratuits | Accรจs complet, pas de CB requise si possible |
+| Premium Mensuel | $4.99/mois | โฌ4.99/mois | R$9.99/mois | Accรจs complet illimitรฉ |
+| Premium Annuel | $29.99/an | โฌ27.99/an | R$59.99/an | Tout Premium โ รฉconomie 50% mise en avant |
+
+Note : Pricing localisรฉ via RevenueCat Purchasing Power Parity (PPP). Adapter automatiquement les prix pour le Brรฉsil, l'Inde, l'Indonรฉsie et l'Europe de l'Est pour maximiser les conversions mondiales.
+
+## **8.2 Configuration RevenueCat**
+
+* Entitlements : "premium" (accรจs ร toutes les features payantes)
+
+* Products : tabatago\_monthly, tabatago\_annual, tabatago\_trial\_7d
+
+* A/B Tests dรจs J+7 : tester $3.99 vs $4.99 vs $6.99 mensuel
+
+* A/B Tests paywall : liste vs comparaison de plans vs "best value" badge
+
+* Webhook RevenueCat โ PostHog pour corrรฉler revenus et comportement
+
+# **9\. Analytics & Instrumentation (PostHog)**
+
+## **9.1 รvรฉnements Critiques ร Tracker**
+
+| รvรฉnement | Propriรฉtรฉs | Objectif |
+| :---- | :---- | :---- |
+| onboarding\_step\_viewed | step\_number, step\_name | Identifier le drop-off |
+| onboarding\_demo\_started | duration\_seconds | Mesurer l'engagement Wow |
+| onboarding\_completed | persona, goal, frequency | Segmentation |
+| paywall\_viewed | source, variant | Funnel paiement |
+| trial\_started | plan\_selected | Conversion essai |
+| subscription\_purchased | plan, price, currency | Revenue |
+| session\_started | program\_id, rounds, duration | Engagement produit |
+| session\_completed | rounds\_done, streak\_day | Rรฉtention |
+| streak\_milestone | days\_count | Gamification KPIs |
+| widget\_added | widget\_type | Stickiness |
+| notification\_tapped | notification\_type | Rappels efficacitรฉ |
+
+## **9.2 Funnels ร Monitorer**
+
+* Funnel Acquisition : Impression App Store โ Tรฉlรฉchargement โ Onboarding Start โ Onboarding Complete โ Paywall View โ Trial Start โ Purchase
+
+* Funnel Rรฉtention : J+1 / J+7 / J+30 ouverture de l'app aprรจs tรฉlรฉchargement
+
+* Funnel Engagement : Sรฉance dรฉmarrรฉe โ Sรฉance complรฉtรฉe โ Streak maintenu
+
+Rรจgle d'or : Si impressions mais pas de tรฉlรฉchargements โ Rรฉparer screenshots/icรดne. Si tรฉlรฉchargements mais pas d'essais โ Rรฉparer onboarding. Si essais mais pas de paiements โ Rรฉparer paywall/pricing.
+
+# **10\. Localisation & Growth Hacking**
+
+## **10.1 Stratรฉgie de Localisation (5 Langues)**
+
+| Langue | Marchรฉ cible | Mots-clรฉs spรฉcifiques | Prioritรฉ |
+| :---- | :---- | :---- | :---- |
+| Anglais (EN) | US, UK, AU, CA | tabata timer, hiit timer app | 1 โ Lancement |
+| Franรงais (FR) | France, Belgique, Quรฉbec | minuterie tabata, chrono hiit | 1 โ Lancement |
+| Espagnol (ES) | Espagne, Mexique, Argentine | temporizador tabata, ejercicio hiit | 2 โ Semaine 2 |
+| Allemand (DE) | Allemagne, Autriche, CH | tabata timer app, intervall training | 2 โ Semaine 2 |
+| Portugais (PT-BR) | Brรฉsil | timer tabata, treino hiit | 3 โ Mois 2 |
+
+## **10.2 รlรฉments ร Localiser**
+
+* App content : tous les textes UI, onboarding, notifications, erreurs
+
+* App Store listing : titre, sous-titre, description courte, description longue
+
+* Screenshots : localisรฉs avec texte natif (utiliser Fastlane Frameit)
+
+* Prix : PPP via RevenueCat (automatique par pays)
+
+* Mots-clรฉs App Store : 100 caractรจres spรฉcifiques par marchรฉ
+
+Outil recommandรฉ : i18next \+ expo-localization pour la gestion des traductions en dรฉveloppement.
+
+# **11\. App Store Optimization (ASO)**
+
+## **11.1 Fiche App Store (iOS โ EN)**
+
+| Champ | Valeur optimisรฉe |
+| :---- | :---- |
+| Nom de l'app (30 car.) | TabataGo โ HIIT Timer |
+| Sous-titre (30 car.) | Tabata & Interval Workout |
+| Mots-clรฉs (100 car.) | tabata,hiit,timer,interval,workout,fitness,training,countdown,sport,exercise |
+| Description (1รจre ligne) | The most motivating Tabata timer. 20 seconds of effort. Life-changing results. |
+| Screenshots (10 max) | Voir section 10.2 |
+| Preview video | 15-30s montrant la minuterie en action \+ streak \+ widget |
+
+## **11.2 Plan des Screenshots (6 obligatoires)**
+
+| \# | Contenu | Message clรฉ | Background |
+| :---- | :---- | :---- | :---- |
+| 1 | Timer plein รฉcran en action (20s) | "Train smarter, not longer" | Dark \+ orange |
+| 2 | รcran d'onboarding moment Wow | "Your first Tabata in 20 seconds" | Gradient sombre |
+| 3 | Widget iOS home screen | "Train from anywhere โ even your lock screen" | iPhone mockup |
+| 4 | Historique \+ Streak en feu | "Build the habit. Keep the streak." | Dark \+ vert |
+| 5 | Bibliothรจque de programmes | "100+ ready-to-go programs" | Gradient |
+| 6 | Statistiques mensuelles | "See your progress. Stay motivated." | Fond clair |
+
+# **12\. Plan de Lancement en 72h**
+
+## **12.1 Timeline de Dรฉveloppement (72 heures)**
+
+| Phase | Durรฉe | Livrables | Responsable |
+| :---- | :---- | :---- | :---- |
+| Setup & Architecture | H0 โ H8 | Expo project init, navigation, design system, RevenueCat config | Dev Lead |
+| Onboarding | H8 โ H20 | 6 รฉcrans onboarding \+ mini-timer dรฉmo \+ animation | Dev \+ Design |
+| Core Timer | H20 โ H36 | Minuterie plein รฉcran, son, haptiques, background timer | Dev |
+| Streak \+ Historique | H36 โ H48 | Systรจme streak, storage, affichage historique, notifications | Dev |
+| Paywall \+ Analytics | H48 โ H58 | RevenueCat paywall, PostHog events, A/B test config | Dev |
+| Polish & Testing | H58 โ H68 | Bug fixes, dark/light mode, performance, edge cases | Dev \+ QA |
+| Submission | H68 โ H72 | Screenshots, App Store listing (5 langues), soumission Apple | PM \+ Dev |
+
+## **12.2 Stratรฉgie de Validation Post-Lancement**
+
+Profiter du boost de visibilitรฉ des 3 premiers jours accordรฉ par l'App Store aux nouvelles applications :
+
+1. Jour 1-3 : Monitoring organique โ Analyser impressions, tรฉlรฉchargements, et premiers essais
+
+2. Jour 4-7 : Analyse funnel โ Identifier le premier point de friction (onboarding? paywall?)
+
+3. Jour 8-14 : Premiรจre itรฉration โ Corriger le problรจme prioritaire et soumettre mise ร jour OTA (Expo)
+
+4. Jour 15-30 : Activation publicitรฉ โ Apple Search Ads seulement si CVR organique \> 15%
+
+5. Jour 30+ : Scale โ Augmenter budget pub sur les marchรฉs qui convertissent le mieux
+
+Rรจgle absolue : Ne jamais dรฉpenser en publicitรฉ avant d'avoir validรฉ que le funnel organique convertit.
+
+# **13\. KPIs & Mรฉtriques de Succรจs**
+
+| Mรฉtrique | Semaine 1 | Mois 1 | Mois 3 | Outil de mesure |
+| :---- | :---- | :---- | :---- | :---- |
+| Tรฉlรฉchargements | 500+ | 5 000+ | 20 000+ | App Store Connect |
+| Taux conversion ImpressionโDL | \> 5% | \> 8% | \> 10% | App Store Connect |
+| Taux essai dรฉmarrรฉ | \> 25% | \> 30% | \> 35% | RevenueCat \+ PostHog |
+| Taux conversion essaiโpayant | \> 30% | \> 35% | \> 40% | RevenueCat |
+| Rรฉtention J+7 | \> 30% | \> 35% | \> 40% | PostHog |
+| Rรฉtention J+30 | โ | \> 20% | \> 25% | PostHog |
+| MRR | โ | $2 000+ | $8 000+ | RevenueCat |
+| Note App Store | โ | โฅ 4.5 | โฅ 4.6 | App Store Connect |
+| Streak moyen (actifs) | โ | \> 5 jours | \> 10 jours | PostHog custom |
+
+# **14\. Risques & Mitigations**
+
+| Risque | Probabilitรฉ | Impact | Mitigation |
+| :---- | :---- | :---- | :---- |
+| Refus App Store (guidelines) | Moyen | รlevรฉ | Respecter HIG Apple, tester paywall sur TestFlight, pas de dark patterns |
+| Mauvais taux de conversion paywall | Moyen | รlevรฉ | A/B test RevenueCat dรจs J+7, 3 variantes de prix/layout |
+| Prรฉcision du timer en background | Faible | รlevรฉ | expo-background-fetch \+ notification locale comme fallback |
+| Faible rรฉtention sans streaks | Moyen | Moyen | Streak J+1 core feature, reminder push personnalisรฉ par heure d'entraรฎnement |
+| Concurrence sur mots-clรฉs EN | รlevรฉ | Moyen | Agressivitรฉ sur marchรฉs FR/ES/DE dรจs J+14 |
+| Revue Apple lente (\> 48h) | Faible | Faible | Soumettre J-5 avant objectif lancement, utiliser Expo OTA pour hotfixes |
+
+# **15\. Approbations & Versions**
+
+| Rรดle | Nom | Date | Signature |
+| :---- | :---- | :---- | :---- |
+| Product Owner | | Fรฉvrier 2026 | |
+| Tech Lead | | Fรฉvrier 2026 | |
+| Design Lead | | Fรฉvrier 2026 | |
+| Marketing | | Fรฉvrier 2026 | |
+
+*Document crรฉรฉ le 15 fรฉvrier 2026 โ TabataGo PRD v1.1*
\ No newline at end of file
diff --git a/.archive/TabataGo_StyleGuide_v1.0.md b/.archive/TabataGo_StyleGuide_v1.0.md
new file mode 100644
index 0000000..ce555c2
--- /dev/null
+++ b/.archive/TabataGo_StyleGuide_v1.0.md
@@ -0,0 +1,1198 @@
+# TabataGo โ Visual Style Guide v1.0
+
+> Document pratique pour les dรฉveloppeurs. Tokens, composants, et exemples de code prรชts ร l'emploi.
+
+---
+
+## 1. Color Tokens
+
+### 1.1 Brand Colors
+
+```typescript
+// src/shared/constants/colors.ts
+
+export const BRAND = {
+ PRIMARY: '#F97316', // Orange Energy - Main brand color
+ PRIMARY_LIGHT: '#FB923C', // Orange Glow - Hover, accents
+ PRIMARY_DARK: '#EA580C', // Orange Deep - Work phase
+ SECONDARY: '#FBBF24', // Gold - Streaks, badges
+ DANGER: '#EF4444', // Red - Alerts, last seconds
+ SUCCESS: '#22C55E', // Green - Complete, success
+ INFO: '#3B82F6', // Blue - Rest phase, info
+} as const
+```
+
+### 1.2 Dark Theme (Base)
+
+```typescript
+export const DARK = {
+ BASE: '#1A1A1E', // Main background
+ RAISED: '#222226', // Cards level 1
+ ELEVATED: '#2A2A2E', // Cards level 2, modals
+ SURFACE: '#0A0A0E', // Focus zones, timer
+ OVERLAY_1: 'rgba(255, 255, 255, 0.04)', // Subtle hover
+ OVERLAY_2: 'rgba(255, 255, 255, 0.08)', // Active states
+ OVERLAY_3: 'rgba(255, 255, 255, 0.12)', // Selected states
+ SCRIM: 'rgba(0, 0, 0, 0.6)', // Modal overlay
+} as const
+```
+
+### 1.3 Text Colors
+
+```typescript
+export const TEXT = {
+ PRIMARY: '#FFFFFF',
+ SECONDARY: 'rgba(255, 255, 255, 0.85)',
+ TERTIARY: 'rgba(255, 255, 255, 0.70)',
+ MUTED: 'rgba(255, 255, 255, 0.55)',
+ HINT: 'rgba(255, 255, 255, 0.40)',
+ DISABLED: 'rgba(255, 255, 255, 0.25)',
+} as const
+```
+
+### 1.4 Border Colors
+
+```typescript
+export const BORDER = {
+ SUBTLE: 'rgba(255, 255, 255, 0.04)',
+ LIGHT: 'rgba(255, 255, 255, 0.08)',
+ MEDIUM: 'rgba(255, 255, 255, 0.12)',
+ STRONG: 'rgba(255, 255, 255, 0.20)',
+ BRAND: 'rgba(249, 115, 22, 0.30)',
+} as const
+```
+
+### 1.5 Phase Gradients
+
+```typescript
+export const PHASE_GRADIENTS = {
+ IDLE: ['#0A0A14', '#12101F', '#1E1E2E'] as const,
+ GET_READY: ['#451A03', '#92400E', '#D97706'] as const,
+ WORK: ['#450A0A', '#991B1B', '#EA580C'] as const,
+ REST: ['#0C1929', '#1E3A5F', '#2563EB'] as const,
+ COMPLETE: ['#052E16', '#166534', '#16A34A'] as const,
+} as const
+```
+
+### 1.6 Glow Effects
+
+```typescript
+export const GLOW = {
+ // Orange glow (primary)
+ ENERGY: {
+ shadowColor: '#F97316',
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 0.5,
+ shadowRadius: 40,
+ },
+ ENERGY_INTENSE: {
+ shadowColor: '#F97316',
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 0.7,
+ shadowRadius: 60,
+ },
+ // White glow (active)
+ WHITE: {
+ shadowColor: '#FFFFFF',
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 0.3,
+ shadowRadius: 20,
+ },
+ // Red glow (danger)
+ DANGER: {
+ shadowColor: '#EF4444',
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 0.5,
+ shadowRadius: 30,
+ },
+} as const
+```
+
+---
+
+## 2. Typography Scale
+
+### 2.1 Font Family
+
+```typescript
+// Single font family for consistency
+export const FONT_FAMILY = {
+ REGULAR: 'Inter',
+ MEDIUM: 'Inter',
+ SEMIBOLD: 'Inter',
+ BOLD: 'Inter',
+ EXTRABOLD: 'Inter',
+ BLACK: 'Inter',
+} as const
+```
+
+### 2.2 Type Scale
+
+```typescript
+// src/shared/constants/typography.ts
+
+import { TextStyle } from 'react-native'
+
+export const TYPOGRAPHY = {
+ // โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ // DISPLAY โ Maximum impact
+ // โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+
+ // Timer countdown (the hero number)
+ countdown: {
+ fontFamily: 'Inter',
+ fontSize: 140,
+ fontWeight: '900',
+ fontVariant: ['tabular-nums'],
+ letterSpacing: -2,
+ } as TextStyle,
+
+ // Time display (completion screen)
+ timeDisplay: {
+ fontFamily: 'Inter',
+ fontSize: 72,
+ fontWeight: '900',
+ fontVariant: ['tabular-nums'],
+ letterSpacing: -1,
+ } as TextStyle,
+
+ // Brand title (TABATA)
+ brandTitle: {
+ fontFamily: 'Inter',
+ fontSize: 56,
+ fontWeight: '900',
+ letterSpacing: 8,
+ } as TextStyle,
+
+ // Display large (onboarding titles, victory)
+ displayLarge: {
+ fontFamily: 'Inter',
+ fontSize: 42,
+ fontWeight: '900',
+ letterSpacing: 2,
+ } as TextStyle,
+
+ // Display small (GO, section headers)
+ displaySmall: {
+ fontFamily: 'Inter',
+ fontSize: 32,
+ fontWeight: '900',
+ letterSpacing: 4,
+ } as TextStyle,
+
+ // โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ // HEADLINES โ Section titles, emphasis
+ // โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+
+ // Hero button text (START)
+ buttonHero: {
+ fontFamily: 'Inter',
+ fontSize: 30,
+ fontWeight: '900',
+ letterSpacing: 4,
+ } as TextStyle,
+
+ // Heading (screen titles, card titles)
+ heading: {
+ fontFamily: 'Inter',
+ fontSize: 24,
+ fontWeight: '800',
+ letterSpacing: 0.5,
+ } as TextStyle,
+
+ // Subheading
+ subheading: {
+ fontFamily: 'Inter',
+ fontSize: 20,
+ fontWeight: '700',
+ letterSpacing: 0.3,
+ } as TextStyle,
+
+ // โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ // BODY โ Readable content
+ // โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+
+ // Large body (descriptions, emphasis)
+ bodyLarge: {
+ fontFamily: 'Inter',
+ fontSize: 18,
+ fontWeight: '600',
+ lineHeight: 26,
+ } as TextStyle,
+
+ // Standard body
+ body: {
+ fontFamily: 'Inter',
+ fontSize: 16,
+ fontWeight: '400',
+ lineHeight: 24,
+ } as TextStyle,
+
+ // โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+ // CAPTION & LABELS โ Smaller text
+ // โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+
+ // Caption (secondary info)
+ caption: {
+ fontFamily: 'Inter',
+ fontSize: 14,
+ fontWeight: '500',
+ lineHeight: 20,
+ } as TextStyle,
+
+ // Label (badges, tags)
+ label: {
+ fontFamily: 'Inter',
+ fontSize: 13,
+ fontWeight: '700',
+ letterSpacing: 0.5,
+ } as TextStyle,
+
+ // Overline (section labels, uppercase)
+ overline: {
+ fontFamily: 'Inter',
+ fontSize: 11,
+ fontWeight: '600',
+ letterSpacing: 1.5,
+ textTransform: 'uppercase',
+ } as TextStyle,
+
+ // Micro (tiny labels)
+ micro: {
+ fontFamily: 'Inter',
+ fontSize: 10,
+ fontWeight: '600',
+ letterSpacing: 1,
+ } as TextStyle,
+
+} as const
+```
+
+### 2.3 Usage Examples
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ TYPOGRAPHY PREVIEW โ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ countdown 140 20 โ โ
+โ โ timeDisplay 72 4:00 โ โ
+โ โ brandTitle 56 TABATA โ โ
+โ โ displayLarge 42 Terminรฉ ! โ โ
+โ โ displaySmall 32 GO โ โ
+โ โ buttonHero 30 START โ โ
+โ โ heading 24 Tabata Classic โ โ
+โ โ subheading 20 Sรฉances cette semaine โ โ
+โ โ bodyLarge 18 Description importante โ โ
+โ โ body 16 Texte courant standard โ โ
+โ โ caption 14 Information secondaire โ โ
+โ โ label 13 BEGINNER โ โ
+โ โ overline 11 TON PROGRAMME โ โ
+โ โ micro 10 8 rounds โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+---
+
+## 3. Spacing System
+
+### 3.1 Scale (4px base)
+
+```typescript
+// src/shared/constants/spacing.ts
+
+export const SPACING = {
+ 0: 0,
+ 0.5: 2,
+ 1: 4,
+ 1.5: 6,
+ 2: 8,
+ 2.5: 10,
+ 3: 12,
+ 3.5: 14,
+ 4: 16,
+ 5: 20,
+ 6: 24,
+ 7: 28,
+ 8: 32,
+ 10: 40,
+ 12: 48,
+ 14: 56,
+ 16: 64,
+ 20: 80,
+ 24: 96,
+} as const
+
+// Semantic aliases
+export const SPACE = {
+ NONE: 0,
+ XXXS: 2,
+ XXS: 4,
+ XS: 8,
+ SM: 12,
+ MD: 16,
+ LG: 24,
+ XL: 32,
+ XXL: 48,
+ XXXL: 64,
+ PAGE: 24, // Horizontal page padding
+ SECTION: 40, // Between major sections
+ CARD: 16, // Internal card padding
+ BUTTON: 16, // Button padding
+} as const
+```
+
+### 3.2 Visual Reference
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ SPACING SCALE โ
+โ โ
+โ 0 โ (none) โ
+โ 2 โโ (xxxs) โ
+โ 4 โโโโ (xxs) โ
+โ 8 โโโโโโโโ (xs) โ
+โ 12 โโโโโโโโโโโโ (sm) โ
+โ 16 โโโโโโโโโโโโโโโโ (md) โ
+โ 24 โโโโโโโโโโโโโโโโโโโโโโโโ (lg) โ
+โ 32 โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ (xl) โ
+โ 48 โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ (xxl) โ
+โ 64 โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ (xxxl) โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+---
+
+## 4. Border Radius
+
+### 4.1 Scale
+
+```typescript
+// src/shared/constants/borderRadius.ts
+
+export const RADIUS = {
+ NONE: 0,
+ XS: 4, // Tags, small elements
+ SM: 6, // Small buttons
+ MD: 8, // Badges, chips
+ LG: 12, // Buttons, inputs
+ XL: 16, // Cards
+ XXL: 20, // Large cards, modals
+ XXXL: 24, // Bottom sheets
+ FULL: 9999, // Pills, circles
+} as const
+```
+
+### 4.2 Usage Guide
+
+| Radius | Use Case |
+|--------|----------|
+| `XS` (4px) | Inline tags, tiny badges |
+| `SM` (6px) | Small buttons, compact cards |
+| `MD` (8px) | Standard badges, chips |
+| `LG` (12px) | Buttons, inputs, medium cards |
+| `XL` (16px) | Standard cards, list items |
+| `XXL` (20px) | Large cards, bottom sheets |
+| `XXXL` (24px) | Modal containers, hero cards |
+| `FULL` | Pills, circular avatars, CTA buttons |
+
+---
+
+## 5. Shadows & Glows
+
+### 5.1 Elevation Shadows
+
+```typescript
+// src/shared/constants/shadows.ts
+
+import { ViewStyle } from 'react-native'
+
+export const SHADOW = {
+ // Subtle elevation (cards)
+ sm: {
+ shadowColor: '#000000',
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.15,
+ shadowRadius: 8,
+ elevation: 2,
+ } as ViewStyle,
+
+ // Medium elevation (raised cards)
+ md: {
+ shadowColor: '#000000',
+ shadowOffset: { width: 0, height: 4 },
+ shadowOpacity: 0.2,
+ shadowRadius: 16,
+ elevation: 4,
+ } as ViewStyle,
+
+ // High elevation (modals)
+ lg: {
+ shadowColor: '#000000',
+ shadowOffset: { width: 0, height: 8 },
+ shadowOpacity: 0.25,
+ shadowRadius: 24,
+ elevation: 8,
+ } as ViewStyle,
+
+} as const
+```
+
+### 5.2 Brand Glows
+
+```typescript
+export const GLOW = {
+ // Primary orange glow
+ brand: {
+ shadowColor: '#F97316',
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 0.5,
+ shadowRadius: 40,
+ } as ViewStyle,
+
+ // Intense glow (active states)
+ brandIntense: {
+ shadowColor: '#F97316',
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 0.7,
+ shadowRadius: 60,
+ } as ViewStyle,
+
+ // Subtle glow (hover)
+ brandSubtle: {
+ shadowColor: '#F97316',
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 0.3,
+ shadowRadius: 20,
+ } as ViewStyle,
+
+ // White glow (active elements)
+ white: {
+ shadowColor: '#FFFFFF',
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 0.3,
+ shadowRadius: 16,
+ } as ViewStyle,
+
+ // Danger glow (warnings)
+ danger: {
+ shadowColor: '#EF4444',
+ shadowOffset: { width: 0, height: 0 },
+ shadowOpacity: 0.5,
+ shadowRadius: 24,
+ } as ViewStyle,
+
+} as const
+```
+
+### 5.3 Text Shadows
+
+```typescript
+export const TEXT_SHADOW = {
+ // Brand orange shadow
+ brand: {
+ textShadowColor: '#F97316',
+ textShadowOffset: { width: 0, height: 0 },
+ textShadowRadius: 20,
+ },
+
+ // White soft shadow
+ white: {
+ textShadowColor: 'rgba(255, 255, 255, 0.3)',
+ textShadowOffset: { width: 0, height: 0 },
+ textShadowRadius: 12,
+ },
+
+ // Intense white
+ whiteIntense: {
+ textShadowColor: 'rgba(255, 255, 255, 0.5)',
+ textShadowOffset: { width: 0, height: 0 },
+ textShadowRadius: 20,
+ },
+
+ // Danger red
+ danger: {
+ textShadowColor: '#EF4444',
+ textShadowOffset: { width: 0, height: 0 },
+ textShadowRadius: 16,
+ },
+
+} as const
+```
+
+---
+
+## 6. Component Specs
+
+### 6.1 Primary Button (CTA)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ START โ โ
+โ โ (150ร150 circle) โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โโโโโโโ โ
+โ (Glow breathing) โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+```typescript
+// Primary CTA Button (Circular)
+const styles = StyleSheet.create({
+ ctaButton: {
+ width: 150,
+ height: 150,
+ borderRadius: 75,
+ backgroundColor: BRAND.PRIMARY,
+ alignItems: 'center',
+ justifyContent: 'center',
+ ...GLOW.brand,
+ },
+ ctaButtonPressed: {
+ transform: [{ scale: 0.95 }],
+ },
+ ctaText: {
+ ...TYPOGRAPHY.buttonHero,
+ color: TEXT.PRIMARY,
+ },
+ ctaGlow: {
+ position: 'absolute',
+ width: 172,
+ height: 172,
+ borderRadius: 86,
+ backgroundColor: BRAND.PRIMARY,
+ opacity: 0.3, // Animated: 0.3 โ 0.6 โ 0.3
+ },
+})
+```
+
+### 6.2 Secondary Button (Pill)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ SUIVANT โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ (Full width pill, gradient fill, glow effect) โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+```typescript
+// Secondary Button (Pill)
+const styles = StyleSheet.create({
+ button: {
+ height: 54,
+ borderRadius: RADIUS.FULL,
+ backgroundColor: BRAND.PRIMARY,
+ alignItems: 'center',
+ justifyContent: 'center',
+ paddingHorizontal: SPACING[10],
+ ...GLOW.brandSubtle,
+ },
+ buttonText: {
+ ...TYPOGRAPHY.subheading,
+ color: TEXT.PRIMARY,
+ letterSpacing: 2,
+ },
+})
+```
+
+### 6.3 Tertiary Button (Ghost)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ Continuer sans abonnement โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ (Transparent bg, subtle border, no glow) โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+```typescript
+// Tertiary Button (Ghost)
+const styles = StyleSheet.create({
+ button: {
+ height: 44,
+ borderRadius: RADIUS.LG,
+ backgroundColor: 'transparent',
+ alignItems: 'center',
+ justifyContent: 'center',
+ paddingHorizontal: SPACING[6],
+ borderWidth: 1,
+ borderColor: BORDER.LIGHT,
+ },
+ buttonText: {
+ ...TYPOGRAPHY.caption,
+ color: TEXT.HINT,
+ },
+})
+```
+
+### 6.4 Card (Standard)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ โ โ
+โ โ Tabata Classic BEGINNER โ โ
+โ โ โ โ
+โ โ 8 rounds de Burpees pour commencer en force โ โ
+โ โ โ โ
+โ โ โโโโโโโโโโโโ โ โ
+โ โ โ Burpees โ 8 rounds โข 4 min โข 1 ex. โ โ
+โ โ โโโโโโโโโโโโ โ โ
+โ โ โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ (Soft elevated, subtle border, rounded corners) โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+```typescript
+// Standard Card
+const styles = StyleSheet.create({
+ card: {
+ backgroundColor: DARK.RAISED,
+ borderRadius: RADIUS.XXL,
+ borderWidth: 1,
+ borderColor: BORDER.LIGHT,
+ padding: SPACING[6],
+ ...SHADOW.md,
+ },
+ cardSelected: {
+ backgroundColor: 'rgba(249, 115, 22, 0.08)',
+ borderColor: BORDER.BRAND,
+ ...GLOW.brandSubtle,
+ },
+ cardTitle: {
+ ...TYPOGRAPHY.heading,
+ color: TEXT.PRIMARY,
+ },
+ cardDescription: {
+ ...TYPOGRAPHY.body,
+ color: TEXT.MUTED,
+ marginTop: SPACING[2],
+ },
+})
+```
+
+### 6.5 Badge (Difficulty)
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ BEGINNER INTERMEDIATE ADVANCED โ
+โ โโโโโโโโโ โโโโโโโโโโโโโ โโโโโโโโโ โ
+โ Vert #4ADE80 Or #FBBF24 Rouge #F87171 โ
+โ โ
+โ โโโโโโโโโโ โโโโโโโโโโโโโโ โโโโโโโโโโโโ โ
+โ โBEGINNERโ โINTERMEDIATEโ โ ADVANCED โ โ
+โ โโโโโโโโโโ โโโโโโโโโโโโโโ โโโโโโโโโโโโ โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+```typescript
+// Difficulty Badge
+const DIFFICULTY_STYLES = {
+ BEGINNER: {
+ bg: 'rgba(74, 222, 128, 0.15)',
+ text: '#4ADE80',
+ },
+ INTERMEDIATE: {
+ bg: 'rgba(251, 191, 36, 0.15)',
+ text: '#FBBF24',
+ },
+ ADVANCED: {
+ bg: 'rgba(248, 113, 113, 0.15)',
+ text: '#F87171',
+ },
+}
+
+const styles = StyleSheet.create({
+ badge: {
+ paddingHorizontal: SPACING[3],
+ paddingVertical: SPACING[1.5],
+ borderRadius: RADIUS.MD,
+ },
+ badgeText: {
+ ...TYPOGRAPHY.label,
+ letterSpacing: 0.5,
+ },
+})
+```
+
+### 6.6 Input Field
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ LABEL โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ Placeholder text... โก โ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ (Dark background, subtle border, rounded corners) โ
+โ โ
+โ FOCUSED STATE โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ Entered text โ โ โโ โ
+โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ (Brand border glow when focused) โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+```typescript
+// Input Field
+const styles = StyleSheet.create({
+ inputContainer: {
+ backgroundColor: DARK.RAISED,
+ borderRadius: RADIUS.LG,
+ borderWidth: 1,
+ borderColor: BORDER.LIGHT,
+ paddingHorizontal: SPACING[4],
+ height: 48,
+ },
+ inputContainerFocused: {
+ borderColor: BRAND.PRIMARY,
+ ...GLOW.brandSubtle,
+ },
+ input: {
+ ...TYPOGRAPHY.body,
+ color: TEXT.PRIMARY,
+ flex: 1,
+ },
+ label: {
+ ...TYPOGRAPHY.overline,
+ color: TEXT.HINT,
+ marginBottom: SPACING[2],
+ },
+})
+```
+
+### 6.7 Progress Bar
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ โ
+โ Default: โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ โ
+โ Progress: โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
+โ (Orange gradient fill with subtle glow) โ
+โ โ
+โ Size variations: โ
+โ Thin: โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ (4px) โ
+โ Medium: โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ (6px) โ
+โ Thick: โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ (8px) โ
+โ โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+```typescript
+// Progress Bar
+const styles = StyleSheet.create({
+ container: {
+ height: 6,
+ backgroundColor: DARK.OVERLAY_2,
+ borderRadius: RADIUS.FULL,
+ overflow: 'hidden',
+ },
+ fill: {
+ height: '100%',
+ backgroundColor: BRAND.PRIMARY,
+ borderRadius: RADIUS.FULL,
+ },
+ // With glow
+ fillWithGlow: {
+ ...GLOW.brandSubtle,
+ },
+})
+```
+
+---
+
+## 7. Animation Specs
+
+### 7.1 Timing Constants
+
+```typescript
+// src/shared/constants/animations.ts
+
+export const DURATION = {
+ INSTANT: 100, // Micro-feedback
+ FAST: 200, // Quick interactions
+ NORMAL: 300, // Standard transitions
+ SLOW: 400, // Cross-fades, reveals
+ BREATHING: 2000, // Cyclic animations
+ BREATHING_HALF: 1000,
+} as const
+
+export const EASING = {
+ // Standard ease (most transitions)
+ STANDARD: Easing.inOut(Easing.cubic),
+
+ // Ease out (elements entering)
+ OUT: Easing.out(Easing.cubic),
+
+ // Ease in (elements leaving)
+ IN: Easing.in(Easing.cubic),
+
+ // Bouncy (playful interactions)
+ BOUNCY: Easing.elastic(1.2),
+} as const
+
+export const SPRING = {
+ // Gentle bounce
+ GENTLE: {
+ damping: 20,
+ stiffness: 150,
+ },
+
+ // Bouncy pop (victory, celebrations)
+ BOUNCY: {
+ damping: 12,
+ stiffness: 180,
+ },
+
+ // Snappy (quick feedback)
+ SNAPPY: {
+ damping: 25,
+ stiffness: 300,
+ },
+} as const
+```
+
+### 7.2 Animation Presets
+
+```typescript
+// Pre-built animation configs
+
+export const ANIMATION = {
+ // Fade in
+ FADE_IN: {
+ toValue: 1,
+ duration: DURATION.NORMAL,
+ easing: EASING.OUT,
+ useNativeDriver: true,
+ },
+
+ // Fade out
+ FADE_OUT: {
+ toValue: 0,
+ duration: DURATION.NORMAL,
+ easing: EASING.IN,
+ useNativeDriver: true,
+ },
+
+ // Scale up (pop in)
+ POP_IN: {
+ toValue: 1,
+ duration: DURATION.SLOW,
+ easing: EASING.BOUNCY,
+ useNativeDriver: true,
+ },
+
+ // Pulse (countdown tick)
+ PULSE_UP: {
+ toValue: 1.03,
+ duration: 100,
+ easing: EASING.OUT,
+ useNativeDriver: true,
+ },
+ PULSE_DOWN: {
+ toValue: 1,
+ duration: 100,
+ easing: EASING.IN,
+ useNativeDriver: true,
+ },
+
+ // Breathing glow
+ BREATH_HALF: {
+ toValue: 1,
+ duration: DURATION.BREATHING_HALF,
+ easing: EASING.STANDARD,
+ useNativeDriver: false, // Opacity/color can't be native
+ },
+
+ // Gradient crossfade
+ GRADIENT_CROSSFADE: {
+ toValue: 1,
+ duration: DURATION.SLOW,
+ easing: EASING.STANDARD,
+ useNativeDriver: false,
+ },
+} as const
+```
+
+### 7.3 Common Animations
+
+```typescript
+// Glow breathing (START button)
+const glowAnim = useRef(new Animated.Value(0)).current
+
+useEffect(() => {
+ Animated.loop(
+ Animated.sequence([
+ Animated.timing(glowAnim, {
+ toValue: 1,
+ duration: 2000,
+ easing: EASING.STANDARD,
+ useNativeDriver: false,
+ }),
+ Animated.timing(glowAnim, {
+ toValue: 0,
+ duration: 2000,
+ easing: EASING.STANDARD,
+ useNativeDriver: false,
+ }),
+ ])
+ ).start()
+}, [])
+
+const glowOpacity = glowAnim.interpolate({
+ inputRange: [0, 1],
+ outputRange: [0.3, 0.6],
+})
+
+const glowScale = glowAnim.interpolate({
+ inputRange: [0, 1],
+ outputRange: [1, 1.08],
+})
+```
+
+```typescript
+// Countdown pulse
+const pulseAnim = useRef(new Animated.Value(1)).current
+
+useEffect(() => {
+ Animated.sequence([
+ Animated.timing(pulseAnim, ANIMATION.PULSE_UP),
+ Animated.timing(pulseAnim, ANIMATION.PULSE_DOWN),
+ ]).start()
+}, [secondsLeft])
+```
+
+```typescript
+// Victory pop
+const scaleAnim = useRef(new Animated.Value(0.5)).current
+
+useEffect(() => {
+ Animated.spring(scaleAnim, {
+ toValue: 1,
+ ...SPRING.BOUNCY,
+ useNativeDriver: true,
+ }).start()
+}, [])
+```
+
+---
+
+## 8. Icon Reference
+
+### 8.1 Ionicons Mapping
+
+```typescript
+// src/shared/constants/icons.ts
+
+export const ICONS = {
+ // Navigation
+ HOME: 'home',
+ HISTORY: 'time',
+ SETTINGS: 'settings',
+
+ // Timer controls
+ PLAY: 'play',
+ PAUSE: 'pause',
+ STOP: 'stop',
+ SKIP: 'play-skip-forward',
+
+ // Actions
+ CHEVRON_RIGHT: 'chevron-forward',
+ CHEVRON_LEFT: 'chevron-back',
+ CLOSE: 'close',
+ CHECK: 'checkmark',
+
+ // Status
+ FLAME: 'flame',
+ TROPHY: 'trophy',
+ CHECK_CIRCLE: 'checkmark-circle',
+
+ // Info
+ INFO: 'information-circle',
+ WARNING: 'warning',
+ LOCK: 'lock-closed',
+} as const
+```
+
+### 8.2 Icon Sizes
+
+```typescript
+export const ICON_SIZE = {
+ XS: 16,
+ SM: 20,
+ MD: 24,
+ LG: 28,
+ XL: 32,
+ XXL: 48,
+} as const
+```
+
+---
+
+## 9. Safe Areas & Layout
+
+### 9.1 Layout Constants
+
+```typescript
+// src/shared/constants/layout.ts
+
+export const LAYOUT = {
+ // Horizontal padding for screens
+ PAGE_HORIZONTAL: 24,
+
+ // Minimum touch target
+ TOUCH_TARGET: 44,
+
+ // Tab bar height
+ TAB_BAR_HEIGHT: 80,
+
+ // Header height
+ HEADER_HEIGHT: 56,
+
+ // Bottom sheet handle
+ BOTTOM_SHEET_HANDLE: 24,
+} as const
+```
+
+### 9.2 Safe Area Usage
+
+```typescript
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+function Screen() {
+ const insets = useSafeAreaInsets()
+
+ return (
+
+ {/* Content */}
+
+ )
+}
+```
+
+---
+
+## 10. Accessibility
+
+### 10.1 Minimum Touch Targets
+
+```typescript
+// All interactive elements must be at least 44ร44
+
+const TOUCH_TARGET_STYLE = {
+ minHeight: 44,
+ minWidth: 44,
+ justifyContent: 'center',
+ alignItems: 'center',
+}
+```
+
+### 10.2 Contrast Ratios
+
+| Text Size | Minimum Ratio | Status |
+|-----------|---------------|--------|
+| Large (18px+) | 3:1 | โ
TEXT.PRIMARY on DARK.BASE |
+| Normal | 4.5:1 | โ
TEXT.SECONDARY on DARK.BASE |
+| Small (<14px) | 4.5:1 | โ ๏ธ TEXT.HINT may need adjustment |
+
+### 10.3 Accessibility Labels
+
+```typescript
+
+ START
+
+```
+
+---
+
+## 11. Quick Reference Card
+
+```
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+โ TABATAGO QUICK REFERENCE โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ COLORS โ
+โ Primary: #F97316 (Orange Energy) โ
+โ Dark Base: #1A1A1E โ
+โ Text: #FFFFFF โ rgba(255,255,255,0.40) โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ TYPOGRAPHY โ
+โ Font: Inter โ
+โ Countdown: 900 140px โ
+โ Heading: 800 24px โ
+โ Body: 400 16px โ
+โ Caption: 500 14px โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ SPACING โ
+โ Base: 4px โ
+โ Page: 24px โ
+โ Card: 16px โ
+โ Section: 40px โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ RADIUS โ
+โ Button: 9999px (pill) โ
+โ Card: 20px โ
+โ Badge: 8px โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ ANIMATION โ
+โ Fast: 200ms โ
+โ Normal: 300ms โ
+โ Breathing: 2000ms โ
+โ Easing: cubic in-out โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
+โ GLOW โ
+โ Brand: #F97316, 0.5 opacity, 40px radius โ
+โ White: #FFFFFF, 0.3 opacity, 16px radius โ
+โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+```
+
+---
+
+## 12. File Structure
+
+```
+src/shared/constants/
+โโโ colors.ts // All color tokens
+โโโ typography.ts // Type scale
+โโโ spacing.ts // Spacing scale
+โโโ borderRadius.ts // Radius tokens
+โโโ shadows.ts // Shadow & glow effects
+โโโ animations.ts // Animation presets
+โโโ icons.ts // Icon mappings
+โโโ layout.ts // Layout constants
+```
+
+---
+
+*Document crรฉรฉ le 18 fรฉvrier 2026 โ TabataGo Style Guide v1.0*
diff --git a/app/(tabs)/CLAUDE.md b/app/(tabs)/CLAUDE.md
index bd4937a..a16f225 100644
--- a/app/(tabs)/CLAUDE.md
+++ b/app/(tabs)/CLAUDE.md
@@ -12,21 +12,4 @@
| #5054 | " | โ
| Re-added Host import to home screen | ~184 |
| #5043 | 8:22 AM | โ
| Removed closing Host tag from profile screen | ~210 |
| #5042 | " | โ
| Removed opening Host tag from profile screen | ~164 |
-| #5041 | " | โ
| Removed closing Host tag from browse screen | ~187 |
-| #5040 | " | โ
| Removed opening Host tag from browse screen | ~159 |
-| #5039 | 8:21 AM | โ
| Removed closing Host tag from activity screen | ~193 |
-| #5038 | " | โ
| Removed opening Host tag from activity screen | ~154 |
-| #5037 | " | โ
| Removed closing Host tag from workouts screen | ~195 |
-| #5036 | " | โ
| Removed opening Host tag from workouts screen | ~164 |
-| #5035 | " | โ
| Removed closing Host tag from home screen JSX | ~197 |
-| #5034 | " | โ
| Removed Host wrapper from home screen JSX | ~139 |
-| #5031 | 8:19 AM | โ
| Removed Host import from profile screen | ~184 |
-| #5030 | " | โ
| Removed Host import from browse screen | ~190 |
-| #5029 | 8:18 AM | โ
| Removed Host import from activity screen | ~183 |
-| #5028 | " | โ
| Removed Host import from workouts screen | ~189 |
-| #5027 | " | โ
| Removed Host import from home screen index.tsx | ~180 |
-| #5024 | " | ๐ต | Activity screen properly wraps content with Host component | ~237 |
-| #5023 | " | ๐ต | Profile screen properly wraps content with Host component | ~246 |
-| #5022 | 8:14 AM | ๐ต | Browse screen properly wraps content with Host component | ~217 |
-| #5021 | " | ๐ต | Workouts screen properly wraps content with Host component | ~228 |
\ No newline at end of file
diff --git a/app/CLAUDE.md b/app/CLAUDE.md
index 537f2ea..45c9cc0 100644
--- a/app/CLAUDE.md
+++ b/app/CLAUDE.md
@@ -10,17 +10,35 @@
| #5001 | 9:35 AM | ๐ต | Host Wrapper Located at Root Layout Level | ~153 |
| #4964 | 9:23 AM | ๐ด | Added Host Wrapper to Root Layout | ~228 |
| #4963 | 9:22 AM | โ
| Root layout wraps Stack in View with pure black background | ~279 |
-| #4910 | 8:16 AM | ๐ฃ | Added Workout Detail and Complete Screen Routes | ~348 |
### Feb 20, 2026
| ID | Time | T | Title | Read |
|----|------|---|-------|------|
-| #5224 | 1:24 PM | โ
| Stage v1.1 files prepared for git commit - SwiftUI Button refactoring complete | ~434 |
+| #5391 | 10:20 PM | ๐ฃ | RevenueCat subscription system fully integrated and tested | ~656 |
+| #5384 | 9:28 PM | ๐ฃ | Implemented RevenueCat subscription system | ~190 |
+| #5360 | 7:49 PM | ๐ฃ | Restore Button Style Added to Paywall | ~143 |
+| #5359 | " | ๐ฃ | RevenueCat Purchase Flow Integrated in Paywall | ~273 |
+| #5358 | " | ๐ฃ | usePurchases Hook Imported in Onboarding | ~134 |
+| #5357 | " | ๐ฃ | RevenueCat Initialization Triggered After Store Hydration | ~176 |
+| #5356 | 7:48 PM | ๐ฃ | RevenueCat Initialization Added to Root Layout | ~157 |
+| #5313 | 2:58 PM | ๐ต | Onboarding flow architecture examined | ~482 |
+| #5279 | 2:43 PM | ๐ต | Reviewed onboarding.tsx structure for notification permission integration | ~289 |
+| #5268 | 2:27 PM | โ
| Onboarding Feature Text Simplified | ~151 |
+| #5230 | 1:25 PM | ๐ฃ | Implemented category and collection detail screens with Inter font loading | ~481 |
+| #5228 | " | ๐ | Removed v1 features and old scaffolding from TabataFit codebase | ~591 |
+| #5227 | 1:24 PM | โ
| Category and Collection screens staged for git commit | ~345 |
+| #5224 | " | โ
| Stage v1.1 files prepared for git commit - SwiftUI Button refactoring complete | ~434 |
| #5206 | 1:03 PM | โ๏ธ | SwiftUI component usage mandated for TabataFit app | ~349 |
| #5115 | 8:57 AM | ๐ต | Root Layout Stack Configuration with Screen Animations | ~256 |
| #5061 | 8:47 AM | ๐ต | Expo Router Tab Navigation Structure Found | ~196 |
| #5053 | 8:23 AM | โ
| Completed removal of all Host wrappers from application | ~255 |
| #5052 | " | โ
| Removed Host wrapper from root layout entirely | ~224 |
| #5019 | 8:13 AM | ๐ต | Root layout properly wraps Stack with Host component | ~198 |
+
+### Feb 21, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5551 | 12:02 AM | ๐ | Converted onboarding and player screens to theme system | ~261 |
\ No newline at end of file
diff --git a/app/collection/CLAUDE.md b/app/collection/CLAUDE.md
new file mode 100644
index 0000000..ac12a75
--- /dev/null
+++ b/app/collection/CLAUDE.md
@@ -0,0 +1,12 @@
+
+# Recent Activity
+
+
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5541 | 11:52 PM | ๐ | Converted 4 detail screens to use theme system | ~264 |
+| #5230 | 1:25 PM | ๐ฃ | Implemented category and collection detail screens with Inter font loading | ~481 |
+
\ No newline at end of file
diff --git a/app/player/CLAUDE.md b/app/player/CLAUDE.md
index ded1bfc..b002d39 100644
--- a/app/player/CLAUDE.md
+++ b/app/player/CLAUDE.md
@@ -9,4 +9,10 @@
|----|------|---|-------|------|
| #5000 | 9:35 AM | ๐ต | Reviewed Player Screen Implementation | ~522 |
| #4912 | 8:16 AM | ๐ต | Found doneButton component in player screen | ~104 |
+
+### Feb 21, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5551 | 12:02 AM | ๐ | Converted onboarding and player screens to theme system | ~261 |
\ No newline at end of file
diff --git a/app/workout/category/CLAUDE.md b/app/workout/category/CLAUDE.md
new file mode 100644
index 0000000..e749bd8
--- /dev/null
+++ b/app/workout/category/CLAUDE.md
@@ -0,0 +1,13 @@
+
+# Recent Activity
+
+
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5541 | 11:52 PM | ๐ | Converted 4 detail screens to use theme system | ~264 |
+| #5291 | 2:56 PM | ๐ต | Category detail screen implementation examined | ~305 |
+| #5230 | 1:25 PM | ๐ฃ | Implemented category and collection detail screens with Inter font loading | ~481 |
+
\ No newline at end of file
diff --git a/src/shared/components/CLAUDE.md b/src/shared/components/CLAUDE.md
index 1003e4f..763411a 100644
--- a/src/shared/components/CLAUDE.md
+++ b/src/shared/components/CLAUDE.md
@@ -8,4 +8,12 @@
| ID | Time | T | Title | Read |
|----|------|---|-------|------|
| #4889 | 4:46 PM | ๐ฃ | Created GlassCard component with iOS 18.4 inspired glassmorphism | ~174 |
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5300 | 2:56 PM | ๐ต | GlassCard component architecture examined | ~317 |
+| #5248 | 1:29 PM | ๐ต | StyledText component provides unified text styling | ~126 |
+| #5228 | 1:25 PM | ๐ | Removed v1 features and old scaffolding from TabataFit codebase | ~591 |
\ No newline at end of file
diff --git a/src/shared/constants/CLAUDE.md b/src/shared/constants/CLAUDE.md
index 430e808..f5ce674 100644
--- a/src/shared/constants/CLAUDE.md
+++ b/src/shared/constants/CLAUDE.md
@@ -12,8 +12,13 @@
| #4829 | " | ๐ต | Existing Animation Constants Reviewed | ~331 |
| #4828 | " | ๐ต | Color System Constants Review for BDSD Planning | ~412 |
| #4827 | " | ๐ต | Spacing Constants Implementation Review | ~254 |
-| #4826 | " | ๐ต | Shadow System Constants Reviewed | ~296 |
| #4825 | " | ๐ต | Typography Constants Implementation Verification | ~264 |
| #4779 | 1:21 PM | ๐ต | Typography System Constants Analysis | ~354 |
| #4778 | 1:20 PM | ๐ต | Design System Color Constants Analysis | ~392 |
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5242 | 1:29 PM | ๐ต | Design system constants barrel export reviewed | ~370 |
\ No newline at end of file
diff --git a/src/shared/data/CLAUDE.md b/src/shared/data/CLAUDE.md
new file mode 100644
index 0000000..5ef07fa
--- /dev/null
+++ b/src/shared/data/CLAUDE.md
@@ -0,0 +1,14 @@
+
+# Recent Activity
+
+
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5319 | 2:59 PM | ๐ต | Workout data structure details examined | ~355 |
+| #5315 | " | ๐ต | Data layer architecture examined | ~366 |
+| #5314 | " | ๐ต | Workout data structure examined | ~321 |
+| #5298 | 2:56 PM | ๐ต | Achievement system data structure examined | ~333 |
+
\ No newline at end of file
diff --git a/src/shared/hooks/CLAUDE.md b/src/shared/hooks/CLAUDE.md
new file mode 100644
index 0000000..30e8c0b
--- /dev/null
+++ b/src/shared/hooks/CLAUDE.md
@@ -0,0 +1,16 @@
+
+# Recent Activity
+
+
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5391 | 10:20 PM | ๐ฃ | RevenueCat subscription system fully integrated and tested | ~656 |
+| #5384 | 9:28 PM | ๐ฃ | Implemented RevenueCat subscription system | ~190 |
+| #5375 | 8:38 PM | ๐ฃ | RevenueCat Entitlement Check Fixed with Proper API Usage | ~261 |
+| #5355 | 7:48 PM | ๐ฃ | usePurchases Hook Exported from Shared Hooks | ~121 |
+| #5354 | 7:47 PM | ๐ฃ | RevenueCat Hook for Subscription Management | ~281 |
+| #5317 | 2:59 PM | ๐ต | Notification hook implementation examined | ~362 |
+
\ No newline at end of file
diff --git a/src/shared/stores/CLAUDE.md b/src/shared/stores/CLAUDE.md
index 525750a..adfdcb1 100644
--- a/src/shared/stores/CLAUDE.md
+++ b/src/shared/stores/CLAUDE.md
@@ -3,11 +3,5 @@
-### Feb 20, 2026
-
-| ID | Time | T | Title | Read |
-|----|------|---|-------|------|
-| #5177 | 11:54 AM | โ
| Exported getWeeklyActivity from stores index | ~158 |
-| #5171 | 11:53 AM | ๐ | Refactored activityStore to remove computed helpers from state | ~256 |
-| #5170 | " | ๐ต | Activity store implementation with persistence | ~220 |
+*No recent activity*
\ No newline at end of file
diff --git a/src/shared/types/CLAUDE.md b/src/shared/types/CLAUDE.md
new file mode 100644
index 0000000..2b0f698
--- /dev/null
+++ b/src/shared/types/CLAUDE.md
@@ -0,0 +1,12 @@
+
+# Recent Activity
+
+
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5391 | 10:20 PM | ๐ฃ | RevenueCat subscription system fully integrated and tested | ~656 |
+| #5384 | 9:28 PM | ๐ฃ | Implemented RevenueCat subscription system | ~190 |
+
\ No newline at end of file
diff --git a/src/shared/utils/CLAUDE.md b/src/shared/utils/CLAUDE.md
new file mode 100644
index 0000000..447f0c3
--- /dev/null
+++ b/src/shared/utils/CLAUDE.md
@@ -0,0 +1,12 @@
+
+# Recent Activity
+
+
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5228 | 1:25 PM | ๐ | Removed v1 features and old scaffolding from TabataFit codebase | ~591 |
+| #5224 | 1:24 PM | โ
| Stage v1.1 files prepared for git commit - SwiftUI Button refactoring complete | ~434 |
+
\ No newline at end of file