# Charte « Épurée » — déclinaison neutre du POS

Itération de la charte « Kiosque » en réponse au retour : *« trop coloré »*.
Principe fondateur : **le chrome est neutre ; la couleur appartient aux produits et aux signaux.**

## Philosophie

L'interface s'efface pour laisser respirer la donnée et les produits. Tout le chrome
(barres, boutons, cartes, pavé) est en **blancs / gris chauds / encre noire**. La couleur
n'apparaît qu'à deux endroits :

1. **Les visuels produits** (photos / tuiles) — c'est la vraie couleur de la boutique.
2. **Les micro-signaux sémantiques** — un petit point ou un court texte coloré, jamais un bloc.

L'élévation se fait par des **ombres douces**, pas par des bordures ni des aplats colorés.

## Tokens

### Neutres — clair
| Token | Hex | Rôle |
|-------|-----|------|
| `bg` | `#F4F4F2` | Fond app (gris très clair chaud) |
| `surface` | `#FFFFFF` | Cartes flottantes |
| `ink` | `#16150F` | Texte / CTA (presque noir chaud) |
| `ink-soft` | `#6E6B60` | Texte secondaire |
| `ink-faint` | `#A8A498` | Placeholders / tertiaire |
| `line` | `#E8E6DF` | Cheveux de séparation (rare) |

### Neutres — sombre
| Token | Hex | Rôle |
|-------|-----|------|
| `bg-d` | `#16150F` | Fond app |
| `surface-d` | `#201E17` | Cartes |
| `ink-d` | `#F4F3EE` | Texte / CTA (clair) |
| `ink-soft-d` | `#9B978A` | Secondaire |
| `line-d` | `#2C2A22` | Séparateurs |

### Couleurs = signaux uniquement (micro-usage)
| Token | Hex | Rôle |
|-------|-----|------|
| `good` | `#2E9E62` | Encaissé / succès — point ou texte |
| `bad` | `#D6453D` | Erreur — micro-signal |
| `warn` | `#D98A2B` | Alerte — micro-signal |

**CTA primaire = vert action `#1F9D55`** (« encaisser / argent », intuitif), avec ombre portée verte. Le FAB (« ajouter ») reprend le même vert pour cohérence. Les actions destructrices utilisent un contour rouge `#D6453D`.

### Feedbacks visuels intuitifs
- **Succès / encaissé** : vert `#1F9D55` — anneau de confirmation, CTA, point + texte.
- **Erreur / suppression** : rouge `#D6453D` — micro-signal ou bouton contour.
- **Alerte / stock faible** : ocre `#D98A2B` — micro-signal.
- **Pavé** : touche pressée = léger enfoncement (scale .96) + fond grisé ; la touche ⌫ vire au rouge au contact.
- **Montants ronds** : chip sélectionnée = fond vert + ombre.

### Ombres (échelle d'élévation)
- `sh-1` `0 1px 2px rgba(27,26,20,.05)` — touches, chips, petites surfaces
- `sh-2` `0 2px 6px … , 0 12px 28px …` — cartes, tab bar flottante
- `sh-3` `0 4px 12px … , 0 24px 56px …` — anneau de confirmation, éléments héros
- `sh-cta` `0 8px 20px rgba(27,26,20,.22)` — bouton principal encre

## Règles

- Aucune couleur de marque sur le chrome. Le vert/terracotta de « Kiosque » disparaissent de l'UI.
- Chaque statut coloré = point (8 px) + libellé, jamais un badge plein.
- Boutons : encre pleine (primaire) ou contour fin (ghost). Pas de bouton coloré.
- Tab bar et cartes flottent par l'ombre, sans bordure.
- Typographie inchangée : Inter, chiffres tabulaires, montants héros.

## Différence avec « Kiosque »
| Aspect | Kiosque | Épurée |
|--------|---------|--------|
| Primaire | Vert-émeraude #0E7A5F | Encre #16150F |
| CTA | Vert plein | Noir/encre |
| Badges statut | Pleins colorés | Micro-points + texte |
| Tab bar | Surface + bordure | Flottante (ombre) |
| Couleur produits | Teal accent | Vraies couleurs des photos |


## Thème sombre — vert profond dérivé du logo

Le sombre n'est pas un gris neutre : ses surfaces sont des **désaturations sombres du teal de marque `#118F9C`**, ce qui garde l'identité BoutiK reconnaissable de nuit.

### Tokens sombres

