# Prompt p02 — Login Mobile (React Native + Expo SDK 54)
*Contextes requis : ctx-global.md + ctx-mobile-expo.md + ctx-laravel-bff.md*

---

## Profil & Accès
- **Qui** : Gérant Station, Pompiste, Chauffeur (profils terrain mobile)
- **Auth** : Numéro employé 5 chiffres + PIN 6 chiffres + OTP SMS (systématique)

## Fichiers à créer
```
app/(auth)/splash.tsx
app/(auth)/login.tsx
app/(auth)/otp.tsx
components/PinInput.tsx
components/OtpInput.tsx
```

## Spec UX condensée

### Splash (2 secondes)
```
Fond navy (#1A2157)
Logo FlowUp centré (blanc)
"FEBI ITC SA" sous le logo (text-white/70)
Barre de progression fine cyan (#00C8C0) en bas
→ Auto-redirect vers login ou dashboard (si token valide SecureStore)
```

### Login
```
Fond blanc ou gray-50
Header navy avec "FlowUp Mobile"

Étape 1 : Numéro employé
  Label "N° Employé"
  Input numérique 5 chiffres (keyboard type numeric)
  → Valide → charge prénom depuis BFF

Étape 2 : PIN (après validation n° employé)
  "Bonjour, [Prénom] !"
  6 cases PIN masquées (PinInput)
  Haptic à chaque chiffre
  Auto-soumission à 6 chiffres

[Connexion] en bas (fullWidth, bg-blue)

Indicateur offline (banner jaune) si pas de réseau
```

### OTP SMS (après PIN validé)
```
Fond blanc
"Code OTP envoyé au +224 6XX XX XX XX"
6 cases OTP (OtpInput) ← numérique, auto-avance
Timer : "Renvoyer dans 58s" → devient bouton à 0s
Auto-soumission à 6 chiffres
[Valider] en bas

Erreur : message rouge sous les cases ("Code incorrect")
Expiration : "Code expiré — renvoyez un nouveau code"
```

## Endpoints BFF
```
GET  /api/auth/mobile/employee-check?id=12345
  Réponse : { nom, prenom, role, station_id, phone_masked }

POST /api/auth/mobile/login
  Body : { employee_id, pin }
  Réponse : { session_id, otp_required: true, phone_masked }
  Réponse 401 : identifiants incorrects

POST /api/auth/mobile/otp-verify
  Body : { session_id, code }
  Réponse : { token, user: { id, nom, prenom, role, station_id } }

POST /api/auth/mobile/otp-resend
  Body : { session_id }
```

## Stockage token
```typescript
import * as SecureStore from 'expo-secure-store';
await SecureStore.setItemAsync('flowup_token', token);
await SecureStore.setItemAsync('flowup_user', JSON.stringify(user));
// Session expire après 8h côté BFF
```

## Règles spécifiques
- RGMO-01 : Splash → check token SecureStore → dashboard si valide (évite re-login)
- RGMO-02 : OTP systématique — même si token valide mais session expirée
- RGMO-03 : PIN jamais stocké localement (ni SecureStore)
- RGMO-04 : Blocage 3 tentatives PIN → SMS CEO + message "Compte bloqué"
- RGMO-05 : Mode offline → splash banner "Mode hors ligne — données mises en cache"
- RGMO-06 : Forcer light mode (pas de dark mode v1)
- RGMO-07 : Keyboard s'ouvre automatiquement sur champ numéro employé

## Tâche Claude
Génère les 3 écrans d'authentification mobile FlowUp en React Native + Expo SDK 54 TypeScript :
1. `app/(auth)/splash.tsx` — écran splash 2s avec animation barre cyan
2. `app/(auth)/login.tsx` — numéro employé + PIN 6 cases
3. `app/(auth)/otp.tsx` — 6 cases OTP + timer 60s + renvoi
4. `components/PinInput.tsx` — 6 cases masquées avec haptic
5. `components/OtpInput.tsx` — 6 cases OTP numériques

Utiliser les couleurs Colors.navy, Colors.blue, Colors.cyan du thème.
Navigation via Expo Router (router.replace pour éviter back vers login après auth).