/* ============================================================
   POPOTE WAR — LE CARNET DE CAMPAGNE
   ------------------------------------------------------------
   LE SEUL ÉCRAN EN PAPIER.

   Partout ailleurs l'application est en treillis sombre, et c'est
   une bonne direction : elle a une température, elle tient sur un
   téléphone, elle ne ressemble pas à un jeu de casino. Mais un
   carnet de campagne est un OBJET qu'on sort de sa poche, et le
   sortir doit se voir. Une page crème sur du kaki, c'est le seul
   moment de toute l'application où le fond change — donc le seul
   qui ait le droit d'être un événement.

   Le risque est assumé : mal fait, ça jure. Ce qui l'évite, c'est
   que le papier n'est pas blanc mais sable vieilli, qu'il porte
   la réglure d'un vrai carnet, et qu'il est posé — ombre portée,
   coin corné — au lieu d'être collé.
   ============================================================ */

/* ------------------------------------------------------------
   LA PALETTE DU PAPIER
   ------------------------------------------------------------
   Elle vit sur :root, PAS sur .carnet.

   Elle a d'abord été posée sur `.carnet`, ce qui semblait propre —
   des variables au plus près de ce qu'elles servent. Mais les
   bâtons apparaissent AUSSI dans la poche de l'accueil, qui est
   hors du carnet : `background: var(--encre)` n'y résolvait rien,
   et les traits étaient rendus… sans encre. Invisibles, tout en
   étant parfaitement présents dans le DOM — le genre de panne qu'un
   contrôle qui compte les éléments déclare conforme.

   Le papier n'est pas une couleur mais une matière : trois valeurs
   très proches, plus la réglure. Un aplat unique aurait l'air d'un
   rectangle beige.
   ------------------------------------------------------------ */
:root {
  --papier:   #E3D9BC;
  --papier-2: #D8CCA9;
  --encre:    #2A2718;
  --encre-2:  #6B6449;
  /* La réglure était à .13 : assez marquée pour TRAVERSER le texte des
     récompenses et se lire comme un barré — c'est-à-dire, sur cet
     écran précisément, comme « déjà touché ». Deux sens contraires
     portés par le même trait. À .07 elle redevient ce qu'elle doit
     être : la texture du papier, qu'on ne lit pas. */
  --reglure:  rgba(42, 39, 24, .07);
  --filet:    rgba(42, 39, 24, .18);   /* les vraies séparations, elles, assument */
}

.carnet {
  display: grid;
  gap: var(--gap);
}

/* ------------------------------------------------------------
   LA TRANCHE — les huit pages vues par le côté
   ------------------------------------------------------------
   C'est le sommaire ET la navigation. On le lit comme on regarde
   la tranche d'un carnet posé : huit épaisseurs, et on voit tout
   de suite lesquelles portent une marque.
   ------------------------------------------------------------ */
.tranche {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
}
.tranche__page {
  min-height: 42px;
  border: 1px solid var(--kaki);
  border-bottom-width: 3px;
  border-radius: 2px 2px var(--r-sm) var(--r-sm);
  background: var(--toile);
  color: var(--sable-b);
  font-family: var(--chiffre);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.tranche__page[data-etat="acquise"] {
  background: var(--papier-2);
  border-bottom-color: var(--vert-ok);
  color: var(--encre);
}
.tranche__page[data-etat="encours"] {
  border-bottom-color: var(--laiton);
  color: var(--laiton);
}
.tranche__page[data-etat="manquee"] { opacity: .45; }
.tranche__page[data-on="1"] {
  outline: 2px solid var(--laiton);
  outline-offset: 1px;
}

/* ------------------------------------------------------------
   LA FEUILLE
   ------------------------------------------------------------ */
.feuille {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1rem 1rem;
  border-radius: 3px var(--r) var(--r) 3px;
  color: var(--encre);

  /* La reliure à gauche (le trait plus sombre du pli), la réglure
     horizontale, le GRAIN DU PAPIER, puis le fond. Quatre couches, dans cet
     ordre : la dernière est la plus au fond.

     Le grain est une vraie fibre de kraft, tuilée sans couture, fondue en
     `multiply` : elle ne fait qu'assombrir légèrement là où la fibre est
     dense. Un papier de carnet sans fibre est une surface, pas une matière —
     et c'est le seul écran du jeu dont le sujet EST le papier.

     Si l'image ne charge pas, les trois dégradés d'origine tiennent seuls :
     la page reste du papier clair, simplement lisse. */
  background:
    linear-gradient(90deg, var(--papier-2) 0 6px, transparent 6px),
    repeating-linear-gradient(180deg, transparent 0 27px, var(--reglure) 27px 28px),
    url("/img/matiere/kraft-carnet.webp") 0 0 / 220px 220px repeat,
    linear-gradient(160deg, var(--papier) 0%, var(--papier-2) 100%);
  background-blend-mode: normal, normal, multiply, normal;

  /* Posée, pas collée : une ombre portée et un liseré clair en haut. */
  box-shadow: 0 6px 18px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .25);
}

