Sous 640 px la scène change de parti pris : le n°1 occupe tout l'écran en un carré de 343 px de côté, image entière, et sa plaque se pose dessous — le rang « 01 » en serif italique 38 px à gauche, à droite un filet turquoise, le titre sur deux lignes tronquées et l'appel « Découvrir ». Les huit autres tableaux sont réduits à une seule ligne de micro-vignettes carrées de 88 px, numérotées dessous, qui glisse à l'horizontale avec accroche : les rangs 02-03 (qui vivent dans deux cartes séparées sur grand écran) sont ramenés sur cette même ligne par `display:contents`, sans une ligne de HTML en plus, et la 4e vignette est volontairement coupée par le bord de l'écran — c'est elle qui dit qu'il y en a d'autres. Le bouton « Tout voir » redescend en dernier, pleine largeur et 48 px, déplacé par la grille nommée.

Environ 820 px de haut sur un ecran de 375 px, 9 tableaux · ce qui bouge : Presque rien, et c'est voulu : le filet turquoise sous le rang 01 se trace une fois de gauche à droite en 500 ms (et se cale sur l'entrée du bloc dans l'écran là où `animation-timeline:view()` existe, sinon au chargement) — une seule animation, non répétée, aucun mouvement en boucle, aucune batterie brûlée. Le reste est de la réponse au doigt : la vignette pressée passe son filet et son chiffre au turquoise (`:active`), et le ruban a une accroche `scroll-snap x mandatory` qui aligne chaque vignette sur la marge de 16 px. Le survol collant est explicitement neutralisé (`:hover` remis à `transform:none` sous 640 px) : pas de vignette restée levée après un tap. Tout se coupe sous `prefers-reduced-motion:reduce`, où le filet est simplement là, déjà tracé.

note des juges : 8.2/10 (8.5, 8, 8)

Sous 640 px le podium se lit comme un classement de haut en bas : trois cartes horizontales pleine largeur, empilées, toutes bâties pareil — carré produit entier à 40 % de la largeur à gauche (136 px de côté), plaque à droite avec le rang en serif italique posé AU-DESSUS du titre, ce qui rend les 340 px de large au texte au lieu de le coincer à côté du chiffre. La carte n°1 est la seule à porter le trait turquoise et l'appel « Découvrir » ; les n°2 et n°3 sont la même carte, rang plus petit, sans appel. Dessous, la réglette passe de six vignettes sur une ligne à huit vignettes carrées de 80 px en deux lignes de quatre, chacune avec son rang centré dessous, et le bouton « Tout voir » ferme le bloc en pleine largeur à 48 px. La mécanique de relève reste enfermée dans son @media (hover:hover) and (pointer:fine) : au doigt elle n'existe pas, et les six grandes vues en attente passent en display:none sous 640 px — elles ne sont donc même plus téléchargées sur téléphone.

Environ 892 px de haut sur un ecran de 375 px, 11 tableaux · ce qui bouge : Rien ne bouge, et c'est le parti pris : pas de défilement automatique, pas de carrousel, pas d'animation d'entrée, aucun glissement latéral (donc aucun risque de deux zones de glissement imbriquées). Tout le bloc est donné d'un coup, à plat, en un écran et demi. Le seul retour visuel est l'appui du doigt : pendant le contact, le filet 1px de la carte ou de la vignette touchée passe au turquoise #04A7BD (et la plaque de la carte de tête au #F4FDFE), sans transformation ni déplacement — c'est un état, pas une animation, donc rien à couper pour la batterie. Le bloc prefers-reduced-motion est conservé tel quel pour le grand écran.

note des juges : 8.0/10 (8, 8, 8)

Le podium se déplie en trois marches empilées, pleine largeur, dans l'ordre du classement. Le n°1 devient une carte à deux étages : l'image carrée entière posée au-dessus (240 px de côté, centrée dans le blanc de la carte), puis une plaque où le chiffre « 01 » en serif italique 38 px tient la colonne de gauche pendant que le titre sur deux lignes et « Découvrir » occupent la droite — ce qui évite 38 px de pile inutile. Dessous, les rangs 02 et 03 sont côte à côte à mi-largeur (carrés de 164 px, rang au-dessus du titre), la réglette passe en trois colonnes sur deux rangées pour les rangs 04 à 09 (carrés de 109 px, rang centré dessous, 126 px de zone tactile), et le bouton « Voir tous les tableaux » quitte l'en-tête pour redescendre en dernier, pleine largeur et 48 px de haut — déplacé par la grille nommée, sans dupliquer le lien.

