Panier

Un tiroir latéral, pas une page. min(92vw, 440px) donne 358,8 px à 390 — à 3 px des 362 px mesurés deux fois chez Whisker (au pixel sur la capture, puis au navigateur). La bande de page voilée qui reste, 31,2 px, n'est pas du gaspillage : c'est la seule chose qui dit au client qu'il peut revenir en arrière sans rien perdre. Trois marques sur quatre ont renoncé à cette distinction et rendent un panneau pleine largeur ; à 390 px il est indiscernable d'une page. Ici, dans le flux, le panneau est remis en place normale pour être photographiable — sa géométrie de superposition se voit en commutant la barre de maquette.

1 · Vide — un écran, pas l'état plein à zéro. Ni barre de livraison, ni récapitulatif à 0 €, ni vente croisée : « il manque 43 € pour la livraison offerte » sur un panier vide n'est pas une information, c'est une consigne. Gymshark propose deux CTA parce qu'il a deux rayons ; Catharsis en a un, donc une seule.

2 · Un article — l'ordre du contenu, non négociable. Barre de livraison → ligne article → vente croisée → récapitulatif → CTA. Whisker met le CTA en tête parce que son panier ne contient qu'un article ; sur un panier à plusieurs lignes cette place devient un mensonge — le total en tête n'est plus le total qu'on lit en bas. Le récapitulatif et le bouton forment le pied, un bloc à part dans une colonne flex : le piège n°2 de la fiche (chez Gymshark, deux lignes du récapitulatif passent sous le bouton collant) ne peut pas se reproduire par construction.

3 · Vente croisée — empilée, jamais en carrousel. Mesuré chez Gymshark : dix cartes de 330 px dans une fenêtre de 425, soit ~2 900 px cachés — sept écrans de défilement horizontal à l'intérieur d'un panneau qui défile déjà verticalement, sans aucun indicateur de position. Le piège jumeau est plus perfide : sur /cart, Whisker met deux cartes de 152 px et une gouttière de 14,5 — 318,5 px de contenu pour 390 disponibles — et la seconde est quand même coupée, parce que la piste démarre à x = 181. Une pile, elle, ne peut pas déborder.

4 · Seuil de livraison — le remplissage est le rapport exact. 34,80 ÷ 49,00 = 71 %, et la barre est à 71 %. Un rail qui « démarre à 8 % pour ne pas paraître vide » est un mensonge visuel sur une donnée vraie. Le seuil arrive en prop, il est marqué data-placeholder, il n'est écrit en dur ni dans une traduction ni entre le bandeau et le panier. ⚠ Le seuil et les frais appartiennent au fondateur : 49,00 € et 5,90 € sont des gabarits.

5 · Erreur — elle dit ce qui a échoué et donne la reprise. Un liseré rouge sur la ligne, seul, laisse deviner — et ce qu'on devine dans un panier, on le devine en défaveur du marchand. Le message porteur est posé au-dessus de la liste, la ligne fautive porte sa propre marque, et le bouton de paiement est désactivé mais lisible, la raison écrite juste dessous : un bouton mort sans explication est un cul-de-sac.

Long — le cas où les paniers cassent. Cinq lignes (les cinq articles distincts du catalogue), 18 articles, un nom de 50 caractères replié sur trois lignes, une ligne de variante de 44 caractères, une quantité à deux chiffres, et le prix unitaire affiché en plus du total de ligne dès que la quantité dépasse 1 — aucune des cinq références ne le fait, et Ridge prouve pourquoi il le faut : à quantité 2, le chiffre de droite reste 95 $ pendant que le sous-total passe à 190 $. Le pied ne bouge pas d'un pixel : le corps défile, lui seul. Total : 599,00 + 619,00 + 238,80 + 39,80 + 29,80 = 1 526,40 €.

Chargement — rien ne saute. Une quantité qui se met à jour ne doit rien faire bouger : seuls les nombres passent en ossature, à largeur réservée, et la ligne garde exactement sa hauteur. C'est la contre-mesure au défaut le plus coûteux d'un panier — le total qui saute sous le doigt pendant qu'on le lit : le client relit, doute, et sort. ⚠ Le balayage est un fond animé, jamais un ::after translaté (piège n°6 de CONVENTIONS.md : un pseudo-élément transformé entre dans la région de débordement de Chrome et la sonde le remonte en GRAVE, sur de la pure décoration).