/* Le coin corné, en bas à droite. Un carnet qui a servi n'a pas
   quatre angles droits. */
.feuille::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, transparent 50%, var(--nuit) 50%);
  opacity: .35;
}

.feuille__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--chiffre);
  font-size: var(--fs-xs);
  color: var(--encre-2);
}
.feuille__no { letter-spacing: .1em; }

.feuille__titre {
  margin: .35rem 0 .15rem;
  font-family: var(--display);
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--encre);
}
/* Quand la page est tamponnée, le sous-titre lui cède la place. Le
   tampon est posé en haut à droite ; le laisser recouvrir une phrase
   qu'on veut lire n'est pas de l'authenticité, c'est de la négligence. */
.feuille[data-etat="acquise"] .feuille__sous { padding-right: 6.8rem; }

.feuille__sous {
  margin: 0 0 .85rem;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--encre-2);
}

.feuille__compte {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 0 .8rem;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  margin-bottom: .7rem;
}
.feuille__faits, .feuille__close {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--encre-2);
}

/* ------------------------------------------------------------
   LES BÂTONS
   ------------------------------------------------------------
   Quatre debout, un en travers. Dessinés, pas comptés : c'est ce
   qui les rend lisibles d'un coup d'œil sans lire de chiffre.
   ------------------------------------------------------------ */
.batons { display: flex; gap: .8rem; }
.batons__paquet {
  position: relative;
  display: flex;
  gap: 4px;
  padding-right: 3px;
}
.baton {
  width: 2px;
  height: 22px;
  background: var(--encre);
  border-radius: 1px;
  opacity: .16;                       /* le bâton pas encore tracé : à peine visible */
  transition: opacity var(--vite, .18s) ease;
}
.baton[data-on="1"] { opacity: .92; }

/* Le cinquième BARRE les quatre autres. Il est sorti du flux — sinon il
   ajouterait sa largeur au paquet et les groupes ne s'aligneraient plus.

   Il était dessiné comme un montant penché de 64°, et c'était faux : il
   se posait à gauche du groupe et n'en traversait que la moitié. Un
   bâton de comptage est une barre presque horizontale qui couvre les
   quatre montants d'un bout à l'autre — c'est ce qui la rend lisible
   d'un coup d'œil, et c'est toute la raison d'être de cette forme.
   26 px = quatre montants de 2 px, trois espaces de 4 px, et un peu de
   débord de chaque côté : une barre tracée à la main dépasse. */
.baton--travers {
  position: absolute;
  left: -3px;
  top: 50%;
  width: 26px;
  height: 2px;
  transform: translateY(-50%) rotate(-17deg);
  transform-origin: center;
}

/* La main tremble un peu : chaque bâton penche légèrement, toujours
   de la même façon. Aléatoire à l'œil, déterministe au rendu. */
