/* Le dessin d'une carte : le sticker de carte (lot 4, refonte FAIT MAIN).
 *
 * Partagé par tous les écrans qui montrent une carte — le classeur, la
 * collection, l'ouverture d'un booster, la bienvenue, le profil, l'aide —,
 * comme `cardHTML` l'est dans /cartes.js. La feuille était restée dans la page
 * des Fanzzy pendant que le balisage devenait commun : les cartes qui
 * sortaient d'un booster s'affichaient sans cadre et sans rareté, et rien ne
 * le disait.
 *
 * Les tailles sont en `--u`, l'unité de la carte : une carte se dessine à
 * n'importe quelle taille sans qu'aucune valeur ne soit à reprendre. Tout ce
 * qui s'écrit a un plancher de onze pixels.
 *
 * ## Ce que les écrans doivent savoir
 *
 *   — **La carte déborde de sa boîte**, et c'est voulu : c'est un sticker
 *     collé, pas une image imprimée. Le pin et la forme de rareté passent
 *     le coin de trois à quatre pixels (et la forme, son bord de craie et son
 *     cerne avec), la bande du nom passe les deux côtés d'autant, et l'ombre
 *     dure ajoute trois pixels en bas à droite. Un conteneur en
 *     `overflow:hidden` au ras de la carte les coupe : qu'il lui laisse six
 *     pixels autour (une gouttière de grille de douze au moins).
 *   — **Le relief est sur `.body`**, plus sur `.fz` : `.fz` ne peut pas
 *     interroger sa propre largeur (voir « l'unité de la carte »), donc ni
 *     son rayon ni son ombre ne suivent la carte. Une page qui écrase le
 *     `box-shadow` de `.fz` ajoute une ombre de plus, à un autre rayon.
 *   — **Une grille ne bouge pas** : `mini` rend la matière statique et fige
 *     la respiration que `fx.js` pose sur le personnage. Une carte sans
 *     `mini` est animée (vitrine, fiche, révélation) : au plus trois à
 *     l'écran, et c'est à la page de figer les autres (`.fz-fige` sur la
 *     carte ou sur n'importe quel conteneur, ou `anime: false`).
 *   — **La rareté est sur la carte** (la forme et son mot, coin haut-droit) :
 *     une page n'en colle plus une seconde au même coin.
 *   — Le reste — les classes, les options, les états — est décrit dans
 *     `cardHTML` (cartes.js), et la planche de toutes les tailles × raretés ×
 *     états se monte avec `node scripts/cartes-ui-smoke.mjs --servir`. */

/* ------------------------------------------------- l'unité de la carte

   Tout ce que dessine une carte — son rayon, son cadre, son nom, ses marges —
   se mesure en centièmes de sa propre largeur, pour qu'elle soit juste en
   vignette comme en grand. C'est ce que font les unités de conteneur, `cqw`.

   Elles étaient employées directement, et **c'était une bombe à retardement** :
   quand `container-type` ne prend pas — un navigateur d'avant 2023, un moteur
   qui connaît l'unité sans connaître le confinement — `cqw` ne disparaît pas,
   elle se rabat sur la **fenêtre**. Sur un écran de 470 px, `4cqw` passe de
   5 px à 19 px de rayon, le nom de 8 px à 28 px, la marge de 14 px à 52 px :
   la carte devient un galet, et le nom, coupé des deux côtés par l'arrondi,
   n'est plus lisible. Rien ne le signale, et ça ne se voit pas sur la machine
   qui l'a écrit.

   `--u` vaut donc un centième de la largeur attendue, en pixels, et la règle
   `@container` ne la remplace par `1cqw` que là où le confinement fonctionne
   vraiment. Un moteur qui n'en veut pas garde le repli et affiche une carte
   juste ; les autres gagnent la mise à l'échelle exacte. Chaque endroit qui
   pose une carte d'une autre taille redéclare `--u`, juste en dessous. */
.fz{--u:1.3px}
.summary .fz{--u:.7px}

/* **La règle portait sur `.fz`, et `.fz` est le conteneur.**

   **Un élément qui établit un conteneur ne peut pas s'interroger lui-même.**
   `@container` se résout toujours contre le conteneur **ancêtre** le plus
   proche ; il n'y en a aucun au-dessus d'une carte. La condition ne pouvait
   donc pas être vraie, `--u` restait au repli de 1,3 px, et toutes les
   cartes du jeu ont été dessinées un temps à la moitié de leur échelle.

   `--u` descend donc sur les deux faces, `.body` (le recto) et `.verso`, qui
   sont dans le conteneur et peuvent l'interroger. Tout le dessin de la carte
   vit dans l'une ou l'autre — c'est pour ça que son relief (rayon, ombre,
   cadre) est sur `.body` et non sur `.fz`.

   Le repli reste **en pixels et jamais en `cqw` nu** : voir plus haut. */
@container (min-width: 0px){
  .fz > .body,
  .fz > .verso,
  .summary .fz > .body{--u:1cqw}
}