Trois colonnes — vignette · texte · valeurs : la seule grille que les cinq références mesurées partagent, et la réponse aux trois seules questions d'une ligne de panier (quoi, combien, à quel prix). Vignette de 72 px minimum, un ratio unique pour tout le panier : deux ratios (3:4 chez Cuts, 4:5 chez Gymshark) donnent deux hauteurs de ligne et le panier ondule. Fond porcelaine derrière l'image, jamais transparent — CatLang est blanc, il disparaîtrait.

CatLang

Blanc porcelaine · finition unique

599,00 €

Supprimer

La suppression est un mot, pas une croix. Les croix mesurées font 14 × 14 px (Cuts) — un tiers du plancher tactile — et se posent au coin haut-droit, exactement là où le pouce touche en défilant. Ici les trois cibles sont sous le texte, chacune à 44 px, et le champ de quantité est un <input> : lui seul se saisit directement (« 12 » sans douze appuis) et s'annonce comme modifiable.

Long — un titre de 61 caractères, replié sur trois lignes. Aucune capture du corpus ne montre un titre qui se replie : les cinq observés tiennent sur une ligne. C'est une règle de prudence assumée, pas une observation — et c'est précisément le genre de cas qui se conçoit au lieu de se découvrir en production. Le repli est passé de deux lignes à trois après lecture des captures : à deux, le tiroir rendait « Sacs de déchets, recharge trois moi… », coupé au milieu d'un mot. Le panier est le pire endroit d'une boutique pour tronquer le nom de ce qu'on achète.

La sous-ligne — une seule catégorie admise : ce qui est inclus ou attaché à l'article (garantie, abonnement, accessoire offert), modèle Oura. Elle vit dans la même carte, séparée par un filet, et son lien « Modifier » est permanent : une option qu'on ne peut plus retirer depuis le panier est un défaut.

CatLang

Blanc porcelaine · finition unique

599,00 €

Supprimer

Pack CatLang Essentiel

Cartouches et première recharge de sacs incluses dans le même colis.

+ 20,00 €

34,80 €

Modifier

Rupture, erreur, chargement. En rupture, la ligne reste lisible et le prix reste affiché — jamais un mur ; seul le sélecteur de quantité disparaît. En erreur, la ligne se marque et le message porteur est posé par le tiroir au-dessus de la liste. En chargement, les deux nombres passent en ossature à largeur réservée et la hauteur ne change pas. ⚠ États de rendu, pas relevé de stock : le stock réel du Pack 3 est de 3 au 2026-08-22.

Repère éthique, en tête. Un seuil de livraison offerte est une information vraie : le client peut la vérifier en ajoutant un article. Elle est donc légitime, là où un compte à rebours ou un stock inventé sont d'une autre nature. Le seul chiffre qui bouge est celui qui reflète réellement le panier, et le remplissage est le rapport exact panier ÷ seuil. Le rail fait 6 px — la valeur mesurée chez Gymshark ; les 2 px de Ridge sont trop fins pour lire un remplissage partiel au pouce. Ambre, jamais rouge ni vert : ce n'est ni une alerte ni une validation, c'est une distance.

Au franchissement, le bloc change de contenu, jamais de nature. Le rail reste et se remplit à 100 % ; les bornes sont retirées du DOM, pas masquées en CSS — une échelle qui n'a plus de sens ne doit pas rester annonçable. La disparition totale du bloc (Ridge) rend ~90 px mais retire la preuve au moment exact où elle rassure, et fait remonter tout le panier de 90 px sous le doigt du client. Le déclencheur du détail est un vrai bouton à 44 px : les deux relevés du corpus donnent 26 × 15 px pour la cible qui ouvre le panneau le plus rassurant du tiroir.

Le refus est un bouton de même largeur que l'acceptation, posé au-dessus d'elle. Le contre-modèle est mesuré au pixel chez Cuts : option payante à 2,25 € déjà fondue dans le montant du bouton principal (Checkout+ | $62.25, 358,7 × 48), refus relégué à un lien de 157,3 × 12 px sous le bouton. Le client qui appuie sur le gros bouton noir paie une option qu'il n'a jamais acceptée. Les deux marques font la même vente ; l'une exige un geste pour accepter, l'autre exige un geste pour refuser. C'est le même composant avec l'état initial inversé, et ça ne coûte rien. Rien n'est présélectionné : c'est l'article 22 de la directive 2011/83/UE mis en interface.