Environ 1117 px de haut sur un ecran de 375 px, 9 tableaux · ce qui bouge : Rien. Aucune animation, aucun défilement latéral, aucune zone de glissement, aucun survol : sous 640 px les six « vues en attente » qui servaient la relève au grand écran sortent purement du rendu (`display:none`), donc elles ne coûtent plus ni hauteur ni requête d'image sur téléphone. Un appui sur n'importe quelle carte ou vignette ouvre directement le tableau, sans premier tap « qui ne fait qu'afficher ». Le bloc `@media (prefers-reduced-motion:reduce)` reste en place pour le grand écran.

note des juges : 8.0/10 (8, 8, 8)

Sous 640 px, le bloc tient en trois temps : l'en-tête, la carte de tête du n°1 (image carrée entière à 56 % de la largeur, soit 192 px, et la plaque à droite avec le rang 01 en serif italique 34 px, le trait, le titre tronqué à 3 lignes et « Découvrir »), puis un seul rail horizontal qui part du bord gauche de l'écran et sort par le bord droit, où défilent les rangs 02 à 09 en carrés de 140 px avec leur rang dessous. Le rail déborde volontairement des 16 px de gouttière du bloc (marges négatives qui annulent exactement le padding : il fait 375 px, jamais un pixel de plus), si bien que la 3e vignette est coupée par le bord de l'écran — c'est elle qui dit qu'il y en a d'autres. Le bouton « Voir tous les tableaux » redescend en dernier, pleine largeur et 48 px, déplacé par la grille nommée sans dupliquer le lien ; au grand écran rien ne change (rendu vérifié identique au pixel à 1280 px contre le bloc d'origine).

Environ 603 px de haut sur un ecran de 375 px, 9 tableaux · ce qui bouge : Le geste du doigt est le mouvement. Le rail glisse à l'horizontale avec accroche (`scroll-snap-type:x mandatory` + `scroll-padding-left:16px`, si bien qu'une vignette se cale toujours sur la gouttière et jamais à moitié sous le bord), `overscroll-behavior-x:contain` pour ne pas emporter la page ni déclencher le retour arrière du navigateur, barre de défilement masquée. C'est la seule zone de glissement du bloc : la relève au survol est entièrement enfermée dans `@media (hover:hover) and (pointer:fine)`, donc au doigt rien ne se déclenche, pas de survol collant iOS, pas de premier tap « qui ne fait qu'afficher ». À la place, le survol est remplacé par une vraie réponse à l'appui : `:active` fait lever le carré de 3 px (logés dans les 3 px de padding haut du rail, donc sans jamais créer de défilement vertical à l'intérieur — mesuré : `scrollHeight` = `clientHeight` = 166 px à toutes les largeurs), passe son filet au turquoise et colore son rang ; la carte de tête répond pareil (filet turquoise, plaque #F4FDFE, appel souligné). Un seul mouvement automatique, et il ne se produit qu'une fois : au chargement, après 450 ms, toute la file glisse de 12 px vers la gauche puis revient en 2,2 s sur la courbe de pose maison — l'invitation au geste, jamais répétée, en transform seul donc sur le compositeur (vérifié : au creux du geste la largeur défilable du rail ne bouge pas d'un pixel et la page ne déborde pas). `@media (prefers-reduced-motion:reduce)` coupe ce geste net (`animation:none`), ainsi que le lever à l'appui et toutes les transitions.

note des juges : 8.0/10 (8, 7.5, 8.5)

Une seule colonne, six tableaux (contre neuf au grand écran : les rangs 07 à 09 sortent), et l'image change de côté à chaque ligne — carré à gauche / plaque à droite pour 01, 03, 05, l'inverse pour 02, 04, 06, la plaque se calant alors à droite, texte et filet compris : le zigzag se lit d'un coup d'œil, sans que rien ne bouge. Chaque ligne est une carte blanche filetée 1 px, 138 px de haut, cliquable en entier, image collée au bord et plaque séparée par un filet vertical (rang en serif italique, trait turquoise de 26 px, titre 17 px tronqué à deux lignes, « Découvrir »). En-tête au-dessus, bouton « Tout voir » pleine largeur et 48 px en dessous ; aucun bloc n'est dupliqué : les conteneurs du grand écran (hero, rail, duo, bande) passent en display:contents et les trois gabarits convergent vers la même ligne, si bien que le grand écran est resté pixel pour pixel identique (comparaison mesurée contre le bloc d'origine : 577,02 px de haut des deux côtés, zéro écart de rectangle).

