# Explore Togo — brief phase 4 Page d'accueil : mouvement, densité de contenu, et section journal. Fichier fourni : **`explore-togo-articles-et-ajouts.json`**, à fusionner dans `donnees.js` — ne pas remplacer le fichier existant, les ajouts déjà signalés par `_ajouts_maquette` doivent être conservés. --- ## 0. Deux règles corrigées **Le rouge.** L'arbitrage retenu en lot 1 devient la règle : la barre d'action collante possède le seul bouton rouge de l'écran. Les offres à confirmation immédiate sont en vert plein, celles sur devis en vert contour. La section 6 du brief initial est corrigée en conséquence. **Les chiffres inventés.** Confirmé : aucun total, aucune moyenne, aucun compteur ne s'écrit en dur. Tout se calcule à partir des données. Le fichier fourni ajoute `transactions_guide` pour que l'espace guide se remplisse à partir de vraies lignes. --- ## 1. Système de mouvement Le problème d'une page qui semble figée n'est presque jamais un manque d'effets, c'est une absence de réponse à l'utilisateur. Les animations ci-dessous sont donc **limitatives** : ce qui n'y figure pas est interdit. ### 1.1 Jetons ```css --dur-etat: 150ms; /* survol, focus, changement d'état */ --dur-entree: 260ms; /* révélation d'un élément */ --dur-scene: 600ms; /* séquence d'ouverture, plafond absolu */ --ease-entree: cubic-bezier(0.22, 1, 0.36, 1); --ease-etat: cubic-bezier(0.4, 0, 0.2, 1); ``` Aucune animation ne dépasse 600 ms. N'animer que `transform` et `opacity` — jamais `height`, `top`, `width` ou `box-shadow`. ### 1.2 Les six animations autorisées **1. Révélation au défilement.** `opacity: 0 → 1` et `translateY(16px → 0)`, `--dur-entree`, `--ease-entree`. Déclenchement par `IntersectionObserver`, seuil 0,15, `once: true` — un élément déjà révélé ne se rejoue jamais. Décalage de 60 ms entre les éléments d'un même groupe, quatre éléments décalés au maximum ; au-delà, l'attente devient perceptible. Les titres de section se révèlent, le corps de texte non. **2. Séquence d'ouverture du hero.** Au chargement uniquement : titre, puis sous-titre, puis bouton, décalés de 90 ms, même transformation qu'en 1. Total sous 500 ms. Le fond, lui, est déjà là. **3. Survol des cartes.** `translateY(-2px)` et bordure passant de `#E2DED3` à `#0B6D53`, `--dur-etat`. Pas d'ombre, pas de `scale`, pas de changement de fond. **4. Carte du Togo.** Déjà spécifié en phase 2 : transition de remplissage à 150 ms, rien d'autre. **5. Tour automatique de la carte.** C'est le seul moment orchestré de la page, et le plus utile. 1,2 s après que la carte entre dans le champ, les cinq régions s'allument une par une du nord au sud, 400 ms chacune, puis tout revient au repos. Se joue **une seule fois par session**, et s'interrompt instantanément au premier survol, clic, touche ou défilement. Sa fonction n'est pas décorative : il apprend que la carte est interactive et il énonce la thèse du produit — le Togo se parcourt du nord au sud — sans avoir à écrire « cliquez sur une région ». **6. Fond du hero.** La vidéo quand elle est disponible ; sinon la dérive lente déjà en place, `scale(1) → scale(1.06)` sur 20 s. ### 1.3 Interdits Parallaxe. Compteurs qui s'incrémentent. Texte révélé lettre par lettre ou mot par mot. Entrées en `scale` ou depuis les côtés. Rebond, élasticité, `overshoot`. Boucles hors hero. Curseur personnalisé. Défilement piloté par JavaScript. Bibliothèques d'animation au défilement type AOS ou animate.css. Transitions de page. ### 1.4 Accessibilité Sous `prefers-reduced-motion: reduce`, tout est désactivé et les éléments s'affichent immédiatement dans leur état final — jamais invisibles. Vérifier explicitement : c'est le défaut le plus courant des révélations au défilement, un utilisateur qui a activé le réglage se retrouve devant une page vide. `will-change` uniquement pendant l'animation, retiré ensuite. --- ## 2. Nouvelle structure de la page d'accueil Douze sections. La page devient longue, c'est assumé — chaque section fait un seul travail et ne dépasse pas un écran et demi. Espacement de 96 px en desktop, 56 px en mobile. | # | Section | Ce qu'elle apporte | | --- | --- | --- | | 1 | Hero vidéo | Le désir | | 2 | Carte interactive et tour automatique | La preuve que le pays est couvert | | 3 | Par thème | Une entrée pour qui ne connaît aucun nom de lieu | | 4 | Sites à ne pas manquer | La densité de catalogue | | 5 | Trois circuits | Le panier élevé | | 6 | Combien ça coûte | La levée d'objection n°1 | | 7 | Comment ça marche | La mécanique | | 8 | Les guides | La confiance | | 9 | Ils y sont allés | La preuve sociale | | 10 | Le journal | L'acquisition | | 11 | Le Togo en une minute | Le pratique | | 12 | Pied de page | — | ### Sections nouvelles **3. Par thème.** Cinq vignettes en grille : cascades et randonnée, culture et vodun, plages et lagunes, faune, patrimoine Unesco. Photo carrée, nom en surimpression sur aplat vert à 45 %, nombre de sites en dessous. Au clic, on arrive sur la liste filtrée. En mobile, deux colonnes, la cinquième vignette prend toute la largeur. **4. Sites à ne pas manquer.** Rail horizontal défilable, six cartes de 280 px, photo 3:2, nom, région, temps depuis Lomé, prix d'appel. Défilement au doigt en mobile, deux flèches discrètes en desktop. Pas de défilement automatique. Le rail est un contenu qui bouge parce que l'utilisateur le bouge — c'est exactement le type de dynamisme recherché. **6. Combien ça coûte.** Trois colonnes depuis `fourchettes_prix` : une journée, un week-end, une semaine, avec une fourchette en euros et une mention de ce qui n'est pas compris. Fond `#E7F1ED`, pas de photo. C'est la section la plus différenciante de la page : personne dans le tourisme ouest-africain n'affiche ses fourchettes en clair, et c'est précisément la première question du voyageur international. **9. Ils y sont allés.** Les trois avis du fichier de données, en trois colonnes. Prénom, pays, date, note, texte, et le site concerné en lien. Pas de portraits inventés — une pastille à initiale suffit. **11. Le Togo en une minute.** Six faits depuis `togo_en_une_minute`, en grille de trois par deux. Libellé en 13 px `#6B6459`, valeur en 17 px. Deux d'entre eux portent un lien vers un article. Cette section remplace l'ancien bloc « Avant de partir ». --- ## 3. Le journal ### 3.1 Section sur la page d'accueil Titre « Le journal », sous-titre d'une ligne. Trois articles marqués `a_la_une`, en cartes : photo 3:2, catégorie en badge jaune, titre en 20 px, chapô sur deux lignes maximum, date et temps de lecture en métadonnées. Lien texte vert « Tous les articles » aligné à droite du titre de section. ### 3.2 Page liste du journal En-tête sobre, sans photo. Filtres par catégorie — Préparer, Itinéraires, Comprendre — en puces, même traitement que sur la carte. Le premier article de la liste est mis en avant sur toute la largeur avec une grande photo ; les suivants en grille de trois. Pas de pagination pour huit articles. ### 3.3 Page article - Fil d'ariane discret : Journal › Catégorie. - Photo de couverture à 40 vh, légende dessous. - Titre en Anton 44 px desktop et 30 px mobile, aligné à gauche. - Chapô en 19 px, `#55524A`. - Ligne de métadonnées : catégorie, date, temps de lecture. - Corps de texte en colonne de 620 px, 17 px, interlignage 1,65. Intertitres en Inter 500 à 22 px. - En desktop, sommaire ancré à gauche, se surlignant à la lecture. - **Un encadré d'action à mi-article**, sur fond `#E7F1ED` : une phrase et un lien vert vers la cible définie dans `cta_lie`. C'est ce qui transforme un article de référencement en réservation. - En bas : trois articles liés, puis le partage. ### 3.4 Pourquoi ces huit articles Ce ne sont pas des sujets de remplissage. La cible prioritaire arrive par une recherche Google, pas par Instagram, et chaque titre correspond à une intention de recherche réelle : le budget et le visa captent le volume, l'itinéraire en sept jours et Koutammakou convertissent vers un produit précis, « Togo ou Bénin » récupère le trafic du voisin mieux référencé, et l'héritage allemand vise une niche germanophone peu concurrencée. Les intentions sont documentées article par article dans le fichier de données. Les textes complets restent à écrire — pour la maquette, un corps d'article représentatif suffit, à condition qu'il soit rédigé dans le ton du produit et non en faux-texte. --- ## 4. La vidéo Toujours attendue. Deux fichiers : `hero-togo.mp4`, boucle de 10 à 12 s muette, 3 Mo maximum, et `hero-poster.jpg`. Chemin sans ligne de commande : prendre un rush existant, le couper dans CapCut ou l'éditeur natif du téléphone, couper le son, exporter en 1080p, puis extraire une image fixe du premier plan pour le poster. Privilégier un plan large, sans coupe, sans texte incrusté et sans visage au premier plan — le titre viendra par-dessus. Utiliser une séquence dont les droits sont acquis. Un rush personnel règle la question et sera plus cohérent avec le reste du site que n'importe quelle vidéo tierce. L'intégration reste celle de la section A2 du brief phase 2, y compris la coupure sous `prefers-reduced-motion` et sur connexion lente. --- ## 5. Rappels - Le rail de la section 4 et la grille de la section 3 se testent en 390 px avant le desktop. - La page s'allonge : vérifier que le temps de chargement ne se dégrade pas. Chargement différé de toutes les images sous la ligne de flottaison, dimensions déclarées pour éviter les sauts de mise en page. - Deux zones vertes pleines maximum sur la page, hors fonds tintés `#E7F1ED`. - La mention « Prototype — les guides, avis et tarifs affichés sont des exemples » reste en pied de page. - Ne pas ouvrir le lot 2 avant validation de cette page.