.batons__paquet .baton:nth-child(1) { transform: rotate(-2.5deg); }
.batons__paquet .baton:nth-child(2) { transform: rotate(1.5deg); }
.batons__paquet .baton:nth-child(3) { transform: rotate(-1deg); }
.batons__paquet .baton:nth-child(4) { transform: rotate(2deg); }

/* ------------------------------------------------------------
   LES DEUX ÉCRITURES
   ------------------------------------------------------------ */
.ecriture {
  display: grid;
  grid-template-columns: 4.4rem 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  border-top: 1px solid var(--filet);
}
.ecriture__main {
  font-family: var(--chiffre);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--encre-2);
}
.ecriture__du { font-size: var(--fs-sm); line-height: 1.25; }
.ecriture__vu {
  font-family: var(--chiffre);
  font-size: var(--fs-xs);
  color: var(--encre-2);
  opacity: .7;
}
.ecriture__prendre { padding: .35rem .7rem; font-size: var(--fs-xs); }

/* L'officier écrit à l'encre de couleur — c'est ce qui distingue les
   deux mains sur la même page, sans avoir à l'expliquer. */
.ecriture[data-piste="officier"] .ecriture__du { color: #4A3E7A; }

/* LE JETON — le tampon en miniature, dans la ligne.
   Un tampon dessiné tient dans deux fois moins de place que sa
   description, et dit la même chose plus vite. Droit, celui-là : à
   cette taille, l'inclinaison ne se lirait plus comme un tampon mais
   comme un défaut d'alignement. */
.jeton {
  display: inline-block;
  margin-left: .4rem;
  padding: 0 .3rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--chiffre);
  font-size: 10px;
  letter-spacing: .06em;
  vertical-align: 1px;
  white-space: nowrap;
}
.jeton[data-encre="violet"] { color: #5B4B8A; }
.jeton[data-encre="bleu"]   { color: #2F5D7C; }
.jeton[data-encre="vert"]   { color: #4C6B2F; }
.jeton[data-encre="brun"]   { color: #6B4A2A; }
.jeton[data-encre="rouge"]  { color: #9A2B14; }
.jeton[data-encre="or"]     { color: #8A6B1F; }
.ecriture[data-etat="fermee"] { opacity: .42; }
/* PAS DE TEXTE BARRÉ pour dire « déjà touché ». C'était le geste
   réflexe, et sur du papier réglé il devient illisible : le lecteur ne
   sait plus si le trait vient du carnet ou du barème. L'estompe, plus
   le mot « porté » passé au vert en marge, disent la même chose sans
   qu'aucun trait n'ait à porter deux sens à la fois. */
.ecriture[data-etat="prise"] .ecriture__du { opacity: .5; }
.ecriture[data-etat="prise"] .ecriture__vu { color: var(--vert-ok); opacity: 1; }

/* ------------------------------------------------------------
   LE TAMPON
   ------------------------------------------------------------
   De travers, toujours. Un tampon droit est un badge ; c'est
   l'inclinaison et l'irrégularité qui font l'encre sur le papier.
   ------------------------------------------------------------ */
.tampon {
  position: absolute;
  right: .9rem;
  top: 4.2rem;
  padding: .25rem .6rem;
  border: 3px double currentColor;
  border-radius: 3px;
  font-family: var(--display);
  font-size: var(--fs-lg);
  letter-spacing: .08em;
  color: var(--vert-ok);
  opacity: .55;
  transform: rotate(-13deg);
  pointer-events: none;
}
.tampon[data-encre="violet"] { color: #5B4B8A; }
.tampon[data-encre="bleu"]   { color: #2F5D7C; }
.tampon[data-encre="vert"]   { color: #4C6B2F; }
.tampon[data-encre="brun"]   { color: #6B4A2A; }
.tampon[data-encre="rouge"]  { color: #9A2B14; }
.tampon[data-encre="or"]     { color: #8A6B1F; }

/* ------------------------------------------------------------
   LE PIED : L'OFFRE DU CAHIER
   ------------------------------------------------------------ */
.cahier {
  padding: var(--pad);
  border: 1px solid var(--kaki);
  border-radius: var(--r);
  background: var(--toile);
}
.cahier__titre {
  margin: 0 0 .3rem;
  font-family: var(--display);
  font-size: var(--fs-lg);
  color: var(--laiton);
}
.cahier__dit { margin: 0 0 .8rem; font-size: var(--fs-sm); color: var(--sable); }
.cahier__ouvrir { width: 100%; }
.cahier__solde {
  margin: .5rem 0 0;
  font-family: var(--chiffre);
  font-size: var(--fs-xs);
  color: var(--sable-b);
  text-align: center;
}
.carnet__pied {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--sable-b);
  text-align: center;
}

/* ------------------------------------------------------------
   LE COIN DE PAGE SUR L'ACCUEIL
   ------------------------------------------------------------
   Un carnet qui dépasse d'une poche de treillis. On ne montre pas
   le contenu : on montre qu'il y a quelque chose à sortir.
   ------------------------------------------------------------ */
.poche {
  /* `relative` pour la pastille de messages, qui se pose en absolu dans le
     coin. Sans ancre ici, elle remonte au premier ancêtre positionné et
     va flotter ailleurs sur l'accueil. */
  position: relative;
  display: grid;
  gap: .45rem;
  width: 100%;
  padding: 0;
  border: 1px solid var(--kaki);
  border-radius: var(--r);
  background: var(--toile);
  /* ⚠️ PAS D'`overflow: hidden` AVEC UNE PASTILLE QUI DÉBORDE. Il coupait
     très exactement le coin où elle se pose : le « ! » existait, était
     peint, et restait invisible. On borne les coins autrement — le papier
     du carnet est déjà arrondi par sa propre règle. */
  text-align: left;
  cursor: pointer;
}

/* LA PASTILLE DE LA POCHE « MESSAGES ».
   ------------------------------------------------------------
   Elle ne dit pas combien, ni où : elle dit qu'il s'est passé quelque
   chose. Le détail — global ou régiment — est sur les onglets du volet,
   c'est-à-dire à un geste de là. Un compteur ici obligerait à lire les
   deux canaux en entier, en permanence, chez tous les joueurs connectés. */
.poche--neuf::after {
  content: "!";
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--alerte-c);
  border: 2px solid var(--nuit);
  color: #fff;
  font-family: var(--chiffre);
  font-size: 0.75rem;
  line-height: 1;
  pointer-events: none;
}
.poche__page {
  display: grid;
  gap: .3rem;
  padding: .7rem .8rem .6rem;
  /* Le papier qui dépasse : coupé net en bas, comme une page prise
     dans la poche. */
  background: linear-gradient(160deg, #E3D9BC 0%, #D8CCA9 100%);
  color: #2A2718;
  /* ⚠️ LE PAPIER ARRONDIT SES PROPRES COINS DEPUIS LE 12/08/2026.
     Il les tenait de l'`overflow: hidden` de la poche, qu'il a fallu
     retirer pour que la pastille de messages puisse dépasser du coin. Sans
     cette ligne, le papier ressort CARRÉ sous une bordure arrondie : deux
     angles blancs de trois pixels, visibles et jamais expliqués. Seul le
     HAUT s'arrondit — le bas est coupé net, et c'est voulu. */
  border-radius: var(--r) var(--r) 0 0;
}
.poche__eyebrow {
  font-family: var(--chiffre);
  font-size: 10px;
  letter-spacing: .14em;
  color: #6B6449;
}
.poche__titre {
  font-family: var(--display);
  font-size: var(--fs-lg);
  line-height: 1;
}
.poche__batons { display: block; padding-top: .15rem; }
.poche__batons .baton { height: 16px; }
.poche__batons .baton--travers { height: 18px; }
.poche__etat {
  padding: 0 .8rem .6rem;
  font-family: var(--chiffre);
  font-size: var(--fs-xs);
  color: var(--sable-b);
}

/* Quelque chose attend vraiment : un liseré laiton, pas une pastille
   rouge. La pastille rouge est le vocabulaire des notifications qu'on
   subit ; ici on propose. */
.poche[data-du="1"] { border-color: var(--laiton); }
.poche[data-du="1"] .poche__etat { color: var(--laiton); }

/* ------------------------------------------------------------
   ACCESSIBILITÉ
   ------------------------------------------------------------ */
.tranche__page:focus-visible,
.poche:focus-visible,
.ecriture__prendre:focus-visible,
.cahier__ouvrir:focus-visible {
  outline: 2px solid var(--laiton-c);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .baton { transition: none; }
}

/* Sur un écran large, le carnet ne s'étale pas : un carnet a une
   taille, et l'étirer sur 900 pixels le transformerait en affiche. */
@media (min-width: 720px) {
  .carnet { max-width: 460px; margin-inline: auto; }
}

/* ============================================================
   LES TAMPONS EN COLLECTION
   ------------------------------------------------------------
   Une planche de tampons, comme une page de collection : ceux
   qu'on a, à l'encre ; ceux qu'on n'a pas, en creux. Le vide se
   voit — c'est lui qui donne envie de le remplir.
   ============================================================ */
.tampons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.tampons__case {
  display: grid;
  place-items: center;
  gap: .3rem;
  min-height: 88px;
  padding: .7rem .5rem;
  border: 1px dashed var(--kaki);
  border-radius: var(--r-sm);
  text-align: center;
}
/* ------------------------------------------------------------
   LE SCEAU
   ------------------------------------------------------------
   Le cadre du tampon est une IMAGE-MASQUE : elle ne porte aucune
   couleur, seulement une forme et ses manques d'encre. La teinte
   vient de `currentColor`, donc du CSS — un seul fichier sert les
   six encres du carnet.

   Tant que l'image n'est pas là, la bordure double d'origine
   tient le rôle. Aucun trou, jamais.
   ------------------------------------------------------------ */
/* LE MOT SE MESURE SUR LE CADRE, PAS SUR LA PAGE.

   Première version : sceau de 84 px, mot à `--fs-sm` (15 px). Sur la planche
   de contrôle, où le sceau faisait 150 px, le rapport était juste et tout
   paraissait parfait. Dans le jeu, le même mot occupait 18 % de la largeur
   au lieu de 10 : « INCORPORÉ » sortait du cercle et « INSTRUIT » était
   coupé par son rectangle.

   La leçon est générale : une taille de police en pixels absolus posée dans
   un cadre dont la taille varie ne peut PAS être juste aux deux échelles.
   Le sceau devient donc un conteneur, et le mot se dimensionne en `cqw` —
   en pour-cent de la largeur du cadre. Le rapport est désormais le même
   partout, et il le restera si le cadre change de taille. */
.tampons__sceau {
  position: relative;
  display: grid;
  place-items: center;
  width: min(112px, 40vw);
  aspect-ratio: 1;
  container-type: inline-size;
}
.tampons__sceau--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--sceau) center / contain no-repeat;
  mask: var(--sceau) center / contain no-repeat;
}
/* Quand le vrai cadre est là, la bordure de secours s'efface : les deux
   ensemble feraient un cadre dans un cadre. Et le mot se cale sur le
   conteneur — 9,5 % de sa largeur, sans interlettrage : le pochoir est déjà
   large, en écarter les lettres ferait déborder le plus long des huit mots
   (MANŒUVRIER) de son ovale. */
.tampons__sceau--image .tampons__marque {
  border: 0;
  padding: 0;
  font-size: 9.5cqw;
  letter-spacing: 0;
  white-space: nowrap;
  max-width: 66%;
}

.tampons__marque {
  position: relative;
  padding: .15rem .45rem;
  border: 2px double var(--kaki);
  border-radius: 3px;
  /* Le pochoir, ici et sur les étiquettes de champ : ce sont les deux seuls
     endroits du jeu où quelque chose est MARQUÉ. Une fonte pochoir répandue
     partout devient un décor, et un pochoir décoratif n'est plus un pochoir. */
  font-family: var(--pochoir);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  color: var(--kaki);
  transform: rotate(-6deg);
}
.tampons__ou {
  font-family: var(--chiffre);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--sable-b);
}

/* Acquis : le cadre se ferme, l'encre prend. */
.tampons__case[data-on="1"] { border-style: solid; border-color: var(--sable-b); }
.tampons__case[data-on="1"] .tampons__ou { color: var(--sable); }
/* L'ENCRE EST POSÉE SUR LA CASE, PAS SUR LE MOT.

   Le cadre est peint avec `currentColor` : si la couleur restait sur
   `.tampons__marque`, le mot serait à l'encre et le cadre resterait kaki.
   Les deux héritent maintenant de la même source. */
.tampons__case[data-on="1"] .tampons__marque { border-color: currentColor; }
.tampons__case[data-encre="violet"] { color: #8A79C4; }
.tampons__case[data-encre="bleu"]   { color: #5E9BC4; }
.tampons__case[data-encre="vert"]   { color: #8FB25C; }
.tampons__case[data-encre="brun"]   { color: #B08355; }
.tampons__case[data-encre="rouge"]  { color: #D2603F; }
.tampons__case[data-encre="or"]     { color: var(--laiton); }
.tampons__case .tampons__marque { color: inherit; }
/* Sans encre — le tampon n'est pas encore gagné — le cadre reste, éteint :
   ce qui manque doit se voir, c'est lui qui donne envie de l'obtenir. */
.tampons__case[data-on="0"] { color: var(--kaki); }

/* Le bouton qui détruit. Il ne crie pas — il est simplement le seul
   de l'écran à porter la couleur du sang. */
.btn--danger {
  border-color: var(--sang);
  color: #D98A7A;
}
.btn--danger:hover { border-color: #A82D1C; color: #E8A99C; }

/* Ce que le Cahier contient, énuméré avant de payer. La liste tenait
   dans une phrase — « des coins et un tampon » — c'est-à-dire la partie
   la moins convaincante, puisque les coins se gagnent en jouant. */
.cahier__butin {
  list-style: none;
  display: grid;
  gap: .25rem;
  margin: .5rem 0 .2rem;
  padding: 0;
}
.cahier__butin li {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: var(--fs-sm);
  color: var(--sable);
}
.cahier__butin li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--laiton-c);
}

/* ------------------------------------------------------------
   LE BUTIN — ce que la page donne, dessiné
   ------------------------------------------------------------
   Le Cahier annonçait « tenue « Cuirassier » », « aura
   « Campagne » » : du texte entre guillemets là où il y a une
   silhouette, des grains qui tournent et un dégradé. C'est ce
   qui le faisait paraître vide alors qu'il est plein — on ne
   convoite pas un nom entre guillemets.

   Pleine largeur sous l'écriture : une silhouette coincée dans
   une ligne de texte ne se regarde pas.
   ------------------------------------------------------------ */
.butin {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px dashed rgba(140, 135, 111, .35);
}
.butin__piece {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 4.4rem;
  padding: .3rem .35rem .25rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, .22);
}
/* Les pièces exclusives sont l'argument de vente du Cahier : elles ont
   droit à un liseré de laiton, comme tout ce qui a de la valeur ici. */
.butin__piece[data-genre="tenue"] { outline: 1px solid rgba(200, 162, 76, .45); }
.butin__nom {
  font-size: 0.5625rem;
  line-height: 1.15;
  color: var(--laiton);
  text-align: center;
  letter-spacing: .02em;
}
/* La tenue mérite d'être vue en entier : c'est la seule pièce qu'un
   adversaire remarque avant de lire quoi que ce soit. */
.butin__piece[data-genre="tenue"] .apercu { height: 62px; }
.butin__piece[data-genre="tenue"] .apercu .visuel { height: 62px; width: auto; }