Website VSL Standard (la méthode olaceo)

Que fait Website VSL Standard (la méthode olaceo) ?

v1.0.0, 25 octobre 2026. Rédigé à partir du code de référence olaceo.com et de ses journaux de mesure, pas de mémoire. Chaque nombre ci-dessous est soit :

• mesuré : copié du code de référence ou d’un journal de vérification de la build de référence, soit
• marqué NON VÉRIFIÉ : un objectif, une affirmation externe, ou non encore mesuré. Ne citez pas ces éléments comme des faits à un client.

Fichiers fournis avec ce standard (les chemins sont relatifs à ce fichier) :

• reference/tokens.css : le vrai bloc de tokens (clair et sombre), base typo, grille, boutons, champs de saisie, hero, pilule et transitions.
• reference/motion.js : le vrai code pour les ressorts, l’effet caoutchouc, la vélocité, la projection de glissement et le VSL sans saut.
• templates/client-intake.md : le formulaire d’intake à remplir pour l’étape 1.

La philosophie en un écran (lisez ceci d’abord)

1. Un visiteur, un job, une prochaine étape. Chaque personne qui arrive a un seul objectif. Le site doit découvrir quelle personne elle est en un clic, puis montrer uniquement ce qui la fait avancer. La friction est l’ennemie.
2. Façade calme, mécanique cachée. La surface est blanche, une police, un accent et des photos ou une vidéo réelles. L’intelligence (routage, lecteur sans saut, tracking, CRM) est invisible.
3. Des preuves, pas des promesses. Pas de statistiques inventées, logos, témoignages, pénurie ou comptes à rebours. Si la preuve n’existe pas, l’emplacement reste masqué ou la FAQ indique « pas encore, et nous n’en inventerons aucune ». La build échoue sur les affirmations interdites.
4. Tout le monde sort utilement. Pas d’impasse, ni de langage de rejet (« pas adapté », « pas qualifié »). Un visiteur non prêt reçoit le parcours gratuit.
5. Le mouvement est liquide, pas en verre. Le mouvement suit la physique (ressorts, vélocité, effet caoutchouc). Il ne décore jamais, et respecte toujours le motion réduit. Pensez à de l’eau qui fusionne avec une flaque, pas du verre.
6. Mesuré, pas au jugé. Le centrage, les décalages de mise en page, les chutes d’images et les positions du pli sont mesurés en px et ms avant d’être déclarés terminés.

Pourquoi ça marche (l’angle psychologique) :

• Auto-sélection à l’entrée. Les gens font confiance à une page qui les nomme. « Lequel êtes-vous ? » fait que le visiteur se segmente lui-même, chaque mot suivant peut s’adresser à une seule personne. Cela coûte un clic, pas un formulaire.
• Valeur avant la demande. Le H1 annonce le résultat que l’ICP veut (temps, argent, compétence manquante), pas le service. Deux praticiens du funnel VSL le disent : Haynes, « une déclaration claire et directe sur ce qu’est votre offre et à qui elle s’adresse » ; Iles, « parlez du résultat, pas du service ».
• Moins de choix, plus d’action. Un seul CTA principal par page. Les chemins secondaires sont des liens texte discrets, jamais un second bouton.
• Calme = crédible. La retenue (espace blanc, un accent, grande police légère) est perçue comme premium et confiante. Le désordre est perçu comme besoin. C’est un jugement de design de la build de référence. NON VÉRIFIÉ comme effet de conversion mesuré.
• Engagement par le visionnage. La VSL ne peut pas être avancée, donc le CTA rencontre quelqu’un qui a entendu tout l’argument. L’écran de fin place le CTA juste là.

---

Étape 1. Intake : qui entre, ce qu’ils veulent, ce qui les arrête

Faites ceci avant tout pixel. Remplissez templates/client-intake.md avec le client.

Pour chaque ICP, notez :

• Nom dans leurs mots, la façon dont ils se décriraient sur une carte. olaceo : « Je possède une entreprise » / « Je construis avec l’IA ».
• Objectif : le seul résultat qu’ils recherchent. Les propriétaires achètent des résultats (« économiser de l’argent, gagner du temps, gagner de l’argent »), pas des outils.
• Objection principale : la raison pour laquelle ils partiraient. Constructeur : « Je sais construire mais je bloque sur les appels commerciaux ». Propriétaire : « Je ne sais pas ce que l’IA pourrait résoudre dans mon entreprise ».
• Preuve nécessaire : uniquement la vraie preuve que vous avez réellement.
• Prochaine étape : l’action unique pour cet ICP (réserver un appel, lancer une démo, acheter, télécharger).
• Règle de prix : afficher ou masquer. Le funnel business d’olaceo n’affiche AUCUN prix (« Nous diagnostiquons avant de chiffrer »), imposé par la build.

