Pedalio

Site B2B pour une offre de mobilité vendue aux entreprises

Template complet Réservé aux membres Ouvrir la démo Débloquer la bibliothèque

Aperçu du template Pedalio : section d’accueil en vidéo, titre « La mobilité qui fait mieux » en jaune fluo, gribouillis vert sombre dessiné au trait, barre de navigation blanche flottante.

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 1rem tomber à 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-all sur tout le corps (qui coupait les mots n’importe où), user-select: none sur 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.

Il t’attend dans la bibliothèque.

Pedalio est inclus dans l’abonnement, avec le reste de la bibliothèque et la formation complète.

Je commence maintenant — 29 $/mois

Accès immédiat · Sans engagement · Annulation en 1 clic