Un seul DOM, trois ordres verticaux. Le sujet de la fiche n'est pas le goût, c'est l'ordre — c'est là que les trois marques du panel divergent. Éditorial (Apple /fr, B&O accueil) : texte, puis appel à l'action, puis image ; ni prix, ni note, ni badge, ni compte à rebours. C'est le registre le plus nu, et c'est celui qui demande le plus à la phrase.

CatLang

Le bac qui se remet en état seul.

Un cycle après chaque passage, un tiroir refermé entre deux vidages, et une application qui date chaque visite au lieu de vous demander de deviner.

Découvrir CatLang Voir la fiche technique

Bientôt disponible

Vous êtes sur la liste d'attente

---

Le héros n'a pas de contenu

Cette section attend un titre, une phrase et un visuel. Tant qu'ils manquent elle ne rend rien — et un rendu vide ne ressemble pas à une erreur, il ressemble à un espacement.

Configurer la section

Le visuel du héros n'a pas pu être chargé.

Le texte, lui, reste lisible et la page reste achetable. Réessayer

Technique (Apple /fr/airpods-pro) : le média d'abord, puis sur-titre, titre-superlatif, sous-claim chiffré avec son appel de note, et une barre d'achat collante où le prix ne quitte jamais l'écran. Un chiffre sans appel de note n'existe pas dans le panel — c'est vrai sur les cinq captures Apple. La barre reste dans sa section : fixée au viewport, trois héros d'atelier empileraient trois barres.

CatLang

Un cycle. Après chaque passage.

Cycle complet en moins de trois minutes¹

Ajouter au panier

Bientôt disponible

Vous êtes sur la liste d'attente

---

À partir de 599,00 €

Ajouter au panier

1. Valeur de gabarit, à confirmer sur la fiche technique du premier lot.

Le héros n'a pas de contenu

Cette section attend un titre, une phrase et un visuel. Tant qu'ils manquent elle ne rend rien — et un rendu vide ne ressemble pas à une erreur, il ressemble à un espacement.

Configurer la section

Le visuel du héros n'a pas pu être chargé.

Le texte, lui, reste lisible et la page reste achetable. Réessayer

Domestique (B&O fiche produit, Tuft+Paw) : photo de vie, texte posé en bas de l'image, filet fin, puis « à partir de » en petites capitales. Aucun appel à l'action dans le héros — la page assume que le visiteur descend. C'est le registre qui demande la meilleure photographie : il n'a rien d'autre.

Dans la pièce

Il ne se fait pas remarquer.

Porcelaine et chrome, 62 cm de haut, aucun voyant qui clignote la nuit.

Bientôt disponible

Vous êtes sur la liste d'attente

---

À partir de 599,00 €

Le héros n'a pas de contenu

Cette section attend un titre, une phrase et un visuel. Tant qu'ils manquent elle ne rend rien — et un rendu vide ne ressemble pas à une erreur, il ressemble à un espacement.

Configurer la section

Le visuel du héros n'a pas pu être chargé.

Le texte, lui, reste lisible et la page reste achetable. Réessayer

L'exemplaire commutable. Celui-ci n'a aucun registre écrit : il obéit à la barre Maquette. C'est l'exemplaire à regarder sur téléphone en basculant les trois registres — le seul moyen honnête de trancher, puisque la comparaison côte à côte avantage toujours le plus dense.

CatLang

Vous comprenez enfin.

Le bac se remet en état seul. L'application traduit ce que votre chat dit depuis toujours.

Cycle complet en moins de trois minutes¹

Ajouter au panier Comment ça marche

Bientôt disponible

Vous êtes sur la liste d'attente

---

À partir de 599,00 €

Ajouter au panier

1. Valeur de gabarit, à confirmer sur la fiche technique du premier lot.

Le héros n'a pas de contenu

Cette section attend un titre, une phrase et un visuel. Tant qu'ils manquent elle ne rend rien — et un rendu vide ne ressemble pas à une erreur, il ressemble à un espacement.

