landing-page-cinematografica

Site cinématographique

Vous donnez au site la sensation d'une pièce bien dirigée : chaque défilement révèle quelque chose, chaque bouton répond avec du poids, la typographie a une échelle digne d'une affiche. Le client final est propriétaire de commerce local et ses visiteurs sont souvent sur mobile, souvent en 4G. C'est pourquoi le mouvement est léger, natif du navigateur, et ne gêne jamais la lecture ni le clic sur WhatsApp.

Référence vivante du standard : le modèle fourni avec la skill fazer-site (fazer-site/template/). En cas de doute sur le rythme, l'échelle ou la densité, ouvrez la référence et imitez la finition, pas le contenu.

Axiomes

1. L'identité est celle du client. La couleur et la typographie proviennent du logo, de la façade et de l'Instagram du commerce. Pas de palette toute prête issue d'un catalogue. Ce n'est que lorsqu'il n'y a aucun logo nulle part qu'une couleur provisoire entre en jeu, déclarée comme provisoire.
2. Le nom du commerce est dans le hero, en grand. Un hero sans le nom a été rejeté.
3. La photo est celle du commerce, jamais de banque d'images. Façade, boutique, produit, résultat. Sans photo réelle d'une partie, le bloc est marqué comme illustratif ou supprimé.
4. Le mouvement sert la lecture. Si une animation retarde le contenu, bloque le défilement ou fait disparaître le bouton, elle est supprimée.
5. Léger par défaut. HTML, CSS et IntersectionObserver suffisent. Une bibliothèque d'animation (GSAP et assimilés) n'entre que lorsqu'un effet approuvé ne peut pas être réalisé sans elle, et jamais pour quelque chose que le CSS peut faire.

Interdit (chaque item a déjà été refusé dans un projet réel)

• Cartes qui s'empilent ou descendent lors du défilement (sticky stacking, pin avec échelle et flou). Interdit.
• Découpage arrondi, en arc ou en cercle sur une photo de boutique, façade, produit ou environnement. Les conteneurs avec un grand border-radius sont également exclus. Les angles vifs ou la coupe diagonale (clip-path) sont la norme.
• Photo de fond derrière les avis.
• Serif fin et italique comme titre, et or comme accent par défaut. Cela se lit comme "délicat". Le ton demandé est masculin, agressif et moderne, sauf si la marque du client dit autre chose.
• Tableau de prix inventé et chiffres inventés. Prix, note, délai, témoignage et compteur n'entrent que s'ils sont publics et propres au commerce.
• Ornement logiciel sans sens pour le commerce local : cartes simulant un tableau de bord en direct, "System Operational", curseur qui clique tout seul, machine à écrire de log.

Ce qui crée l'effet cinématographique

Typographie d'affiche. Une famille condensée et grasse pour les titres (ex. : Barlow Condensed 800 italique), une autre propre pour le corps. Titres grands (clamp() jusqu'à ~90-140 px sur desktop), interligne court, text-wrap: balance. Le contraste d'échelle entre le titre et le texte est l'effet principal ; il ne coûte rien.

Hero. Nom du commerce énorme, une phrase concrète sur ce qu'il fait et où, preuves courtes (note, avis, abonnés, horaire) et le bouton principal. Sur desktop, texte et photo côte à côte. Sur mobile, l'ordre est : nom, phrase, preuves, bouton, photo. La photo peut avoir des coins coupés en diagonale et un zoom lent (scale de 1 à 1,06 en ~20 s).

Entrée échelonnée. Au chargement, les éléments du hero montent de 16-40 px et apparaissent en séquence (délai d'environ 80 ms entre eux). Les sections suivantes se révèlent avec le même mouvement à l'entrée dans l'écran, via IntersectionObserver avec un threshold bas.

Texture. Bruit SVG <feTurbulence> à 5 % d'opacité sur les fonds unis du hero et des points forts, pour enlever l'air de dégradé numérique.

Boutons avec du poids. overflow: hidden avec une couche qui glisse pour changer la couleur au survol, léger scale(1.03) avec cubic-bezier(0.25, 0.46, 0.45, 0.94). Cible tactile d'au moins 44 px.

Mise en avant de preuve sur grand écran. Un avis réel en taille de manifeste, fond sombre uni, avec les mots qui s'allument en séquence au défilement. Un par site ; le reste des avis en grille simple.

Chiffre qui compte. La note ou un autre chiffre réel compte de 0 jusqu'à la valeur à l'entrée dans l'écran.

Bande de services en contraste. Une section claire au milieu du site sombre (ou l'inverse), avec de grands numéros d'ordre (01, 02...), coupe le rythme et marque le changement de sujet.

Bande défilante (marquee) avec services ou catégories, dans la couleur d'accent, optionnelle.

Règles techniques

• Base : HTML statique avec CSS dans le fichier lui-même, sauf si le projet a déjà une autre base. Dans un projet existant, conservez la base et la copie approuvée ; appliquez uniquement cette couche.
• Polices via Google Fonts avec preconnect et display=swap.
• Image du hero avec fetchpriority="high" ; le reste avec loading="lazy", width et height déclarés.
• Tout ce qui est dans @media (prefers-reduced-motion: reduce) désactive l'animation et la transition.
• Mobile : barre fixe en bas avec WhatsApp et Appeler, qui disparaît lorsqu'un champ de formulaire reçoit le focus et tant que le bouton du hero est visible. Pas de défilement horizontal à 360 px.

Prêt lorsque

• Les captures d'écran à 360, 375 et 1440 px ont été ouvertes et inspectées, et aucun élément de la liste des interdits n'apparaît.
• Le nom du commerce est dans le hero et les photos sont celles du commerce ou marquées comme illustratives.
• Avec prefers-reduced-motion activé, le site apparaît entier et lisible, sans contenu caché attendant une animation.