Une grille régulière de cartes portrait 3/4, traitée comme un accrochage de galerie : beaucoup de blanc, gouttières larges, cadre à filet fin qui ne bouge jamais, nom en serif 500 bien calibré et compteur discret en teal profond. Le seul geste que je m'autorise sert la vérité des données : le filet sous l'image est gradué — un segment teal dont la longueur suit (par paliers) le volume de la collection, si bien qu'Animaux (9 925) et Finance (14) ne se ressemblent plus, sans qu'aucune carte ne change de taille. Les 12 premiers univers du menu prennent la vitrine en images ; les 17 suivants forment dessous un index typographique en colonnes, sobre et complet — rien n'est caché, rien n'est replié, zéro JavaScript. Le pari est la sobriété parfaite : c'est la mise en page qu'une maison de luxe garderait dix ans.

Sur telephone : À 1000 px : la vitrine passe de 4 à 3 colonnes (gouttières 22 px) et l'index de 3 à 2 colonnes. À 640 px et en dessous : marge latérale 16 px, respiration de section réduite à 48 px, titre h2 à 26 px, sur-titre à 11 px / .16em. La vitrine passe à 2 colonnes avec 14 px de gouttière et 28 px entre les rangées — les cartes restent en 3/4, l'arrondi descend à 8 px, le nom à 15 px (réserve de 2 lignes conservée pour que les rangées restent alignées) et le compteur à 11 px. L'index des 17 autres univers devient une liste pleine largeur à une colonne : chaque ligne fait au moins 48 px de haut, nom à gauche, nombre à droite, séparée par un filet — cible tactile confortable et lecture en balayage. Sur écrans tactiles (hover:none) le zoom au survol et l'ombre sont neutralisés ; prefers-reduced-motion coupe toutes les transitions. Les `sizes` suivent la grille (45vw en 2 colonnes, 30vw en 3, 290 px en 4), donc le mobile ne télécharge que la vignette 300w ou 450w.

Une cascade de vignettes façon accrochage mural : les colonnes se remplissent en hauteurs inégales, l'image occupe toute la vignette, et le nom est posé dessus sur un petit cartel blanc à liseré fin, comme l'étiquette d'un musée. La hauteur de chaque vignette n'est pas décorative : elle est calculée en Liquid sur le nombre réel de tableaux (4 paliers, de 3/4 pour les univers à plus de 2 000 pièces à 6/5 pour les plus confidentiels), donc la mise en page dit la vérité sur le fonds au lieu de traiter Animaux (9 925) et Finance (14) à égalité. Le cartel opaque règle définitivement la lisibilité : le nom ne repose jamais sur les pixels de l'image, quelle que soit la photo servie. Aucun univers n'est retiré sur grand écran, les 29 sont dans le mur.

