PROMPT FRONTEND — MyKollector® v5
===================================
Architecture : Fichiers statiques sur OVH mutualisé Pro (Apache)
Déploiement : FTP/SFTP — aucune compilation requise

Le document en annexe (07-MyKollectOr-FAB-COMPLETV05.docx) 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.

Les fichiers fournis en annexe complémentaire :
- mykollector_design-sombre.html  → charte graphique mode sombre (référence visuelle)
- mykollector_design-clair.html   → charte graphique mode clair (référence visuelle)
- qr.html                         → page QR FIXE (HTML/CSS ne doit PAS être modifié)
- font/                           → polices locales (Montserrat, Barlow Condensed, Cormorant Garamond)
- images/                         → assets visuels (logo, médaille, paysages)

---

MISSION
-------
Génère le frontend complet de MyKollector® en HTML / CSS / JavaScript vanilla.
Pas de framework (React, Vue…). Fichiers statiques déposés sur OVH mutualisé via FTP/SFTP.

DESIGN TOKENS IMPOSÉS
----------------------
  --gold      : #c8a84b
  --bg        : #070f18
  --text      : #f0ead8
  --bg-light  : #f5f7fa
  --text-light: #1a2638
  --ok        : #3ecf8e
  --warn      : #f0b429
  --live      : #eb5757

Police principale : Montserrat (fichiers locaux dans font/montserrat/).
Mode sombre : chrono + admin. Mode clair : fab.

CONFIGURATION API
-----------------
Dans shared/api.js :
  const BASE_URL = "https://api.mykollector.com";

Toutes les requêtes incluent : Authorization: Bearer <token JWT>
Le backend autorise CORS depuis chrono.mykollector.com et fab.mykollector.com.

STRUCTURE DE FICHIERS
---------------------
  frontend/
  ├── shared/
  │   ├── api.js
  │   └── auth.js
  ├── chrono/
  │   ├── index.html
  │   ├── qr/
  │   │   └── index.html      ← HTML/CSS du fichier qr.html fourni + JS ajouté
  │   ├── historique.html
  │   ├── saisie.html
  │   ├── strava.html
  │   └── profil.html
  ├── fab/
  │   ├── index.html
  │   └── admin.html
  ├── assets/
  │   ├── images/
  │   └── font/
  └── .htaccess

INTERFACES À GÉNÉRER
--------------------

1. chrono/index.html — Dashboard sportif
   - Bandeau d'alerte : médailles à valider
   - Cols achetés non réalisés
   - Carrousel des cols gravis (temps, date, statut commande)
   - Statistiques personnelles
   - Classements par parcours
   - Section validation gravure : nom/prénom, temps, date
   - Messages humoristiques aléatoires
   - Bouton "Modifier mon profil" → chrono/profil.html