| Token | Hex | Rôle |
|-------|-----|------|
| `bg` | `#07211F` | Fond app — vert-teal très sombre |
| `surface` | `#0C2E2C` | Cartes, champs, tab bar |
| `surface-2` | `#123B38` | Surfaces surélevées (segment actif, stepper) |
| `line` | `#164340` | Séparateurs |
| `ink` | `#E8F4F2` | Texte principal (teinte froide) |
| `ink-soft` | `#8FB3AF` | Texte secondaire |
| `ink-faint` | `#5C807D` | Placeholders |
| `teal` | `#37C2CE` | Teal du logo **éclairci** — CTA, focus, liens, actif |
| `coral` | `#F08A76` | Coral du logo **éclairci** — erreurs, alertes stock |
| `good` | `#3FD08C` | Succès, robustesse du PIN |

### Règles

- **Éclaircir les couleurs de marque** : `#118F9C` → `#37C2CE` et `#C85A4A` → `#F08A76` pour rester au-dessus de 4,5:1 sur fond sombre.
- **CTA teal plein avec texte sombre** (`#04201F`) : contraste maximal, l'action reste le point le plus lumineux de l'écran.
- **Châssis du téléphone** en `#0A2624` avec un liseré teal à 14 % : détache la maquette sans halo blanc.
- **Jamais de noir pur** ni de gris neutre — toujours la famille verte.
- **Les photos produits restent la seule vraie couleur** ; le sombre les fait d'autant plus ressortir.
- **Pages de présentation en clair** : seul l'intérieur des téléphones (`.scr`) passe en sombre.

## Règle de production des maquettes

À partir de maintenant, **toute maquette est produite en thème clair ET en thème sombre**, présentés côte à côte sur la même page.

### Mise en œuvre

Un seul fichier CSS porte les deux thèmes via deux classes appliquées à l'écran du téléphone :

- `.scr.light` — tokens clairs (fond `#F4F4F2`, teal `#118F9C`)
- `.scr.dark` — tokens sombres (fond `#07211F`, teal éclairci `#37C2CE`)

Le balisage de l'écran est **strictement identique** entre les deux ; seule la classe change. Toutes les couleurs passent par des variables CSS, aucune valeur en dur dans le HTML — c'est ce qui permet de dupliquer un écran sans le réécrire.

La page de présentation (fond, titres, navigation entre étapes) **reste toujours claire** : le sombre ne concerne que l'intérieur des téléphones.

### Flux de caisse

Le parcours complet vit dans `caisse/` :

| Écran | Fichier | Contenu |
|---|---|---|
| 1 · Catalogue | `01-catalogue.html` | Recherche nom/catégorie, filtres + « Tout », cards à image dominante (prix, stock), barre « Créer le panier » à la sélection |
| 2 · Panier | `02-panier.html` | Quantité − / + / saisie, checkbox prix en gros et remise en affichage conditionnel, remise chiffrée, « Valider le panier » |
| 3 · Validation | `03-validation.html` | Numéro et nom du client, montant remis obligatoire, aperçu facture avec monnaie à rendre, « Valider la vente » |
| 4 · Vente effectuée | `04-succes.html` | Anneau vert, montant encaissé, récapitulatif, actions imprimer / partager / nouvelle vente |

### Écrans de gestion

Le pôle boutiques et inventaire vit dans `gestion/` :

| Écran | Fichier | Contenu |
|---|---|---|
| 1 · Mes boutiques | `01-boutiques.html` | Boutique courante mise en avant avec ses stats, principale et secondaires. Plan **Free** : secondaires verrouillées, ajout renvoyant vers l'abonnement. Variante **Premium** : tout déverrouillé |
| 2 · Stock | `02-stock.html` | Onglets **Produits** (nom, catégorie, recherche par nom, enregistrement) et **Approvisionnements** (historique daté, cliquable vers le détail, enregistrement) |
| 3 · Créer un produit | `03-produit.html` | Photo, nom, catégorie. Suggestions des catégories connues ; si la saisie ne correspond à rien, création de la catégorie proposée à la volée. Annuler / Créer |
| 4 · Approvisionnement | `04-approvisionnement.html` | Produits cochables avec recherche nom ou catégorie, puis modal quantité, prix d'achat et **calcul bidirectionnel pourcentage ↔ prix de vente** avec marge affichée |

#### Conventions retenues

- **Statuts de boutique** en pastilles courtes : `Courante` (teal plein), `Principale` (teal doux), `Secondaire` (neutre), `Abonnement requis` (ocre).
- **Verrouillage** rendu par l'opacité réduite plus une icône cadenas — jamais par la seule couleur.
- **Calcul bidirectionnel** : le champ en focus porte le liseré teal, l'autre se met à jour. Une flèche double entre les deux dit explicitement que la relation joue dans les deux sens.
- **Marge** rappelée sous les deux champs, en unitaire et en total, pour que le commerçant valide en connaissance de cause.

