Ce que c’est
Un site vitrine B2B complet, celui d’une entreprise qui vend du vélo de fonction aux employeurs : accueil en vidéo, logos clients, promesse, démarche en trois étapes, avantages avec bascule entreprise / salarié, quatre statistiques qui s’empilent par-dessus une photo, marketplace, marques partenaires, simulateur de CO₂, réseau de boutiques, témoignages, FAQ, appel à l’action, pied de page. Treize sections, une seule page, un seul fichier HTML.
L’original est un site Nuxt piloté par un CMS : une application complète, GSAP et son moteur de scroll, un préchargeur animé et un bundle JavaScript de 976 Ko à lui seul. Tout le code a été jeté. Ce qui a été gardé : la structure, le dessin, les textes, les photos et la vidéo.
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 couples
Le site ne peint jamais une carte directement : il choisit un
couple, un fond et la couleur de texte qui va avec. Six
couples, en haut de assets/css/style.css :
--green-deep: #005236; /* titres, surfaces principales */
--lime: #e6ff55; /* l’accent qui claque : titre d’accueil, CTA */
--violet: #4b1a9a; /* couple 1 — « Bien-être », marketplace */
--orange: #e54c1e; /* couple 2 — « Santé » */
--navy: #033968; /* couple 3 — « Absentéisme », boutiques */
--mint: #d4f5e0; /* couple 4 — « Impact » */Une chose à comprendre avant de toucher au reste : il y a trois verts, pas un. Le vert profond passe le contraste AA sur le crème (8,2:1) et sur le blanc (9,3:1), mais il disparaît dans une photo. C’est le jaune fluo qui tient sur la vidéo d’accueil et sur le pied de page sombre (15,5:1). Si tu changes l’un, vérifie les trois.
La taille de toute la page — une ligne
Chaque dimension du site est en rem, et la racine vaut
0.6944vw, c’est-à-dire exactement 10 px sur un écran de
1440 px. Divise un pixel de maquette par 10 et tu as la valeur en rem :
9.6rem veut dire « 96 px dans la maquette ». Change cette
seule ligne et toute la page grandit ou rétrécit d’un bloc.
Le nom
Cherche « Pedalio » dans index.html. Aucune classe CSS ne
contient la marque : un rechercher-remplacer ne peut rien casser. Le
logo est dans assets/img/logo.svg, en deux couleurs.
Les quatorze effets, et comment ils sont faits
Tous relevés dans le bundle de l’original — durées, courbes, décalages,
seuils — puis mesurés au navigateur, pas à l’œil. Deux courbes suffisent
à tout le site : cubic-bezier(.77,0,.175,1) pour les entrées,
cubic-bezier(.645,.045,.355,1) pour l’interface.
| Effet | Où | Comment |
|---|---|---|
| Panneaux qui s’empilent en 3D | 4 statistiques, 4 700 px | position: sticky pour l’empilement, un seul nombre écrit par le JS pour l’inclinaison (4°, 36° en X, ×0,8) |
| Bouton à balayage | 17 boutons | deux panneaux inclinés de −12° montent avec 42 ms d’écart, le libellé sort par le haut et une copie revient par le bas sur un ressort |
| Titre mot à mot | 9 titres | chaque mot dans une boîte qui coupe, 1 s, 30 ms d’écart entre deux mots |
| Forme dessinée au trait | 7 gribouillis de marque | stroke-dashoffset animé en 2,5 s ; celui de l’accueil s’arrête à 1 380 unités sur 1 975 |
| Apparition au scroll | 14 blocs | IntersectionObserver, déclenchement à 15 % du bas de l’écran |
| Onglets qui avancent seuls | démarche, 3 étapes | radios natives + :has() ; le JS ajoute l’avance toutes les 4 s et s’arrête au premier clic |
| Bascule à pilule | Entreprises / Salarié·es | deux radios, une pastille qui glisse en 0,5 s, les deux grilles superposées |
| Rideau sur la photo | démarche | clip-path qui remonte en 1,2 s, la photo passe de ×1,2 à ×1 |
| Fond qui change de couleur | démarche | la section reprend les deux couleurs de l’étape active, transition de 0,8 s |
| Bandeaux défilants | 2 marquees | la liste écrite deux fois, translation de −50 % en 16 s, masque en dégradé sur les bords |
| Parallaxe | carte « 600 € » et 2 pastilles | le JS écrit une distance en pixels, le CSS garde la rotation |
| Pied de page rideau | fin de page | il démarre 25 % plus haut que sa case et se remet en place sur le dernier écran |
| Carrousel | 3 témoignages | scroll-snap natif : glisser, balayer et le clavier marchent sans JS ; avance auto toutes les 8 s |
| Accordéons | 8 questions | <details> natif ; le plus devient un moins en 0,4 s |
Ce qu’il faut savoir
- Aucune requête externe. Tout est local : polices, photos, vidéo, logos. L’original chargeait deux CDN et un outil de prévisualisation de CMS.
- L’apparition au scroll ne peut pas masquer le contenu. L’état caché n’existe que si le JavaScript a tourné. Vérifié en coupant les scripts : 22 titres sur 22 restent visibles, les 8 réponses de la FAQ sont lisibles, les 7 formes sont dessinées.
-
Zéro style et zéro script en ligne. Le template respecte la
politique de sécurité stricte du site — celle-là même qu’un
style="opacity:0"viole. -
Les bascules marchent sans JavaScript. Les onglets de la
démarche et le sélecteur d’audience sont des
<input type="radio">natifs ;:has()se charge d’afficher le bon panneau. Le JavaScript n’ajoute que l’avance automatique. -
Une seule boucle de défilement. Empilement, parallaxe et
pied de page passent par un seul écouteur et un seul
requestAnimationFrame— trois écouteurs séparés, c’est une page qui saccade. - Accessibilité : lien d’évitement, états des menus annoncés, FAQ native, position du carrousel annoncée, focus visible unique, décorations masquées aux lecteurs d’écran, animations et délais coupés 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.
- La photo de fond des statistiques est floue. Elle est affichée en 1440 × 900 alors que la plus grande version servie par l’original fait 900 × 547. Le défaut vient de la source, pas du ré-encodage ; les panneaux la couvrent à 90 %.
-
L’échelle de la racine a été corrigée. L’original laissait
1remtomber à 5,3 px entre 769 et 1024 px : le corps de texte y faisait 10 px, illisible sur une tablette. Un plancher de 8 px règle ça, et un plafond évite le saut de −25 % que l’original s’infligeait à exactement 2560 px. -
La forme d’accueil s’arrête volontairement à 70 % de son tracé.
Chez l’original, l’animation reste bloquée à mi-chemin ; dessiner tout le
trait aurait ajouté un second arc en travers de la vidéo. La longueur
dessinée est une variable,
--draw. -
Trois défauts de l’original ont été retirés :
word-break: break-allsur tout le corps (qui coupait les mots n’importe où),user-select: nonesur tous les éléments (on ne pouvait rien copier) et:focus { outline: none }sans remplacement (le clavier perdait le curseur). - Le site d’origine a plusieurs pages. Tous les liens ramènent ici à une ancre de la page plutôt qu’à une 404. Le bouton « Connexion », qui pointait vers une application, mène au contact.
- Le méga-menu est devenu un panneau simple. L’original ouvre un volet plein écran avec des images ; ici les trois entrées ouvrent une liste de liens sous elles, au survol comme au clic.
- La page fait 0,6 % de moins que la référence (14 675 px contre 14 766). L’écart tient dans la FAQ, dont les réponses se répartissent sur moins de lignes. Rien ne se chevauche.
- Les deux orangés de la palette sont faibles. Le texte rose sur la carte orange tombe à 2,6:1, l’orange sur son fond pâle à 3,5:1 : l’un ne passe nulle part, l’autre seulement pour les titres. Les deux viennent tels quels de l’original et sont gardés pour rester 1:1 ; le README dit quoi changer pour un vrai site.
- Les photos, la vidéo et les logos de marques viennent du site d’origine. Le code est à toi ; pour les visuels et le nom, vérifie avant de publier. Les deux polices, elles, sont libres de redistribution.
Prends-le, ouvre-le, casse-le.
Pedalio est gratuit. La bibliothèque complète — les autres templates et les composants — est incluse dans l’abonnement, avec la formation.
Accès immédiat · Sans engagement · Annulation en 1 clic