╔══════════════════════════════════════════════════════════════════════════════╗
║  MYKOLLECTOR® — PROMPT PHASE 3 : FRONTEND CHRONO                           ║
║  À utiliser avec : MKO_CHRONO.docx + token design                          ║
╚══════════════════════════════════════════════════════════════════════════════╝

## CONTEXTE

Tu vas générer les pages manquantes de chrono.mykollector.com. La PWA chrono
(chrono.html = qr.html) existe déjà en production — NE PAS LA TOUCHER.
Tu génères uniquement les nouvelles pages listées ci-dessous.

## CONTRAINTES TECHNIQUES ABSOLUES

- Stack : HTML5 / CSS3 / JS vanilla — zéro framework JS — zéro dépendance externe
- Design : dark mode — fond #070F18 — accent or #C8A84B — texte #F0EAD8
- Police : Montserrat — fichiers locaux dans font/montserrat/ — PAS de CDN Google
- Police chrono : Courier New pour les affichages de temps
- Auth : JWT stocké en localStorage (key: mko_token + mko_refresh_token)
- API : https://api.mykollector.com
- Mobile first — portrait uniquement
- PWA : manifest.json et sw.js déjà en production — NE PAS MODIFIER

## TOKENS DESIGN (depuis le fichier token design fourni)

Utiliser exactement les variables CSS du token design fourni.
Les couleurs, espacements, rayons, ombres doivent correspondre au design system.

## FICHIERS À GÉNÉRER

### 1. dashboard.html — Dashboard sportif

Page principale du sportif après son parcours.
Auth requise — si JWT absent : redirect vers chrono.html?redirect=dashboard

Sections à implémenter (voir wireframes MKO_CHRONO.docx §6) :

A) Header
- Logo MKO + "Bonjour [PRENOM]" + bouton ⚙️ Profil
- Badge notifications si non-lus

B) Mes cols gravis
- Liste des chronos validés par parcours
- Pour chaque col : nom, meilleur temps, date, badge "⚡ Confirmé Strava" si applicable
- Statut médaille inline : [Commander] / [En préparation] / [En gravure 🔨] / [Expédiée 📦 + tracking] / [Livrée 🏅]
- Clic sur un col → vue détail (voir section C)

C) Vue détail col
- Meilleur temps mis en valeur
- Tous mes chronos sur ce col (liste)
- Ma médaille (commande liée + statut + numéro suivi si expédiée)
- Bouton [Refaire ce col → Nouveau chrono]

D) Mon classement
- Position par parcours + total participants
- Tableau top 10 visible

E) Strava
- Si connecté : badge ⚡ + nb activités importées + [Voir mes activités] + [Déconnecter]
- Si non connecté : [Connecter Strava]
- Alertes score insuffisant (0.50-0.74) : message + [IMPORTER MANUELLEMENT] + [Ignorer]

F) Boutons bas de page
- [Nouveau chrono +] → redirect chrono.html
- [Déconnexion]

Endpoints utilisés :
- GET /api/auth/me
- GET /api/chrono/history
- GET /api/commandes/mes
- GET /api/classements/mes
- GET /api/strava/activites
- GET /api/strava/alertes
- POST /api/strava/import/:id
- DELETE /api/strava/disconnect

### 2. boutique.html — Redirection boutique

Page de redirection vers shop.mykollector.com.
Lit le paramètre ?p= dans l'URL pour rediriger vers le bon produit.

URLs de redirection par parcours :
- izoard → https://shop.mykollector.com/fr/medaille-izoard
- ventoux → https://shop.mykollector.com/fr/medaille-ventoux
- alpe-huez → https://shop.mykollector.com/fr/medaille-alpe-huez
- default → https://shop.mykollector.com

Afficher un spinner pendant 1s avant redirection.

### 3. strava.html — Callback OAuth2 Strava

Page affichée après autorisation Strava OAuth2.
Lit ?code= et ?state= depuis l'URL.

Flux :
1. Afficher spinner "Connexion Strava en cours..."
2. Appeler GET /api/strava/callback?code=CODE&state=USER_ID
3. Si succès → afficher "✅ Strava connecté !" + bouton [Retour dashboard]
4. Si erreur → afficher "❌ Erreur connexion Strava" + bouton [Réessayer] + [Retour dashboard]

### 4. profil.html — Page profil sportif

Permet au sportif de modifier ses informations.

Sections :
A) Informations personnelles
- Champs Prénom + Nom (modifiables)
- ALERTE VISIBLE avant sauvegarde : "⚠️ Votre nom sera gravé sur votre médaille — vérifiez l'orthographe !"
- Email : affiché non modifiable
- Bouton [Enregistrer]

B) Mot de passe
- Ancien mot de passe + nouveau + confirmation
- Bouton [Changer mon mot de passe]

C) Strava (même widget que dashboard section E)

D) Mes données (RGPD)
- [Télécharger mes données] → GET /api/user/export
- [Supprimer mon compte] → modale DOUBLE CONFIRMATION : texte 'SUPPRIMER MON COMPTE' à taper + case à cocher explicite → DELETE /api/user/data avec { confirmation, case_cochee: true }

Endpoints utilisés :
- GET /api/auth/me
- PATCH /api/user/profil
- GET /api/user/export
- DELETE /api/user/data

## RÈGLES UX IMPORTANTES

- Tous les appels API doivent avoir un état de chargement (spinner)
- Gestion d'erreur visible pour chaque appel API échoué
- JWT expiré → appeler POST /api/auth/refresh automatiquement
- Si refresh échoue → effacer localStorage → redirect vers chrono.html
- Les temps s'affichent toujours en format H'MM"SS (ex: 3'12"42)
- Les dates s'affichent en format JJ/MM/AAAA
- WakeLock actif sur dashboard (écran ne s'éteint pas)
- Orientation portrait uniquement — afficher overlay si paysage

## SPLASH SCREEN (index.html — déjà en production)

NE PAS MODIFIER index.html.
Vérifier uniquement qu'il référence bien dashboard.html, boutique.html et strava.html
dans ses liens de navigation post-installation PWA.

## FORMAT DE LIVRAISON ATTENDU

Livrer :
- dashboard.html (page principale sportif)
- boutique.html (redirection boutique)
- strava.html (callback OAuth2)
- profil.html (profil + RGPD)
- css/dashboard.css (styles communs aux nouvelles pages)
- js/api.js (wrapper fetch API — gestion JWT + refresh automatique)
- js/auth.js (login, logout, vérification JWT)

Chaque fichier HTML doit être autonome et fonctionnel.
Tester mentalement chaque flux contre les wireframes de MKO_CHRONO.docx avant de livrer.
