Nomadra

Ce que c’est

Un site d’agence de voyage, complet : accueil en photo avec carte vidéo, présentation chiffrée, destinations épinglées au défilement, formules, services dépliables, expériences, arguments en boucle, galerie en carrousel, avis, FAQ, formulaire, appel à l’action, pied de page. Une seule page, un seul fichier HTML.

Le design reprend celui d’un template commercial dont seules les photos, la vidéo et les textes ont été conservés. Tout le code a été réécrit : l’original livrait 152 Ko de CSS minifié, jQuery, trois bundles de 700 Ko, GSAP avec ScrollTrigger et SplitText, un moteur de défilement fluide, un widget de démarchage du vendeur, et un bloc de style qui posait visibility: hidden !important sur soixante classes tant que le moteur d’animation n’avait pas démarré. Illisible, donc inutile pour apprendre.

C’est le point important : ce template n’est pas là pour être admiré, il est là pour être lu, cassé et remonté.

Ce que tu changes en premier

Les couleurs — six lignes

Tout en haut de assets/css/style.css :

--color-accent:        #2739ff;  /* boutons, numéros de l’index, icônes */
--color-accent-strong: #1c2ad6;  /* le même bleu, un cran plus foncé (survol) */
--color-accent-light:  #7f8cff;  /* le même bleu éclairci, sur les panneaux sombres */
--color-page:          #ecf2f6;  /* fond de page */
--color-deep:          #020e26;  /* bande des formules, pied de page */
--color-sky:           #b0dffb;  /* la bande bleu pâle « pourquoi nous » */

Une chose à comprendre avant de toucher au reste : il y a trois bleus, pas un. L’accent plein passe largement sur le blanc (6,74:1) et sur le fond de page (5,97:1), mais il tombe à 2,85:1 sur le bleu nuit du pied de page — sous le seuil AA. C’est pour ça que le lien de courriel et le message du formulaire utilisent la version éclaircie (6,49:1). Si tu changes l’accent, change les trois.

Le nom

Cherche « Nomadra » dans index.html. Aucune classe CSS ne contient la marque : un rechercher-remplacer ne peut rien casser. Une seule précaution — le mot géant de l’accueil est dimensionné en vw pour occuper la largeur de l’écran : sept lettres à 24vw remplissent 1440 px, un nom plus long demande une valeur plus petite.

Les tailles

L’échelle typographique est déclarée une fois, puis redéclarée à chaque point de rupture. Un titre n’a donc jamais sa propre media query : tu changes --h2-size et toute la page suit.

Les dix-neuf effets, et comment ils sont faits

Tous relevés dans les données du moteur d’animation de l’original — 33 interactions et 32 timelines, extraites du bundle du site puis remesurées au navigateur, pas à l’œil — plus le carrousel de la galerie, qui était un script écrit à la main dans la page.

Ce qu’il faut savoir

• Aucune requête externe. 44 requêtes au chargement, toutes locales. L’original chargeait jQuery, trois bundles Webflow, GSAP, Lenis et deux polices Google depuis cinq domaines.
• L’apparition au scroll ne peut pas masquer le contenu. L’état caché n’existe que si le JavaScript a tourné. Vérifié en retirant les balises <script> : 25 titres sur 25 restent visibles, les 3 rideaux sont levés, les 10 accordéons s’ouvrent, la galerie reste une bande de 7 photos que l’on balaye.
• Zéro style et zéro script en ligne. Le template respecte la politique de sécurité stricte du site — celle-là même que le visibility: hidden de l’original rendait impossible à lever.
• Le déclencheur est à 15 % du bas de l’écran, pas au premier pixel comme dans l’original, et il est mesuré sur l’écran et non sur l’élément : un seuil en pourcentage de l’élément laisserait invisible à jamais tout bloc plus haut que la fenêtre.
• La vidéo n’est demandée qu’au clic. L’original sert un fichier de 1280 × 720 dans une carte de 384 × 303 et le lance au chargement ; ici la carte affiche une image de 13 Ko jusqu’à ce qu’on appuie sur lecture.
• Accessibilité : lien d’évitement, état du menu annoncé, position des deux carrousels annoncée, FAQ et services natifs donc utilisables au clavier, focus visible, texte découpé remis en aria-label pour ne pas être épelé, animations coupées si le système le demande.
• Responsive vérifié à 390, 1440 et 2560 px, au chargement comme après défilement complet, sans débordement horizontal.

Ce qui n’est pas parfait

Autant le dire ici plutôt que te le laisser découvrir.