Environ 1108 px de haut sur un ecran de 375 px, 6 tableaux · ce qui bouge : Rien. Aucune animation, aucun défilement automatique, aucun glissement latéral : la relève est coupée net sous 640 px (ses six doublures passent en display:none — elles ne prennent plus ni place ni requête d'image) et c'est le rythme du zigzag qui la remplace. Seul l'appui du doigt répond, sans déplacement : le filet de la carte passe au turquoise, la plaque vire en #F4FDFE et le chiffre de rang au #04A7BD. Les règles de survol restent neutralisées explicitement sous 640 px (survol collant iOS, fenêtre étroite sur ordinateur : vérifié, la ligne 01 ne s'efface pas), et le bloc @media (prefers-reduced-motion: reduce) est conservé.

note des juges : 8.0/10 (8.5, 7.5, 8)

Sous 640 px, les rangs 1, 2 et 3 quittent l'empilement vertical et deviennent trois cartes strictement identiques — image carrée entière en haut, plaque dessous (rang en serif italique 36 px, trait turquoise, titre sur deux lignes, « Découvrir ») — posées côte à côte dans une tribune qui glisse au pouce avec accroche au centre ; 26 px du voisin dépassent de chaque côté, et c'est ce débord qui annonce le geste. Dessous, la réglette des rangs 4 à 9 reste immobile sur une seule ligne de six vignettes carrées de 51 px, chacune avec son rang, puis le bouton « Voir tous les tableaux » ferme le bloc en pleine largeur et 48 px de haut. Les neuf tableaux sont donc tous présents, mais seules trois cartes coûtent de la hauteur : les marches 2 et 3 sont à droite, pas dessous.

Environ 790 px de haut sur un ecran de 375 px, 9 tableaux · ce qui bouge : Le défilement lui-même. La carte qui arrive au centre de la tribune passe de 0,5 à 1 d'opacité et de scale(.955) à 1 pendant que ses voisines repartent en arrière : le pouce fait exactement ce que faisait la souris au survol, c'est le visiteur qui promeut. L'animation est pilotée par le défilement (`animation-timeline: view(inline)`, plage `contain 0% → 100%`), donc elle n'est jamais automatique — rien ne bouge tant que le doigt ne bouge pas, aucune boucle ne tourne en fond. Elle est enfermée dans `@supports (animation-timeline: view())` et `@media (prefers-reduced-motion: no-preference)` : là où elle n'est pas comprise ou pas souhaitée, les trois cartes restent simplement pleines et nettes et l'accroche continue de fonctionner à l'identique. Une seule zone de glissement dans tout le bloc, jamais imbriquée, `scroll-snap-stop:always` pour qu'on ne saute pas une carte, `overscroll-behavior-x:contain` pour ne pas déclencher le retour arrière du navigateur. Zéro JavaScript.

note des juges : 8.0/10 (8, 8, 8)

Sous 640 px, tout le bloc devient une seule grille à deux colonnes (`display:contents` sur la scène, la rangée, le duo et la réglette : aucune duplication de balise). Le n°1 prend les deux colonnes — son image carrée entière sur 341 px, puis une plaque où le rang 01 en serif italique 34 px se tient à gauche du titre sur deux lignes et de l'appel « Découvrir » ; c'est la seule cassure de rythme. Dessous, les rangs 02 à 08 deviennent sept vignettes strictement égales (carré de 160 px bordé, rang + titre tronqué sur une ligne juste en dessous, 182 px de haut au total), et « Voir tous les tableaux » occupe la 8e case de la grille au lieu d'un bouton en pied : quatre rangées identiques, aucun trou, aucun orphelin.