Configurer la section

Le visuel du héros n'a pas pu être chargé.

Le texte, lui, reste lisible et la page reste achetable. Réessayer

Titre long, rupture, liste d'attente. Un titre français dépasse presque toujours son équivalent anglais : la taille redescend d'un cran et la mesure s'élargit, on ne coupe jamais un titre de héros. En rupture, l'achat disparaît mais le prix reste lisible — c'est un fait, pas une offre. En succès, la pastille remplace l'appel à l'action au lieu de s'ajouter à lui.

Chargement, erreur, vide, désactivé. L'ossature a la forme du contenu attendu : la page ne saute pas quand le texte arrive. En erreur, le visuel tombe et l'achat survit — jamais un mur. En vide, la section dit ce qui lui manque : un rendu vide ne ressemble pas à une erreur, il ressemble à un espacement, donc il ne se corrige jamais.

La liste s'empile, à toutes les largeurs. Tuft+Paw dessine une rangée de trois à 1440 px et la translate à 390 : les libellés tombent sur 2, 2 et 3 lignes, les blocs partent du même y et finissent à trois hauteurs. Jamais de rangée à 390 px. Cinq emplacements, pas six : B&O en met 5, Apple 3, aucune marque du panel n'en met six — la limite est structurelle. Chaque item est un lien vers la vraie politique, pas un libellé décoratif : chez B&O le vidage texte dit « s'ouvre dans un nouvel onglet » cinq fois.

La promesse datée vaut les trois pictogrammes réunis (Tuft+Paw : picto camion + « Est. delivery before Aug 27 »). Elle est une prop, pas un texte du composant — c'est la seule contre-mesure au piège n°4. Ci-dessous : trois items seulement (le format Apple), puis la version sans promesse datée.

Variante cartes — le modèle Apple. Trois cartes empilées : pictogramme, titre, explication, lien. C'est la seule variante où l'explication s'affiche : en style coches, la phrase EST le message et B&O n'écrit rien sous « Garantie jusqu'à 3 ans ». Les deux styles portent exactement les mêmes props — seul le style décide de montrer la seconde ligne, donc basculer ne fait rien perdre.

Long, chargement, erreur, vide. Un libellé de politique française est long — « Droit de rétractation de quatorze jours à compter de la réception » — et il doit tenir sans couper. En erreur, aucune date approchée n'est affichée à la place : une date fausse coûte plus cher qu'une date absente. En vide, la règle est dure — une promesse sans destination est un ornement.

Une idée par écran, dans l'ordre imposé. Matière : le gros plan à distance de toucher, cadre carré, image rognée — un gros plan encastré n'est plus un gros plan. C'est « comment c'est fait ». Le fond n'est jamais blanc pur : CatLang est blanc, un blanc pur derrière lui supprime son contour et l'objet disparaît. La porcelaine n'est pas une préférence, c'est ce qui rend l'objet visible.

Aucune photo de client

CatLang n'a jamais été vendu : il n'existe donc aucune photo envoyée par un client, et aucune image d'illustration ne viendra en tenir lieu. Cette section apparaîtra quand de vraies photos, signées d'un compte vérifiable, existeront.

Voir le programme photos clients

Le visuel n'a pas pu être chargé.

La légende reste lisible : la preuve écrite ne dépend pas de l'image. Réessayer

Scène — le produit dans une vraie pièce, où il n'est pas le sujet du cadrage. C'est « à quoi ça ressemble chez moi », et c'est la variante que Catharsis ne peut pas encore remplir avec une photo réelle : le panneau de marque dessiné tient la place, et il tient debout tel quel si la photo n'arrive jamais. Aucun rectangle gris nulle part, et aucune image générée par un modèle.

