/* ============================================================ Z7-TOP3 · le podium du mois, 1V1 Token ============================================================ STATUT : NON VALIDÉ — DEUX VARIANTES À COMPARER. Lenny tranchera après avoir regardé les deux. Rien ici n'est figé. ------------------------------------------------------------ LA RÈGLE QUI COMMANDE TOUT LE RESTE : LE RATIO ------------------------------------------------------------ Une bannière de joueur Z7 est au format **2,5:1**. Ce n'est pas une mesure que j'ai prise : c'est la valeur écrite dans le produit. · `Compte/CSS/compte-page.css` — `#banner-preview-ratio` et `.cosmetique-item.banner-item` : `padding-bottom: 40%`, soit 100 / 40 = 2,5. · `Compte/JS/compte-profil.js` — `const ratio = estAvatar ? '1' : '2.5/1';` ET LA TECHNIQUE QUI LA MONTRE ENTIÈRE, elle aussi déjà dans le produit, à deux endroits : · `#banner-preview-wrap` (page Compte) ; · `compte-player-card.js` (la fiche joueur) ; tous deux posent `background-size: contain` + `background-position: center` + `background-repeat: no-repeat`. On réutilise exactement cela — on ne réinvente pas un deuxième système de bannière. ------------------------------------------------------------ CE QUE FAISAIT L'ANCIEN PODIUM, ET POURQUOI C'ÉTAIT FAUX ------------------------------------------------------------ Deux défauts, tous deux contraires à ce que Lenny demande : 1. `background-size: cover` dans `fortnite.js`. La bannière était ROGNÉE pour remplir la boîte. La composition du joueur — un logo centré, un texte sur un côté — partait hors cadre. 2. `.top3-card--premier .top3-banniere { padding-bottom: 52%; }`. Pour mettre le vainqueur en avant, sa boîte passait à 52 %, soit un ratio de 1,92:1. Sa bannière était donc rognée PLUS que les deux autres, et la carte du premier mentait sur le format. ICI, LE RATIO DE Z7-BANNIERE N'EST JAMAIS REDÉFINI. Pas une fois, pas sur téléphone, pas pour le vainqueur. C'est la seule garantie sérieuse : une exception quelque part, et la règle ne vaut plus rien. ET LA CARTE ELLE-MÊME EST À 2,5, bordure comprise — depuis le 09/10/2026. Elle ne l'était pas : son `border: 1px` s'ajoutait à la hauteur sans s'ajouter à la largeur, et la carte tombait entre 2,4650 et 2,4838 pendant que sa boîte de ratio affichait 2,5000. Le trait est devenu une `box-shadow: inset`, qui ne prend aucune place. La carte, sa boîte de ratio et l'image ont désormais **exactement** les mêmes bords. ------------------------------------------------------------ COMMENT LE PREMIER EST MIS EN AVANT SANS CASSER LE RATIO ------------------------------------------------------------ Par la GRILLE, et non par la carte : la colonne du milieu vaut `1.08fr` contre `1fr`. Le vainqueur est donc 8 % plus large, donc 8 % plus haut — à ratio constant. Et comme la grille aligne les BAS (`align-items: end`), ce surcroît de hauteur le fait monter. Une seule déclaration donne les deux effets que Lenny autorise : « très légère différence d'échelle » ET « position légèrement supérieure ». PAS DE `transform: scale()`. Il déborderait de la grille et flouterait le texte — c'est déjà écrit dans l'ancien fichier, et c'était juste. ------------------------------------------------------------ LES DEUX VARIANTES ------------------------------------------------------------ Même géométrie, même ratio, mêmes informations, mêmes positions internes, même responsive. SEUL le traitement du fond et du rang change — c'est la condition pour que la comparaison veuille dire quelque chose. `.top3-grid--banniere` (A) la vraie bannière du joueur domine ; le rang se dit par la médaille, le numéro, l'anneau et un liseré. `.top3-grid--podium` (B) l'or / l'argent / le bronze dominent ; la bannière se retire. DEUX LANGAGES SÉPARÉS, et c'est la demande explicite : la bannière identifie le JOUEUR, l'or/argent/bronze identifie le RANG. En variante A, aucune couleur de rang ne touche le fond. ============================================================ */ /* L'unité du composant. Tout est exprimé en multiples, pour qu'un appelant puisse réduire l'ensemble d'une seule valeur. */ .top3-grid { --z7-t3-u: 1px; /* Les couleurs du RANG. Reprises telles quelles de l'ancien gabarit : or, argent, bronze. */ --z7-t3-or: #FFB700; --z7-t3-argent: #aaaaaa; --z7-t3-bronze: #cd7f32; display: grid; /* LA COLONNE DU MILIEU EST CELLE DU VAINQUEUR. L'ordre du document reste 1-2-3 ; `order` ci-dessous place le premier au centre, et l'auto-placement de la grille l'y range donc dans la deuxième piste — la plus large. */ grid-template-columns: 1fr 1.08fr 1fr; gap: calc(14 * var(--z7-t3-u)); align-items: end; } /* L'ORDRE DU DOCUMENT RESTE 1-2-3, et seul l'affichage change. Ainsi, quand les cartes s'empilent, le vainqueur revient naturellement en haut — ce qu'un ordre 2-1-3 écrit dans le gabarit aurait rendu absurde. */ .top3-grid > .top3-card:nth-child(1) { order: 2; } /* 1er au centre */ .top3-grid > .top3-card:nth-child(2) { order: 1; } /* 2e à gauche */ .top3-grid > .top3-card:nth-child(3) { order: 3; } /* 3e à droite */ /* ⚠️ PAS DE `border` SUR CETTE CARTE — ET C'EST LA CORRECTION DU 09/10/2026. CE QUI SE PASSAIT. La carte portait `border: 1px solid`. Sa LARGEUR vient de la piste de grille et comprend donc la bordure (`box-sizing: border-box`) ; mais sa HAUTEUR vient de son contenu, et la bordure s'y AJOUTE. La boite de ratio mesurait donc `(W - 2) x 0,4(W - 2)`, et la carte `W x (0,4(W - 2) + 2)`. MESURE DU DEFAUT. La boite de ratio etait a 2,5000 exact — c'est elle que tous les tests regardaient. LA CARTE, elle, tombait entre 2,4650 et 2,4838 : un a deux pixels de hauteur en trop, et l'ecart grandit quand la carte retrecit. Lenny a demande le ratio DE LA CARTE, « avec uniquement une eventuelle difference liee aux sous-pixels » : deux pixels n'en sont pas une. POURQUOI UNE OMBRE INTERIEURE ET NON `aspect-ratio` SUR LA CARTE. `aspect-ratio: 2.5/1` rendrait bien la carte exacte, mais son CONTENU ferait alors `(W - 2) x (W/2,5 - 2)`, soit un ratio de 2,5165 : l'image, en `contain`, laisserait une bande d'un pixel et demi de chaque cote. Or « aucune bande vide » fait partie de la demande. UNE `box-shadow: inset` NE PREND AUCUNE PLACE. La carte devient donc exactement sa boite de ratio : 2,5000, et l'image la remplit bord a bord. Le trait d'un pixel est au meme endroit qu'avant. */ .top3-card { position: relative; border-radius: calc(14 * var(--z7-t3-u)); overflow: hidden; /* Pas de fond ici : derrière une bannière hors format, c'est le REPLI de Z7-BANNIERE qui apparaît (`--z7-banniere-repli`). */ /* `min-width: 0` : sans lui, une piste de grille refuse de descendre sous la largeur de son contenu, et le pseudo le plus long élargirait la colonne — le ratio tiendrait, la grille non. */ min-width: 0; } .top3-card--vide { cursor: default; } /* ------------------------------------------------------------ LA BANNIÈRE — Z7-BANNIERE, COMPOSÉE ------------------------------------------------------------ `.top3-banniere` porte la classe `z7-banniere` : le ratio 2,5:1, l'arrondi officiel et le repli viennent de `Common/CSS/banniere.css`. `.top3-fond` porte `z7-banniere__image` : l'image entière (`contain`), centrée, jamais rognée ni étirée. ⚠️ NE PAS les redéfinir ici. */ .top3-banniere { width: 100%; } /* LE VOILE DE LISIBILITÉ. Il ne couvre que le BAS, là où vivent le pseudo et le gain — la bannière reste clairement visible au-dessus. `transparent 42%` : au-dessus de cette ligne, rien n'est assombri. */ .top3-voile { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 42%, rgba(10, 12, 20, 0.55) 72%, rgba(10, 12, 20, 0.92) 100%); } /* ------------------------------------------------------------ LE RANG — médaille, numéro, anneau ------------------------------------------------------------ */ .top3-rang { position: absolute; top: calc(8 * var(--z7-t3-u)); left: calc(10 * var(--z7-t3-u)); display: inline-flex; align-items: center; gap: calc(5 * var(--z7-t3-u)); padding: calc(3 * var(--z7-t3-u)) calc(8 * var(--z7-t3-u)) calc(3 * var(--z7-t3-u)) calc(5 * var(--z7-t3-u)); border-radius: 50px; /* Un fond sombre translucide, et non la couleur du rang en aplat : la pastille doit se lire sur n'importe quelle bannière sans devenir elle-même un bloc de couleur. */ background: rgba(6, 8, 15, 0.55); border: 1px solid var(--z7-t3-accent, rgba(255, 255, 255, 0.2)); backdrop-filter: blur(calc(3 * var(--z7-t3-u))); } .top3-medaille { font-size: calc(14 * var(--z7-t3-u)); line-height: 1; } .top3-numero { font-family: Arial, sans-serif; font-size: calc(10 * var(--z7-t3-u)); font-weight: 900; letter-spacing: 0.5px; color: var(--z7-t3-accent, #fff); line-height: 1; } /* ------------------------------------------------------------ L'IDENTITÉ — PFP + pseudo, en bas à gauche ------------------------------------------------------------ */ .top3-ident { position: absolute; bottom: calc(8 * var(--z7-t3-u)); left: calc(10 * var(--z7-t3-u)); right: calc(10 * var(--z7-t3-u)); display: flex; align-items: center; gap: calc(8 * var(--z7-t3-u)); min-width: 0; } .top3-avatar { width: calc(40 * var(--z7-t3-u)); height: calc(40 * var(--z7-t3-u)); border-radius: 50%; /* L'anneau prend la couleur du RANG : c'est l'un des accents discrets que Lenny autorise pour dire 1er / 2e / 3e sans toucher au fond. */ border: 2px solid var(--z7-t3-accent, rgba(255, 255, 255, 0.25)); overflow: hidden; background: #1a1a2e; display: flex; align-items: center; justify-content: center; /* `flex-shrink: 0` : une image de profil écrasée n'est plus une image de profil. C'est le pseudo qui cède, par ellipse. */ flex-shrink: 0; box-shadow: 0 2px calc(8 * var(--z7-t3-u)) rgba(0, 0, 0, 0.6); } .top3-avatar img { width: 100%; height: 100%; object-fit: cover; } .top3-initiale { font-size: calc(18 * var(--z7-t3-u)); font-weight: 900; color: #fff; } .top3-textes { min-width: 0; } .top3-nom { font-size: calc(13 * var(--z7-t3-u)); font-weight: 900; color: #fff; line-height: 1.2; /* Un pseudo long s'abrège : il ne pousse ni la carte ni la grille. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); } /* LA STATISTIQUE QUI CLASSE, et elle seule en évidence : les Coins gagnés. C'est le critère réel du tri côté serveur (`buildTokenLeaderboard`, `b.earned - a.earned`). */ .top3-gain { font-size: calc(11 * var(--z7-t3-u)); font-weight: 900; color: var(--z7-t3-accent, #fff); line-height: 1.3; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); } /* UNE SEULE statistique secondaire : victoires / défaites. Elle existe réellement (`stats.token.wins` et `.losses`) et elle éclaire le gain. Le nombre de matchs a été retiré : trois chiffres sur une tuile de podium, c'est un tableau, pas un podium. */ .top3-vd { font-size: calc(10 * var(--z7-t3-u)); color: rgba(255, 255, 255, 0.55); font-family: Arial, sans-serif; line-height: 1.3; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); } /* ============================================================ VARIANTE A · LA BANNIÈRE DU JOUEUR DOMINE ============================================================ Le fond est sa bannière, entière. Le rang ne se dit QUE par la médaille, le numéro, l'anneau de la PFP et un liseré très discret. Aucune couleur de rang ne touche le fond : c'est la séparation des deux langages que Lenny demande. */ .top3-grid--banniere .top3-card { /* Le premier terme REMPLACE l'ancienne `border: 1px` : meme trait, meme couleur, meme place — mais hors de la mise en page. */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px calc(18 * var(--z7-t3-u)) rgba(0, 0, 0, 0.3); } /* Le liseré du rang, à l'intérieur du cadre — 1 px, et une lueur à peine perceptible. Posé en `inset` pour ne pas élargir la carte d'un pixel : la géométrie doit rester identique entre A et B. */ .top3-grid--banniere .top3-card::after { content: ''; position: absolute; /* UN PIXEL EN RETRAIT, et non `0`. Ce lisere se posait juste a l'interieur de l'ancienne `border: 1px` ; celle-ci etant devenue une ombre interieure au ras du bord, les deux traits se superposeraient. Il garde ainsi exactement sa place d'avant. */ inset: 1px; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--z7-t3-liserai, transparent); } .top3-grid--banniere .top3-card--premier::after { --z7-t3-liserai: rgba(255, 183, 0, 0.5); } .top3-grid--banniere .top3-card--deuxieme::after { --z7-t3-liserai: rgba(170, 170, 170, 0.38); } .top3-grid--banniere .top3-card--troisieme::after { --z7-t3-liserai: rgba(205, 127, 50, 0.38); } /* La lueur du vainqueur, dehors et très discrète. */ .top3-grid--banniere .top3-card--premier { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px calc(22 * var(--z7-t3-u)) rgba(0, 0, 0, 0.38), 0 0 calc(16 * var(--z7-t3-u)) rgba(255, 183, 0, 0.12); } /* ------------------------------------------------------------ VARIANTE DE TEST (09/10/2026, NON VALIDÉE) — LA BANNIÈRE EST LA CARTE ------------------------------------------------------------ Lenny : « la bannière elle-même doit devenir la surface de la carte ». Le fichier n'était pas rogné (mesuré au pixel), mais trois couches posées SUR ses bords — ombre intérieure, liseré `::after`, voile du bas — le faisaient paraître rogné. Ici, rien ne touche plus les quatre bords de l'image : · le contour du rang passe DEHORS (box-shadow extérieure, aucune place prise, la géométrie 2,5:1 ne bouge pas) ; · les coins sont arrondis à 12 px, la valeur de la bannière du panneau Profil (`.pan-banniere`, Common/CSS/panneau.css) — le site n'a pas de token de rayon commun. L'image est découpée par cette courbe (`overflow: hidden`) et le contour extérieur la suit : seuls les pixels des quatre angles disparaissent, et c'est voulu ; · le voile pleine largeur disparaît ; une petite zone de contraste, derrière l'identité seulement, s'efface vers la droite et vers le haut, à 4 px des bords. Pour revenir à l'état précédent : supprimer ce bloc. */ /* L'IDENTITÉ DU RANG : un liseré d'UN pixel, dehors, et une lueur douce de la même teinte — c'est la lueur qui fait le travail, pas le trait. Tout est en `box-shadow` extérieure : aucune place prise, aucun pixel de la bannière recouvert, et l'arrondi est suivi. */ .top3-grid--banniere .top3-card { /* L'arrondi de la carte EST celui de la bannière : lu dans le token commun, jamais recopié. */ border-radius: var(--z7-banniere-rayon); box-shadow: 0 0 0 1px var(--z7-t3-lisere, rgba(255, 255, 255, 0.25)), 0 0 calc(12 * var(--z7-t3-u)) var(--z7-t3-lueur, transparent), 0 6px calc(18 * var(--z7-t3-u)) rgba(0, 0, 0, 0.3); } .top3-grid--banniere .top3-card--premier { --z7-t3-lisere: rgba(255, 183, 0, 0.85); --z7-t3-lueur: rgba(255, 183, 0, 0.38); box-shadow: 0 0 0 1px var(--z7-t3-lisere), 0 0 calc(16 * var(--z7-t3-u)) var(--z7-t3-lueur), 0 6px calc(22 * var(--z7-t3-u)) rgba(0, 0, 0, 0.38); } .top3-grid--banniere .top3-card--deuxieme { --z7-t3-lisere: rgba(205, 210, 220, 0.75); --z7-t3-lueur: rgba(205, 210, 220, 0.26); } .top3-grid--banniere .top3-card--troisieme { --z7-t3-lisere: rgba(205, 127, 50, 0.85); --z7-t3-lueur: rgba(205, 127, 50, 0.32); } .top3-grid--banniere .top3-card::after { display: none; } .top3-grid--banniere .top3-voile { display: none; } /* `isolation` : sans contexte d'empilement, le pseudo-élément en `z-index: -1` passerait DERRIÈRE la bannière et ne servirait à rien. */ .top3-grid--banniere .top3-ident { isolation: isolate; } .top3-grid--banniere .top3-ident::before { content: ''; position: absolute; z-index: -1; /* Retraits : l'identité est à 8 u du bas et 10 u de la gauche ; la zone s'arrête donc à 4 u des bords, hors des repères. */ top: calc(-30 * var(--z7-t3-u)); bottom: calc(-4 * var(--z7-t3-u)); left: calc(-6 * var(--z7-t3-u)); right: 0; pointer-events: none; background: radial-gradient(ellipse 70% 100% at 0% 100%, rgba(10, 12, 20, 0.72) 0%, rgba(10, 12, 20, 0.46) 45%, transparent 100%); } /* ============================================================ VARIANTE B · OR / ARGENT / BRONZE DOMINENT ============================================================ Même géométrie, même boîte de ratio, mêmes positions. La bannière du joueur se retire, et le rang prend le fond. L'IDENTITÉ Z7 TIENT : fond sombre, dégradé sourd, un seul filet de lumière en haut. Pas d'aplat doré franc — ce serait une médaille de kermesse, pas une carte esport. */ .top3-grid--podium .top3-fond { /* La bannière n'est pas chargée pour rien : l'image reste dans le gabarit (le contenu doit être IDENTIQUE entre A et B), mais elle est masquée ici. Basculer de B vers A ne redemande donc aucune image au réseau. */ display: none; } .top3-grid--podium .top3-card { background: radial-gradient(120% 90% at 50% 0%, var(--z7-t3-halo, rgba(255, 255, 255, 0.10)) 0%, transparent 62%), linear-gradient(180deg, var(--z7-t3-haut, rgba(255, 255, 255, 0.07)) 0%, rgba(10, 12, 20, 0.96) 58%, rgba(6, 8, 15, 0.99) 100%); /* `border-color` n'a plus d'objet : la bordure est devenue une ombre interieure. Meme couleur, meme epaisseur, meme place. */ box-shadow: inset 0 0 0 1px var(--z7-t3-bord, rgba(255, 255, 255, 0.10)), 0 6px calc(18 * var(--z7-t3-u)) rgba(0, 0, 0, 0.3); } /* LE FILET DE LUMIÈRE EN HAUT. Une seule ligne, 1 px, qui se dégrade vers les bords : c'est ce qui donne le « métal » sans aplat. */ .top3-grid--podium .top3-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent 0%, var(--z7-t3-accent, transparent) 50%, transparent 100%); opacity: 0.55; } /* Le liseré intérieur, comme en A : même technique, même absence d'effet sur la géométrie. */ .top3-grid--podium .top3-card::after { content: ''; position: absolute; /* Un pixel en retrait : meme raison qu'en variante A. */ inset: 1px; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--z7-t3-liserai, transparent); } /* En B, le voile de lisibilité n'a plus d'image à voiler : il assombrirait le dégradé pour rien. */ .top3-grid--podium .top3-voile { display: none; } /* En B, la bannière se retire : son repli commun (Z7-BANNIERE) ne doit pas recouvrir le dégradé du rang. */ .top3-grid--podium .top3-banniere { background: none; } .top3-grid--podium .top3-card--premier { --z7-t3-halo: rgba(255, 183, 0, 0.20); --z7-t3-haut: rgba(255, 183, 0, 0.13); --z7-t3-bord: rgba(255, 183, 0, 0.34); --z7-t3-liserai: rgba(255, 183, 0, 0.16); } .top3-grid--podium .top3-card--deuxieme { --z7-t3-halo: rgba(200, 205, 215, 0.14); --z7-t3-haut: rgba(200, 205, 215, 0.09); --z7-t3-bord: rgba(200, 205, 215, 0.24); --z7-t3-liserai: rgba(200, 205, 215, 0.12); } .top3-grid--podium .top3-card--troisieme { --z7-t3-halo: rgba(205, 127, 50, 0.15); --z7-t3-haut: rgba(205, 127, 50, 0.10); --z7-t3-bord: rgba(205, 127, 50, 0.26); --z7-t3-liserai: rgba(205, 127, 50, 0.12); } /* LES COULEURS D'ACCENT, communes aux deux variantes : elles portent la médaille, le numéro, l'anneau de la PFP et le gain. */ .top3-card--premier { --z7-t3-accent: var(--z7-t3-or); } .top3-card--deuxieme { --z7-t3-accent: var(--z7-t3-argent); } .top3-card--troisieme { --z7-t3-accent: var(--z7-t3-bronze); } /* ==================================================================== RESPONSIVE ==================================================================== LA RÈGLE NE CHANGE PAS : le ratio de Z7-BANNIERE tient à toutes les largeurs. Ce qui s'adapte, c'est l'unité et la disposition. CE QUE FAISAIT L'ANCIENNE VERSION SOUS 640 PX : elle remplaçait le `padding-bottom` par une HAUTEUR FIXE (118 px, 142 px pour le premier) et passait la carte en portrait. Le ratio sautait, et la bannière avec. La raison invoquée était bonne — un pourcentage se calcule sur la largeur, et le podium montait à 329 px — mais la réponse coûtait la bannière. LA RÉPONSE EST DONC L'EMPILEMENT, que Lenny autorise explicitement. Une seule colonne, le ratio conservé, et l'ordre redevient 1-2-3 puisque `order` est relâché. */ @media (max-width: 860px) { /* BANDE ÉTROITE À TROIS COLONNES. À 700 px de fenêtre, une tuile fait environ 200 px de large, donc 80 px de haut. Le contenu doit y entrer : on réduit l'unité plutôt que la boîte. */ .top3-grid { --z7-t3-u: 0.82px; gap: calc(10 * var(--z7-t3-u)); } .top3-avatar { width: calc(30 * var(--z7-t3-u)); height: calc(30 * var(--z7-t3-u)); } /* La statistique secondaire s'efface la première : c'est la seule des informations qui soit secondaire. */ .top3-vd { display: none; } } /* LE SEUIL D'EMPILEMENT EST A 560 PX, ET C'EST UN ARBITRAGE MESURE. EMPILER COUTE CHER EN HAUTEUR. Une carte pleine largeur au format 2,5:1 fait, a 640 px de fenetre, 222 px de haut : les trois en occupent 698, soit 78 % de l'ecran. C'est exactement le defaut que le lot G1 avait corrige — « le podium occupait 859 px, soit 84 % de l'ecran » — et il ne faut pas le reintroduire par le haut. TROIS COLONNES COUTENT EN LARGEUR. A 560 px, une tuile fait environ 153 px, donc 61 px de haut : le rang tient en haut, l'identite en bas, sans se toucher. Sous ce seuil, la tuile descend vers 110 px de large et 44 px de haut, et les deux se chevauchent. ON EMPILE DONC QUAND LES TROIS COLONNES NE TIENNENT PLUS, ET PAS AVANT. Le ratio, lui, ne depend pas de ce choix : il est tenu dans les deux dispositions, parce que c'est Z7-BANNIERE (aspect-ratio) qui le porte et qu'il n'est jamais redefini. */ @media (max-width: 560px) { /* EMPILÉ, ET DANS L'ORDRE : 1er, 2e, 3e. */ .top3-grid { --z7-t3-u: 1px; grid-template-columns: 1fr; gap: calc(10 * var(--z7-t3-u)); align-items: stretch; } .top3-grid > .top3-card:nth-child(1), .top3-grid > .top3-card:nth-child(2), .top3-grid > .top3-card:nth-child(3) { order: 0; } /* Une carte pleine largeur a de la place : la statistique secondaire revient. */ .top3-vd { display: block; } .top3-avatar { width: calc(40 * var(--z7-t3-u)); height: calc(40 * var(--z7-t3-u)); } }