Les trois chiffres de cette offre sont réels et vérifiables : Pack CatLang Essentiel 619,00 € − CatLang 599,00 € = + 20,00 € ; cartouche 19,90 € + sacs 14,90 € = 34,80 € achetés séparément. Aucune urgence, aucun compte à rebours, aucune « dernière chance ».

Une fois acceptée, elle vit dans la ligne article, avec son prix et un lien « Modifier » permanent. La colonne de droite dit le prix y compris quand il est nul — « Offerte » avec l'ancien prix barré, jamais « Ajouté ✓ » : on voit ce qu'on ne paie pas.

Ce que « Modifier » ouvre : case décochée, bouton désactivé. Il est impossible de valider une option payante par inadvertance, et les conditions sont dans la feuille — lisibles — pas derrière un lien « en savoir plus » de 15 × 20 px.

Le même nombre partout. Le contre-modèle est mesuré : chez Whisker EU-FR, le même panier d'un seul Litter-Robot affiche « Mon total 660,33 € » dans le tiroir (hors taxes) et « Mon total 799 € » sur la page /cart (TVA incluse). Le premier chiffre qu'un consommateur français y lit est un prix qu'il ne paiera jamais. Sur une boutique française les prix sont TTC : le sous-total est déjà TTC, la TVA est incluse dedans, et l'addition qui doit tomber juste est sous-total + livraison = total. On garde du modèle Whisker la forme — quatre lignes, un filet, le taux nommé — pas l'assiette.

La remise est une ligne à part, en négatif, avec le nom du code. Le « 33% SAVED » de Cuts, collé au total sur la même ligne, mélange une valeur et un commentaire sans étiqueter ni l'une ni l'autre. 599,00 − 59,90 = 539,10 €. ⚠ Le code et son montant appartiennent au fondateur ; celui-ci est un gabarit.

Chargement et bouton désactivé. Le récapitulatif ne bouge pas pendant qu'une quantité se met à jour : seuls les montants passent en ossature, à largeur réservée, et le bouton reste utilisable — c'est le total qu'on recalcule, pas le panier ; le désactiver ferait clignoter la seule action de l'écran. À l'inverse, un panier qui contient un article devenu indisponible ne peut pas partir en caisse : le bouton reste lisible, et la raison est écrite juste dessous.

Recette d'acceptation : à 390 px, scrollWidth === clientWidth. Une pile la tient par construction — il n'y a rien à faire déborder. Le titre dit la relation, pas la vente : « Vous aimerez aussi » prétend savoir ce que le client aime, « Avec votre CatLang » énonce un fait. Chaque article porte une raison en une ligne ; sans elle, une vente croisée est un bandeau publicitaire dans un panier. Et le bouton est un vrai bouton de 44 px : les deux mesures du corpus donnent 21,6 px sans fond ni bordure (Gymshark) et 24 px (Whisker), pour l'action que toute la section existe à provoquer.

Trois articles au maximum, tous visibles sans geste horizontal. Règle de sélection, pas de hasard : les articles proposés n'ont qu'une variante, pour que l'ajout ne fasse pas sortir du panier. C'est la seule bonne décision du carrousel de Gymshark — et elle y est invisible : elle ne se lit que dans le nom d'une classe CSS.

Le contrôle croisé. C'est le même panier que l'état « long » du tiroir, avec les mêmes pièces — et il rend exactement le même total : 1 526,40 €. C'est la recette d'acceptation de la fiche 37, et c'est le point précis où Whisker échoue. Sur /cart, le récapitulatif n'est plus un pied de tiroir mais un objet posé : surface, filet, rayon de carte. Rien d'autre ne change.

Votre panier

CatLang

Blanc porcelaine · finition unique

599,00 €

Supprimer

Garantie légale de conformité, 2 ans

Incluse d'office, sans surcoût et sans case à cocher.

Incluse

Modifier

Pack

Pack CatLang Essentiel, bac et cartouches incluses

Blanc porcelaine

619,00 €

Supprimer

Cartouche

Cartouche aromatique

Pack 3

19,90 € / unité

238,80 €

Supprimer

Cartouche

Cartouche aromatique

Pack 1

19,90 € / unité

39,80 €

Supprimer

Sacs

Sacs de déchets

Recharge trois mois, compatible tous formats

14,90 € / unité

29,80 €

Supprimer