Boîte — ce qu'on reçoit vraiment. Quatre lignes chez B&O, et le produit est encastré, jamais rogné : une boîte rognée n'est plus une boîte. La liste « contenu de l'emballage » est la preuve la moins chère et la plus rassurante d'une page produit — elle répond à la question qu'on se pose juste avant de payer.

Clients — la variante qui ne rend que son état vide, par construction. Catharsis n'a aucune photo envoyée par un client puisque le produit n'a jamais été vendu, et la fiche le dit mot pour mot : soit de vraies photos signées, soit la section n'existe pas encore. Aucune image d'illustration ne vient en tenir lieu.

Long, chargement, erreur, rupture, succès, désactivé. Une légende de laboratoire de 400 caractères ne casse pas le bloc : la mesure s'élargit, le texte respire, il ne se tronque pas — une preuve tronquée n'est plus une preuve. En erreur, l'image tombe et la preuve écrite reste.

La contrainte est une contrainte de retenue, pas de densité. Sur la seule coupe qu'Apple publie il y a un mot dans l'image et une phrase dessous : zéro ligne de rappel, zéro repère numéroté. La densité d'annotation est inversement proportionnelle à la crédibilité perçue. Tout le nommage descend donc dans la légende, où le gras remplace la ligne de rappel. ⚠ Le dessin est une affirmation technique : chaque organe tracé est attesté par la photographie du produit fabriqué — un organe dessiné « pour faire vrai » serait une allégation fausse sur une page de vente.

La bande de chiffres : filet, libellé, nombre, qualificatif avec appel de note, filet. Un chiffre sans appel de note n'existe pas dans le panel. ⚠ Les trois valeurs ci-dessous sont des gabarits — elles n'ont été confirmées par personne, et l'état vide juste après montre ce que rend le composant tant que c'est le cas : un chiffre sur une page produit est une allégation.

Un écran, une idée, une coupe. Les quatre variantes ne superposent pas les trois dispositifs — elles en isolent un, et c'est la règle 4 de la fiche. coupe : le dessin seul. chiffres : la bande seule. pictos : les trois fonctions nommées, sans dessin. sombre : le bloc de pictogrammes sur fond graphite — le seul endroit du lot où la page passe en inverse, et le dessin n'a rien à redéclarer puisqu'il hérite de currentColor.

Long, chargement, erreur, désactivé. La légende longue est le cas réel : une coupe se légende en deux phrases, pas en trois mots. En erreur, la légende reste lisible — elle nomme les organes sans dépendre du dessin, et c'est exactement pourquoi le nommage vit dans le texte et non dans l'image.

A · L'appareil recadré (modèle Apple). On cadre dans un appareil, et on le recadre : le téléphone sort par le bas du panneau et un onglet est tranché à droite. C'est la coupe, et elle seule, qui fait la différence entre « une application qui tourne » et « une capture d'écran collée ». L'écran est du DOM, jamais un bitmap : à 390 px en densité 2, le texte d'une capture devient une bouillie et son poids mange le budget de performance. État par défaut : l'écoute sans résultat — un écran qui afficherait un verdict publierait un résultat que le produit n'a jamais rendu.

Le même écran, peuplé — et marqué comme tel. Les deux valeurs ci-dessous portent data-placeholder et sont déclarées dans PLACEHOLDERS.json sous la catégorie interface. Elles existent pour juger la mise en page d'un résultat, et pour rien d'autre : elles ne partent pas au thème.

B · La prose (modèle B&O), et l'inventaire. B&O ne montre rien : l'application est citée en une phrase et le téléchargement est rangé derrière un accordéon de pied de page. « Si l'interface n'est pas finie, on n'en montre rien. » L'inventaire, lui, est la réponse d'Apple à « ça marche aussi sur… » : des glyphes filaires en grille, jamais du photoréalisme. Laquelle retenir est une décision du fondateur, pas du composant. Primitive manquante signalée : le jeu partagé n'a ni téléphone, ni tablette, ni montre — les quatre contours sont tracés en local.