/* Les mesures de la carte, nommées une fois. Chacune a son plancher en
   pixels : au-dessous de cent cinquante pixels de carte, c'est lui qui joue.

   --bord-encre, --bord-craie   le cerne et le bord de découpe ;
   --lisere                     le liseré de rareté, sous le bord craie ;
   --rayon                      l'arrondi de la découpe ;
   --deb                        ce que le pin, la forme et la bande passent
                                du bord ;
   --fs-nom                     le nom : sept centièmes de la carte, onze
                                pixels au moins (la suite du kiosque vérifie
                                qu'il suit la carte au-dessus du plancher) ;
                                six centièmes le laissaient à dix-huit pixels
                                sur une carte de trois cents, plus petit que
                                le titre de la vitrine qui la porte ;
   --fs-petit                   l'âge, les stickers, l'étiquette, le pied. */
.fz > :is(.body,.verso){
  --bord-encre:max(1.5px, calc(.6 * var(--u)));
  --bord-craie:max(2.5px, calc(1 * var(--u)));
  --bord:calc(var(--bord-encre) + var(--bord-craie));
  --lisere:max(2px, calc(.9 * var(--u)));
  --rayon:max(6px, calc(5 * var(--u)));
  --deb:max(3px, calc(1.4 * var(--u)));
  --fs-nom:max(11px, calc(7 * var(--u)));
  --fs-petit:max(11px, calc(4.4 * var(--u)));
  --ombre:max(3px, calc(1.1 * var(--u)));
}

/* ----------------------------------------------------------- la carte

   **`.fz` n'est plus qu'une boîte** : sa largeur, son rapport, son conteneur.
   Elle laisse déborder ce qui est collé dessus (`overflow` visible), et c'est
   le dessin, plus bas, qui découpe l'illustration à l'arrondi.

   Sa couleur de texte est posée ici, en craie, pour qu'une carte n'hérite
   rien de la page qui la pose : sept écrans la posent dans sept conteneurs,
   et l'un d'eux peut écrire en or, ce qu'aucun petit texte de carte ne doit
   faire (la règle de l'or). Les classes `r-…` de ui.css ne colorent plus
   le texte depuis le lot 4 ; chaque texte de la carte pose d'ailleurs sa
   couleur. */
.fz{container-type:inline-size;position:relative;width:100%;aspect-ratio:63/88;
  border-radius:6px;cursor:pointer;color:var(--craie)}

/* **Le recto.** Une colonne : en haut le pin et l'âge, en bas la bande du nom
   et ce qui se pose dessus ; l'illustration, la forme et les stickers sont
   posés par-dessus, hors du flux. Le flux est ce qui garantit qu'un nom de
   trois lignes repousse l'étiquette au lieu de passer dessous.

   L'ombre dure est la sienne : trois pixels d'encre en bas à droite, la
   carte décollée du mur d'un millimètre. */
.fz .body{position:absolute;inset:0;display:flex;flex-direction:column;
  padding-bottom:max(6px, calc(7 * var(--u)));
  border-radius:var(--rayon);color:var(--encre);
  box-shadow:var(--ombre) var(--ombre) 0 var(--encre)}

/* **Le bord de découpe et le cerne**, par-dessus le bord de l'illustration :
   l'encre dehors, la craie dedans, puis le liseré de la rareté. Trois ombres
   intérieures d'un pseudo-élément sans fond — elles se peignent sur ce qu'il
   recouvre, et ne coûtent ni un élément ni une image. */
