Adjatché

Adjatché est un concept fictif de visites guidées pour Porto-Novo, présenté comme un écran d’application mobile plutôt qu’un site web classique. Quatre vrais circuits — une visite du palais, une balade en pirogue sur la lagune, une marche au marché, une soirée de contes Zangbeto — chacun avec son propre tarif et son propre lien WhatsApp, parce que tout l’objectif est de lancer une conversation, pas de remplir un formulaire.

Ce qui fonctionne bien

• Une page en forme de téléphone, pas un site de bureau rétréci. Toute la mise en page tient dans un cadre fixe et centré de 430px avec sa propre ombre portée — conçu pour se lire comme un écran d’application mobile à chaque taille d’écran, pas un site responsive qui fonctionne par hasard sur mobile.
• Chaque circuit se réserve tout seul. Chacun des quatre circuits a son propre lien WhatsApp, pré-rempli avec le nom exact du circuit — un message est déjà à moitié écrit avant même que le visiteur appuie sur envoyer.
• Des liens factices qui admettent l’être. Les liens Instagram et Google Maps sont visiblement présents mais délibérément désactivés, plutôt que de pointer vers quelque chose de faux — rien sur la page ne laisse croire à une connexion qui n’existe pas.

Le design en un coup d’œil

• encre · #14171f
• ivoire · #f3ecdd
• ocre · #d9a441
• vermillon · #c1432b
• bleu-vert · #1f6f5c

L’élément signature est une silhouette de la ville dessinée à la main en SVG — le palais royal, des palmiers, une pirogue sur la lagune — avec un vrai aria-label descriptif plutôt que de rester une décoration non étiquetée.

Conçu pour durer

• Le lien WhatsApp de chaque circuit est pré-rempli avec le nom exact de ce circuit
• Le défilement révélateur respecte prefers-reduced-motion, avec un vrai repli sans JS
• Anneaux de focus visibles sur chaque élément interactif
• Une mention honnête et permanente de « site concept » dans le pied de page

Pour les développeurs — le détail technique complet

01. Un cadre fixe d’application mobile plutôt que des points de rupture responsive

Problème

L’objectif était que la page se sente comme l’usage d’une application, pas comme la navigation sur un site qui tient par hasard sur un téléphone.

Choix

Un cadre centré, à largeur fixe (430px) avec sa propre ombre portée, maintenu constant quelle que soit la taille d’écran plutôt que de se réorganiser à des points de rupture.

Résultat

Une sensation « application » cohérente et délibérée sur n’importe quel appareil — un compromis raisonnable pour un concept construit autour d’un parcours de réservation pensé mobile d’abord, même si cela laisse de l’espace inutilisé sur les très grands écrans.

02. Des liens factices désactivés plutôt que faux

Problème

Les liens Instagram et Google Maps devaient exister visuellement sans pointer vers une destination réelle, ni inventée.

Choix

Gardés visibles avec un gestionnaire de clic désactivé, plutôt qu’un lien fonctionnel vers une page vide ou un simple href="#".

Résultat

Rien sur la page ne laisse croire à une connexion qui n’existe pas.

Accessibilité et performance

• Un vrai aria-label descriptif sur l’illustration de silhouette dessinée à la main
• Le défilement révélateur respecte prefers-reduced-motion, avec un vrai repli quand IntersectionObserver n’est pas disponible
• Anneaux de focus visibles de 2px sur chaque élément interactif
• Zéro outillage de build, zéro dépendance au runtime hormis Google Fonts

Ce que je ferais différemment

La seule dépendance externe de la page est Google Fonts. Héberger moi-même les trois familles, comme je l’ai fait sur Nova Home Care, supprimerait la dernière requête tierce.

Stack

• HTML5
• CSS3 (custom properties)
• JavaScript vanilla
• IntersectionObserver