PROMPT FRONTEND — MyKollector®
================================

Le document en annexe est la documentation technique complète de la plateforme MyKollector®.
Utilise-le comme référence unique et exhaustive. Ne complète pas avec des suppositions.

---

MISSION
-------
Génère le frontend complet de MyKollector® en HTML / CSS / JavaScript vanilla.
Pas de framework (React, Vue…). Fichiers statiques servis par Nginx.

DESIGN TOKENS IMPOSÉS (section 3 du document)
----------------------------------------------
  --gold    : #c8a84b   (accents, boutons)
  --bg      : #070f18   (fond sombre)
  --text    : #f0ead8   (texte sombre)
  --bg-light: #f5f7fa   (fond clair)
  --text-light: #1a2638 (texte clair)
  --ok      : #3ecf8e
  --live    : #eb5757
  --warn    : #f0b429

Police : Montserrat (Google Fonts), poids 300 à 900.
Mode sombre : chrono + api. Mode clair : fab.

STRUCTURE DE FICHIERS ATTENDUE
-------------------------------
  frontend/
  ├── shared/
  │   └── api.js              ← client HTTP centralisé (fetch + JWT)
  ├── chrono/
  │   ├── index.html          ← dashboard sportif
  │   ├── qr.html             ← page chrono mobile (règle spéciale, voir ci-dessous)
  │   ├── historique.html
  │   ├── saisie.html
  │   └── strava.html
  ├── fab/
  │   └── index.html          ← interface fabricant complète (onglets)
  └── api/
      └── index.html          ← console super admin

INTERFACES À GÉNÉRER (wireframes en section 22 du document)
------------------------------------------------------------
1. chrono/index.html  — Dashboard sportif : 5 zones (médailles à valider,
   cols achetés non réalisés, cols gravis carrousel, statistiques,
   classement, validation finale gravure). Messages humoristiques aléatoires.

2. chrono/qr.html — RÈGLE SPÉCIALE : le design HTML/CSS est FIXE et ne doit PAS
   être modifié. Ajouter UNIQUEMENT le JavaScript pour :
   start / stop / pause du chrono, WakeLock API, mode hors-ligne, drum roller
   d'ajustement, popup de validation, redirection vers le dashboard.

3. chrono/saisie.html — Formulaire saisie manuelle du chrono (col, date, temps).

4. chrono/historique.html — Liste de tous les chronos du sportif avec filtres.

5. chrono/strava.html — Connexion OAuth Strava, liste activités, import manuel.

6. fab/index.html — Interface fabricant avec onglets :
   Gravure (tableau par parcours : PEC / TERM / EXP), Expédition (choix
   transporteur + format), SAV Express (recherche + formulaire), Défauts,
   Rapports. Chat en popup. Vues opérateur / admin_fab / super_admin selon rôle.

7. api/index.html — Console admin : menu latéral, stats live, logs avec filtres,
   CRUD parcours (avec coordonnées GPS + sync PrestaShop + génération QR),
   gestion templates gravure et étiquettes, utilisateurs, modules, backups,
   seuils de relance, config SMTP, maintenance mode.

RÈGLES GÉNÉRALES
----------------
- Toutes les requêtes API passent par shared/api.js (JWT dans header Authorization)
- Gestion des erreurs : afficher le champ "message" retourné par l'API
- Responsive mobile first (qr.html en priorité)
- Pas de dépendance externe autre que Google Fonts et une lib d'icônes légère (ex: Lucide CDN)
- Les popups de confirmation sont décrits dans les wireframes (section 22) : les respecter

LIVRABLES
---------
- Tous les fichiers HTML / CSS / JS fonctionnels
- shared/api.js avec gestion du token JWT (stockage localStorage, refresh, logout)
- Chaque page gère l'état non connecté → redirection vers login
