# Explore Togo — brief phase 3 Production de toutes les pages restantes, avec un objectif précis : le prototype doit pouvoir être parcouru devant un investisseur, sur un téléphone, sans jamais tomber sur un lien mort ou une incohérence. Documents de référence : `explore-togo-brief-design.md` pour les tokens et la direction artistique, `explore-togo-brief-phase-2.md` pour la carte, la vidéo et les règles de lisibilité. Fichier fourni avec ce brief : **`explore-togo-donnees-demo.json`**. --- ## 1. La règle qui prime sur toutes les autres **Aucune page n'invente de contenu.** Tous les noms de lieux, de guides, tous les prix, dates, notes, avis et références viennent de `explore-togo-donnees-demo.json`. Si une information manque pour construire un écran, l'ajouter au fichier de données d'abord, puis l'utiliser — jamais l'inverse. C'est la contrainte la plus importante du lot. Un prototype où le guide s'appelle Kossi sur la fiche site et autrement dans la confirmation, ou dont le prix passe de 38 € à 40 € entre deux écrans, se disqualifie tout seul en démonstration. La cohérence des données compte davantage que le nombre de pages. Deux mentions à respecter, tirées du fichier de données : - Les guides, les avis et les notes sont fictifs. Faire figurer, dans le pied de page de toutes les pages, une ligne discrète : « Prototype — les guides, avis et tarifs affichés sont des exemples ». Texte 12 px, `#6B6459`. - Ne jamais afficher un nombre de guides ou de sites supérieur à ce que contient le fichier de données. --- ## 2. Le chemin de démonstration Ces sept écrans, dans cet ordre, doivent s'enchaîner par des clics réels, sans aucune impasse. C'est le premier livrable, avant tout le reste. 1. **Accueil** → survol de la région Kara sur la carte → clic sur le marqueur Koutammakou 2. **Fiche site Koutammakou** → lecture du bloc « Comment y aller » → descente jusqu'aux offres 3. **Tunnel de réservation immédiate** sur l'offre `o1`, quatre étapes → **confirmation** 4. **Mon voyage** avec la réservation `ET-2026-0447` 5. Retour à l'accueil → clic sur le circuit **Le grand nord** → **fiche circuit** 6. **Demande de devis** → état « demande envoyée » → état « devis reçu » `DV-2026-0112` → acompte → confirmé 7. **Espace guide** de Kossi Amegan, montrant la demande côté offre Ce chemin raconte la proposition de valeur dans l'ordre : on découvre un lieu, on réserve un petit panier en autonomie, on demande un gros panier accompagné, et il existe une contrepartie côté guide. C'est ce que l'on regarde de l'autre côté de la table. **Règle de non-impasse.** Tout élément qui ressemble à un lien doit soit naviguer, soit afficher un état « bientôt disponible » explicite. Aucun clic ne doit rester sans effet. Cela vaut aussi pour les liens du pied de page. **Règle du téléphone.** Le chemin de démonstration se teste d'abord en 390 px. C'est sur un téléphone qu'il sera parcouru. --- ## 3. Ordre de production ### Lot 1 — le chemin de démonstration (prioritaire) **1.1 Fiche site — Koutammakou.** Structure en section 5 du brief initial. Données : entrée `koutammakou` du fichier, offres `o1` à `o4`, avis des trois voyageurs, guide `g1`. Le bloc « Avant de visiter » se fonde sur le champ `avant_de_visiter` : Koutammakou est un site habité, ce bloc parle de respect des habitants, pas de règlement. **1.2 Tunnel de réservation immédiate.** Quatre étapes, aucune création de compte avant paiement. Les données de l'étape 4 et de la confirmation viennent de `reservation_demo`. Faire figurer les deux rails de paiement : carte en premier, Mixx by Yas et Flooz ensuite. Afficher l'acompte de 30 % et le solde sur place de façon explicite, c'est un argument commercial autant qu'une information. **1.3 Confirmation et Mon voyage.** Récapitulatif, guide avec photo, bouton WhatsApp, ajout au calendrier, itinéraire consultable hors connexion. Prévoir l'état vide de Mon voyage. **1.4 Fiche circuit — Le grand nord.** Reprend le SVG de la carte nationale avec `#tg-circuit` activé et les cinq étapes numérotées. Puis le déroulé jour par jour, ce qui est inclus et exclu, et l'action « Demander un devis ». **1.5 Flux devis, cinq états.** Demande envoyée, devis reçu, acompte, confirmé, expiré. Le devis affiché est `devis_demo`, avec ses quatre lignes, son total, son prix par personne et sa date d'expiration visible. L'état expiré propose une relance en un clic. **1.6 Espace guide.** Un seul écran suffit et il compte beaucoup : demandes reçues avec un badge sur celle en attente, calendrier de disponibilité du mois, revenus du mois et prochain versement, note et nombre d'avis. Point de vue de Kossi Amegan. C'est l'écran qui montre que l'offre existe et qu'elle est outillée. ### Lot 2 — la profondeur du catalogue **2.1 Page région — Kara.** Hero à mi-hauteur, phrase de caractérisation, liste des sites en cartes horizontales, extrait de la carte nationale centré sur la région avec les autres atténuées, liens vers les régions voisines. **2.2 Liste des sites**, filtrable par région et par thème, avec bascule liste/carte. **2.3 Liste des circuits**, trois entrées depuis le fichier de données. **2.4 Liste des guides et profil guide.** Le profil suit la section 9 du brief initial. La biographie est celle du fichier, à la première personne. ### Lot 3 — acquisition et robustesse **3.1 Quatre pages pratiques** : formalités d'entrée, quand venir, comment circuler, argent et paiement. Une colonne de 620 px, sommaire ancré à gauche en desktop, structure de titres soignée. Ces pages sont le canal d'acquisition principal auprès des voyageurs internationaux, elles ne sont pas décoratives. **3.2 États systèmes** : 404, chargement, résultat de recherche vide, erreur réseau, erreur de paiement. Rédigés selon le ton défini — dire ce qui s'est passé et quoi faire, sans s'excuser, sans point d'exclamation. **3.3 Devenir partenaire.** Page d'entrée pour les guides et transporteurs : ce que la plateforme apporte, comment on est vérifié, comment on est payé. Une page suffit. --- ## 4. Ce qu'un investisseur doit pouvoir lire dans l'interface Sans qu'on le lui explique. Ces éléments ne sont pas décoratifs, ils rendent le modèle lisible : - **Deux tailles de panier.** Une offre à 38 € réservable en autonomie et un circuit à plus de 1 000 € passant par un devis, visibles dans le même parcours. - **Deux rails de paiement.** Carte pour l'international, mobile money pour le local et pour payer les guides. - **Une offre structurée**, pas un annuaire : des guides identifiés, vérifiés, avec des tarifs et des disponibilités. - **Un canal d'acquisition qui ne dépend pas de la publicité** : les pages pratiques et les fiches site, indexables. - **Une contrepartie côté guide**, avec l'écran 1.6. Ne rien ajouter d'autre à cette fin. Pas de section « notre vision », pas de chiffres de marché dans l'interface, pas de compteurs animés. Le produit doit se défendre en étant utilisable, le reste appartient à la présentation orale. --- ## 5. Rappels transversaux - Chaque page en 390 px et 1440 px. - Un seul bouton rouge par écran ; deux zones vertes maximum par page. - Échelle typographique de la section A3 du brief phase 2, longueur de ligne plafonnée à 68 caractères. - Prix en euros, équivalent FCFA en dessous et en plus petit, conversion au taux fixe de 655,957. - Toutes les photos légendées avec le lieu et la région. - Focus clavier visible, zones tactiles de 44 px, contraste vérifié. - Aucune donnée stockée dans le navigateur : l'état vit en mémoire. - Livrer le lot 1 complet et le faire valider avant d'ouvrir le lot 2.