# 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
<BlurView intensity={40} tint="dark">
  {/* Round indicators */}
  {/* Pause / Stop / Skip buttons */}
</BlurView>
```

**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
<Pressable
  accessibilityLabel="Démarrer la séance"
  accessibilityHint="Double-tap pour commencer"
  accessibilityRole="button"
>
```

---

## 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*