Environ 1347 px de haut sur un ecran de 375 px, 8 tableaux · ce qui bouge : Rien ne bouge tout seul et rien ne tourne en fond. La relève au survol reste enfermée dans `@media (hover:hover) and (pointer:fine)`, et au téléphone les six plans en attente sont carrément retirés du rendu (`display:none`) : pas de survol collant, pas de premier tap qui « ne fait qu'afficher », et six images de moins à charger. Restent deux choses. L'appui : au doigt posé sur une vignette, son filet passe au turquoise, son rang aussi, et le carré s'enfonce d'1 px (`:active`) — le `:hover` collant d'iOS est explicitement neutralisé (`transform:none`). Et la pose à l'arrivée : chaque vignette monte de 10 px en se révélant, pilotée par le défilement lui-même (`animation-timeline:view()`, sous `@supports`, plage `entry 4% → 58%`), donc aucune minuterie, aucune boucle, une animation composite qui ne coûte pas de batterie ; sur un navigateur qui ne connaît pas `view()`, elle se joue une fois au chargement et finit visible. Le tout est coupé par `@media (prefers-reduced-motion:reduce)`, qui remet opacité et transform à plat.

note des juges : 7.7/10 (8, 7.5, 7.5)

Le bloc entier tient sur un écran : en-tête, une carte de tête unique (image carrée à 52 %, plaque à droite avec le rang en serif italique 32 px, le trait, le titre sur 3 lignes tronquées et « Découvrir »), une jauge de trois segments alignée à droite sous la carte, puis la réglette des rangs 4 à 9 — six carrés de 108 px sur deux lignes de trois — et le bouton « Voir tous les tableaux » pleine largeur à 48 px. Les rangs 2 et 3 quittent leurs petites cartes : ils passent dans la carte de tête, qui les affiche à tour de rôle ; le socle du grand écran et les six prétendants du survol sont retirés du flux (display:none), donc leurs sept images de 520 et 760 px ne sont pas chargées au téléphone. Zones tapables : carte 184 px, vignettes 128 px, bouton 48 px ; aucun glissement latéral, aucun débordement horizontal (mesuré : scrollWidth = 375 px).

Environ 702 px de haut sur un ecran de 375 px, 9 tableaux · ce qui bouge : La relève automatique, et elle seule : la carte de tête passe du rang 01 au 02 au 03, 5 secondes chacun, en boucle de 15 s — un seul chronomètre et trois décalages (0, −10 s, −5 s), zéro JavaScript. À chaque relève, le plan sortant s'efface en 0,4 s pendant que le suivant paraît en 0,6 s par-dessus (z-index animé) : la somme des opacités ne descend jamais sous 1,00, donc on ne voit jamais le cadre blanc clignoter entre deux tableaux. Dans le plan qui arrive, l'image se pose depuis un scale(.985), le chiffre de rang descend de 8 px et le titre monte de 10 px avec 70 ms de retard — exactement les gestes du survol du grand écran. Les trois segments de la jauge suivent la même horloge. Le tour se met en pause tant qu'on touche la carte ou qu'on tabule dans la scène (:active / :focus-within), et la réglette, elle, ne bouge pas. Sous prefers-reduced-motion : plus rien ne bouge et rien n'est caché — les trois cartes se dépilent l'une sous l'autre, le bloc passe à 1 076 px (vérifié en forçant la requête média).

note des juges : 7.7/10 (7, 8, 8)

Sous 640 px le podium ne se déplie pas, il change de forme : les trois marches (carte de tête, duo 2-3, réglette) retombent dans un seul flux vertical et les trois balisages reçoivent le même gabarit de ligne — vignette carrée de 72 px à gauche, rang en serif italique dans une colonne fixe de 32 px, titre sur 2 lignes à droite, filet de 1 px entre chaque ligne, aucune carte, aucun arrondi de conteneur. Mesuré à 375 px : 8 lignes de 85 px exactement, tous les rangs alignés à x=100 et tous les titres à x=144 sur 215 px de large, ce qui donne la colonne de chiffres que l'œil descend d'une traite. La ligne n°1 garde la seule hiérarchie du bloc — rang à 28 px en #04A7BD au lieu de 22 px en #037A8A, titre en 600, et l'appel « Découvrir » sous le titre — puis le bouton « Voir tous les tableaux » ferme la liste en pleine largeur sur 48 px.