Vide, erreur, chargement, long, désactivé. L'état vide est celui qui compte : une interface provisoire mise en scène coûte plus de crédibilité qu'elle n'en rapporte. En erreur, le message dit ce qui est préservé — le CatLang continue de fonctionner sans le téléphone, rien n'est perdu. C'est la même promesse que la réponse de la FAQ plus bas, écrite une seule fois de chaque côté.

⚠ Piège B1, la plainte n°1 du fondateur, et le défaut d'origine du thème. B&O garde trois colonnes et les fait défiler : 480 px de contenu dans 373 px de fenêtre, sans dégradé, sans flèche, sans barre — le lecteur mobile lit deux colonnes et demie et croit avoir tout lu. Apple, lui, ne fait pas défiler son tableau, il le réduit à deux colonnes et laisse choisir lesquelles. Ici il n'y a donc aucun overflow-x et aucun min-width : deux colonnes sous 700 px. Un comparatif horizontalement défilable est un comparatif à moitié lu.

La nuance honnête, écrite dans la cellule gagnante. C'est l'emprunt à B&O, et c'est ce qui distingue un comparatif crédible d'un comparatif promotionnel : la colonne qui gagne dit à quelle condition elle gagne. L'absence s'écrit —, un cadratin — jamais une croix, jamais du rouge — doublée d'un texte pour lecteur d'écran. Une croix rouge transforme un tableau en argumentaire.

Trois colonnes — au-dessus de 700 px seulement. La troisième colonne n'apparaît que là où elle tient, jamais en la faisant défiler. Sur téléphone elle est simplement absente : c'est la seule façon de tenir la règle sans mentir sur ce qui est lisible.

Variante mini — la version posée sur une fiche produit (Apple, AirPods) : pas de barre de sélection, pas de prix par colonne, pas de bouton. Juste les valeurs et la porte de sortie. C'est la forme à employer dans la fiche produit, là où le prix et l'achat vivent déjà trente pixels plus haut : les répéter dans le comparatif ferait deux boutons d'achat concurrents sur le même écran.

Vide, long, chargement, erreur, désactivé. L'état vide est l'état honnête du catalogue d'aujourd'hui : le catalogue ne compte qu'un appareil, et un comparatif à une colonne n'est pas un comparatif. L'état long teste le libellé de critère qui ne tient pas sur une ligne — le cas français par défaut.

Zéro témoignage, zéro étoile, zéro nombre d'avis — et ce n'est pas une limite technique. CatLang n'a jamais été vendu : personne n'a pu l'essayer, donc personne n'a pu en parler. Un précédent daté a publié des notes inventées en aggregateRating vers Google sur un produit jamais vendu ; en droit français c'est une pratique commerciale trompeuse, pour Google un motif de sanction manuelle, et pour la marque c'est irréparable. La contre-mesure est structurelle : la porte 6 refuse les catégories avis, note, rating sans dérogation possible, donc aucune valeur d'avis ne peut entrer, même marquée.

L'état par défaut, et il est digne. Pas de « Soyez le premier à donner votre avis » suivi d'un gabarit d'étoiles vides, pas de carrousel de citations d'illustration, pas de compteur à zéro déguisé. Ce qui prend la place est une politique éditoriale — la seule des trois options de la fiche qui se tienne dès aujourd'hui, et le seul élément du panel qui transforme une note en promesse.

La preuve sans un seul client — modèle B&O. Sur sa fiche produit, B&O n'affiche aucune note, aucune étoile, aucun avis : un titre discret, le nom du média en petites capitales espacées avec son signe de lien externe, la citation en 22 px, et beaucoup de vide. C'est le modèle directement applicable ici, parce qu'il ne demande rien qui n'existe pas : il demande un article, daté et vérifiable. Tant qu'aucun article n'existe, la citation reste une ossature — une citation de presse inventée serait exactement la faute que cette fiche existe pour empêcher. Les points de pagination sont masqués tant qu'il n'y a pas de citation réelle : cinq points annoncent cinq articles.