Règles :

• 2 ICP est la référence. Plus de 3 portes sur un routeur dilue la répartition. NON VÉRIFIÉ (jugement, non testé).
• Si vous ne pouvez pas écrire une phrase pour l’objectif d’un ICP, vous ne pouvez pas encore construire leur page. Arrêtez-vous et demandez.

Étape 2. Le split d’entrée (routeur sur « / »)

Quoi : la page d’accueil est un routeur. Une question et une grande carte par ICP. Pas de mur de texte de hero, pas de menu de navigation.

Build de référence (page routeur et ses styles ; en ligne sur olaceo.com depuis le 24 octobre 2026) :

• H1 = le mot-symbole plus une ligne nommant les deux audiences (« L’IA qui paie, pour les propriétaires d’entreprise et les constructeurs qui la vendent. »). Les lecteurs d’écran le reçoivent comme du vrai texte.
• Question : « lequel êtes-vous ? » (minuscule, discret). Marge 56px 0 18px.
• Cartes : 2 de large, 340px chacune, écart 16px, hauteur 200px, rayon 22px, bordure rgba(18,24,32,.09). Disque de flèche 44px. Le survol monte de -2px ; l’actif est à l’échelle .985.
• Mobile : 1 colonne jusqu’à 420px de large, cartes 108px de haut.
• Chaque carte est une simple <a href>. Elle fonctionne sans JS.
• Choix mémorisé : localStorage ola_path. Un retour lit « bon retour » et la dernière carte reçoit une pastille « continuer » discrète.
• Ne jamais rediriger automatiquement. Pourquoi : le logo sur chaque page renvoie vers « / », donc une redirection automatique piégerait quiconque a choisi la mauvaise porte.
• Les liens directs (annonces, emails, PDF) vont directement à la page ICP et ne passent jamais par le routeur.
• Les membres reçoivent un lien texte discret sous les cartes (« Déjà membre ? Connectez-vous ») : 13px, #6B7580, cible tactile 44px.
• Chargeur : CSS pur sur le mot-symbole du h1. Il dure 1,78s, un retour dans la même session obtient 0,4s, et le motion réduit obtient un seul fondu de 0,4s. Pas de requêtes supplémentaires, CLS 0.
• Sortie : une transition ViewTransition entre documents, utilisée uniquement du routeur vers le chemin : out .3s, in .5s cubic-bezier(.22,1,.36,1).
• Pied de page : une rangée discrète de liens secondaires (guide gratuit, réservation, à propos, confidentialité, mentions légales).
• JSON-LD : Organization, Person, WebSite, plus un WebPage avec hasPart pour chaque chemin.

Mesuré sur la build de référence : choix, mot-symbole et question centrés à 0.02px près ; empilés verticalement centrés à 0.000px ; suite de tests du routeur 39/39.

Étape 3. Chemin par ICP : directement à la valeur

Chaque page ICP suit la même colonne vertébrale : titre, vidéo, une action.

1. Surtitre : à qui ça s’adresse, en mots simples. « Pour les propriétaires d’entreprise ».
2. H1 : le résultat. 12 mots ou moins.
3. Lede : une ligne. Comment vous le délivrez.
4. VSL : grande et centrée (étape 3a).
5. Un seul CTA juste en dessous de la vidéo, visible dès le chargement, pas de révélation retardée. Les petits caractères en dessous éliminent la peur : « Gratuit. 30 minutes. Pas de pitch deck. »
6. Preuve directement sous le hero : honnête uniquement (« Ce que nous avons livré »).
7. Ensuite seulement ce qui répond aux objections, dans cet ordre : problèmes (dans leurs mots), ce que vous trouvez ou faites, comment ça marche (3 étapes), échelle d’offres, FAQ (avec une réponse claire sur le coût), et un CTA de clôture en pleine largeur qui répète l’action unique.

Ordres de référence :

• /business : hero VSL, Ce que nous avons livré, Problèmes (4), Ce que l’audit trouve (6, numérotés), Comment ça marche (Walkthrough, Diagnostic, Build), Échelle, FAQ, CTA de clôture (lien texte alternatif vers le site check gratuit).
• /builders : hero VSL, #book (calendrier intégré, « Choisissez un créneau. »), à qui ça s’adresse, à propos du fondateur, FAQ.

Règles :