Environ 906 px de haut sur un ecran de 375 px, 8 tableaux · ce qui bouge : Rien ne bouge tout seul : pas d'animation automatique, donc pas de batterie dépensée pour un bloc qu'on traverse en trois secondes. Un CSS sans JS ne peut pas savoir qu'on est arrivé sur la liste — une animation d'entrée se jouerait hors écran et l'utilisateur ne verrait jamais que la fin. Ce qui bouge, c'est ce que le doigt déclenche : au contact (`:active`), la ligne prend le fond #F4FDFE, le filet de la vignette passe au turquoise et le chiffre de rang aussi, en 120 ms, couleur seulement, aucun déplacement ; `-webkit-tap-highlight-color:transparent` supprime le flash gris d'iOS et d'Android pour que ce soit cette réponse-là qu'on voie. Aucune zone de glissement latéral, donc aucun risque de défilements imbriqués. Le bloc `@media (prefers-reduced-motion:reduce)` de l'original est conservé et ramène toutes les durées à 0.

note des juges : 7.5/10 (7, 8, 7.5)

Le podium se déplie en vertical et ne bouge plus d'un pixel : carte de tête horizontale (image carrée entière à 48 %, soit 164 px, plaque à droite avec le rang 01 en serif italique 32 px, le trait, le titre sur 3 lignes et « Découvrir »), puis les rangs 02 et 03 l'un sous l'autre en cartes image-à-gauche de 84 px — exactement la moitié de la carte de tête. Sous eux, la réglette des rangs 04 à 09 passe en bande pleine largeur, bord à bord (débordement de −16 px sur les deux côtés, jamais au-delà du viewport), vignettes carrées de 104 px avec le rang en dessous, et fond dégradé en masque sur 14 px à gauche et à droite pour que l'entrée et la sortie soient douces. Le bouton « Voir tous les tableaux » redescend en dernier, pleine largeur, 48 px. Les six grandes vues en attente qui servent au survol du grand écran sont mises en `display:none` sous 640 px : au doigt elles ne servent à rien, et leurs six images ne sont jamais téléchargées.

Environ 751 px de haut sur un ecran de 375 px, 9 tableaux · ce qui bouge : Un seul endroit bouge, et c'est le moins important : la réglette du bas dérive vers la gauche, en boucle, 684 px par cycle en 36 s (19 px/s — un tableau traverse l'écran en vingt secondes). La série 04-09 est écrite deux fois dans la piste ; la piste porte une marge gauche de −684 px et l'animation la ramène de translateX(684px) à translateX(0), si bien que la fin de cycle rend exactement la même image que le début : la boucle n'a pas de couture, et à aucun instant du cycle il n'y a de vide à droite ni à gauche de la bande (mesuré aux cinq quarts du cycle : 0,0 px de vide). La bande reste un vrai défilement au doigt, avec `scroll-snap-type:x proximity` et `scroll-padding-left:14px` — un cran par vignette, aligné sur le masque. Et c'est là que la mécanique devient un comportement : tant qu'on n'y touche pas (scrollLeft à 0) la dérive est visible ; dès qu'on a fait glisser la bande, le ré-accrochage du snap suit les vignettes et l'image se fige là où le doigt l'a laissée, puis la dérive repart d'elle-même quand la bande est revenue à son origine. Poser le doigt arrête donc la dérive, la lâcher la fait reprendre — sans une ligne de JavaScript. Ceinture et bretelles : `animation-play-state:paused` sur `:hover`, `:active` et `:focus-within`. `overscroll-behavior-x:contain` empêche la bande d'entraîner la page. Rien d'autre ne bouge : la carte de tête reste sur le rang 01, la promotion au survol vit dans `@media (hover:hover) and (pointer:fine)` et ne se déclenche jamais au doigt. Sous `prefers-reduced-motion:reduce`, `animation:none` et la bande redevient une simple réglette à crans, tous les rangs restant atteignables.

note des juges : 7.3/10 (8, 6.5, 7.5)