docs(design): decomposition maquette borne + ecrans + tracabilite vs build (#63)

docs/design/README.md

@@ -3,6 +3,8 @@
 ## Fichiers
 
 - `maquette-borne.pdf` : maquette ecrans complete fournie avec le brief ecole
+- `screens/` : les 10 ecrans de la maquette exportes en PNG (un par ecran)
+- `maquette-vs-build.md` : decomposition ecran par ecran + tracabilite maquette vs kiosk construit (ecarts structurants)
 
 ## Source en ligne
 

docs/design/maquette-vs-build.md

@@ -0,0 +1,121 @@
+# Maquette borne vs kiosk construit — decomposition et tracabilite
+
+> Auteur : BYAN. Note de tracabilite maquette -> code (appui oral RNCP Bloc 1 :
+> "comment etes-vous passe de la maquette au code ?").
+> Source : `docs/design/maquette-borne.pdf` (export Figma de l'ecole, 10 ecrans,
+> format 1440x1024). Ecrans exportes un a un dans `docs/design/screens/`.
+
+## 1. Lecture d'ensemble
+
+La maquette decrit un **parcours de type McDonald's** (Big Mac, Best Of, McCafe,
+arches M, Coca) : c'est la base de reference a rebrander en Wakdo.
+
+Point central : les **10 "ecrans" ne sont pas 10 pages**. Ce sont en realite
+~4 ecrans de base plus un systeme de modales qui s'ouvrent par-dessus l'ecran de
+commande :
+
+```
+Accueil
+   -> Ecran de commande UNIQUE
+        (bandeau categories en haut + grille produits + panneau commande persistant a droite)
+        sur lequel s'ouvrent les modales de composition (taille menu, accompagnement, boisson, format/quantite)
+   -> Chevalet (sur place : saisie du numero)
+   -> Remerciement
+```
+
+Le kiosk construit, lui, eclate cet ecran unique en **pages distinctes** et n'a
+pas de panneau de commande persistant. C'est l'origine du sentiment "ca ne
+correspond pas".
+
+## 2. Decomposition ecran par ecran
+
+### Ecran 1 — Accueil
+![Accueil](screens/01-accueil.png)
+- "Bonjour," + "Souhaitez-vous consommer votre menu sur place ou preferez-vous l'emporter ?"
+- Deux grandes cartes : **Sur Place** (icone table) / **A Emporter** (icone sac).
+- Fond : arches + Big Mac + Coca.
+
+### Ecran 2 — Ecran de commande (pivot)
+![Ecran de commande menus](screens/02-commande-menus.png)
+- **Bandeau categories horizontal** (Menus actif, Sandwiches, Wraps, Frites, Boissons Froides, Encas, Desserts...) avec fleches rouges ◀ ▶ pour faire defiler.
+- Titre de section "Nos menus" + sous-titre + **grille de produits** (image, nom, prix).
+- **Panneau de commande persistant a droite** : numero de commande (72), "Sur place : 326", lignes de commande avec options en puces et icone corbeille, "TOTAL (ttc) 36,50 EUR", boutons "Abandon" / "Payer", logo W en haut.
+- Cet ecran est le coeur de la maquette : tout le reste (sauf accueil/chevalet/remerciement) se joue ici ou en modale par-dessus.
+
+### Ecran 3 — Modale "Une grosse faim ?" (composition menu, etape 1)
+![Modale taille menu](screens/03-modale-taille-menu.png)
+- Choix de la taille : **Menu Maxi Best Of** / **Menu Best Of**.
+- Bouton "Etape Suivante". Premiere etape d'un assistant en modale.
+
+### Ecran 4 — Modale "Choisissez votre accompagnement" (etape 2)
+![Modale accompagnement](screens/04-modale-accompagnement.png)
+- **Frites** / **Potatoes**.
+- Boutons "Retour" + "Etape Suivante".
+
+### Ecran 5 — Modale "Choisissez votre boisson" (etape 3)
+![Modale boisson](screens/05-modale-boisson.png)
+- Carrousel de boissons (Eau, Coca, Coca Zero, Jus de pomme BIO, The...) avec ◀ ▶.
+- Bouton "Ajouter le menu a ma commande" (fin de l'assistant).
+
+### Ecran 6 — Ecran de commande, categorie Boissons Froides (a la carte)
+![Commande boissons](screens/06-commande-boissons.png)
+- Meme ecran pivot, categorie "Boissons Froides" active.
+- Grille de 8 boissons avec prix unitaires (Eau 1 EUR, Coca 1.90 EUR, Fanta 1.90 EUR, Jus de pomme BIO 2.30 EUR...).
+
+### Ecran 7 — Selection d'un produit (etat)
+![Boisson selectionnee](screens/07-boissons-selection.png)
+- Meme grille, "Coca Cola" entoure en jaune : etat visuel de selection.
+
+### Ecran 8 — Modale "Une petite soif ?" (option produit a la carte)
+![Modale format quantite](screens/08-modale-format-quantite.png)
+- Taille **30Cl / 50Cl** (+0.50 EUR pour le 50Cl).
+- **Stepper de quantite** (- 1 +).
+- Boutons "Annuler" / "Ajouter a ma commande".
+
+### Ecran 9 — Chevalet (sur place)
+![Chevalet](screens/09-chevalet.png)
+- "Pour etre servis a table," + "Recuperez un chevalet et indiquez ici le numero inscrit dessus".
+- Grands chiffres `2 6 1` + bouton "Enregistrer le numero".
+
+### Ecran 10 — Remerciement
+![Remerciement](screens/10-remerciement.png)
+- "Toute l'equipe vous remercie, Et vous souhaite un bon appetit dans nos restaurants, A bientot !"
+- Bouton "Nouvelle commande".
+
+## 3. Maquette -> kiosk construit (mapping)
+
+| Maquette | Kiosk construit | Verdict |
+|----------|-----------------|---------|
+| 1. Accueil sur place / a emporter | `index.html` | conforme |
+| 2 + 6. Ecran de commande unique (bandeau + grille + **panneau persistant**) | eclate en `categories.html` -> `products.html` -> `cart.html` | divergence structurante : multi-pages, et **pas de panneau de commande persistant** |
+| (pas de page categories separee) | `categories.html` plein ecran "Que souhaitez-vous commander ?" | ecran **ajoute** (la maquette met les categories en bandeau) |
+| 3-5. Composeur menu = **assistant modal en etapes** | `page-product-menu.js` = composition **libre** | divergence (le refactor "consommer les slots /api/menus" est deja en file P4) |
+| 8. Modale d'option produit (taille + quantite) | `product.html` (page) | divergence : page au lieu de modale |
+| 9. Ecran **chevalet** dedie (saisie numero) | numero gere par l'API (chunk 1a), affiche en confirmation | manquant cote ecran |
+| (aucun ecran de paiement) | `payment.html` "Carte bancaire / Especes" | ecran **ajoute** par le build |
+| 10. Remerciement | `confirmation.html` | conforme |
+
+## 4. Ecarts structurants (le fond du sujet)
+
+1. **Paradigme inverse.** Maquette = **mono-ecran** (un plan de commande avec
+   categories en bandeau et un panneau recapitulatif persistant a droite, modales
+   par-dessus). Build = **multi-pages** classiques (categories -> produits ->
+   produit -> panier). C'est l'ecart structurant principal.
+2. **Panneau de commande lateral absent.** La piece centrale de la maquette
+   (numero de commande, lignes editables avec corbeille, TOTAL ttc, Abandon /
+   Payer, visible en permanence) n'est pas presente dans le build.
+3. **Composition de menu.** Maquette = assistant modal en etapes ; build =
+   composition libre cote client (`page-product-menu.js`).
+
+## 5. Rebrand McDonald's -> Wakdo
+
+Le visuel de la maquette est du McDonald's litteral (Big Mac, Best Of, McCafe,
+arches, "Tous a l'eau by M"). Le rebrand vers Wakdo (logo W, catalogue propre)
+est attendu et legitime : le branding McDo n'est pas livrable. Le sujet de cette
+note n'est donc pas le rebrand mais la **structure** des ecrans.
+
+## 6. Suite
+
+Re-alignement du kiosk sur la maquette (panneau persistant + bandeau categories +
+composeur en modale) = chantier UI conduit via un cycle FD dedie. Backlog des
+divergences = section 3 ci-dessus.