Fluenta

Ce que c’est

Un site complet pour une plateforme financière destinée aux PME : un héros plein écran qui rétrécit quand on le dépasse, trois cartes produit, un tableau de bord agrandissable, trois témoignages clients, une salle de presse, un bandeau de logos qui défile, un appel à l’action et un pied de page à quatre colonnes. Une page, un fichier HTML.

Ce qui fait ce template, c’est que les captures d’interface n’en sont pas. Les trois maquettes produit et le tableau de bord des factures — onglets, tuiles de chiffres clés, tableau à six colonnes avec ses pastilles d’état — sont écrits en HTML et en CSS. Ils restent nets à toutes les densités d’écran, ils se traduisent, et on change un montant sans ouvrir un éditeur d’images. Le tableau de bord est dimensionné en em : la vue agrandie met tout le panneau à l’échelle en changeant une seule valeur de font-size.

Le design vient d’un gabarit Webflow pour éditeur de logiciel financier dont il ne reste aucune image : les six photographies ont été régénérées pour ce template, au rapport d’aspect exact relevé sur l’original. Tout le code a été réécrit : jQuery, le moteur d’animation IX2 propriétaire (239 événements pour 33 effets distincts), le CSS minifié, le chargeur de polices distant, et les style="opacity:0" posés en ligne sur chaque bloc animé — qu’une politique de sécurité stricte bloque, ce qui donne une page blanche.

C’est tout l’intérêt : 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 — l’accent, c’est trois nuances

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

--bg:           #060606;  /* fond de page */
--bg-soft:      #14191f;  /* cartes, cadre du tableau de bord */
--brand:        #00738a;  /* aplats, texte blanc dessus */
--brand-strong: #005c6e;  /* le même accent, un cran plus foncé (survol) */
--brand-bright: #3fb8cf;  /* le même accent, éclairci pour du texte sur fond sombre */
--deep:         #00303f;  /* la carte « financement » */
--forest:       #002204;  /* la carte « comptabilité » */
--ink-2:        #ffffffcc;  /* texte courant */
--rule:         #ffffff33;  /* filets */

Une chose à comprendre avant de toucher au reste : il y a trois accents, pas un. L’accent plein est un fond de bouton avec du texte blanc dessus (5,4:1). La même couleur en texte sur le fond presque noir tomberait à 3,7:1, illisible : c’est l’éclairci qui prend le relais (8,7:1). Changer l’accent oblige à changer les trois.

Le nom

Cherche « Fluenta » dans index.html : le logo, le titre, les intertitres et le pied de page. Aucune classe CSS ne contient la marque — un rechercher-remplacer ne peut rien casser. Le logo est un SVG de trois formes, repris dans assets/img/favicon.svg.

Les tailles

L’échelle typographique est déclarée une fois, puis redéclarée à chaque point de rupture (991 et 767 px). Un titre ne porte donc jamais sa propre media query : change --h1-size et toute la page suit — 72 px sur grand écran, puis 50 et 48 px en descendant. Les valeurs sont celles relevées sur l’original à 1440, 991, 767 et 479 px.

Les neuf effets, et comment ils sont faits

Ils n’ont pas été regardés, ils ont été lus : un export Webflow conserve tout son moteur d’animation dans un store JavaScript, accessible par Webflow.require('ix2').store.getState().ixData. 239 événements en sont sortis — l’outil en crée un par élément de collection — qui se dédupliquent en 33 effets distincts, dont la moitié appartenait à d’autres pages du gabarit. Neuf jouent sur celle-ci.

Ce qu’il faut savoir

Aucune requête externe, aucune étape de build. On ouvre index.html dans un navigateur et ça marche. Polices auto-hébergées, photographies locales, aucun CDN, aucun traceur.

Sans JavaScript, rien n’est caché. L’état masqué des apparitions s’écrit .js [data-reveal], et enhance.js est la seule chose qui pose cette classe. Vérifié script coupé : les 9 titres sur 9 restent visibles, les 26 blocs animés sur 26 aussi, et les menus déroulants s’ouvrent quand même — ils sont en CSS.

Le seuil d’apparition est à 15 % du bas de l’écran, et non à 20 % de l’élément comme dans l’original. La marge est mesurée sur l’écran et non sur l’élément — sinon le héros, plus haut que l’écran, resterait caché pour toujours. Un filet révèle ce qui reste quand on atteint le bas de la page.

Le héros colle, il ne défile pas. Une piste de 200 vh contient un panneau de 100 vh épinglé en haut : la page défile d’un écran entier « à travers » un héros immobile avant de passer la main. C’est aussi pour cela que la racine est en overflow-x: clip et non hidden — cette dernière ferait de la racine un conteneur de défilement et décollerait le panneau.

Sous une politique de sécurité stricte (script-src 'self'; style-src 'self') : zéro violation, vérifié en servant le dossier avec l’en-tête réel. Aucun style en ligne, aucun script en ligne, aucun onclick.

Aucun débordement horizontal à 390, 1440 et 2560 px, au chargement comme après défilement complet. Accessibilité : lien d’évitement, aria-expanded tenu à jour sur les trois menus et le bouton mobile, un <dialog> natif pour le tableau de bord agrandi, un focus visible unique, et prefers-reduced-motion qui remet aussi les délais à zéro.

Ce qui n’est pas parfait