/**
 * La fiche d'un Fanzzy (lot 4 de la refonte FAIT MAIN) : la carte en main.
 *
 * Elle s'affiche à deux endroits — en panneau par-dessus le classeur, et en
 * page entière quand on arrive par un lien. Ses règles vivent donc dans un
 * fichier à elles plutôt que dans l'une des deux pages : deux copies du même
 * écran finissent toujours par diverger.
 *
 * Elle n'est pas dans `ui.css` pour la raison inverse : `ui.css` est chargée
 * par toutes les pages du jeu, et celle-ci n'en sert que deux.
 *
 * ## Ce qui est à elle, et ce qui ne l'est pas
 *
 * **La fiche n'écrit que des places** : marges, hauteurs du budget, la
 * largeur de la carte, la position de ce qui est collé autour d'elle. Le
 * dessin vient des briques communes — la carte (`cardHTML`, `cartes.css`),
 * la scène qu'on incline (`.tbf-vitrine-scene`), la bande du cri
 * (`.tbf-cri`), l'inventaire et son arbre des âges (`.tbf-inventaire`,
 * `.tbf-ages`, `.tbf-tuile`), la fiche kraft du détail (`.tbf-detail`), les
 * bâches (`.tbf-plaque`), le compteur d'écharpes (`.tbf-monnaie`), le tampon,
 * le ticket et la pile (`ui.css`). Ce qui manquait à ces briques est
 * marqué « provisoire » et décrit en besoin.
 *
 * ## Le budget de hauteur, à 360 × 640
 *
 * L'écran ne défile pas : il doit se lire d'un coup d'œil. Chaque bloc a donc
 * sa hauteur écrite, et un seul est souple — la carte.
 *
 *     barre du jeu (nav.js)        54   44 de boutons et 10 de marges : mesurée
 *     en-tête                      51   49 — le nom (20), 5 d'air, le sticker
 *                                       de famille (24) —, et 2 sous la barre
 *     la carte (souple)           225   ≥ 220 ; la carte y fait 151 × 211
 *     la bande du cri              48   44 (une cible de 32 est trop petite)
 *                                       et les 4 de sa brique
 *     l'inventaire                100
 *     la fiche kraft du détail     88
 *     les actions                  74   10 d'air, 52 de bâche, 5 d'ombre, 7
 *                                ----
 *                                 640
 *
 * La direction écrivait « barre 44 » et « en-tête 44 » : la barre du jeu en
 * prend 54 avec ses marges, et l'en-tête 49 depuis que la famille est un
 * sticker de vingt-quatre pixels sous le nom (la brique du vestiaire). Ce
 * sont ces quinze pixels que la carte rend. Elle reste au-dessus de cent
 * cinquante pixels de large — le seuil où la carte garde son pied et son
 * tampon d'âge (`cartes.css`) : 151 × 211, mesurée au banc du lot 4. Il ne
 * lui reste qu'un pixel au-dessus du seuil : ce qu'on ajoute à la colonne
 * se reprend ailleurs dans la colonne, pas sur elle.
 *
 * Les deux qu'on ne reprend pas : la bande du cri garde ses quarante-quatre
 * pixels (une cible plus basse est relevée par l'audit, et c'est la commande
 * qu'on touche pour entendre le personnage : `.tbf-cri`, ui.css), et
 * l'en-tête ses quarante-neuf (le sticker de famille est la brique du
 * vestiaire, la même d'un écran à l'autre).
 *
 * **En panneau par-dessus le classeur, le budget est le même** : le panneau
 * commence sous la barre du jeu (`--sous-barre`, fanzzy.html), comme la page
 * à son adresse, et la croix qui le referme tient dans la hauteur de
 * l'en-tête.
 *
 * **Sur un téléphone plus court, la bande du cri se replie d'abord**, en une
 * plaque ronde à côté de la carte : dès que, avec elle, la carte passerait
 * sous les cent cinquante pixels de large et perdrait son pied. Le seuil se
 * lit sur la hauteur du corps (« la bande du cri », plus bas), et non sur
 * celle de l'écran : il tient compte de la barre, d'un en-tête sur deux
 * lignes, d'une annonce. Puis la carte rétrécit (jusqu'à 150 px de haut), et
 * seulement ensuite le corps défile — jamais les actions, qui restent hors du
 * défilement.
 */

