# Plan d’implémentation — TuniDrug

## Périmètre
TuniDrug est une vitrine e-commerce statique pour un drugstore en Tunisie. Le visiteur explore des produits par catégories, recherche et filtre le catalogue, ajoute des articles au panier et passe une commande locale. L’administrateur travaille dans un espace dédié pour ajouter, modifier et supprimer des produits et consulter les commandes.

## Décisions techniques
- **Stack** : HTML sémantique, CSS sans framework et JavaScript ES modules-free pour rester portable.
- **Données initiales** : `data/products.json`, chargé au démarrage.
- **Persistance** : `localStorage` uniquement pour le catalogue modifié, le panier et les commandes ; aucune base de données ni API métier.
- **Serveur local** : un petit serveur statique Python est utilisé pour servir le JSON et l’interface.
- **Administration** : accès local de démonstration via le code `TUNI-ADMIN`. Ce mécanisme n’est pas une sécurité de production ; une authentification serveur serait nécessaire pour un usage réel.
- **Commande** : création d’un numéro de commande local, coordonnées client, articles, totaux et statut.

## Design
- **Mouvement** : pharmacie contemporaine / editorial retail, avec une interface lumineuse, calme et très lisible.
- **Principes** : confiance clinique, hiérarchie nette, chaleur locale, actions toujours visibles.
- **Palette** : vert menthe pour la santé et la fraîcheur, bleu nuit pour la confiance, corail discret pour les prix et l’urgence commerciale, crème en fond pour éviter l’effet clinique froid.
- **Paradigme de mise en page** : grande introduction asymétrique puis catalogue en rails horizontaux de catégories et grille fluide ; le panier est un panneau latéral persistant.
- **Éléments signature** : halo organique autour du hero, pastilles de catégorie, cartes produits avec mini-étiquettes “Conseil pharmacien”.
- **Interactions** : filtres instantanés, feedback toast, quantités éditables dans le panier et panneau admin qui conserve le contexte de navigation.
- **Animation** : apparitions courtes en fondu/translation, micro-interactions de survol, aucun mouvement décoratif permanent qui nuirait à la lecture.
- **Typographie** : `Plus Jakarta Sans` pour le texte et `DM Serif Display` pour les grands titres, avec fallback système hors connexion.
- **Essence** : le drugstore tunisien simple et rassurant, pensé pour choisir vite les essentiels du quotidien. Adjectifs : fiable, frais, attentionné.
- **Voix** : directe, chaleureuse, locale. Exemples : “Les essentiels, sans détour.” / “Votre commande est bien enregistrée.”
- **Logotype** : mot-symbole TuniDrug accompagné d’une croix arrondie et d’une petite feuille, dessiné en SVG inline.
- **Couleur propriétaire** : menthe `#28B89A`.

## Structure
- `index.html` : shell de l’application, vues boutique/admin, modales et panneaux.
- `styles.css` : tokens visuels, responsive layout, composants, états.
- `app.js` : état global, rendu, interactions boutique, panier, commande et administration.
- `data/products.json` : seed de catalogue tunisien.
- `public/manus-routes.json` : manifeste de route de la page statique.
- `README.md` : lancement local et limites de la persistance JSON/localStorage.

## Mise à jour — images et accès admin

Chaque produit possède maintenant un visuel SVG local dans `public/products/`, référencé par le champ `image` du JSON et utilisé dans la boutique, le panier et le tableau admin. Les produits ajoutés depuis l’espace admin peuvent fournir un chemin ou une URL d’image, avec `public/products/custom.svg` comme fallback. L’accès local de démonstration utilise désormais le nom d’utilisateur `admin` et le mot de passe `ADMIN`; cette vérification reste côté navigateur et ne remplace pas une authentification serveur de production.

## Mise à jour — modèle grossiste B2B

L’interface est orientée vers un grossiste qui vend aux drugstores : tarifs grossistes, bon de commande, informations de société/drugstore et adresse de point de vente. Dans l’administration, chaque bon de commande dispose d’un bouton **Voir les articles** ouvrant un détail avec les images, références, quantités, prix unitaires, sous-total, livraison, total et coordonnées de livraison.

## Mise à jour — photos produit

Le formulaire produit propose deux entrées adaptées au mobile : sélection depuis la galerie et prise de vue via l’appareil photo. Chaque fichier image est contrôlé, recadré au centre au format carré, redimensionné jusqu’à 640 × 640 px puis ré-encodé en JPEG avec une cible d’environ 240 Ko avant son enregistrement dans le `localStorage`. Une vignette et les dimensions/poids estimés sont affichés avant l’enregistrement du produit.