• Pas de bouton de réservation dans l’en-tête. L’en-tête est uniquement le mot-symbole (plus des liens texte À propos/FAQ si nécessaire). Pourquoi : un second CTA en haut entre en concurrence avec la vidéo.
• Pilule flottante reflétant le seul CTA de la page. Elle apparaît seulement après que le CTA du hero a défilé, et se cache sur le calendrier, les formulaires, le CTA de clôture et le pied de page ([data-fc-hide]). Elle est centrée en bas à 20px + zone de sécurité. Motion réduit : fondu uniquement.
• Pages de niche (/for/<slug>) sont un fichier JSON fusionné sur un JSON par défaut, donc une niche ne liste que ce qui change.
• Réservez là où vous le pouvez. Le CTA défile vers un calendrier intégré, pas vers un autre site, afin que le visiteur ne quitte jamais la page pour réserver. NON VÉRIFIÉ comme augmentation mesurée sur notre propre trafic.

3a. Disposition VSL et règles du lecteur (en direct sur olaceo.com /business et /builders)

Disposition (code dans reference/tokens.css, « centered VSL hero ») :

• Surtitre tracking .08em, marge-bas 14px.
• H1 : clamp(40px,3.3vw,56px)/1.05, largeur max 880px.
• Lede : clamp(17px,1.35vw,19px), largeur max 720px, 12px sous le H1.
• Vidéo : width:min(880px,92vw,calc((100svh - 330px)*16/9)), 22px sous le lede, rayon 16px, ombre 0 24px 60px -28px rgba(10,30,50,.35). Le terme de hauteur maintient le CTA au-dessus du pli sur les ordinateurs portables courts.
• CTA : largeur min 320px, hauteur 56px.
• Mesuré : à 1440x900 la vidéo fait 880x495 et le bouton se trouve à y 744-800 (dans le pli). À 1280x720 la vidéo fait 693x390. À 390x844 la vidéo 4:5 fait 358x448 et le bouton se trouve à y 712-768.
• Mobile : H1 32px/1.08, lede 15px. Le fichier 4:5 est utilisé uniquement sur un téléphone en mode portrait (max-width:699px) and (orientation:portrait). En rotation, il échange les fichiers à la même seconde. Toujours object-fit:contain, donc les mots ne sont jamais coupés.

Lecteur (extrait de code dans reference/motion.js partie C) :

• Avant le premier clic : une boucle de prévisualisation muette avec un flou de 18px et une échelle de 1.1 (12px et 1.13 sur mobile), un titre statique sur un bouton play de 112px (cercle intérieur 92px ; 100/80 sur mobile), et « Joue avec le son » en dessous. Le premier clic dissout le flou en .42s, redémarre à 0:00 avec le son, et le flou ne revient jamais.
• Pas de saut en avant : maxW ne grandit que par lecture naturelle (chaque étape sous 1.5s). Tout saut au-delà de maxW + 0.3s est remis en place. La vitesse de lecture est verrouillée à 1. Pas de PiP, lecture à distance, téléchargement ou plein écran natif ; iOS reste en ligne. Le retour en arrière et la pause sont toujours autorisés. Touches : Espace/K pour basculer, J -10s, Flèche gauche -5s, Début ; Flèche droite uniquement dans la partie déjà regardée.
• Contrôles : la barre se cache automatiquement 2s après le début de la lecture. Boutons 44px (48 sur mobile). Piste 4px (6px au survol), pouce 14px.
• Écran de fin : le CTA (focus) plus « Regarder à nouveau ».
• Événements : VideoPreview, VideoSoundOn, VideoView25/50/75/100, VideoReplay.
• Qualité : la 4K n’est servie que sur les grands écrans haute densité lorsque mediaCapabilities signale un décodage fluide. Si la 4K échoue, elle tombe sur 1080 à la même seconde en conservant le son. (Problème connu : une chute qui coupe le son. Correctif : couper le son uniquement sur NotAllowedError.)
• Centrage du bouton Play : le halo, le cercle et le SVG partagent une même cellule de grille (inset 0, margin auto, pas de transformations), et le centre de la zone du triangle est à +0.5px à droite. Mesuré à 0.000px décentré à DSF 3.
• Pourquoi pas de saut : le CTA doit rencontrer quelqu’un qui a entendu tout l’argument. Pourquoi le flou : il dit « c’est une vidéo, tapez dessus » sans lancer le son automatiquement.
• Cibles : VSL de 5 minutes ou moins. Les objectifs de taux de lecture et d’engagement de 50% ou plus proviennent de la méthode VSL de Haynes. NON VÉRIFIÉ : nous n’avons pas encore de taux de lecture mesuré.