2. chrono/qr/index.html — Page QR chrono
   RÈGLE ABSOLUE : reprendre exactement le HTML/CSS du fichier qr.html fourni.
   AJOUTER UNIQUEMENT le JavaScript :

   GÉOLOCALISATION ET ZONE D'APPROCHE (NOUVEAU) :
   - Lire le slug depuis l'URL (?p=slug-parcours)
   - Appeler GET /api/parcours/:slug → récupérer depart_lat, depart_lng, distance_approche_m
   - Démarrer navigator.geolocation.watchPosition() dès le chargement de la page
   - Calculer en temps réel la distance Haversine entre la position du sportif
     et le point depart_lat/depart_lng
   - Afficher un indicateur "📍 À Xm du départ" sous le nom du col pendant l'approche
   - Si distance > distance_approche_m : bouton PARTIR grisé + message
     "Approchez-vous du point de départ (encore Xm)"
   - Si distance <= distance_approche_m : bouton PARTIR actif, indicateur passe au vert
     "✅ Vous êtes au départ !"
   - Si GPS non disponible ou refusé → bouton PARTIR actif immédiatement (pas de blocage)
   - Si le parcours n'a pas de coordonnées GPS départ → bouton PARTIR actif immédiatement
   - La vérification GPS est silencieuse : pas de popup de permission agressive
   - Mettre à jour l'affichage de distance toutes les 3 secondes

   CHRONO :
   - Start / stop / pause du chrono (le chrono ne démarre QU'AU CLIC sur PARTIR)
   - WakeLock API (empêche la mise en veille pendant le chrono)
   - Mode hors-ligne (localStorage, sync au retour réseau)
   - Drum roller d'ajustement du temps (popup après ARRÊTER)
   - Popup de validation après ARRÊTER
   - Redirection dashboard après validation

3. chrono/saisie.html — Saisie manuelle
   Formulaire : sélection parcours, date, temps HH:MM:SS.

4. chrono/historique.html — Historique chronos
   Liste paginée, filtres par parcours/statut/date.

5. chrono/strava.html — Intégration Strava
   État connexion, bouton connect/disconnect, activités détectées.

6. chrono/profil.html — Profil sportif
   Modification nom/prénom (PATCH /api/user/profil).
   Message : "Ces informations seront gravées sur vos futures médailles."

7. fab/index.html — Interface fabricant (onglets)

   Onglet Gravure :
   - Tableau commandes par parcours : colonnes PEC / TERM / EXP
   - Badge "B2B" distinctif (couleur --gold) sur les commandes B2B (mairies/boutiques)
     Les commandes B2B n'ont pas de chrono associé — afficher "—" dans la colonne temps
   - Bouton "Créer un lot" → regroupe les commandes sélectionnées
   - Liste des lots avec statut affiché en temps réel (polling backend toutes les 5s) :
     * "En attente de génération" → badge gris
     * "Généré" → badge bleu (fichier DXF prêt sur le PC fabricant)
     * "En gravure" → badge orange (pris en charge par l'opérateur)
     * "Gravé" → badge vert
   - Deux boutons d'export sur chaque lot :
     * 📄 "Exporter CSV" → GET /api/lots/:id/csv → téléchargement immédiat
     * ⚙️ "Générer DXF" → déclenché par l'agent local
   - Bouton "Prendre en charge" sur un lot :
     * PATCH /api/lots/:id/statut { "statut": "en_gravure" }
     * Confirmation popup : "Toutes les commandes du lot passeront en 'En cours de gravage' sur PrestaShop."
   - Bouton "Marquer comme gravé" sur un lot "En gravure" :
     * PATCH /api/lots/:id/statut { "statut": "gravé" }

   Onglet Expédition :
   - Liste commandes au statut "gravé"
   - Badge "B2B" sur les commandes B2B
   - Choix transporteur + format étiquette
   - Statut étiquette : "En attente agent" → "Générée" (polling 5s)
   - Numéro de suivi affiché une fois l'étiquette générée
   - Bouton "Marquer comme expédié" :
     * PATCH /api/commandes/:id/statut { "statut": "expédié", "numero_suivi": "..." }

   Onglet SAV Express :
   - Recherche par numéro commande / nom sportif
   - Formulaire ticket SAV

   Onglet Défauts :
   - Signalement défaut avec photo (upload)

   Onglet Rapports :
   - Export CSV généré côté client en JS

   Chat popup (toutes les interfaces fab) :
   - Polling toutes les 5s
   - Pièces jointes images/PDF max 5 Mo

8. fab/admin.html — Console super admin
   Menu latéral :
   - Dashboard : stats live
   - Logs & Audit : journal avec filtres
   - Parcours : CRUD complet — FORMULAIRE PARCOURS COMPLET :
     * Informations générales : nom, slug, catégorie, altitude, distance, dénivelé, difficulté, sous-titre, description
     * Coordonnées GPS : sommet (lat, lng), départ (lat, lng), rayon de détection Strava (km)
     * Distance d'approche QR (NOUVEAU) : champ numérique "Distance d'approche départ (mètres)"
       Valeur par défaut : 500. Texte d'aide : "Distance en mètres à partir de laquelle le bouton
       PARTIR s'active sur la page QR. Réduire si le départ est difficile d'accès (ex: 200m),
       augmenter pour une zone plus large (ex: 1000m). Mettre 0 pour désactiver."
     * Mots-clés Strava
     * Activation / désactivation + message
     * Sync PrestaShop : bouton "Créer/mettre à jour dans PrestaShop"
     * Export vers autres plateformes (NOUVEAU) : bouton "Exporter vers..." → popup de sélection
       des destinations actives (liste des export_destinations) avec cases à cocher
       → POST /api/parcours/:id/export { "destination_ids": [...] }
       → afficher les résultats (ok/erreur par destination)
     * Génération QR
   - Templates gravure : upload DXF, placeholders, espacement, max par batch
   - Templates étiquettes : upload HTML, transporteur, format papier
   - Utilisateurs : CRUD, rôles, ateliers, fabricants
   - Modules : toggle Strava / PrestaShop, clés API
   - SMTP : configuration email
   - Seuils relance : délais de rappel sportifs
   - Destinations d'export (NOUVEAU) :
     * Liste des destinations (nom, type, url, actif)
     * Formulaire ajout/édition : nom, type (webhook/prestashop/interne/autre), URL, headers JSON, description, actif
     * Bouton "Tester" → envoie une requête de test vers la destination
   - Backups : liste et déclenchement manuel
   - Maintenance : mode on/off
   - Agent local : lien de téléchargement .exe + statut par atelier

STATUTS — COULEURS ET LABELS
------------------------------
  en_attente_generation → badge gris    → "En attente de génération"
  généré                → badge bleu    → "Fichier prêt"
  en_gravure            → badge orange  → "En cours de gravage"
  gravé                 → badge vert    → "Gravé"
  en_expedition         → badge violet  → "En cours d'expédition"
  expédié               → badge noir    → "Expédié"
  b2b                   → badge gold    → "B2B" (badge additionnel, pas un statut)

RÈGLES GÉNÉRALES
----------------
- Toutes les requêtes via shared/api.js (JWT Authorization header)
- Token JWT en localStorage, vérifié à chaque chargement
- Non connecté → redirection login
- Gestion erreurs : afficher le champ "message" de l'API
- Responsive mobile first (qr/ priorité absolue)
- Pas de dépendance externe sauf polices locales + Lucide Icons CDN
- Popups de confirmation pour toutes les actions irréversibles

LIVRABLES
---------
- Tous les fichiers HTML / CSS / JS
- shared/api.js avec BASE_URL et gestion JWT
- shared/auth.js avec vérification session
- .htaccess (HTTPS forcé, CORS fonts)
- README_DEPLOIEMENT_FRONTEND.md : instructions FTP OVH mutualisé