L'ossature de la future section d'avis. C'est la règle « aucun rectangle gris » appliquée au texte : pour juger la mise en page d'une section d'avis, on la juge avec des blocs de marque délibérés, jamais avec de faux avis. L'ordre vient de la carte mesurée chez Tuft+Paw. L'histogramme est construit entier et vide — un agrégat sans histogramme cache la distribution, et une barre remplie à 30 % serait déjà une donnée inventée. La pastille d'initiales reste vide : deux initiales inventées sont une identité inventée.

Le rendu nul, et pourquoi il est explicite. En production la section ne rend pas un cadre vide : elle ne rend rien. L'exemplaire ci-dessous porte data-rendu à zéro — il occupe exactement zéro pixel entre cette note et la suivante. C'est la leçon du 13 août, et c'est pour ça qu'elle est écrite dans un attribut plutôt que laissée à l'absence : un rendu vide ne ressemble pas à une erreur, il ressemble à un espacement, donc il ne se corrige jamais.

Chargement, erreur, long, désactivé. En erreur, la phrase dit ce qui n'est pas affiché à la place : un avis d'exemple servi pendant une panne reste un avis fabriqué. En long, une politique de 400 caractères s'élargit sans se tronquer — on ne coupe pas un engagement. Les états rupture et succes n'existent pas ici : une section qui ne publie encore rien n'a ni stock ni confirmation à annoncer, et les inventer aurait produit deux écrans que personne ne verra.

Rangées fermées par défaut, chevron à abscisse fixe. Le piège principal est celui de Tuft+Paw : sa flèche est posée en ligne, juste après le texte, donc son abscisse change à chaque question — une FAQ de huit questions devient huit cibles de formes différentes, et l'œil perd sa ligne de balayage verticale. Le chevron à droite d'Apple coûte le même nombre de pixels et résout les deux problèmes d'un coup. La cible tactile, c'est la rangée entière (B&O : 390 × 60 px mesurés), jamais le glyphe de 22 px. Le filet de séparation est en retrait, à la manière d'Apple. ⚠ Les réponses sont des gabarits — la réponse sur la rétractation en particulier appartient au projet legal/.

Une rangée ouverte — parce qu'un accordéon fermé ne prouve rien. Le chevron a pivoté de 180° en 200 ms, le panneau est dans le flux, et il était déjà dans le DOM avant l'ouverture : c'est le quatrième piège de la fiche — un panneau injecté au clic est invisible au Ctrl+F du navigateur et, selon l'implémentation, à l'indexation. Avec details natif, la question s'ouvre sans une ligne de JavaScript.

Variante technique — et il ne faut pas la confondre avec la FAQ. Ce que B&O range dans cet accordéon n'est pas une FAQ : c'est la fiche technique, suivie de deux téléchargements. Rangées pleine largeur, libellés courts, premier panneau ouvert admis (le seul cas où c'est admis). ⚠ Troisième piège, celui de la casse : chez B&O ces libellés sont écrits en capitales dans le contenu — un lecteur d'écran épelle alors les mots et la traduction hérite d'un texte hurlé. Ici ils sont écrits en casse normale et mis en capitales par le style ; regarder le balisage suffit à le vérifier.

Réponse longue, question longue. Quatre cents caractères de réponse, et une question qui se replie sur trois lignes : le chevron reste aligné sur la première ligne, pas centré sur le bloc — sinon il dérive verticalement d'une question à l'autre et la ligne de balayage se défait, ce qui était tout l'intérêt de le mettre à droite.

Vide, chargement, erreur, désactivé. L'état vide dit quelque chose que peu de FAQ osent : une FAQ se remplit des questions réellement posées, pas de huit questions écrites d'avance pour remplir la page. Dans les trois états, la sortie vers un humain survit — c'est même en panne qu'elle compte le plus.