Le guide de design des composants (guide-design-composants.md, interne et non publié), repris de Unload Studio/docs/design/guide-design-composants.md dans sa version enrichie du 29 septembre 2026, est la référence. Le thème s’applique désormais à tout Wiki Masters, pas seulement à la barre Collection +.
DESIGN_VARIANCE: 3 · MOTION_INTENSITY: 4 · VISUAL_DENSITY: 5
#34d399, texte accent #6ee7b7, texte sur CTA #062b1e.#0a84ff, dans leur Shadow DOM.#111113, panneau #17171a, surface #1c1c20, contrôle surélevé #232327.#f5f5f7, labels #a1a1aa. Police système Apple, Segoe UI et system-ui, sans téléchargement supplémentaire.Le graphite reste actif même si le site était configuré en clair. Les couleurs des raretés, étiquettes personnelles, avertissements et états de jeu restent des données sémantiques, distinctes de l’accent des commandes.
| Famille | Application |
|---|---|
| Navigation | Sidebar continue, page courante en CTA vert plein avec texte sombre, barre mobile et menu Plus |
| Commandes | CTA verts en relief, boutons secondaires graphite, outils discrets, danger rouge |
| Sélection | Onglets et segments sur piste commune, état sélectionné, focus clavier |
| Formulaires | Champs, recherche, listes déroulantes, options, cases, radios, fichiers, switches et curseurs |
| Superpositions | Menus en portail, notifications, modales, boutique et panneaux mobiles |
| Contenu | Titres, listes, tableaux, états vides, informations de profil et paramètres à plat |
| Collection + | En-tête avec sous-titre, Doublons et Actualiser en actions secondaires, précédés de l’âge des données (« Mise à jour il y a 3 min ») ; pendant une relecture en arrière-plan, seul Actualiser montre un loader. Bloc « Défausse groupée » formulé comme une phrase (« Cartes de [portée] sous [seuil] sur 30 jours »), suivie sur la même ligne du nombre de cartes concernées et du CTA bleu principal « Défausser N cartes ». Quand le panneau est trop étroit, le nombre et le CTA passent ensemble sous la phrase. Section « Toujours garder » pour les mots protégés. Les sections sont séparées par l’espacement et leurs titres, sans filet ni carte dans le panneau. Mesures à plat sous chaque carte, raccourci « N exemplaires » bleu. Piles de doublons dans la grille : éventail des copies cachées teintées de leur rareté, compteur « ×N », dépliage sur place |
| Doublons | Accès bleu dans Collection + et raccourci ×N sous les cartes. Vue dédiée de toute la collection, recherche et tri compacts ; une pile par carte, rareté la plus élevée devant puis shiny. Feuillets décalés, compteur unique et exemplaires dépliables à plat, sans nouveau panneau autour de chaque pile |
| Marché + | Pastille d’état dans l’en-tête. Pendant une session, une bande teintée sur une ligne réunit l’état, la prochaine recherche, une jauge fine du budget engagé et « Arrêter ». Session terminée : une simple ligne « Dernière session : X / Y WB engagés » sous la phrase des règles. Aucune pastille ni point décoratif. Le switch « Surenchérir si dépassé » est à côté de « Activer les enchères », son explication en infobulle. Réglages en trois blocs : « Quelles cartes ? » (mots-clés), « Combien ? » (max par carte, budget), « Quand ? » (temps restant, intervalle, surenchère avec sa description). Une phrase résume les règles au-dessus de « Activer les enchères ». Activité : zone basse du panneau, pleine largeur et un ton plus sombre (pas de filet) ; un contrôle segmenté bascule entre « Enchères forcées » et « Dernières mises » (les deux onglets restent visibles ; une liste vide explique comment elle se remplit). Chaque ligne est une surface cliquable qui ouvre la fiche de l’enchère : titre, état coloré seulement s’il a un sens, montant aligné à droite, action dans une colonne réservée. « Masquer / Afficher », juste à droite des onglets avec un chevron qui pivote, replie la liste ; le choix est mémorisé. Les listes affichent environ quatre lignes et demie puis défilent, avec un fondu en bas tant qu’il reste du contenu (30 dernières mises). Une programmation terminée se retire (« Retirer ») ; une programmation « À vérifier » propose « Voir l’enchère » et « J’ai vérifié », aussi sous la carte et sur la fiche. Enchère forcée dans une commande discrète sous chaque carte et directement sous le bloc Miser de la fiche : plafond visible, CTA bleu et simple séparateur. Liste de programmations à plat |
| Page Paquets | Paquet flottant sur le graphite, sans projecteur, rayons ni halo ; bouton Ouvrir principal, stock en grand avec barre de 10 segments et recharge en direct |
| Ouverture de paquets | Scène 3D plein écran dans une boîte de dialogue isolée. Paquet globe (par défaut), paquet puzzle illustré, paquet vert, paquet sombre ou visuel d’origine, en volume avec cornure aléatoire (à plat quand le navigateur n’a pas d’accélération matérielle). La même expérience entière quand le système demande des animations réduites. Déchirure au glisser horizontal, dans les deux sens, en un ruban qui se décolle le long d’une ligne effilochée ; Espace au clavier. Une lumière discrète et une petite pièce de puzzle 3D par carte, à la couleur de sa rareté (au hasard avec Anti-spoil), sortent de l’ouverture et tournent autour des cartes, les cartes sortent puis le paquet vidé tombe. Pile de cartes épaisses, montée en tension selon la rareté (ou aucun indice avec Anti-spoil), cinématique légendaire, foil discret et shiny, favoris (étoile, F, pastille), récapitulatif en éventail dont chaque carte ouvre la fiche du site |
Les réglages de l’extension utilisent les capsules à crans de la nouvelle référence : six niveaux équidistants, repères discrets et cran actif bleu. La valeur reste éditable et un montant personnalisé ajoute son propre cran, sans modifier silencieusement les plafonds. Le remplissage change de largeur réelle sur toute la capsule, avec un retrait de 3 px ; aucun scaleX ne déforme ses arrondis. Le repère et sa zone de saisie restent alignés sur le cran, 10,5 px derrière la fin du remplissage. Le drag relatif ne saute pas au clic et ne valide qu’au relâchement. Les flèches changent de niveau ; Échap annule. Les repères s’effacent presque entièrement (8 %) sous le libellé et sous la valeur, dont les boîtes sont mesurées en direct ; un léger halo détache le texte du fond. Verrouillé pendant une session, le curseur reste lisible : seule la piste s’estompe. Les blocs « Combien ? » et « Quand ? » sont côte à côte sur ordinateur, en colonne sur mobile.
Les aides « Comment ça marche ? » s’ouvrent en dialogue natif avec Échap et retour du focus. Chacune suit la même lecture : un résumé d’une phrase, trois étapes nommées par leur verbe (sans numéro ni sur-titre), un exemple chiffré si utile, les points « À retenir », puis l’intégralité des précisions dans « Tous les détails ». Le bouton « Ouvrir le paquet » termine la découpe déjà engagée sans lancer de requête supplémentaire.
Le bloc « Quand ? » réunit « Temps restant max » et l’intervalle de recherche ; « Combien ? » réunit le max par carte et le budget. Le temps utilise des niveaux lisibles jusqu’à « Sans limite ». Le switch a une cible tactile de 44 px sur mobile, un état clavier visible et une transition courte respectant la réduction de mouvement. Ces options sont verrouillées pendant la session, comme les budgets.
Les champs numériques natifs « − / + » partagent un seul cadre de 44 px : boutons latéraux, valeur centrale sans deuxième fond. Recherche et selects de collection ont la même hauteur de 44 px. Les repères d’ouverture affichent des numéros contrastés, avec la carte courante en vert. Les intégrations PRO sont masquées à la limite de leur composant, sans changer les droits du compte.
Les protections automatiques n’ajoutent aucun libellé sous chaque carte. Une analyse invalidée passe en attente puis reprend discrètement après une période sans interaction.
Pendant une panne, les dernières données connues restent affichées et les prix manquants utilisent un squelette animé ; les barres de collection et de marché utilisent un petit indicateur circulaire pendant leur reprise. Les erreurs nécessitant une action restent explicites ; aucune page d’erreur HTML ne devient un message de l’interface.
Pages relevées dans le client : paquets, collection, catalogue global, marché, échanges, profil, guildes, amis, messages, lobby de bataille, succès, classement, paramètres, connexion, inscription, récupération et vérification du compte, accueil, règles, conditions et confidentialité. Les routes de détail et les écrans conditionnels héritent des mêmes composants communs ; aucune nouvelle fonctionnalité ou donnée n’est ajoutée à ces écrans.
Les illustrations des cartes et paquets, couleurs de rareté, effets de révélation, avatars, graphiques et zones de jeu conservent leurs proportions et comportements. Les couleurs informatives bleues des commandes ordinaires deviennent vertes ; les couleurs des objets de jeu restent intactes.
C’est la scène la plus expressive du thème, mais elle reste dans le même langage : graphite #111113, une seule lumière douce venue du haut, commandes graphite et CTA vert, sans particule, halo, flash plein écran ni flou de verre. La rareté ne colore jamais la salle (seule exception : la lumière qui monte du paquet ouvert, qui reste attachée à lui et disparaît avec Anti-spoil). Elle se lit sur la carte (cadre natif, puce), sur la pastille sous la carte (même puce, à plat), sur les segments du compteur et dans le rythme de la révélation. Les faces de cartes reprennent le composant natif : cadre de rareté, illustration sur les 45 % supérieurs, puce, titre, sous-titre, ATK / DEF. Le foil et le reflet suivent le pointeur, en retenue, sans jamais colorer le texte.
Sans accélération matérielle. Chrome compose alors la page au processeur : il perd les plans découpés d’une scène 3D (le bas du paquet disparaissait), les empile sans les trier et paie chaque couche à chaque image. L’ouverture le détecte (pas de WebGL, ou un WebGL logiciel) et passe en mode allégé (data-flat). Le paquet devient une seule couche : sa face entière, jusqu’au sceau du bas, tournée en 3D d’un bloc, avec un dos à part qui ne se voit que de dos. Le grain fondu sur toute la salle, le foil, le reflet et les tranches des cartes disparaissent ; la lumière et les pièces de puzzle sont dessinées sur des toiles de bien moins de pixels, étirées. Le déroulé reste entier, à 60 images par seconde (node film/scripts/perf.mjs software).
| Rareté | Mise en scène |
|---|---|
| Commune, peu commune | Retournement simple |
| Rare | Retournement, un passage de lumière sur la face |
| Super rare | Charge courte : la carte tremble, sa bordure prend la couleur de sa rareté ; petit coup de caméra |
| Ultra rare | Charge longue : la carte s’approche, la salle s’assombrit, rotation complète, coup de caméra, pastille et titre agrandis |
| Légendaire | Bandes noires, salle plongée dans le noir, trois battements qui allument la bordure, rotation, secousse, deux passages de lumière |
| Shiny | Liseré or à plat, foil renforcé, pastille « Shiny » dorée |
Volume. Le paquet sombre (pack-art.svg) est un oreiller : les extrémités scellées restent plates et le corps se gonfle sur un profil lisse. Chaque face est une pile de fines bandes qui suivent ce profil, deux parois ferment les côtés et le dos est une feuille de foil unie. Il n’y a pas de filtre sur le paquet (un filtre aplatirait la 3D) : l’ombre est une ombre de contact posée sous lui, comme sous la pile. Chaque carte est une plaque : quelques tranches de papier entre ses deux faces, donc une tranche visible quand elle tourne et une pile aussi épaisse que les cartes qu’il reste. La pile s’incline avec le pointeur et ses cartes profondes sont dans l’ombre.
Déchirure et sortie des cartes. La ligne de déchirure est celle d’un papier déchiré à la main : une dérive lente, quelques vagues plus petites, un effilochage fin et, çà et là, une petite entaille, différente à chaque paquet (360 points sur la largeur du sceau, pour que le bord reste fin de près). Le haut du paquet est un ruban dessiné sur un canvas, colonne de pixels par colonne : il pend par son bord serti et se balance vers la caméra, si bien que son bord déchiré se décolle du corps et se voit devant l’ouverture. Une version à tranches CSS (40, puis 72) montrait des marches et des « petits rectangles » à bas droit, quel que soit leur nombre : seul un dessin continu suit vraiment le bord effiloché, le même sur le ruban et sur le corps. Au repos c’est l’illustration elle-même qui est affichée (le passage de lumière la traverse) ; le canvas ne prend le relais qu’au début de la déchirure, à partir d’une copie de l’illustration sans passage de lumière. La courbe de décollement monte tout de suite à la pointe de la déchirure et s’adoucit derrière ; chaque colonne est éclairée selon son angle, et l’arête déchirée prend la teinte de la lumière de l’intérieur, aux mêmes endroits que les faisceaux. Un liseré de foil clair, avec un filet d’ombre dessous, suit le bord du corps ; l’intérieur du paquet (foil argenté dans l’ombre, découpé dans la silhouette de l’illustration donc serti comme le devant) apparaît dans l’ouverture. Le paquet se dégonfle à mesure que l’air s’échappe et penche légèrement à l’opposé du geste ; un bruit de déchirure filtré suit la vitesse du geste. La bande arrachée est projetée vers la caméra puis s’efface (le fondu est fait sur le canvas seul : un fondu sur un groupe aplatirait la 3D).
Bord déchiré. Le liseré du bord déchiré est toujours multicolore : les six couleurs de rareté (or, orange, rose, violet, bleu, menthe) courent le long de la déchirure et dérivent lentement, quel que soit le contenu du paquet et même avec Anti-spoil, puisqu’il ne dépend d’aucune carte. La bande de lumière juste sous la déchirure et la tranche de la bande arrachée reprennent le même spectre. Il n’y a plus de lueur qui suive le curseur pendant la déchirure (elle passait pour un défaut).
Lumière de l’intérieur et pièces de puzzle. Elle est dessinée par pack-light.js sur deux canvas posés dans la scène, à côté de la caméra et non dedans (pas dans le paquet, pour qu’ils restent quand il tombe, et pour qu’un choc de caméra ne les emporte pas ; .stage est en preserve-3d, ce qui permet de les classer en profondeur avec le paquet et les cartes) : l’un derrière la face avant du paquet et derrière les cartes, l’autre devant tout, de sorte qu’une pièce peut passer derrière les cartes puis devant. Elle est faite de ce qu’on lui donne sur les cartes (couleurs, raretés) ; avec Anti-spoil on lui donne des couleurs et des forces tirées au hasard, pour le même nombre de pièces que le dernier paquet, sans attendre la réponse du site : le spectacle est identique et ne dit rien. Pendant la déchirure, un rideau de lumière doux, fondu à partir des couleurs, filtre par la partie ouverte (des bosses sans pointe : les flammes pointues faisaient des dents). À l’ouverture, une lumière discrète continue de monter, une lueur haute par carte qui oscille et respire en décalé, et une petite pièce de puzzle par carte se libère du paquet : solide, tournant en 3D (contour extrudé, faces éclairées d’en haut à gauche, biseau, reflet qui glisse selon l’angle), à la couleur de la rareté de sa carte, avec des encoches à elle. Les pièces ne restent pas au-dessus du paquet : chacune prend sa place sur sa propre orbite inclinée autour de l’endroit où les cartes finissent (un centre fixe : les pièces ne suivent ni les cartes qui montent et descendent ni la caméra, pour ne pas donner l’impression d’être collées à elles), et elles passent derrière les cartes puis devant, un peu plus grosses quand elles sont devant. Une pièce (celle de la meilleure carte, ou une au hasard avec Anti-spoil) fait un tour complet autour des cartes, avec une traînée plus longue. Chaque pièce tire un ruban de satin, dessiné comme une bande solide éclairée comme la pièce elle-même, et non comme une ligne lumineuse (les traînées au néon, avec halo et dégradé arc-en-ciel, faisaient « effet IA ») : il se tord en avançant, donc large quand il fait face, simple arête quand il tourne, une face au soleil et l’autre dans l’ombre, s’effile jusqu’à rien et ne vire vers la couleur suivante du cercle des raretés qu’à l’extrême bout. Il passe derrière les cartes quand la pièce y passe. Comment il est dessiné, pour que rien ne se voie qui ne devrait pas : (1) la trajectoire d’une pièce est une fonction du temps, donc le ruban est calculé en demandant où la pièce était à des instants rapprochés du passé (environ tous les 4 px, plus serrés quand elle va vite), et non à partir de points enregistrés image par image, qui à grande vitesse étaient à 20 px les uns des autres, faisaient des coudes dans les courbes et dépendaient de la cadence ; (2) tout le ruban a une seule opacité, celle de la pièce, et non une par tronçon : c’étaient ces opacités qui changeaient quand il passait d’un calque à l’autre ; (3) il est peint opaque sur une feuille à part : d’abord tout le contour d’un seul aplat de ton moyen (un seul remplissage, donc aucune couture), puis par-dessus les ombres en huit tons, chaque ton étant un seul remplissage de tous les tronçons qui l’ont (une couture entre deux tons laisse voir le ton moyen, proche des deux), et seulement ensuite posé sur le calque ; des bandes chacune un peu transparente, ou cerclées d’un trait, laissaient une ligne à chaque jointure, et les surlignages en pointillés faisaient des points ; (4) il est plein sur presque toute sa longueur puis file vite en pointe (une longue queue fine se lisait comme un fil) ; (5) quand il change de calque, il est coupé en deux tronçons qui partagent le point de passage, sans trou. Quand les cartes sont posées, les pièces restent encore un moment (1,7 s) à tourner autour d’elles, puis s’éloignent doucement, dans toutes les directions, et s’effacent en 1,5 s (tout de suite avec « Tout révéler »). Une version qui faisait jaillir des cartes de lumière en éventail, avec anneaux et pilier, était trop chargée pour un moment qui doit rester subtil. Sur une fenêtre basse, les orbites et la lueur sont réduites pour ne pas sortir de l’écran. Tout suit la vitesse choisie (×1 à ×3) et n’existe pas avec la préférence de mouvement réduit. C’est la seule exception au principe « la rareté ne colore pas la salle » (et, avec Anti-spoil, il n’y a aucune information dans les couleurs). Les cartes sortent, fines, juste derrière la face avant du paquet, qui les cache exactement là où elles sont encore dedans ; le paquet, tenu immobile, se dégonfle et tombe d’abord, et les cartes ne se posent en pile et ne prennent leur épaisseur qu’une fois qu’il les a dégagées, ce qui évite qu’il disparaisse au milieu d’elles. Elles ne dépassent jamais le haut de l’écran : sur une fenêtre basse, elles sortent moins avant que le paquet ne tombe. Avant une carte légendaire, la pile restante est assombrie par ombrage (pas de fondu de la pile, qui la faisait disparaître par moments).
Reflets du paquet. Il n’y a qu’un reflet permanent : le passage de lumière dessiné dans l’illustration, qui traverse le corps et les deux sceaux. Il est découpé une seule fois dans l’union du corps et des sceaux : ces contours se recouvrent sur une trentaine d’unités entre les sceaux et le corps, et trois copies séparées doublaient la lumière à cet endroit. Le reflet qui suit le pointeur n’existe que pendant que le pointeur est sur le paquet (il apparaît et disparaît en douceur) ; auparavant il était toujours là, à la position d’oscillation au repos, et se superposait au passage de lumière, coupé en haut et en bas. Il est porté par chaque partie du paquet (le haut serti, chaque bande de la face avant, la base), découpé dans la silhouette de l’illustration : il suit la courbure, couvre tout le paquet et ne déborde jamais sur les côtés.
Le haut du paquet ne revient pas. L’intérieur du paquet (le « fond » sombre qu’on voit dans l’ouverture pendant que la bande se soulève) est découpé à la silhouette de l’illustration, donc dentelé comme le haut serti. Quand la bande s’envolait à la fin de la déchirure, ce fond restait, derrière le rideau de lumière, et ressemblait à un haut de paquet non coupé qui réapparaissait un instant. Il fait partie de ce qu’on arrache : il s’efface maintenant en 0,12 s dès que la déchirure est finie (data-torn), et l’ouverture reste nette.
Une seule vague de couleurs. Le liseré du bord du corps, le bord du ruban et la lueur sous la déchirure sont maintenant la même vague : une seule fonction (waveColor) donne la couleur en un point du sceau à une phase donnée, et une seule phase, pilotée par script, les fait tous avancer. Avant, trois mécanismes avaient des périodes et des phases différentes (deux périodes par sceau pour l’un, par la largeur du paquet pour l’autre, une dérive SMIL de 7 s pour le troisième) : les couleurs ne se correspondaient pas d’un bord à l’autre, et on ne voyait pas la vague bouger pendant les 1 à 2 secondes d’une déchirure. La phase avance maintenant seule (un tour en 2,4 s) et est poussée par la déchirure elle-même (dans le sens du geste), donc les couleurs coulent avec la coupe ; la vague tourne du premier mouvement jusqu’à ce que le paquet ait disparu. Le rideau de lumière filtrée par la déchirure (et la lueur qui monte ensuite) sont dessinés sur un canvas placé dans le paquet, non dans la scène : le paquet penche de 1,4°, se décale de 3 px et se dégonfle pendant la coupe, et le rideau, fixé dans la scène, ne suivait ni l’inclinaison, ni la taille, ni la position de l’ouverture.
Raccords invisibles. Deux défauts rares donnaient un « micro-zigzag » aux pièces. (1) Le côté vers lequel leur trajectoire s’incurve était recalculé à chaque image à partir d’un signe : il basculait parfois, et la pièce sautait de plusieurs centaines de pixels sur le côté ; le côté est maintenant choisi une fois, et la courbe est une bosse plate aux deux bouts (sinon elle finissait avec une vitesse latérale non nulle, un coude). Un banc d’essai hors navigateur (40 tirages, chaque image, deuxième différence de la position) a mesuré 380 images à plus de 2,5 px/image² avant, dont des sauts de 440 px ; après, le maximum est 1,4 px/image² (le tour complet, à pleine vitesse), aucune image au-dessus de 2,5 tant que la pièce est visible. (2) Les deux calques (derrière et devant les cartes) ne s’alignaient pas au pixel (la perspective grossit l’un, rapetisse l’autre, autour d’un centre qui n’est pas celui du canvas), donc une pièce qui changeait de calque sautait de 2 à 3 px : chacun est maintenant remis à l’échelle exactement autour du centre de la perspective. Les canvas sont plus grands (4,2 × 4,4 largeurs de paquet, avec un budget de pixels), et tout ce qui s’approche de leur bord s’efface sur une demi-largeur de paquet au lieu d’être coupé net.
Mouvements doux. Plus aucune secousse en marches. Le choc de caméra (cartes rares, légendaire) est un ressort amorti échantillonné à chaque image : elle plonge un peu et revient en rebondissant, avec un soupçon de roulis, et deux chocs successifs s’additionnent (composite: add) au lieu de se remplacer d’un coup. Le tremblement des cartes pendant la montée en tension est une ondulation lente (0,17 à 0,3 s par cycle, chaque étape adoucie) au lieu d’un tremblement à 50–90 ms. Chaque carte fait un seul mouvement fluide : elle monte hors du paquet en ralentissant jusqu’à s’arrêter au sommet, puis, sans pause, elle repart en douceur (la fin de la montée et le début de la descente sont tous deux à vitesse nulle, donc rien ne s’entend au raccord), passe un peu en avant (léger bombé en profondeur) et se pose dans la pile. Avant, elle repartait à pleine vitesse au bout d’une pause, avec un saut de 28 px vers la caméra : c’était le « TCHAK ». Le paquet commence maintenant à tomber pendant que les cartes sortent, sans attente.
Temps. Retournement d’une carte simple 0,42 s (il démarre pendant que la carte avance), montée en tension d’une super rare 0,5 s et d’une ultra rare 0,95 s, cinématique légendaire d’environ 3,3 s, rangement d’une carte 0,24 s en parallèle de la suivante, ×2 et ×3 inchangés.
Anti-spoil. Bouton en haut à droite, mémorisé. Avant qu’une carte soit retournée, rien ne dépend de sa rareté : pas de lumière qui sort du paquet (elle s’éteint aussi si on l’active pendant l’ouverture), pas de charge, pas de bordure qui s’allume, pas de salle assombrie ni de bandes noires, pas de rotation complète, pas de coup de caméra à la sortie du paquet, pas de son différent. L’ordre de sortie ne change pas : la meilleure carte reste la dernière. Les effets de rareté restent après le retournement.
Favoris et fiche. L’étoile de la carte n’est qu’une des entrées : la touche F, un appui près de l’étoile et le bouton de la fiche agrandie marchent aussi, car la détection de clic de Chrome dans un contexte 3D manque parfois la carte inclinée (la cible du clic est alors la carte entière). Le bouton est petit (28 px, plaque sombre translucide et étoile de 15 px, bleu une fois actif ; 36 px sur écran tactile) et sa zone d’appui est plus large que sa plaque. L’étoile s’affiche tout de suite, avec une pastille « Favori » sous la carte, et une petite étoile bleue épinglée sur le bord haut des cartes favorites dans la rangée du bas et le récapitulatif.
Le paquet sombre a des soudures dentelées avec facettes, une lèvre nette et un pincement ombré, un fond guilloché et un sceau : globe-puzzle, pièce manquante et monogramme W. Il n’utilise que des polices système.
Le paquet puzzle (pack-art-puzzle.svg, généré par scripts/pack-art-puzzle.mjs) est une illustration plutôt qu’un rendu : un papier jaune souci plein, quelques grosses pièces de puzzle en 3D (couleurs à plat, deux tons sur les tranches, un reflet tracé à la main, de petites écailles dessinées sur la face), leurs ombres portées à plat, des étoiles et des points, un lettrage monoligne tracé à la main imprimé en deux encres légèrement décalées, et un grain d’impression sur l’ensemble. Il garde la silhouette, les soudures et la ligne de découpe du paquet sombre, donc la déchirure, le ruban et le volume fonctionnent tels quels ; son dos et ses côtés sont du même papier. Performance. Les visuels SVG du paquet (grain, flous, déplacement) et du dos des cartes ne sont jamais affichés tels quels : chacun est dessiné une fois en bitmap à la taille d’affichage (rasterArt), à l’avance pour le design suivant, car un SVG à filtres est redessiné par chacune des quelque vingt-cinq couches 3D du paquet (environ 90 ms par dessin pour le paquet puzzle, contre 2 ms en bitmap). Le passage de lumière du paquet sombre n’est plus animé dans le SVG (le navigateur redessinait alors tout le visuel à chaque image) mais glisse en calque par-dessus. Les cartes qui en sortent ont leur propre dos (card-back-puzzle.svg) : même main, mais en indigo, pour que le liseré garde la couleur de la rareté pendant la montée en tension (l’or et l’orange disparaîtraient sur du jaune), avec un motif de petites pièces, un cadre crème tracé à la main et, au centre, une grosse pièce jaune souci en 3D, nue. Il n’a pas de passage de lumière animé : une image fixe n’est dessinée qu’une fois, alors qu’une image animée serait redessinée, grain compris, à chaque image.
Le paquet vert (pack-art-green.svg, généré par scripts/pack-art-green.mjs) est la même main, en plus posé : une seule idée au lieu d’une dispersion. Un petit puzzle carré de quatre pièces repose incliné sur un papier vert profond ; la pièce avant gauche s’est soulevée et flotte au-dessus de sa place, restée en creux. Derrière, un disque en demi-ton ; autour, quelques repères d’impression et deux ou trois éclats. Pas d’écailles ni d’étoiles. Le nom est composé en bloc justifié (« WIKI » aussi large que « MASTERS ») en Rubik Black, la police du logo, incliné comme lui, chaque ligne centrée optiquement sur l’axe du paquet ; lettres crème en volume, tranche vert profond. Ses cartes ont un dos vert plus sombre (la couleur de rareté reste lisible sur le liseré), une pièce crème au centre. Les ciseaux y sont corail, comme sur le paquet puzzle.
Le paquet globe (pack-art-globe.svg, généré par scripts/pack-art-globe.mjs) pose le monde en puzzle sur un papier blanc chaud. Le globe est une projection orthographique dessinée comme une illustration : océan bleu, continents stylisés dans le vert du site, le Sahara souci, la banquise crème, une lumière à plat (un croissant d’ombre à l’opposé de la lumière, un reflet tracé au pinceau, un bord assombri). Une vraie grille de puzzle épouse la sphère : bandes de 24° de latitude, colonnes de 24° de longitude, 48° près des pôles pour que chaque pièce reste aussi large que haute. Deux pièces vertes pleines se soulèvent, avec leur épaisseur, de leur place restée rouge ; deux pièces (corail, souci) s’envolent autour ; l’ombre du globe est posée sur le papier. Le nom reprend le bloc justifié en Rubik Black du paquet vert, en encre marine sur une profondeur verte. Ses cartes ont un dos bleu profond avec le globe en médaillon crème. Ciseaux corail.
site-theme.css fournit les matériaux, couleurs et composants communs. Il remplace aussi les fonds codés en dur de .card-frame et les variantes claires natives.site-pages.css applique le rythme des pages, la navigation, les listes et les sections de paramètres.site-theme.js ajoute des attributs data-wme-* de présentation aux composants existants, à partir des balises, rôles, états et classes observés. Il suit les changements de route et les menus montés dynamiquement. La pagination d’ouverture reçoit aussi des libellés accessibles et un état courant.document_start. Le script ne remplace ni les nœuds, ni les textes, ni les événements du site. Aucun appel réseau n’est nécessaire au thème.ui.css et ui.js restent isolés pour Collection +. Les réglages et mots protégés enregistrés sont conservés.achievements.js gère séparément les réclamations automatiques via la page native des succès, sans ajouter de panneau ni de notification en doublon.Le défilement du main, les safe areas mobiles, les positions de portails, les translations de switches, les zones tactiles et les grilles de jeu restent sous le contrôle du site. Les animations ajoutées durent 120 à 220 ms et respectent la réduction des animations.
Les classes d’intégration ont été relevées sur le client du 27 septembre 2026. Une évolution du site peut demander une adaptation de ces sélecteurs. Conformément aux instructions utilisateur, aucune capture ni vérification visuelle automatisée du nouveau thème n’a été effectuée.