3b. Formulaires et friction

• Un écran, au plus 3 champs (référence : prénom, email, site web ou nom de l’entreprise). Pas d’étapes, pas de barre de progression. La qualification a lieu lors de l’appel et dans le CRM.
• Chaque champ reçoit le bon autocomplete, inputmode, autocapitalize, spellcheck=false si nécessaire, et enterkeyhint (next, next, go). Entrée passe au champ suivant.
• Honeypot, vérification de même origine, limite de taille et limite de débit côté serveur. Fonctionne sans JS (une vraie action + method="post").
• Le bouton dit ce qui se passe : « Réserver ma démo ». Petits caractères en dessous : « Nous utilisons ces informations uniquement pour organiser votre démo. Pas de liste, pas de spam. »
• Téléphone seulement s’il est facultatif et demandé après l’engagement, avec une case à cocher de consentement SMS non cochée distincte dont le libellé est vérifié par la build.
• Historique (pourquoi) : un quiz à 8 écrans a d’abord été construit puis supprimé (« pas huit clics, sous deux minutes »). Ne construisez pas de quiz multi-étapes.

3c. Règles de rédaction (appliquées dans la mesure du possible)

• Nom de marque en minuscules (« olaceo ») partout, même dans les surtitres en majuscules (<span class="lc">). Pour un client, utilisez la propre règle de casse de leur marque.
• Pas de tirets cadratins. La build échoue sur U+2014 dans le contenu de niche.
• Pas de prix sur le funnel business tant que BIZ_SHOW_PRICES est faux. La build échoue sur $<digit> dans le HTML rendu.
• Pas de statistiques inventées, de % de revendications, de logos, de témoignages ou de noms de produits non lancés dans le contenu de niche. La build échoue sur ces éléments (bannedProof).
• Valeur d’abord : le résultat dans le H1, le mécanisme dans le lede, le dissuadeur de peur sous le CTA.
• Mots simples, phrases courtes, contractions, deuxième personne. Les pages pour constructeurs d’olaceo utilisent la voix du fondateur (« Les amis, ... »), jamais « bro » (la build échoue sur ce mot dans les emails).
• Sélectivité discrète : uniquement des spécificités, jamais « sélectionné », « choisi » ou « exclusif ».
• Jamais de revendications « piratées » : « pourrait », jamais « est ».
• Un avertissement sur les revenus sur les pages de coaching ou de revenus.

Étape 4. Tokens : typo, espacement, grille, couleur, thème

Copiez reference/tokens.css. Gardez toutes les valeurs non colorées. Remplacez les couleurs pour le client.

Typographie (pourquoi : une police variable garde le calme et économise une requête ; les grands titres légers sont perçus comme premium) :

• Une famille, woff2 variable auto-hébergée 300-700, font-display:swap, préchargée. Secours : system-ui, -apple-system, « Segoe UI », sans-serif.
• Corps : 400, 1.0625rem/1.6. Petit : .9375rem.
• H1 : graisse 300, clamp(2.625rem,5.4vw,5rem), hauteur de ligne 1.04, tracking -.03em.
• H2 : graisse 400, clamp(2rem,3.4vw,3.125rem), 1.1, -.025em.
• H3 : 1.25rem, 600, 1.3, -.01em.
• text-wrap:balance sur les titres.
• Longueurs de ligne : lede 34ch, corps 60ch, paragraphe d’en-tête de rangée 38ch.

Espacement et grille (pourquoi : un grand rythme fixe = calme ; clamp() maintient un système de 320 à 2560) :

• Marge latérale --m clamp(20px,4vw,64px).
• Padding de section --gap clamp(96px,11vw,168px).
• Conteneur 1360px max.
• 12 colonnes, écart clamp(16px,2vw,32px).
• Marge bas du bloc de titre de section clamp(40px,4.4vw,64px).
• Points de rupture : 900, 700/699 et 560px.
• Rayons : cartes 22px, petit 16px, actions et champs de saisie en pilule (999px).
• Cibles tactiles 44px ou plus. Boutons primaires 54px (.btn), 56px dans le hero et le formulaire (portée du pouce).
• Nav 72px de haut (64px sur mobile).

Couleur (pourquoi : un accent signifie « agissez ici » ; tout le reste est de l’encre sur blanc avec un seul ton doux) :

• Rôles : fond (blanc), paliers de tons (mist, mist-2), texte (ink, ink-2), accent (sky, hover sky-2, wash), ligne, ...