### Ventes & Plus

Le suivi et les réglages vivent dans `ventes/` :

| Écran | Fichier | Contenu |
|---|---|---|
| 1 · Ventes | `01-ventes.html` | Filtres **statut** (tous, en attente, soldé, crédit) et **période** (aujourd'hui, 7 j, 30 j, année, tout), total de la période, liste groupée par jour avec client, numéro et montant, bouton **Annuler** sur les ventes en attente |
| 2 · Plus | `02-plus.html` | **Boutique** : informations, tableau de bord, rapport, clients. **Paramètres** : réglages, bascule de thème, notifications. **Compte** : abonnement, mon profil, changer de PIN. Puis **déconnexion** |

#### Conventions retenues

- **Statuts de vente** codés par une pastille colorée doublée d'un libellé : en attente en ocre, soldé en vert, crédit en corail. Les initiales du client reprennent la même teinte.
- **Client absent** rendu par « Client de passage » en gris avec un tiret à la place des initiales — la ligne reste lisible sans nom.
- **Bouton Annuler** en contour corail, jamais en aplat : l'action destructrice est visible sans dominer la carte.
- **Crédit** affiche le reste dû directement dans la pastille.
- **Bascule de thème** : l'interrupteur reflète l'état réel de chaque téléphone, éteint côté clair et allumé côté sombre.

### Sous-menus du Menu

Ces écrans ont été établis par **lecture du code réel** de boutikV2 (sous-agents en lecture seule sur `menu_page.dart`, `shop_settings_page.dart`, `dashboard_page.dart`, `reports_page.dart`, `customers_page.dart`, `settings_page.dart`, `subscription_page.dart`, `new_pin_page.dart`). Ils vivent dans `plus/`.

| Écran | Fichier | Contenu |
|---|---|---|
| 1 · Menu | `01-menu.html` | Quatre sections réelles : Boutique, Paramètres, Gestion, Compte. Six entrées derrière un gate Premium. Variante Premium déverrouillée |
| 2 · Informations boutique | `02-boutique.html` | Bottom sheet de consultation (nom, adresse, téléphone, email) puis sheet d'édition |
| 3 · Tableau de bord | `03-dashboard.html` | Cinq KPI, accès rapides, stock bas avec barres de progression. Sans AppBar. Gate Premium en variante |
| 4 · Rapports | `04-rapports.html` | Statistiques, graphique de ventes, camembert par catégorie, tops produits et clients, export PDF. État vide |
| 5 · Clients | `05-clients.html` | Onglets Clients et Doublons avec compteurs, détection de doublons, dialogue de fusion. Upsell si liste vide en Free |
| 6 · Réglages de boutique | `06-reglages.html` | Thème en trois choix, langue, devise, notifications, données |
| 7 · Abonnement | `07-abonnement.html` | Trois plans, paiement mobile money par pays et opérateur, vue de l'abonné actif |
| 8 · Mon profil & PIN | `08-profil-pin.html` | Sheet de profil avec numéro verrouillé, changement de PIN en deux étapes avec erreur de correspondance |

#### Corrections apportées à la maquette « Plus » précédente

La lecture du code a invalidé plusieurs hypothèses de la première version :

- la page s'appelle **Menu**, sous-titrée « Paramètres », et non « Plus » ;
- elle compte **quatre** sections, la section **Gestion** ayant été omise ;
- **Informations boutique**, **Mon profil** et **Changer de PIN** sont des **bottom sheets**, pas des pages ;
- le titre réel est **Rapports** au pluriel ;
- le thème se règle en **trois choix** (Système / Clair / Sombre), pas par une bascule ;
- les entrées **Équipe** et **Journal d'activités** manquaient.

#### Conventions retenues

- **Gate Premium** : tuile à 45 % d'opacité avec un **cadenas ocre** à la place du chevron. Le tap ouvre le dialogue Premium au lieu de la destination.
- **Bottom sheets** : le contenu sous-jacent reste visible à 35 % d'opacité, pour rappeler d'où l'on vient.
- **Sections conditionnelles** : une section absente de la donnée disparaît entièrement plutôt que d'afficher un bloc vide.
- **Stock bas** : rouge sous 30 % du seuil, ocre au-dessus, avec une barre de progression proportionnelle.
- **Champs verrouillés** : opacité réduite plus une icône cadenas, jamais un simple grisé.