/* ------------------------------------------------------------ la coque

   `relative` : la demande de confirmation se pose par-dessus la fiche et pas
   par-dessus la page — le classeur, derrière, doit rester en place.

   **Cinq cent soixante pixels au plus.** Sur une tablette, la colonne en
   offre neuf cents : la fiche kraft s'y étirait en une ligne de chiffres à
   lire d'un bout à l'autre de l'écran, et les jauges en rubans. La fiche est
   un objet qu'on tient, pas une page qu'on remplit. */
.fiche{--marge:14px;position:relative;flex:1;min-height:0;display:flex;flex-direction:column;
  box-sizing:border-box;width:100%;max-width:560px;margin-inline:auto;color:var(--craie)}

/* ------------------------------------------------------------- le corps

   **La tête et les actions sont hors du défilement**, et tout ce qui est
   entre les deux vit ici. Un écran sans défilement ne repousse pas ce qui
   déborde, il le coupe : l'encoche, la barre gestuelle et un bandeau
   d'annonce reprennent une centaine de pixels sur un vrai téléphone, et ce
   qui tombait sous la coupe était la rangée d'actions. Quand la place
   suffit, rien ne défile ; quand elle manque, c'est la carte qui recule,
   jamais le bouton.

   Pas de barre de défilement visible : elle dirait « liste » sur un écran
   qui est une vitrine.

   **Le corps est un conteneur de taille** (`fiche-corps`) : c'est sur sa
   hauteur que la bande du cri décide de se replier. Sa hauteur ne dépend
   pas de son contenu — il prend ce que la tête et les actions laissent —,
   et le confinement de taille ne change donc rien à la colonne. */
.fiche .corps{flex:1;min-height:0;display:flex;flex-direction:column;container:fiche-corps / size;
  overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none}
.fiche .corps::-webkit-scrollbar{display:none}

/* ------------------------------------------------------------ l'en-tête

   Quarante-neuf pixels : la croix qui referme le panneau (la page n'en a
   pas : la barre du jeu porte sa flèche), le nom, et sous lui la famille et
   la rareté ; à droite, les écharpes du joueur — c'est avec elles qu'on fait grandir, et le prix
   d'ÉVOLUER se lit contre elles. */
.fiche .head{flex:none;display:flex;align-items:center;gap:10px;min-height:44px;
  margin:2px var(--marge) 0;padding:0}
.fiche .head h1{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:5px}
/* Le nom en Oswald vingt, à la craie, une ombre d'encre dessous. Un nom trop
   long pour la place **rapetisse** (fanzzy-fiche.js, `ajusterNom`) jusqu'à
   treize pixels avant de passer à la ligne : des points de suspension sur le
   nom de la carte qu'on regarde se liraient comme une faute. Une ligne de
   vingt pixels tout juste : ce sont des capitales, rien ne descend sous la
   ligne de base, et chaque pixel gagné ici revient à la carte. **Vingt
   pixels, et non une fois la taille** : un nom qui rapetisse garde sa
   ligne, sinon l'en-tête raccourcissait d'un âge à l'autre et la carte
   sautait au toucher. */
.fiche .head .nom{display:block;font:700 20px/20px var(--banner);letter-spacing:.06em;
  text-transform:uppercase;color:var(--craie);text-shadow:0 2px 0 var(--encre);white-space:nowrap}
.fiche .head .nom.long{white-space:normal;text-wrap:balance;line-height:1.05}
/* **La famille en sticker, la rareté en forme** (la direction : « deux
   stickers sous le nom »). Le sticker de famille est la brique du vestiaire,
   son pin dedans ; la fiche ne lui donne que sa pente, de deux degrés : à
   quatre (sa pente de premier enfant), son coin gauche montait de deux
   pixels de plus vers le nom. La rareté : la petite forme et son mot
   à côté, en Oswald treize gras à la craie pleine, à la taille du mot du
   sticker. La rangée fait vingt-quatre pixels — la hauteur du sticker — et
   le nom garde au-dessus l'air du bord craie et du cerne (3,5 px). **Une
   seule rangée tant que la forme y tient** : quand le mot de la rareté
   passe à la ligne, il se retire pour l'œil (`serrerGalons`,
   fanzzy-fiche.js) et la forme reste ; `wrap` ne joue plus qu'au-delà (320
   pixels sous la croix du panneau, un solde à cinq chiffres). */