.fz .body::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 var(--bord-encre) var(--encre),
    inset 0 0 0 var(--bord) var(--craie),
    inset 0 0 0 calc(var(--bord) + var(--lisere)) var(--rc,#C2CAD6)}

/* ------------------------------------------------------------ le dessin

   La plaque de la rareté en fond (`plaqueCarte`, dans fanzzy-fond.js), le
   personnage devant. `isolation` garde le reflet de la matière (son
   `mix-blend-mode`) sur le dessin seul. */
.fz .art{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate;
  border-radius:inherit;background:#10141A}
.fz .art svg{width:100%;height:100%;display:block}

/* Deux pièges se cumulent ici.

   Le centrage ne peut pas passer par `transform` : fx.js pose `fz-vivant` sur
   toute image `.illu` pour la faire respirer, et ses keyframes réécrivent
   `transform` en entier. Un `translateX(-50%)` y était effacé dès la première
   image de l'animation, et l'illustration se retrouvait décalée d'une
   demi-largeur — seul son tiers gauche restait visible dans la carte.

   Il ne peut pas passer non plus par des marges automatiques : quand l'image
   est plus large que sa fenêtre, la marge gauche est ramenée à zéro et tout
   le débord part à droite. L'image se retrouve alors collée à gauche.

   On laisse donc la boîte remplir la fenêtre et c'est `object-fit` qui
   recadre le contenu, centré horizontalement et posé sur la base. Ni
   l'animation ni le débordement ne peuvent le déplacer.

   Ces trois règles sans `.fz` servent aussi au deck, qui pose le même dessin
   dans ses propres cases : elles ne bougent pas. */
/* La boîte qui empile le décor et le personnage. **Elle doit remplir son
   parent** : sans hauteur définie, le `height:100%` du SVG de décor retombe sur
   la taille intrinsèque du `viewBox`, et le décor prend la forme de son dessin
   au lieu de celle de la carte. */
.illuwrap{position:absolute;inset:0}
.illuwrap .illu{position:absolute;left:0;bottom:0;width:100%;height:104%;
  object-fit:cover;object-position:50% 100%;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
/* Un objet n'est pas un personnage : il est détouré et n'a ni pieds ni sol.
   Il flotte au milieu de la tribune au lieu de s'y planter en bas. */
.illuwrap .illu.objet{inset:10% 8%;left:auto;bottom:auto;width:84%;height:80%;
  object-fit:contain;object-position:50% 50%}

/* **Sur la carte, le personnage laisse voir sa plaque.** Le buste remplissait
   toute la hauteur (104 %) : en grille on ne voyait que lui, et la plaque —
   qui dit la rareté — n'était plus qu'un liseré au-dessus de sa tête. À
   quatre-vingt-deux pour cent, le gradin se voit au-dessus de lui et sous
   le pin et la forme, le visage reste au-dessus de la bande du nom même
   quand le nom prend trois lignes, et le bas du buste (coupé droit dans
   l'image) reste sous la bande et le bord. */
.fz .illuwrap .illu{height:82%}
/* **Le haut du dessin se fond dans la plaque.** Beaucoup de bustes et de
   portraits ne sont pas détourés en entier : ils portent un morceau de
   tribune derrière la tête (le buste de la Clé du Local est opaque à 95 %).
   Remplissant toute la carte, ils cachaient leur bord ; posés plus bas, ils
   le montraient en une ligne droite au travers de la plaque. Un fondu sur le
   premier huitième de l'image l'efface — sur un buste détouré, il ne touche
   que du vide au-dessus du crâne. Statique : un masque posé une fois ne
   coûte rien en grille. Ni l'objet ni le tableau d'une action ne le portent :
   l'un flotte entier, l'autre couvre tout. */
.fz .illuwrap .illu:not(.objet,.fz-pleine){
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%);
  mask-image:linear-gradient(180deg,transparent,#000 12%)}
/* Un personnage en pied (la pose d'un état, d'une tenue, le Fanzzy d'une
   grande carte) : en entier, posé sur le sol de la carte, la tête sous le
   pin et la forme. Recadré comme un buste, il perdait sa tête. */
.fz .illuwrap .illu.fz-pied{height:88%;object-fit:contain}
/* **À la taille de son âge** (7 octobre 2026, demandé par Gaël) : 90 %, 97 %,
   104 % de la carte (8 octobre, plus bas). Chaque dessin tient en entier dans la même boîte ; un
   âge 3 plus large ou plus haut (un mégaphone sur l'épaule) y était réduit,
   et le Fanzzy paraissait rapetisser en grandissant. */
/* Et une fois et demie sa largeur, centré : la pose d'une tenue large a un
   cadre plus large que la carte, que `contain` réduisait sur sa largeur. */
.fz[data-age] .illuwrap .illu.fz-pied{left:-25%;width:150%}
/* La lueur de l'âge, aux couleurs de rareté : bleu, puis violet, plus large. */
.fz[data-age="2"]:not(.fz-secret) .illuwrap .illu.fz-pied{filter:drop-shadow(0 0 4px rgba(95,168,255,.75))
  drop-shadow(0 0 12px rgba(95,168,255,.4)) drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.fz[data-age="3"]:not(.fz-secret) .illuwrap .illu.fz-pied{filter:drop-shadow(0 0 5px rgba(185,140,255,.9))
  drop-shadow(0 0 18px rgba(185,140,255,.55)) drop-shadow(0 3px 8px rgba(0,0,0,.6))}
/* **Plus grand, les pieds sous la bande du nom** (8 octobre 2026, demandé
   par Gaël : « ça doit être l'élément principal »). En entier, il ne prenait
   que l'espace entre le pin et la bande, moins de la moitié de la carte ; on
   le laisse descendre derrière la bande, qui cache ses pieds, et il gagne un
   bon quart. Les âges gardent leur écart : la tête monte de 16 % à 2 % du
   haut de la carte. */
.fz[data-age] .illuwrap .illu.fz-pied{bottom:-6%;height:104%}
/* Le repos d'un âge (`cadrerEtat`, cartes.js) se recentre en hauteurs de
   boîte : la boîte doit être un conteneur de taille. */
.fz .illuwrap{container-type:size}
.fz[data-age="1"] .illuwrap .illu.fz-pied{height:90%}
.fz[data-age="2"] .illuwrap .illu.fz-pied{height:97%}
/* Une illustration de carte d'action est un tableau : elle couvre tout. */
.fz .illuwrap .illu.fz-pleine{height:100%;object-position:50% 50%}
/* L'objet monte au-dessus de la bande du nom, qui le coupait à mi-hauteur :
   son pied s'arrête à 70 % de la carte. Il garde **61 % de sa hauteur** —
   sous 60 %, il se lit comme un timbre collé sur la plaque, et la suite du
   tour (`tour-ui-smoke`, « elle n'est pas un timbre ») le refuse. Le haut à
   9 % passe encore sous le pin et la forme : ce sont des stickers, posés
   au-dessus, et un objet détouré n'a rien dans ses coins. */
.fz .illuwrap .illu.objet{inset:9% 9% auto;width:82%;height:61%}

/* ------------------------------------------------- la matière, par rareté

   **Statique en grille.** Une grille de trente cartes dont chacune brille
   fait trente animations et ne dit plus rien ; la direction veut la matière
   **posée** : la commune en carton mat (rien), la rare plastifiée (un reflet
   fixe), l'épique en holo figé, la légendaire cerclée d'or. Elles ne
   bougent qu'en vitrine, sur la fiche et à la révélation (`.fz-anime`, plus
   bas), et jamais par un dégradé qui se repeint : par `translate` et
   `transform` d'un pseudo-élément.

   Le reflet est peint par-dessus le dessin, dans son calque (`.art`, qui le
   découpe à l'arrondi). */
.fz .art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
.fz.r-rare:not(.fz-verrou) .art::after{
  background:linear-gradient(118deg,transparent 30%,rgba(242,238,228,.26) 42%,transparent 55%)}
/* Le holo de l'épique : la nappe de couleurs, et la bande claire posée où
   `--mx` et `--my` la mettent (50 % et 40 % au repos). Une vitrine qui
   incline la carte peut les déplacer : c'est une variable lue au rendu,
   pas une animation.

   **Un reflet, pas un voile** (25 octobre 2026, Gaël : « les cartes épiques
   ne sortent pas très nettes »). La nappe passait en `screen` à 14-17 % sur
   toute l'image : elle éclaircissait chaque noir, le dessin perdait son
   contraste et la carte semblait floue à côté d'une rare. Elle reste, à
   peine teintée, et la bande claire garde l'éclat du holo sur une diagonale
   étroite. */
.fz.r-epique:not(.fz-verrou) .art::after{inset:-25%;mix-blend-mode:screen;
  background:
    linear-gradient(115deg,transparent 40%,rgba(242,238,228,.24) 47%,rgba(160,220,255,.16) 52%,transparent 60%)
      var(--mx,50%) var(--my,40%)/250% 250% no-repeat,
    linear-gradient(125deg,rgba(255,110,210,.05),rgba(110,200,255,.04) 40%,rgba(255,236,140,.04) 70%,rgba(185,140,255,.05))}
/* Le liseré d'or de la légendaire : un anneau découpé par un masque dans un
   disque conique d'or, de craie et d'or d'encre (les trois jetons de la
   forme légendaire). Le disque déborde l'anneau de partout pour qu'aucun
   coin ne se vide quand il tourne ; immobile en grille. */
.fz .lisere{position:absolute;z-index:4;inset:var(--bord);overflow:hidden;pointer-events:none;
  border-radius:calc(var(--rayon) - var(--bord));
  padding:max(3px, calc(1.2 * var(--u)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fz .lisere::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;translate:-50% -50%;
  background:conic-gradient(from 20deg,var(--projo),var(--craie) 12%,var(--or-encre) 28%,var(--projo) 42%,
    var(--craie) 58%,var(--or-encre) 74%,var(--projo) 88%)}

/* ----------------------------------------------- le haut : pin et âge

   **Le pin de la famille** : un sticker rond craie, le pictogramme à
   l'encre, collé de travers sur le coin haut-gauche. Craie et non la
   couleur de la famille : la Voix est d'or et le Tifo violet, et ni l'or
   (hors légendaire) ni le violet ne se posent sur une carte (amendements 3
   et 4). Il suit la carte, avec un plancher : la suite du kiosque vérifie
   que la pastille grandit avec elle. */
.fz .haut{position:relative;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  margin:calc(-1 * var(--deb)) 0 auto calc(-1 * var(--deb))}
.fz .pip{flex:none;display:grid;place-items:center;width:max(16px, calc(13 * var(--u)));aspect-ratio:1;
  border-radius:50%;background:var(--craie);rotate:-6deg;
  box-shadow:0 0 0 1.5px var(--encre),1px 1.5px 0 1.5px rgba(7,9,12,.55)}
.fz .pip svg{width:64%;height:64%;fill:none;stroke:var(--encre);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
/* Le repli du pictogramme, quand la page n'a pas le catalogue (la fiche) :
   l'emblème de la famille, éteint en grisaille d'encre. Ses couleurs
   d'émail — l'or de la Voix, le violet du Tifo — ne se posent pas sur une
   carte (amendements 3 et 4). Grisaille foncée et non silhouette pleine :
   en silhouette, le tambour et l'écharpe nouée devenaient deux taches
   noires ; assombris, ils gardent leurs baguettes et leurs mailles, de
   seize à quarante pixels. */
.fz .pip .fz-picto{display:block;width:70%;height:70%;object-fit:contain;
  filter:grayscale(1) brightness(.45) contrast(1.8)}

/* **L'âge.** Sous cent cinquante pixels, le badge : Oswald 11 à l'encre sur
   une bande craie, sous le pin — à côté de lui, il heurtait le mot de la
   forme de rareté (« COMMUNE » prend soixante pixels sur une carte de
   quatre-vingt-six). Au-delà, le tampon plein « ÉVO 2 », vert foncé sur la
   craie (6,75:1), collé à droite du pin.

   Une seule couleur pour les trois âges, et ce n'est pas un oubli : l'or du
   troisième était au cerne, et aucun sticker d'or ne se pose sur une carte
   qui n'est pas légendaire (amendement 3). Le chiffre dit l'âge. */
.fz .age{flex:none;margin:0 0 0 calc(var(--deb) + 1px);padding:2px 4px 1px;border-radius:2px;
  font-family:var(--banner);font-weight:700;font-size:11px;line-height:1;letter-spacing:.05em;
  white-space:nowrap;background:var(--craie);color:var(--encre);rotate:-3deg;
  box-shadow:0 0 0 1.5px var(--encre)}

/* ------------------------------------------------ la forme de rareté

   Au coin haut-droit, toujours, grille comprise (amendement 20) : la forme
   (`.tbf-forme`, ui.css) et son mot — dans la forme pour le rectangle et le
   rond, en étiquette qui court vers l'intérieur pour l'étoile et l'éclat
   (`--coin`). Vingt-deux pixels en grille (vingt-six pour l'étoile et
   l'éclat, voir plus bas) ; douze centièmes de la carte au-delà, soit
   trente-quatre pour la carte de la fiche (deux cent quatre-vingts pixels)
   et quarante au plus — à trente-quatre sur une carte de
   trois cents, le mot retombait à onze pixels dans un coin de vitrine. Deux
   degrés au plus : elle se lit avant de se voir collée. */
.fz .fz-forme{position:absolute;z-index:8;top:calc(-1 * var(--deb));right:calc(-1 * var(--deb));
  --taille:clamp(22px, calc(12 * var(--u)), 40px);--rot:2deg;pointer-events:none}
/* **L'étoile et l'éclat se voient en entier.** Leur étiquette, posée par
   ui.css à cheval sur leur pied (`.tbf-forme--coin`), en cachait 30 à 45 %
   de 86 à 200 pixels de carte, mesuré au banc : une étiquette craie de
   47 × 18 (« ÉPIQUE ») ou de 72 × 18 (« LÉGENDAIRE ») sur une face de
   quinze pixels. On lisait trois rectangles et un rond — la forme ne
   distinguait plus la moitié des raretés, ce qu'elle est là pour faire.

   L'étiquette descend donc **sous** la forme, et n'en croise plus que la
   pointe basse, le bord d'encre et de craie : elle y reste attachée
   (« l'étiquette qui traverse », amendement 20), et la face se voit à
   95 % au moins, de 86 à 300 pixels (la suite de la carte exige 85 %).
   Son bord droit reste sur celui de la forme, comme au coin de ui.css :
   elle court vers l'intérieur.

   Et elles passent à **26 pixels** (13 centièmes, 44 au plus) au lieu de
   22 — un écart à la spec, comme le rond de ui.css qui grandit jusqu'à son
   mot : une étoile à huit branches de vingt-deux pixels a une face de
   quatorze, plus petite que le rond « RARE » (une trentaine) et que le
   rectangle « COMMUNE » ; c'étaient les deux raretés les plus hautes qui
   se voyaient le moins. */
.fz .fz-forme:is([data-rar=epique],[data-rar=legendaire]){--taille:clamp(26px, calc(13 * var(--u)), 44px)}
.fz .fz-forme:is([data-rar=epique],[data-rar=legendaire])>b{top:84%;transform:rotate(-4deg)}

/* ------------------------------------------------- la bande du nom

   **Le nom en banderole** : une bande de craie posée de travers (−2°) qui
   passe les deux bords de la carte, le nom en Oswald 700 à l'encre (17:1 ;
   5:1 sous le voile du soleil). Il prend autant de lignes qu'il lui en faut
   — à quatre-vingt-six pixels, sept noms sur dix en prennent deux — et ne se
   coupe jamais : la bande grandit vers le haut. Les lignes sont équilibrées
   (`balance`), et **sans césure** : avec elle, le navigateur coupait
   « COL- / LEUR D'AFFICHES » pour égaliser deux lignes qui tenaient sans.
   Un mot plus long que la bande elle-même (aucun des 765 noms ne l'est à 86
   pixels, la suite de la carte le vérifie) passerait à la ligne plutôt que
   d'en sortir.

   Le pied, sous le nom, ne vit que sur une grande carte (voir le seuil, plus
   bas). Il s'écrit à l'encre pleine et non à 60 % : à 60 %, la lettre tenait
   5,4:1 à l'ombre et 2,5 au soleil. */
.fz .top{position:relative;z-index:6;margin:0 calc(-1 * var(--deb));rotate:-2deg;
  padding:max(4px, calc(1.5 * var(--u))) max(2px, calc(1.8 * var(--u))) max(3px, calc(1.2 * var(--u)));
  background:var(--craie);color:var(--encre);text-align:center;
  box-shadow:0 0 0 1.5px var(--encre),2px 2px 0 1.5px rgba(7,9,12,.55)}
.fz .nm{font-family:var(--banner);font-weight:700;font-size:var(--fs-nom);line-height:1.08;
  letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;color:var(--encre);
  hyphens:manual;overflow-wrap:anywhere}
/* Le numéro de pochette d'une carte qu'on n'a pas : « N° 013 », comme dans
   un album, à la place du nom. */
.fz .nm.numero{letter-spacing:.1em}
.fz .foot{margin-top:max(1px, calc(.6 * var(--u)));font-family:var(--banner);font-weight:500;
  font-size:var(--fs-petit);line-height:1.1;letter-spacing:.08em;text-transform:uppercase;color:var(--encre)}

/* **Ce qui se pose sur la bande**, dans son flux : TITULAIRE, AVATAR,
   l'étiquette d'un état ou d'une tenue. Ils sont **avant** le nom dans le
   flux : un nom de trois lignes les repousse au lieu de passer dessous, ce
   que le correctif provisoire du lot 1 (`--lignes-nom`) ne savait pas
   faire. Ils passent à la ligne s'ils ne tiennent pas côte à côte.

   Ils sont posés sur le bord haut de la bande, et c'est leur cerne et leur
   ombre (trois pixels et demi, hors de la boîte) qui la chevauchent : la
   bande garde six pixels au-dessus du nom quand elle les porte. Leur rangée
   prend la largeur et la pente de la bande, pour que leur pied suive son
   bord d'un bout à l'autre — de travers chacun, ils mordaient le nom d'un
   côté. Leur bord de craie, invisible sur la craie de la bande, se réduit
   au cerne. */
.fz .sur{position:relative;z-index:7;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 6px;
  margin:0 calc(-1 * var(--deb));padding:0 max(2px, calc(1.8 * var(--u)));rotate:-2deg}
.fz .sur + .top{padding-top:max(6px, calc(2 * var(--u)))}
.fz .sur>*{flex:none;max-width:100%}
.fz .sur .tbf-sticker{height:auto;min-width:0;padding:3px 5px 2px;font-size:var(--fs-petit);line-height:1;
  box-shadow:0 0 0 1.5px var(--encre),1px 2px 0 1.5px rgba(7,9,12,.55)}
.fz .sur .fz-avatar{--rot:-1deg}
.fz .sur .fz-titulaire{--rot:1.5deg}
/* L'étiquette : un bout de gaffer à l'encre, la craie dessus (5:1 au
   soleil), centrée sur la bande. Elle reprend la classe de ui.css, sortie
   de sa position absolue : tout ce qui la posait au-dessus du nom par le
   calcul devient inutile ici. */
.fz .sur .tbf-etiq{position:static;margin:0 auto;width:auto;
  padding:3px 6px 2px;border-radius:3px;rotate:1deg;
  background:var(--encre);color:var(--craie);
  font-family:var(--banner);font-weight:700;font-size:var(--fs-petit);line-height:1.1;letter-spacing:.06em;
  text-transform:uppercase;text-align:center;text-wrap:balance;
  box-shadow:0 0 0 1.5px var(--craie),1px 2px 0 1.5px rgba(7,9,12,.5)}

/* ---------------------------------------------------- les stickers

   « ×3 » quand on a des doublons, sur le flanc droit, à cheval sur le bord ;
   le prix d'un âge à venir, au milieu du dessin — assez bas pour laisser
   l'âge lisible sous le pin, assez haut pour ne pas toucher la bande. Ce
   sont les stickers de ui.css (bord craie, cerne, ombre), à la taille de la
   carte. */
.fz .fz-doublons{position:absolute;z-index:6;right:calc(-1 * var(--deb));top:42%;--rot:8deg;
  height:max(24px, calc(10 * var(--u)));min-width:max(24px, calc(10 * var(--u)));padding:0 4px;
  border-radius:99px;font-size:max(12px, calc(4.6 * var(--u)))}
.fz .fz-prix{position:absolute;z-index:6;left:50%;top:47%;translate:-50% -50%;--rot:-4deg}

/* -------------------------------------------- la carte qu'on n'a pas

   **Un pochoir gris sous scotch en croix.** Le personnage en silhouette
   d'un seul gris, la plaque éteinte, une trame à 45° par-dessus — on voit
   qui manque, on ne le possède pas. La croix couvre l'illustration et jamais
   la bande (amendement 19), et le cadenas, icône au trait sur un rond de
   craie, dit pourquoi ; une raison (« NIV. 10 ») s'écrit à côté de lui.

   **La silhouette ne se tire que d'une image détourée.** Éteindre une image
   au noir puis la remonter en gris n'en garde que le contour de ce qui est
   opaque : un buste opaque (la Clé du Local, 95 %) devenait une dalle
   grise tachée de noir par son gradin. `cardHTML` demande donc pour une
   carte non possédée l'image détourée (`fz-pied`) ; l'objet (`objet`)
   l'est toujours. Une image pleine — le tableau d'une carte d'action, ou
   tout dessin qui n'a pas d'image détourée — n'est jamais passée au noir :
   elle s'éteint en grisaille, son contraste ramené de moitié vers le gris
   de la silhouette, ses formes encore lisibles sous la trame (le tableau de
   « Craquage », sombre, tombait au noir à moins). La suite de la carte
   mesure que la silhouette couvre de 15 à 70 % du dessin. */
.fz.fz-verrou .art{filter:grayscale(1) brightness(.85)}
.fz.fz-verrou .illuwrap>svg{opacity:.38}
.fz.fz-verrou .illu:is(.fz-pied,.objet){filter:brightness(0) invert(.62);opacity:.92}
.fz.fz-verrou .illu:not(.fz-pied,.objet){filter:grayscale(1) contrast(.5) brightness(1.1)}
.fz.fz-verrou .art::after{background:repeating-linear-gradient(45deg,rgba(7,9,12,.42) 0 2px,transparent 2px 5px)}
/* **La croix et son cadenas descendent sur une petite carte.** Centrés à
   36 % de la hauteur, ils tombaient sous l'étiquette de l'étoile et de
   l'éclat, qui descend sous sa forme (voir « la forme de rareté ») : sur une
   carte de quatre-vingt-six pixels, elle finit à trente-neuf pixels du
   haut, ombre comprise, et le cadenas en commençait à trente. Leur centre
   est donc à 36 % ou à cinquante-quatre pixels, le plus bas des deux —
   seule une carte de moins de cent sept pixels de large en descend. La
   croix garde sa hauteur (40 %) autour de lui. */
.fz.fz-verrou .body{--croix:max(36%, 54px)}
.fz .fz-croix{z-index:3;left:9%;right:9%;top:calc(var(--croix,36%) - 21%);bottom:calc(81% - var(--croix,36%));
  --ruban:max(9px, calc(6 * var(--u)))}
.fz .cadenas{position:absolute;z-index:5;left:50%;top:var(--croix,36%);transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;gap:.3em;box-sizing:border-box;
  min-width:max(26px, calc(14 * var(--u)));height:max(26px, calc(14 * var(--u)));padding:0 .4em;
  border-radius:99px;background:var(--craie);color:var(--encre);
  font-family:var(--banner);font-weight:700;font-size:var(--fs-petit);line-height:1;letter-spacing:.06em;
  white-space:nowrap;box-shadow:0 0 0 2px var(--encre),1px 2px 0 2px rgba(7,9,12,.5)}
.fz .cadenas .tbf-ico{font-size:max(14px, calc(7 * var(--u)))}
.fz .cadenas b{font-weight:inherit}

/* **Un âge à venir** : le dessin flou — on garde la carrure, la couleur et
   la lumière, tout ce qui dit « il y a quelqu'un là-dessous » —, et la bande
   dit « ÂGE À VENIR » au lieu d'un nom flouté, qui se lisait comme une panne
   d'affichage. Le flou suit la carte : trois pixels sur une vignette, plus
   sur une vitrine, où trois pixels ne cachent plus rien. */
/* Un âge secret qu'on n'a pas (la croix posée sur un âge encore loin) reste
   flou : la seconde règle pèse autant que la silhouette du pochoir, plus
   haut, et vient après elle. */
.fz.fz-secret .illu,.fz.fz-secret.fz-verrou .illu{filter:blur(max(3px, calc(1.8 * var(--u)))) brightness(.8)}

/* Les effets vivent dans le panneau de détail. Sur la carte ils masquaient
   l'illustration pour redire la même chose. */
.fz .mods{display:none}

/* ------------------------------------------------------------ le verso

   Construit au premier retournement (`retourner`, cartes.js) : le dos de la
   série, bord à bord, sous le même bord de craie et le même cerne. Les deux
   faces tournent chacune sur elle-même, dos caché : la carte n'a besoin ni
   de `preserve-3d` ni d'un parent qui tourne. */
.fz.fz-flip{perspective:900px}
.fz.fz-flip > .body,.fz > .verso{backface-visibility:hidden;transition:rotate .5s cubic-bezier(.3,.9,.3,1)}
.fz > .verso{position:absolute;inset:0;rotate:y 180deg;border-radius:var(--rayon);
  background:#10141A 50% 50%/cover no-repeat;
  box-shadow:inset 0 0 0 var(--bord-encre) var(--encre),inset 0 0 0 var(--bord) var(--craie),
    var(--ombre) var(--ombre) 0 var(--encre)}
.fz.fz-retournee > .body{rotate:y -180deg}
.fz.fz-retournee > .verso{rotate:y 0deg}

/* ------------------------------------------- en dessous de 150 pixels, au-dessus

   **Le seuil du pied ne bouge pas.** Sous cent cinquante pixels de large, la
   carte est une vignette : le pied disparaît (la bande ne porte que le nom),
   l'âge reste un badge. Au-dessus, c'est une grande carte : le pied écrit
   la famille et la poussée, l'âge devient le tampon, et le pin passe à côté
   de lui. Le conteneur est la carte (`.fz`) : chaque carte décide d'elle-même,
   sans que l'écran ait à le savoir. */
@container (max-width: 150px){ .fz .foot{display:none} }
@container (width > 150px){
  .fz .haut{flex-direction:row;align-items:center;gap:max(4px, calc(1.6 * var(--u)))}
  .fz .age{margin:calc(var(--deb) + max(2px, calc(1 * var(--u)))) 0 0 0;padding:.35em .5em .25em;border-radius:3px;
    font-size:max(12px, calc(5 * var(--u)));letter-spacing:.08em;color:var(--vert-fonce);rotate:-6deg;
    box-shadow:0 0 0 1.5px var(--encre),1px 2px 0 1.5px rgba(7,9,12,.45)}
}

/* ------------------------------------------------------------ le mouvement

   **Une carte qu'on ne regarde pas ne bouge pas** (lots 3 et 5, et le lot 4
   en fait la règle de la carte même).

   Une carte `mini` — toute carte de grille — n'est pas `.fz-anime` : sa
   matière est posée, et la respiration que fx.js donne à son personnage
   (`fz-vivant`) y est arrêtée. La réaction au toucher (`fz-reagit`), finie,
   passe encore : elle répond à un geste. */
.fz:not(.fz-anime) .fz-vivant:not(.fz-reagit){animation:none}

/* En vitrine, sur la fiche, à la révélation : l'épique dérive en douze
   secondes, le liseré d'or de la légendaire tourne en huit. **Une seule
   animation de matière par carte** — l'éclat de sa forme reste immobile sur
   la carte (`cardHTML` ne pose pas `--tourne`), le liseré porte le
   mouvement de l'or —, plus la respiration du personnage : deux mouvements
   par carte, et c'est ce qu'une vitrine compte avec ses rayons (trois au
   plus par écran). */
.fz.fz-anime.r-epique:not(.fz-verrou) .art::after{animation:fz-derive 12s ease-in-out infinite alternate}
.fz.fz-anime .lisere::before{animation:fz-tourne 8s linear infinite}
@keyframes fz-derive{from{translate:-10% -6%}to{translate:10% 6%}}
@keyframes fz-tourne{to{transform:rotate(1turn)}}

/* L'entrée en cascade. La grille apparaissait d'un bloc ; elle se dépose
   maintenant carte par carte. Le retard est plafonné à douze rangs : au-delà,
   quelqu'un qui arrive en bas de la grille attendrait quatre secondes pour
   voir sa collection. Finie : elle ne compte pas parmi les infinies. */
.grid .slot{animation:poser .34s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes poser{from{opacity:0;transform:translateY(12px) scale(.88)}}

/* **`.fz-fige`** arrête tout, sur la carte ou sur n'importe lequel de ses
   conteneurs : une pile de dos, une carte écartée qu'on ne lit plus. La
   **page d'album** (`.tbf-album`, `ui.css`) fige d'elle-même les cartes
   qu'elle porte : c'est une grille. Une animation finie qui part d'un geste
   (la réaction au toucher, `fx.js`) passe encore, parce que sa règle vient
   après celle-ci au même poids.

       <div class="reveal fz-fige">…cardHTML…</div> */
:is(.fz-fige,.tbf-album) .fz,:is(.fz-fige,.tbf-album) .fz::before,:is(.fz-fige,.tbf-album) .fz::after,
:is(.fz-fige,.tbf-album) .fz *,:is(.fz-fige,.tbf-album) .fz *::before,:is(.fz-fige,.tbf-album) .fz *::after,
.fz.fz-fige,.fz.fz-fige::before,.fz.fz-fige::after,
.fz.fz-fige *,.fz.fz-fige *::before,.fz.fz-fige *::after{animation:none}
/* Les deux mouvements de la matière pèsent plus que la règle du dessus
   (leurs sélecteurs nomment la rareté, l'état, la classe animée) : ils ont
   leur arrêt à eux, d'un poids au-dessus. Sans lui, une carte de vitrine
   posée dans une pile figée dérivait encore, face cachée. */
:is(.fz-fige,.tbf-album) .fz.fz-anime.r-epique:not(.fz-verrou) .art::after,
.fz.fz-fige.fz-anime.r-epique:not(.fz-verrou) .art::after,
:is(.fz-fige,.tbf-album) .fz.fz-anime .lisere::before,.fz.fz-fige.fz-anime .lisere::before{animation:none}

/* Sans mouvement, tout est déjà posé : la matière ne bouge pas, la carte
   change de face sans tourner. Rien de ce qui informe ne disparaît. */
/* Les sélecteurs reprennent ceux du mouvement, au mot près : écrits plus
   courts, ils pesaient moins que la règle qu'ils devaient arrêter, et
   l'épique dérivait encore sans mouvement (la suite de la carte l'a vu). */
@media (prefers-reduced-motion:reduce){
  .grid .slot{animation:none}
  .fz.fz-anime.r-epique:not(.fz-verrou) .art::after,.fz.fz-anime .lisere::before{animation:none}
  .fz.fz-flip > .body,.fz > .verso{transition:none}
}
/* Le même bloc pour le mode calme du tiroir : voir `ui.css`, qui explique
   pourquoi chaque bloc `prefers-reduced-motion` a son double, règle pour
   règle. */
html[data-calme~="animations"] .grid .slot{animation:none}
html[data-calme~="animations"] .fz.fz-anime.r-epique:not(.fz-verrou) .art::after,
html[data-calme~="animations"] .fz.fz-anime .lisere::before{animation:none}
html[data-calme~="animations"] .fz.fz-flip > .body,
html[data-calme~="animations"] .fz > .verso{transition:none}