Sur telephone : À 820 px la cascade passe de 4 à 3 colonnes, puis à 2 colonnes sous 640 px (gouttière 12 px, marges du bloc 40/16/48 px) : le mur de galerie reste un mur, on ne retombe pas sur une pile de cartes. Le cartel se resserre (encoche 7 px, padding 8/10 px), le nom descend à 14 px et le compteur à 10,5 px en petites capitales, la flèche de survol disparaît pour rendre la place au nom. Pour éviter 2 800 px de défilement, seules les 12 premières vignettes sont affichées sous 640 px ; un bouton pleine largeur de 48 px de haut (« Voir les 29 univers » / « Réduire la liste ») déplie les 17 autres, en CSS pur via une case à cocher masquée (#u7-tout) — aucun JS, et les 29 liens restent dans le DOM donc lisibles par Google même repliés. Sous 380 px, le nom passe à 13 px et le padding du cartel à 7/9 px. Les effets de survol sont enfermés dans @media (hover:hover) pour ne pas coller d'état actif au doigt, et le zoom d'image est neutralisé si l'utilisateur demande moins d'animation.

Une galerie ne pose pas 29 portes côte à côte : elle range ses salles par chapitres et laisse le visiteur ouvrir celle qu'il veut. Fermé, le bloc est purement typographique — cinq lignes blanches, un chiffre romain en serif, le nom du chapitre, la liste de ses univers en gris et son poids réel en tableaux — donc il tient largement dans un écran et ne charge aucune image inutile. Ouvert, le chapitre déroule une vignette par univers, montée comme un tableau encadré (marie-louise blanche de 10 px, filet fin, coin arrondi), et les univers de plus de 1 000 tableaux prennent deux colonnes en panoramique : la hiérarchie 9 925 contre 14 devient visible au lieu d'être maquillée. Le premier chapitre est ouvert d'entrée pour que l'imagerie soit là dès le premier regard.

Sur telephone : Sous 1000 px la grille passe de 4 à 3 colonnes. Sous 640 px : padding du bloc 40/16 px, h2 à 27 px, grille à 2 colonnes avec gouttières de 10 px (les univers « larges » occupent alors toute la largeur en bandeau 2/1, hauteur comparable aux vignettes carrées, donc pas de trou dans la grille) ; la ligne de résumé passe en flex-wrap : chiffre romain + nom + aperçu + bouton signe sur la première ligne, et le compteur (« 6 univers · 18 905 tableaux », séparateur point médian affiché uniquement en mobile) repasse en dessous sur toute la largeur, aligné à gauche ; la zone cliquable du résumé garde 64 px de haut minimum (bien au-delà des 44 px) et le signe +/− reste à 32 px mais c'est toute la ligne qui est cliquable, pas lui. L'aperçu textuel reste sur une seule ligne avec coupe en points de suspension. Les vignettes gardent un padding de 8 px et un titre à 14 px. `prefers-reduced-motion` coupe l'animation d'ouverture, les zooms d'image et les translations.

Une cimaise de galerie qui défile : de grandes cartes portrait 3/4 posées sur une même ligne de sol, chacune coiffée d'un cartel (filet fin, nom en serif, compteur). Comme les écarts de fonds sont énormes (9 925 contre 14), la hauteur de la carte est indexée sur le volume réel — trois formats décidés en Liquid à partir de `all_products_count` (≥ 2000, ≥ 600, le reste) : les images montent ou descendent, mais les cartels restent parfaitement alignés, ce qui donne une ligne d'horizon calme et une silhouette qui ne ment pas. Le visiteur balaie comme devant un accrochage, et les 29 univers sont tous dans la piste, atteignables au doigt, à la molette, aux flèches du clavier ou aux deux boutons ronds. Beaucoup de blanc, aucune ombre, un seul accent teal : la couleur reste aux œuvres.

Sur telephone : À 640 px et moins : gouttière ramenée à 16 px, écart entre cartes à 12 px, en-tête empilé (le sur-titre et le h2 passent en pleine largeur, h2 à 26 px), les deux flèches disparaissent complètement (le pouce suffit) et seule la jauge de progression reste pour dire où l'on en est. Les cartes passent en largeurs relatives — 78 vw / 68 vw / 58 vw selon le volume, plafonnées à 300 / 264 / 224 px — ce qui laisse toujours dépasser un morceau de la carte suivante : c'est cette amorce qui fait comprendre qu'on peut balayer. Le cartel descend à 78 px de haut, le nom à 17 px sur deux lignes maximum. L'aimantation `scroll-snap` cale chaque carte sur la gouttière gauche, le survol/zoom est neutralisé sur écran tactile (`@media (hover:none)`), et la piste est la seule chose qui défile horizontalement : aucun débordement de page (vérifié à 375 px, `scrollWidth - clientWidth = 0`). Zones cliquables : la carte entière, largement au-dessus de 44 px ; les flèches font 46 px.

Les 29 images des univers n'ont rien en commun — un lion, une casserole, un graffiti. Les traiter toutes en duotone teal profond (#037A8A) sur blanc leur donne la même signature, comme une salle d'accrochage tenue par un seul éclairage : le bloc devient calme et haut de gamme au lieu d'être un patchwork. Au survol — ou quand la tuile passe au centre de l'écran sur mobile — le duotone se retire et la photo revient en couleur pleine : c'est là que la boutique montre ce qu'elle vend vraiment, et le geste est récompensé. Les deux premiers univers du menu, les plus vastes, occupent 2 × 2 cases : la hiérarchie est dite par la taille, pas par un compteur en gris, et les 29 tuiles restent toutes carrées, toutes cliquables, sans aucun trou dans la grille.

Sur telephone : Trois états, tous vérifiés au navigateur. Desktop ≥ 1024 px : 5 colonnes, les tuiles 1 et 2 en 2 × 2, 7 rangées pleines, aucune case vide. Tablette 641–1023 px : 4 colonnes, seule la tuile 1 reste en 2 × 2 (la 2 redevient carrée simple et sa typo rapetisse), 8 rangées pleines. Mobile ≤ 640 px : 2 colonnes, gouttière 10 px, marges latérales 16 px, la tuile 1 devient un carré pleine largeur (343 px sur un iPhone) avec son nom en 30 px — 16 rangées, dernière rangée pleine elle aussi. Les tuiles courantes font 167 px de côté, très au-delà des 44 px de zone tactile. Comme il n'y a pas de survol, tout le CSS de survol est enfermé dans `@media (hover:hover)` (pas d'état collant après un tap), et trois relais prennent le relais : `:active` (la couleur pleine apparaît sous le doigt pendant l'appui), `:focus-visible` (navigation au clavier), et un IntersectionObserver de 15 lignes qui ajoute `u5-tuile--vive` à la tuile qui traverse la bande centrale de l'écran — en scrollant, les univers s'allument un par un. Si le JS ne part pas, le bloc reste entièrement en duotone : c'est un design fini, pas un design cassé.

Chaque univers devient une bande pleine largeur séparée d'un filet fin : une frise d'image à gauche (format 2,5:1, comme un bandeau de revue), le nom en grande serif au centre, le compteur aligné à droite avec sous lui un filet teal dont la longueur est proportionnelle au plus gros univers — c'est le seul endroit où l'écart 9 925 contre 14 se voit honnêtement, sans que le petit univers ait l'air abandonné. Les 29 bandes ne sont pas traitées à égalité : trois registres décroissants, 6 bandes pleines (image 300 px, nom jusqu'à 31 px), 6 bandes à hauteur réduite (image 196 px, nom 22 px), puis les 17 restants en sommaire typographique sur trois colonnes qui se lisent de haut en bas dans l'ordre du menu. C'est le rythme d'une revue : la couverture, les pages intérieures, l'index — et le bloc respire au lieu d'empiler 29 cartes identiques. Aucun JavaScript, aucune bibliothèque : les 29 univers sont présents et cliquables dès le premier rendu, rien n'est caché derrière un accordéon ou un carrousel.

