SprigHouse

Ce que c’est

Le site d’une agence qui construit des sites, des systèmes de collecte de dons et des CRM pour des associations : accueil illustré, chiffre clé, présentation, carrousel de dix-neuf avis, publics servis, bandeau de partenaires certifiés, études de cas, méthode en quatre étapes, formulaire de contact, appel à l’action, pied de page. Une seule page, un seul fichier HTML.

Le dessin, la structure, les textes et les images reprennent sprighouse.co. Tout le code a été réécrit. L’original est une application Next.js : React, Tailwind compilé, un bundle d’animation, un routeur client et une couche d’images optimisées côté serveur. Rien de tout ça n’est lisible, rien ne s’ouvre sans serveur, et rien ne survit à la politique de sécurité stricte de ce site.

Ce qui reste tient en trois fichiers : un HTML, une feuille de style, un script. 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 :

--bg:      #f7f0e6;  /* fond de page, papier crème */
--surface: #f3ebdd;  /* sections qui avancent d’un cran */
--text:    #1d2b1f;  /* encre : texte, bordures, panneaux sombres */
--muted:   #5c6b5e;  /* texte secondaire sur le crème */
--primary: #bfea4b;  /* vert citron : boutons, surlignages, points */
--accent:  #b8331b;  /* astérisques des champs requis, erreurs */

Un piège à connaître avant d’y toucher : le vert citron est une couleur de fond, pas une couleur de texte. Sur le crème il donne 1,2:1 — illisible. Le mot « mission » du titre d’accueil ne tient que grâce à son contour d’encre de 1,5 px. Sur les panneaux sombres, ne compose jamais un rgba() à la main : prends --on-ink, --on-ink-soft ou --on-ink-faint, les trois seuls niveaux qui passent le contraste.

Le nom

Cherche « SprigHouse » dans index.html. Aucune classe CSS ne contient la marque : un rechercher-remplacer ne peut rien casser.

Les tailles

L’échelle typographique est déclarée une fois, en clamp() fluides mesurés sur l’original. Un titre n’a donc jamais sa propre media query : tu changes --fs-h2 et toute la page suit, à toutes les largeurs. La partie 9 de la feuille ne contient que des changements de mise en page.

Les quatorze effets, et comment ils sont faits

Tous relevés dans le code de l’original : les réglages du moteur d’animation sont dans les bundles, en clair — durées, courbes, décalages, seuils. Extraits par script, pas devinés à l’œil.

Ce qu’il faut savoir

• Aucune requête externe. Dix requêtes au premier écran, 280 Ko, toutes locales. Les six vignettes du menu déroulant ne sont téléchargées qu’à son ouverture — 74 Ko de moins au chargement.
• 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> : 19 titres sur 19 restent visibles, zéro bloc caché, et les dix-neuf avis se font défiler à la main.
• Zéro style et zéro script en ligne. Le décalage des trois cartes d’études de cas est écrit en :nth-child() dans la feuille, pas en style="--reveal-delay: 50ms" : un attribut style serait bloqué par la politique de sécurité du site.
• Le déclencheur est à 15 % du bas de l’écran, mesuré sur l’écran et non sur l’élément — l’original déclenchait au premier pixel visible, si bien qu’une carte avait fini d’apparaître avant qu’on la voie.
• Deux couleurs ont été assombries pour passer le contraste AA : le texte secondaire (4,0 → 5,0:1) et l’astérisque des champs requis (4,4 → 5,0:1). L’écart est invisible à l’œil.
• Accessibilité : lien d’évitement, états des menus portés nativement par les <summary>, position du carrousel annoncée, focus visible unique, décorations masquées aux lecteurs d’écran, animations coupées et délais remis à zéro si le système le demande.

Ce qui n’est pas parfait

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