.fiche .head .galons{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  font:700 13px/1 var(--banner);letter-spacing:.06em;text-transform:uppercase;color:var(--craie)}
.fiche .head .galons>.tbf-sticker{--rot:-2deg;margin-left:3px}
.fiche .head .galons.serre{column-gap:8px}
.fiche .head .galon{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.fiche .head .galon>.tbf-forme{--taille:15px}
/* Le mot de la rareté, empilé sur ceux des autres âges de la lignée : il
   prend la largeur du plus long, et seuls les autres sont cachés — ni lus,
   ni vus, ni mesurés (`visibility`). Une rangée qui garde sa largeur quand
   on touche un âge ne passe pas à la ligne d'un toucher à l'autre. */
.fiche .head .galon-mot{display:inline-grid;justify-items:start}
.fiche .head .galon-mot>*{grid-area:1/1}
.fiche .head .galon-mot>:not(:first-child){visibility:hidden}

/* -------------------------------------------------------- la carte en main

   **La carte est la carte du jeu** (`cardHTML`), tenue dans la scène de la
   vitrine (`.tbf-vitrine-scene` > `.tbf-vitrine-tilt`) : elle s'incline au
   doigt et prend la lumière, et elle se retourne. La fiche ne lui donne que
   sa largeur, `--l`, et sa place.

   **`--l` suit la hauteur qui reste** : la scène est l'élément souple de la
   colonne, et la carte prend toute la hauteur qu'on lui laisse, moins sept
   pixels en haut et en bas — ce que la forme de rareté, le pin et l'ombre
   dure passent du bord (`cartes.css`, « la carte déborde de sa boîte »). Elle
   garde aussi deux gouttières de quatre-vingt-seize pixels pour ce qui se
   colle à côté d'elle, et ne dépasse pas trois cents pixels : c'est la plus
   grande taille que la carte sait écrire. Les unités `cq` se résolvent sur
   la scène, conteneur de taille, là où `--l` est employée.

   Le plancher de cent cinquante pixels de haut est celui d'une carte encore
   reconnaissable ; en dessous, c'est le corps qui défile.

   **Les unités `cq` ne s'emploient qu'à l'abri de `@container`**, comme dans
   `cartes.css` : un moteur qui les connaît sans connaître le confinement les
   rabat sur la fenêtre, et la carte prendrait la hauteur de l'écran. Il
   garde alors la largeur de repli, cent cinquante pixels. */
.fiche .vitrine{position:relative;flex:1 1 auto;min-height:150px;container-type:size;
  display:grid;place-items:center;--l:150px}
@container (min-width:0px){
  .fiche .vitrine>*{--l:clamp(70px, min(calc((100cqh - 14px) * 63 / 88), calc(100cqw - 192px)), 300px)}
}
.fiche .vitrine>.tbf-vitrine-scene{width:var(--l);margin:0}
.fiche .vitrine .fz{width:100%}

/* **Ce qui se colle à côté de la carte**, dans ses gouttières : à gauche le
   tampon TON AVATAR, ou la bâche ME MONTRER AINSI ; à droite la plaque qui
   la retourne, la bande du cri repliée sur un téléphone court, ou la
   vignette du paquet d'une carte qu'on n'a pas. Les places se calculent sur
   `--l` : la demi-largeur de la carte, sa demi-hauteur (`--l` × 44/63). */
.fiche .vitrine>.cote-g{position:absolute;z-index:3;right:calc(50% + var(--l) / 2 + 12px);
  top:calc(50% + var(--l) * 44 / 63 * .15);translate:0 -50%;
  max-width:calc(50% - var(--l) / 2 - 18px)}
.fiche .vitrine>.tourne{position:absolute;z-index:3;left:calc(50% + var(--l) / 2 + 10px);
  top:calc(50% - 22px)}
/* **L'Ultimate**, dans la gouttière de droite, au-dessus de la plaque qui
   retourne (`plaqueUltime`, fanzzy-fiche.js) : sa vignette, le mot, et ce
   qu'on a. Le bas de la plaque tient à trente pixels au-dessus du milieu de
   la carte, là où commence la plaque ronde ; sur une carte trop courte, elle
   ne monte pas plus haut que le haut de la vitrine. */
.fiche .vitrine>.cote-ult{position:absolute;z-index:3;left:calc(50% + var(--l) / 2 + 10px);
  top:max(calc(50% - 30px), 112px);translate:0 -100%;
  width:min(84px, calc(50% - var(--l) / 2 - 16px));margin:0;padding:6px 5px 5px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:12px;line-height:1;letter-spacing:.06em;text-align:center;white-space:normal}
.fiche .vitrine>.cote-ult>img{display:block;width:100%;max-width:56px;aspect-ratio:3/4;object-fit:cover;
  object-position:50% 20%;border-radius:3px;box-shadow:0 0 0 2px var(--encre)}
.fiche .vitrine>.cote-ult>b{font-weight:700;font-size:12px}
.fiche .vitrine>.cote-ult>small{display:flex;align-items:center;justify-content:center;gap:3px;
  font-size:10px;font-weight:600;letter-spacing:.04em}
.fiche .vitrine>.cote-ult>small>svg{width:9px;height:9px;flex:none;fill:currentColor}
.fiche .vitrine>.cote-ult>small>.tbf-ico{width:10px;height:10px;flex:none}
.fiche .vitrine>.paquet{position:absolute;z-index:3;left:calc(50% + var(--l) / 2 + 16px);
  top:50%;translate:0 -50%;max-width:calc(50% - var(--l) / 2 - 24px);margin:0}
.fiche .vitrine>.paquet>img{width:min(64px,100%)}

/* **LIÉ À TON CLUB** (`src/shared/fanzzy/clubs.js`) : dans la gouttière de
   gauche, en haut de la carte — TON AVATAR tient le bas. Posé sur la vitrine
   et non dessous, parce que la colonne n'a pas un pixel à donner (le budget
   de hauteur, en tête). Un bouton : la phrase qui l'explique vient au toucher.
   Un club que le joueur ne suit pas prend l'encre bleue, pour que « le mien »
   se reconnaisse d'un coup d'œil. */
.fiche .vitrine>.fiche-club{position:absolute;z-index:3;right:calc(50% + var(--l) / 2 + 12px);
  top:calc(50% - var(--l) * 44 / 63 * .6);translate:0 -50%;
  max-width:calc(50% - var(--l) / 2 - 18px);font-size:14px;line-height:1.1;
  white-space:normal;--rot:-6deg;cursor:pointer}
.fiche .vitrine>.fiche-club[data-club=autre]{--teinte:var(--bleu-clair)}
.fiche .vitrine>.fiche-club[data-club=lier]{--teinte:var(--projo)}
.fiche .vitrine>.fiche-club>small{display:block;margin-top:3px;font-size:11px;letter-spacing:.04em}
/* Le logo du club, au-dessus du mot ; le nom dessous, en clair (pas en
   capitales tamponnées : c'est un nom propre, il doit se lire). */
.fiche .vitrine>.fiche-club>.fiche-club-logo{display:block;width:30px;height:30px;
  object-fit:contain;margin:0 auto 4px;rotate:calc(var(--rot) * -1)}
.fiche .vitrine>.fiche-club>.fiche-club-nom{text-transform:none;font-size:12px;line-height:1.15;
  overflow-wrap:anywhere}

/* Le tampon TON AVATAR : un acquis, pas un bouton éteint. En deux lignes,
   à seize pixels — le plancher du tampon en contour sur un fond sombre. */
.fiche .cote-g.tbf-tampon{font-size:16px;line-height:1.1}
/* ME MONTRER AINSI : la bâche de parpaing, **plus basse** que les actions —
   ce n'est ni jouer ni dépenser, c'est choisir de quoi l'on a l'air. Le
   libellé passe à la ligne dans la gouttière, jamais coupé. */
.fiche .cote-g.tbf-plaque{min-height:44px;margin:0;padding:7px 9px;font-size:12px;line-height:1.15;
  letter-spacing:.06em;text-align:center;white-space:normal}

/* ------------------------------------------------------- la bande du cri

   Pleine largeur sous la carte : toucher lance le cri en vidéo. Les bouts
   rayés sont à la couleur de la famille (`--e1`, posée par la fiche). */
.fiche .tbf-cri{flex:none;width:auto;margin:0 var(--marge) 4px}
/* **Repliée dès que la carte en a besoin.** Les quarante-huit pixels de la
   bande reviennent alors à la carte, et le cri reste à portée : une plaque
   ronde ▶ collée à droite de la carte, au niveau de la bande de son nom.

   **Le seuil est celui du pied de la carte, lu sur le corps.** Avec la bande,
   la scène a la hauteur du corps moins 236 pixels (la bande 48, l'inventaire
   100, le détail 88) ; la carte, celle de la scène moins 14 ; et sa largeur,
   63/88 de sa hauteur. Elle dépasse cent cinquante pixels de large — le
   seuil du pied, `cartes.css` — tant que le corps a au moins 460 pixels de
   haut : 461 à 360 × 640, où la bande reste, comme le budget l'écrit.

   Le repli se décidait sur l'écran (`max-height:600px`), et ne savait rien
   de ce que la barre, l'en-tête ou une annonce prennent au-dessus : entre
   601 et 638 pixels de haut — un Android de 360 de large, barre d'adresse
   comprise —, la bande restait et la carte tombait en vignette sans pied,
   jusqu'à 123 pixels de large (137 à 620). Le corps, lui, le sait.

   À 320 de large, la carte est tenue par la largeur (128 px, ses deux
   gouttières) : entre 608 et 638 pixels de haut, le repli ne lui rend rien,
   et le cri y reste à portée, en plaque ronde. Une seconde condition pour
   ces trente pixels d'un téléphone de 320 ne vaudrait pas sa lecture. */
/* **Son histoire**, sous la carte et au-dessus du cri : deux ou trois lignes
   d'italique à la craie, comme dans la vitrine du classeur. Elle ne grandit
   pas la page : c'est la carte, au-dessus, qui lui cède la place (`flex:1`).
   Trois lignes au plus — l'histoire la plus longue du catalogue en prend
   trois à 320 pixels —, et sur un écran trop court, elle s'efface avant le
   cri. */
.fiche .histoire{flex:none;margin:2px var(--marge) 10px;font-family:var(--ui);font-size:13px;line-height:1.45;
  font-style:italic;text-align:center;color:var(--craie);opacity:.88;text-wrap:balance;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.fiche .histoire[hidden]{display:none}
@container fiche-corps (height < 520px){ .fiche .histoire{display:none} }
.fiche .vitrine>.cri-court{display:none}
@container fiche-corps (height < 460px){
  .fiche .corps>.tbf-cri{display:none}
  .fiche .vitrine>.cri-court{display:grid;position:absolute;z-index:3;
    left:calc(50% + var(--l) / 2 + 10px);top:calc(50% + var(--l) * 44 / 63 - 50px)}
}

/* ------------------------------------------------------- l'inventaire

   Cent pixels, quatre rangées côte à côte qui défilent en largeur : ÂGES,
   EFFETS, ÉTATS, TENUES (`.tbf-inventaire`). La hauteur est à la page. */
.fiche .tbf-inventaire{flex:none;height:100px}
/* **Le pin de la famille, au coin d'une tuile d'effet** (fanzzy-fiche.js,
   `tuileHTML`) : la tuile est à la craie, et c'est lui qui dit la famille.
   Seize pixels — sa taille dans le sticker sous le nom —, au coin
   haut-gauche, là où la carte porte le sien, à cheval sur le bord comme les
   stickers de la tuile ; son cerne garde trois pixels et demi d'air sous le
   titre de la rangée. **Provisoire** : c'est une place de la brique
   (`.tbf-tuile`, ui.css), qui ne la connaît pas encore (besoin
   « feuilles-css »). */
.fiche .tbf-tuile>.tbf-pin{position:absolute;z-index:3;left:-5px;top:-5px;--taille:16px;--rot:0deg}
/* **L'ombre qui dit « ça continue ».** La dernière tuile coupée net au bord
   droit se lit comme un défaut d'affichage, et personne ne pousse du doigt
   une image qu'il croit cassée. Un fondu sur les quarante derniers pixels,
   tant qu'il reste quelque chose à droite : la classe est posée par
   `marquerDebord` (fanzzy-fiche.js), et retirée au bout. */
.fiche .rangs.deborde{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}

/* ----------------------------------------------- la fiche kraft du détail

   Quatre-vingt-huit pixels fixes : passer d'un effet à une tenue ne fait pas
   sauter la carte. Un titre et deux lignes de chiffres au plus — c'est ce que
   la hauteur tient, et un ticket ne porte pas de paragraphe. */
.fiche #fiche-detail{flex:none;height:88px;margin:0 var(--marge)}
/* Une ligne sans jauges (un effet, une phrase courte) : le libellé prend la
   place des jauges, la valeur reste dans sa colonne. C'est une place dans la
   grille de la brique, pas un dessin. */
.fiche .tbf-detail-l>span:first-child:nth-last-child(2){grid-column:1 / 3}
.fiche .tbf-detail-l>b:nth-child(2){grid-column:3}

/* ---------------------------------------------------------- les actions

   Soixante-quatorze pixels, toujours au même endroit, hors du corps.
   **Hiérarchisées** : ÉVOLUER en or, plus large, son prix en sticker ;
   EMMENER EN DUEL en flare ; ce qui ne fait que déplacer reste en béton. Une
   rangée vide garde sa hauteur : sinon la carte grandirait d'un coup au
   premier bouton. */
.fiche .actions{flex:none;display:flex;gap:12px;box-sizing:border-box;height:74px;
  padding:10px var(--marge) 0}
.fiche .actions>*{flex:1 1 0;min-width:0}
.fiche .actions>[data-evoluer]{flex-grow:1.35}
/* La bâche d'action : le libellé, le sous-libellé dessous. Cinquante-deux
   pixels pour la bâche à deux lignes comme pour celle d'une seule — une
   rangée qui changerait de hauteur selon la case regardée ferait sauter la
   carte. `bt` reste dans le balisage : la suite de la fiche le cherche. */
.fiche .bt{min-height:52px;padding:7px 8px;flex-direction:column;gap:3px;text-align:center;
  font-size:13px;line-height:1.1;letter-spacing:.05em}
.fiche .bt[data-evoluer]:not([disabled]){font-size:17px}
/* Le sous-libellé : Oswald douze, à la lettre de la bâche, pleine. Une
   phrase et non un titre : pas de capitales. */
.fiche .bt small{display:block;font:500 12px/1.15 var(--banner);letter-spacing:.04em;
  text-transform:none;text-shadow:none}
/* Le prix d'ÉVOLUER, collé sur le coin haut-droit de la bâche : dix pixels
   au-dessus d'elle, dans l'air de la rangée. */
.fiche .bt>.tbf-sticker--prix{position:absolute;z-index:2;right:-6px;top:-10px;--rot:5deg}

/* ------------------------------------------- le Fanzzy qu'on ne possède pas

   La carte est en pochoir sous scotch (`cardHTML`, `verrou`) ; l'inventaire
   se montre — c'est ce qu'on aura —, gris et inerte. `pointer-events` pour
   la souris, `disabled` posé dans le balisage pour le clavier : l'un sans
   l'autre laisse une porte ouverte. Ce sont les pièces qui s'éteignent, pas
   la rangée : les titres disent ce que le personnage aura, ils restent
   lisibles. */
.fiche.pas-a-moi .rangs{pointer-events:none}
.fiche.pas-a-moi .tbf-inventaire-tuiles,.fiche.pas-a-moi .tbf-ages{filter:grayscale(1)}

/* ------------------------------------------------- la confirmation

   Quatre-vingt-dix écharpes, c'est neuf boosters. On montre donc **ce qu'on
   gagne** avant de les prendre : les deux cartes, l'ancienne et celle qui
   vient (floue — c'est la cérémonie qui la révèle), et les chiffres sur une
   fiche kraft. Le voile est plein, sans flou : une transparence laisserait
   lire la fiche derrière les chiffres. */
.fiche .demande{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:18px var(--marge);
  background:var(--encre);overflow-y:auto;animation:fiche-fondu .2s ease}
.fiche .demande h3{margin:0;font:700 19px/1.1 var(--banner);letter-spacing:.06em;
  text-align:center;color:var(--craie)}
.fiche .demande .duo{display:flex;align-items:center;justify-content:center;gap:18px}
.fiche .demande .duo>div{width:104px}
.fiche .demande .fleche{width:22px;height:22px;flex:none;fill:none;stroke:var(--craie);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.fiche .demande .tbf-detail{width:100%;max-width:340px;gap:8px}
.fiche .demande .quoi{display:flex;gap:12px;width:100%;max-width:340px}
.fiche .demande .quoi>*{flex:1 1 0;min-width:0}
@keyframes fiche-fondu{from{opacity:0}}

.fiche .vide{text-align:center;padding:50px 22px;font-size:13px;line-height:1.8}
/* Le lien de retour se dit par son soulignement, à la craie : treize pixels
   ne sont pas un grand texte (la règle de l'or, « les tons » dans `ui.css`). */
.fiche .vide a{color:var(--craie);text-decoration:underline;text-underline-offset:3px}

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

   La fiche n'ajoute qu'un mouvement à elle : le fondu de la confirmation.
   Le reste — la carte qui se pose, s'incline et se retourne, sa matière, le
   nœud d'âge qui pulse, les rayons, le tampon qui claque, le ticket qui
   monte — appartient aux briques, qui ont leurs propres doubles. */
@media (prefers-reduced-motion:reduce){
  .fiche .demande{animation:none}
}
html[data-calme~="animations"] .fiche .demande{animation:none}