# Explore Togo — brief phase 2 Corrections de la page d'accueil, puis production des pages restantes. À lire après `explore-togo-brief-design.md`, qui reste la référence pour les tokens, la direction artistique et les interdits. Fichiers fournis avec ce brief : - `togo-carte-regions.svg` — la carte du pays, à utiliser telle quelle - `togo-sites-coordonnees.json` — projection, coordonnées et regroupements --- ## Partie A — corrections de la page d'accueil ### A1. Remplacer entièrement la carte Le tracé actuel est incorrect. **Ne pas le retoucher, le remplacer.** Le fichier `togo-carte-regions.svg` contient la géométrie officielle des cinq régions du Togo, projetée et prête à l'emploi. Il s'intègre en SVG inline, pas en ``, pour que le survol et le clic fonctionnent. **Ce que le fichier contient déjà :** | Élément | Sélecteur | Détail | | --- | --- | --- | | Régions | `path.tg-region` | `id="region-{slug}"`, attributs `data-region`, `data-nom`, `data-chef-lieu`, `role="button"`, `tabindex="0"`, `aria-label` | | Libellés | `text.tg-label` | Positionnés au centroïde réel de chaque région | | Marqueurs | `use.tg-pin` | Le pictogramme des cornes du logo, vectorisé, ancré par le bas au point exact. Attributs `data-site`, `data-region`, `data-theme`, `data-grappe` | | Regroupements | `g.tg-grappe` | Pastilles numérotées pour les sites qui se superposent | | Corridor de circuit | `#tg-circuit` | Ligne jaune et étapes numérotées, masqué par défaut | **Toutes les couleurs et tous les états sont déjà stylés dans le fichier.** Ne pas réécrire le CSS de la carte, seulement le compléter si nécessaire. **Ce qu'il reste à brancher en JavaScript :** - Survol d'une région → `aria-pressed="true"` sur le path, classe `is-actif` sur le `text.tg-label` correspondant, et mise à jour du panneau de droite. - Puces de filtrage → ajouter `is-eteint` aux `use.tg-pin` dont le `data-theme` ne correspond pas, et aux `path.tg-region` sans site restant. Ne jamais masquer, seulement atténuer : la carte ne doit pas bouger. - Interrupteur « Voir les circuits » → ajouter `is-visible` sur `#tg-circuit`. - Clic sur un marqueur → navigation vers la fiche du site. **Le regroupement des marqueurs est indispensable, ne pas le sauter.** À l'échelle du pays, cinq sites se superposent autour de Kpalimé et cinq autour de Lomé. Comportement attendu : par défaut, on affiche la pastille numérotée et on masque les marqueurs individuels du groupe ; au clic sur la pastille, on masque la pastille et on déploie les marqueurs en éventail autour du point central. Les quatre groupes et leurs membres sont listés dans le JSON. **Attention aux coordonnées.** Les positions des sites sont approximatives, à 2 à 5 km près. Elles suffisent pour la maquette, elles devront être relevées au GPS avant la mise en ligne. Ne pas les présenter comme exactes dans l'interface. **Mise en page.** Le ratio de la carte est de 1:2,53 — plus large que ce qu'indiquait le premier brief. En desktop, elle occupe une colonne d'environ 400 px de large sur 1000 px de haut, à gauche, avec le panneau de contenu à droite. En mobile, hauteur d'environ 55 vh, liste en dessous. ### A2. La vidéo du hero Elle est indispensable. Voici le seul chemin qui fonctionne, en trois étapes. **1. Préparer le fichier hors de l'outil.** L'iframe YouTube ne peut pas servir de fond de hero : elle est bloquée dans l'environnement de prototypage, elle est trop lourde en production, elle affiche son propre habillage et elle ne peut pas démarrer automatiquement de façon fiable. Il faut un fichier vidéo autonome. Extraire une boucle de 10 secondes, sans son, à partir de la source : ``` ffmpeg -ss 00:00:12 -t 10 -i source.mp4 -an \ -vf "scale=1920:-2,fps=25" -c:v libx264 -crf 26 \ -preset slow -movflags +faststart hero-togo.mp4 ffmpeg -ss 00:00:12 -i source.mp4 -frames:v 1 -q:v 2 hero-poster.jpg ``` Viser 3 Mo maximum. Choisir un extrait sans coupe, sans texte incrusté et sans visage au premier plan — le titre viendra par-dessus. **2. Joindre `hero-togo.mp4` et `hero-poster.jpg` comme ressources**, au même titre que le logo et les photos. **3. Intégrer :** ```html ``` Règles associées : - L'image `poster` doit être optimisée en priorité : c'est elle que le navigateur mesure pour le temps de chargement perçu. - Si `prefers-reduced-motion` est actif, ou si `navigator.connection.saveData` est vrai, ou si `effectiveType` vaut `2g` ou `3g` : ne pas charger la vidéo du tout, laisser le poster. - La vidéo est décorative : `aria-hidden="true"`, aucun contrôle, aucun son. - Le film complet reste en action secondaire, dans une lightbox chargée au clic uniquement. **Solution de repli si le fichier vidéo n'est pas disponible :** garder la photo poster seule et lui appliquer un zoom très lent, de `scale(1)` à `scale(1.06)` sur 20 secondes, en boucle alternée, désactivé sous `prefers-reduced-motion`. C'est la seule animation décorative autorisée sur tout le site. Vérifier que les droits d'utilisation de la vidéo sont acquis avant la mise en ligne. ### A3. Lisibilité — corrections transversales À appliquer sur la page d'accueil et sur toutes les pages suivantes. **Échelle typographique, à respecter exactement.** Le manque de contraste de taille entre les niveaux est la première cause d'une page qui paraît plate. | Rôle | Desktop | Mobile | Police | | --- | --- | --- | --- | | Titre de hero | 64 px | 38 px | Anton | | Titre de section | 40 px | 28 px | Anton | | Titre de carte | 20 px | 18 px | Inter 500 | | Corps | 17 px | 16 px | Inter 400 | | Interface, boutons | 15 px | 15 px | Inter 500 | | Métadonnées | 13 px | 13 px | Inter 400 | **Longueur de ligne : 68 caractères maximum** pour tout paragraphe. En desktop, cela veut dire une colonne de texte d'environ 620 px, pas toute la largeur de l'écran. **Interlignage :** 1,15 sur Anton, 1,65 sur les paragraphes, 1,4 sur les libellés d'interface. **Texte sur photo ou vidéo.** L'aplat `#08543F` à 45 % ne suffit pas seul sur une image claire. Ajouter une seconde couche : une bande basse du même vert, opacité 70 %, sur les 45 % inférieurs du cadre. Vérifier le contraste sur l'image la plus claire du lot, pas sur la plus sombre. **Densité.** Maximum trois blocs de contenu visibles simultanément à l'écran. Si une section en contient plus, augmenter l'espacement vertical plutôt que de réduire les tailles. **Espacement, sur une grille de 8.** Entre sections : 96 px desktop, 56 px mobile. Interne aux cartes : 16 px. Entre éléments d'une même carte : 8 px. Entre le titre d'une section et son contenu : 24 px. **Répartition du vert.** Maximum deux grandes zones vertes sur la page d'accueil : le calque du hero, et la bande des guides. Partout ailleurs le fond est blanc. Si la page paraît lourde ou officielle, c'est presque toujours qu'il y a trop de vert. **Un seul bouton rouge par écran.** Toutes les autres actions sont en contour vert ou en lien texte souligné. --- ## Partie B — pages à produire Trois lots. Terminer et valider un lot avant d'attaquer le suivant. ### Lot 1 — le parcours de conversion **B1. Fiche site — Koutammakou, vallée des Tamberma (Kara).** Structure détaillée en section 5 du brief initial, à suivre dans l'ordre. Points de vigilance : - Le bloc « Comment y aller » passe avant la description. C'est le bloc différenciant. - La barre d'action collante apparaît dès que le hero est dépassé. - Le calendrier des douze mois est une ligne de pastilles, pas un tableau. - Le bloc « Avant de visiter » est sur fond `#E7F1ED`, ton informatif et non comminatoire — Koutammakou est un site habité, inscrit à l'Unesco, ce bloc traite du respect des lieux et des habitants. **B2. Page région — région de la Kara.** Hero photo à mi-hauteur avec le nom de la région, son chef-lieu et le nombre de sites. Une phrase de caractérisation. Puis la liste des sites en cartes horizontales : vignette 3:2, nom, thème, temps depuis Lomé, prix d'appel. Un extrait de la carte nationale centré sur la région, réutilisant le même SVG avec les autres régions atténuées. En bas, liens vers les régions voisines. **B3. Liste et fiche des offres.** Les deux traitements — confirmation immédiate et sur devis — sont décrits en section 6 du brief initial. La distinction doit être visible dès la liste. **B4. Tunnel de réservation immédiate, quatre étapes.** Détaillé en section 7. Le point critique : aucune création de compte avant le paiement. Prévoir aussi les états d'erreur de paiement, en `#8A1F11` avec icône et texte. **B5. Flux devis, cinq états.** Détaillé en section 8, y compris l'état « devis expiré » avec relance en un clic. ### Lot 2 — la confiance **B6. Liste des guides.** Grille de cartes : portrait, prénom, région, langues, nombre de sorties, note. Filtres par région et par langue. **B7. Profil guide.** Détaillé en section 9 du brief initial. Le paragraphe de présentation est écrit à la première personne par le guide, jamais un texte marketing. **B8. Mon voyage.** Récapitulatif de la réservation, contact du guide, itinéraire, documents. Doit rester consultable hors connexion. Prévoir l'état vide : une invitation à explorer, pas un constat. ### Lot 3 — l'acquisition **B9. Liste des circuits et fiche circuit.** La fiche circuit reprend la carte nationale avec le corridor jaune activé et les étapes numérotées, puis le déroulé jour par jour, ce qui est inclus et exclu, et l'action de réservation ou de devis. **B10. Pages pratiques.** Quatre pages de contenu : formalités d'entrée, quand venir, comment circuler, argent et paiement. Mise en page éditoriale sobre, une colonne de 620 px, sommaire ancré à gauche en desktop. Ces pages servent le référencement autant que la conversion — elles doivent être en HTML réel, richement structurées en titres. **B11. États systèmes.** Page 404, page de chargement, état vide de recherche, message d'erreur réseau. Rédigés dans le ton défini : dire ce qui s'est passé et quoi faire, sans s'excuser. --- ## Partie C — rappels qui valent pour tout - Chaque page existe en 390 px et en 1440 px. - Le sélecteur FR / EN reste présent ; s'il n'est pas fonctionnel, l'indiquer par un état désactivé plutôt que par un contrôle inerte. - Prix affichés en euros, équivalent en FCFA en dessous et en plus petit. Toutes les valeurs sont fictives à ce stade. - Aucune donnée stockée dans le navigateur : l'état des maquettes vit en mémoire. - Focus clavier visible partout, zones tactiles de 44 px minimum, contraste vérifié. - Aucune photo sans légende nommant le lieu et la région.