Verdance

Ce que c’est

Un site d’entreprise d’espaces verts, complet : accueil en photo, atouts, présentation, prestations, chiffres, étapes, avis en carrousel, galerie, FAQ, journal, 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 et les vidéos ont été conservées. Tout le code a été réécrit : l’original tenait dans 175 Ko de CSS minifié, jQuery, cinq bundles de 2,4 Mo, un moteur d’animation propriétaire, sept animations Lottie et un panier e-commerce qui appelle une API inexistante dès qu’on sort de l’outil. 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 — huit lignes

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

--color-accent:        #9cb544;  /* boutons, mots surlignés, icônes */
--color-accent-light:  #c5da72;  /* le même olive, éclairci pour le texte sur photo */
--color-deep:          #2c3a2a;  /* panneaux sombres, pied de page, CTA */
--color-cream:         #f2eee3;  /* fond de page */
--color-terracotta:    #c96f4a;  /* étoiles des avis */

Une chose à comprendre avant de toucher au reste : il y a trois olives, pas un. L’accent plein passe le contraste AA sur le crème et sur le vert profond (5,2:1), mais il disparaît dans le feuillage d’une photo. C’est pour ça que les mots en italique de l’accueil et du panneau vert utilisent la version éclaircie (7,8:1). Si tu changes l’accent, change les trois.

Le nom

Cherche « Verdance » 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, 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 seize effets, et comment ils sont faits

Tous relevés dans les données du moteur d’animation de l’original — 117 événements sur cette page, 55 timelines, extraits du store puis mesurés au navigateur, pas à l’œil. Après déduplication il reste 37 animations distinctes, regroupées ici en seize effets.

Ce qu’il faut savoir

• Aucune requête externe. 37 requêtes au chargement, toutes locales. L’original chargeait jQuery et cinq bundles depuis deux 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> : 20 titres sur 20 restent visibles. L’original, lui, posait style="opacity:0" sur chaque bloc animé.
• 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 style="opacity:0" viole.
• Le déclencheur est à 15 % du bas de l’écran, pas au premier pixel comme dans l’original : un bloc entre visiblement au lieu d’avoir fini avant d’être vu.
• Accessibilité : lien d’évitement, états des menus annoncés, FAQ native, position du carrousel annoncée, focus visible, décorations masquées aux lecteurs d’écran, 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.