Sur telephone : À 640 px et moins, chaque bande passe d'un flex horizontal à une petite grille en deux colonnes : l'image (104 × 82 px, arrondi 8) occupe la colonne de gauche sur deux rangs, le nom en serif 19 px est sur le premier rang, le compteur + son unité + le filet de volume (limité à 140 px) sur le second. La numérotation et la flèche disparaissent (elles ne servent qu'au confort de survol), le sur-titre et le h2 restent, la légende passe à gauche sous le titre. Les deux registres de bandes fusionnent en un seul gabarit mobile (même image, même corps) : mesuré à 110 px de haut par bande, donc très au-dessus des 44 px de zone cliquable. Le sommaire passe en une seule colonne, chaque ligne à 50 px de haut avec le nom à gauche et le nombre à droite. Marges latérales à 16 px, aucun débordement horizontal (vérifié : scrollWidth = clientWidth = 375). Un palier intermédiaire à 900 px réduit les images (216 / 160 px), masque la numérotation et fait passer le sommaire à deux colonnes.

Pas une seule image au chargement : le bloc est un répertoire de galerie, 29 noms en Fraunces 500 posés sur des filets fins, numérotés 01 à 29, avec un filet de conduite qui court jusqu'au compteur — la typographie fait tout le travail décoratif. Comme les écarts sont énormes (9 925 contre 14), la page ne ment pas : les 8 univers au-dessus de 1 000 tableaux passent en très grande serif sur deux colonnes, les 21 autres suivent en plus petit sur trois colonnes, tous visibles, aucun replié. Au survol sur ordinateur, une vignette du premier tableau de l'univers apparaît près du curseur : c'est le seul moment où une image est téléchargée, ce qui rend ce bloc quasi gratuit à charger. C'est la mise en page qui ressemble le plus à un cartel de musée, et celle qui respire le plus de blanc.

Sur telephone : Sous 900 px, les grands ensembles passent sur une seule colonne pleine largeur (le filet de conduite s'allonge, très joli) et le reste de l'index passe à deux colonnes. Sous 640 px : padding ramené à 48/16 px, l'en-tête s'empile, les 8 grands ensembles restent en une colonne avec nom à 21 px, compteur à droite et ligne de 56 px minimum ; les 21 autres passent en deux colonnes où chaque cellule met le nom au-dessus et le compteur en dessous (les numéros 01–29 et le filet de conduite disparaissent, trop serrés), hauteur minimale 62 px et noms alignés en haut d'une même rangée même quand l'un déborde sur deux lignes — vérifié sur « Mouvements artistiques ». La vignette flottante et la ligne « Survolez un nom… » n'existent pas du tout sur mobile : elles sont conditionnées à `(hover:hover) and (pointer:fine) and (min-width:901px)` en CSS ET dans le JS, donc aucun octet d'image n'est demandé sur téléphone. Aucune interaction n'est requise pour atteindre les 29 univers : tout est visible dès l'arrivée.

Une galerie n'aligne pas ses œuvres en vignettes : elle en accroche une, grande, avec son cartel, et tient l'inventaire à côté. À gauche la vitrine montre un seul univers en portrait 4/5 (le format des tableaux vendus), suivi d'un cartel de musée : filet teal, nom en serif, nombre de tableaux, lien. À droite l'index complet des 29 : rang, nom, compteur aligné, et sous chaque nom une jauge courte dont la longueur suit le fonds réel — Animaux tient toute la mesure, Finance un trait. Survoler ou tabuler sur une ligne rhabille la vitrine sans rechargement : on parcourt les 29 univers depuis un seul écran, et l'écart de catalogue (9 925 contre 14) se lit au lieu d'être gommé par une grille égalitaire.

Sur telephone : Sous 900 px la grille passe sur une colonne : la vitrine monte au-dessus (cadre en 5/4), l'index descend dessous dans un conteneur encadré (filet #DFE5E8, arrondi 12 px) qui défile sur 470 px maximum, en-tête « Tous les univers · 29 » collée en haut pendant le défilement. Sous 640 px : cadre en 4/3 pour ne pas manger l'écran, titre à 27 px, nom du cartel à 22 px, marges du bloc à 16 px, lignes de l'index à 48 px de haut minimum, et le lien « Voir l'univers » devient une pastille encadrée de 44 px de haut (vraie cible tactile). La phrase d'aide change : « Survolez un univers… » disparaît, « Touchez un univers pour l'ouvrir. » s'affiche — c'est piloté par @media (hover:none), qui neutralise aussi les styles de survol pour qu'aucune ligne ne reste allumée après un appui. Sur tactile la vitrine ne change pas au toucher : un appui ouvre la collection, ce qui est le geste attendu ; la vitrine y joue le rôle d'affiche du premier univers du menu. Aucun débordement horizontal (vérifié à 375 px), et les 29 univers restent tous accessibles par défilement.

Une galerie n'accroche pas 29 tableaux à la même taille : elle donne un mur entier à la pièce maîtresse, une salle aux œuvres importantes, et un cartel à l'index. Le bloc suit exactement cette hiérarchie, calculée sur le fonds réel : Animaux (9 925) prend une grande case presque carrée, Nature et Abstrait deux bandeaux larges à côté, les dix univers moyens (600 à 2 999) une mosaïque à rythme alterné, et les seize petits un index de pastilles fines. Le rythme vient d'un motif de période 5 : une case portrait puis quatre cases paysage — et la case portrait bascule de la gauche à la droite au deuxième cycle, ce qui fait circuler le regard en zigzag au lieu de le laisser retomber dans un damier. Les tailles sont pilotées par `all_products_count`, jamais par la position dans le menu : si le fonds bouge, la mise en page bouge avec lui.

Sur telephone : Trois régimes, tous mesurés dans un vrai navigateur. Au-dessus de 900 px : la mosaïque à 6 colonnes (grande case 572×528, bandeaux 572×256, mosaïque 376×392 / 376×188), bloc de 2 099 px de haut. Entre 641 et 900 px : la mosaïque est conservée telle quelle — mêmes proportions, mêmes basculements — seules les hauteurs de rangée (120→84 et 86→62), les gouttières (16→12) et les tailles de titre rétrécissent ; à 820 px le bloc fait 1 759 px, à 641 px 1 931 px, sans troncature de nom. À 640 px et en dessous : passage à 2 colonnes pilotées par `aspect-ratio` (la grande case prend toute la largeur en 4/3, tout le reste en 5/4, gouttière 10 px), et l'index passe à deux pastilles par ligne, vignette masquée, nom + compteur empilés, 58 px de haut (zone tactile conforme). À 375 px : 1 915 px de haut, aucun débordement horizontal. Deux règles de queue (`:last-child:nth-child(odd)` sur la mosaïque, `:nth-child(even)` sur la bande haute) étirent le dernier élément sur toute la largeur s'il se retrouve orphelin — c'est mathématiquement exact sur une grille à 2 colonnes, donc aucune ligne ne finit à moitié vide quel que soit le nombre d'univers.

Une carte de surfaces : chaque univers occupe une zone dont l'aire est exactement proportionnelle à son nombre de tableaux, obtenue sans JS par un jeu de colonnes flex (la colonne porte la somme de ses zones, la zone porte son propre compte — largeur x hauteur = compte). Animaux écrase donc la moitié gauche, Nature et Abstrait tiennent la colonne suivante, et les 21 univers trop petits pour porter un nom ne sont pas écrasés à taille égale : ils sont réunis dans une dernière colonne qui occupe leur surface vraie (6 802 tableaux, 20,6 % de la carte) et qui renvoie à l'index complet juste dessous. La carte ne ment donc jamais — la somme des aires fait 100 % du fonds — et chaque nom reste lisible parce qu'il est posé sur un cartel blanc, comme une étiquette de galerie, jamais sur la photo. C'est le bloc qui dit en un coup d'oeil ce qu'une grille de cartes identiques cachait : ce qu'il y a vraiment en magasin.

Sur telephone : Deux bascules. Sous 1000 px la carte tient encore mais se resserre : titres réduits, le mot « tableaux » disparaît des petites zones (on garde le chiffre), l'aperçu de 5 noms dans la colonne « reste » est masqué. Sous 780 px (donc tout le mobile ≤ 640 px) une carte à 9 zones n'est plus lisible : `.u8-carte` passe en `display:block`, chaque zone devient une ligne pleine largeur de 76 px (vignette carrée 58 px + nom en serif + compte), et c'est la jauge teal de 3 px sous le nom — masquée en desktop, largeur = part du plus grand univers — qui porte la proportion. Même donnée, une dimension au lieu de deux ; la légende elle-même change de phrase (`.u8-legende--carte` / `.u8-legende--liste`) pour ne pas promettre des surfaces qu'on ne montre plus. La colonne « reste » devient une carte glace pleine largeur avec le chiffre, son bouton d'ancre est supprimé puisque l'index des 21 suit immédiatement, et les pastilles de l'index passent en 14 px avec 6 px de gouttière. Toutes les cibles font ≥ 44 px : lignes 76 px, pastilles 44 px. Sur desktop la plus petite zone de la carte fait encore 70 px de haut (mesuré à la hauteur mini de 500 px).