/* ── Le chiffre qui se dit ─────────────────────────────────────────────────
   Un nombre explicable se souligne d'un pointillé d'or, comme une note de
   marge sur un manuscrit. La liste s'ouvre au survol, au clavier et à l'appui
   long, et elle se pose sur un carré de parchemin.
   ───────────────────────────────────────────────────────────────────────── */

.chiffre {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted var(--or);
  /* La cible tactile fait 44 px de haut sans decaler la ligne de texte. */
  padding: 0.15em 0.1em;
  margin: -0.15em -0.1em;
}

.chiffre:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

.chiffre__valeur { font-variant-numeric: tabular-nums; }

.chiffre__lignes {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%) translateX(var(--glissement, 0px));
  min-width: 15rem;
  max-width: min(22rem, 82vw);
  padding: var(--e-3) var(--e-3);
  background:
    /* Opaque : à 98 %, le texte des cases recouvertes se lisait sous la note (Longue Nuit au téléphone, 29/09/2026). */
    linear-gradient(180deg, var(--parchemin), var(--parchemin-bas));
  color: var(--encre);
  border: 1px solid var(--cuir-clair);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-3);
  text-align: left;
  /* Un prix se pose souvent dans un conteneur qui interdit la coupure : la
     note héritait du nowrap, et « Part que le marchand reprend » passait
     sous son « × 0,5 ». Les causes se coupent, les montants non (dd). */
  white-space: normal;
  font-size: var(--t-3);
  line-height: 1.35;
  cursor: default;
  /* Fermee, elle ne prend ni la place ni le clic. Ni la largeur : posee hors
     du flux mais affichee, elle poussait le bord droit de la page a 487 px sur
     un ecran de 390 px en tres grands caracteres. */
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* La note posée dans la page (listeExpliquee, les classements) : la même liste, toujours ouverte, dans le flux. */
.chiffre__lignes.chiffre__lignes--posee {
  position: static;
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  min-width: 0;
  max-width: none;
}
.chiffre__lignes.chiffre__lignes--posee::after { display: none; }

/* Le chiffre ouvert passe devant ses voisins. `.chiffre__lignes` portait deja
   un z-index, mais son parent n'ouvrait aucun contexte d'empilement : dans le
   coffre du bandeau, la case du fer, ecrite APRES dans le document, se
   dessinait par-dessus la note de l'or. Mesure du 15/09/2026. */
.chiffre--ouvert { z-index: 41; }

.chiffre--ouvert .chiffre__lignes {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* La pointe qui rattache la note a son chiffre. */
.chiffre__lignes::after {
  content: '';
  position: absolute;
  top: 100%;
  /* La note glisse pour rester dans son cadre ; la pointe revient d'autant
     et reste sur le chiffre, sans sortir de la note. */
  left: clamp(0.8rem, calc(50% - var(--glissement, 0px)), calc(100% - 0.8rem));
  margin-left: calc(-1 * var(--e-1));
  border: 6px solid transparent;
  border-top-color: color-mix(in srgb, var(--parchemin-bas) 98%, transparent);
}

/* Pres du haut de l'ecran, la note passe sous le chiffre : au-dessus, elle
   sortirait par le bord et se ferait couper sans que rien ne le dise. */
.chiffre--dessous .chiffre__lignes {
  bottom: auto;
  top: calc(100% + 0.5rem);
}

.chiffre--dessous .chiffre__lignes::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--parchemin) 98%, transparent);
}

/* Trop haute pour l'un et l'autre côté : la note prend d'abord sa largeur
   maximale, puis, si cela ne suffit pas, elle se borne à la place libre et
   défile dedans (`placer`, jeu/ecrans/decomposition.js). */
.chiffre--large .chiffre__lignes { width: min(22rem, 82vw); }
@media (max-width: 560px) {
  .chiffre--large .chiffre__lignes { width: min(20rem, 88vw); }
}

.chiffre--serree .chiffre__lignes {
  max-height: var(--hauteur-de-la-note, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Trop haute pour les deux côtés, même élargie : la note sort de son panneau
   et se pose sur l'écran, entre le bandeau et la barre du bas, centrée
   (`poserEnPlein`, jeu/ecrans/decomposition.js). Elle ne défile que si
   l'écran entier ne suffit pas. */
html .chiffre__lignes.chiffre__lignes--plein {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: fixed;
  z-index: 1500;
  left: 50%;
  bottom: auto;
  transform: translateX(-50%);
  width: min(24rem, calc(100vw - 16px));
  min-width: 0;
  max-width: none;
  max-height: var(--hauteur-pleine, 80vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.chiffre__lignes--plein::after { display: none; }
.chiffre__lignes--plein:focus { outline: none; }

.chiffre__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.02em;
  border-bottom: 1px solid color-mix(in srgb, var(--cuir-clair) 45%, transparent);
  padding-bottom: var(--e-1);
}

.chiffre__table {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-1) var(--e-4);
  align-items: baseline;
  margin: 0;
}

/* La colonne des causes doit pouvoir RETRECIR. Sans `min-width: 0`, une
   grille garde la largeur minimale du contenu, et « Les camps prennent leur
   part, 18 pour cent » poussait la colonne des montants hors de la note :
   le joueur lisait « -4 » pour -40. Mesure du 15/09/2026 dans le bandeau. */
.chiffre__table dt { margin: 0; min-width: 0; }
.chiffre__table dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chiffre__base,
.chiffre__total { font-weight: 600; }

.chiffre__filet {
  grid-column: 1 / -1;
  height: 1px;
  background: color-mix(in srgb, var(--cuir-clair) 45%, transparent);
  margin: var(--e-0) 0;
}

/* Le calcul de la ligne, sous son nom, en plus petit. La couleur ne porte
   aucune information ici : le signe est deja dans le montant. */
.chiffre__calcul {
  display: block;
  font-size: 0.82em;
  color: var(--encre-pale);
  font-variant-numeric: tabular-nums;
}

.chiffre__borne {
  margin: var(--e-2) 0 0;
  font-size: var(--t-3);
  color: var(--encre-pale);
}

/* Sur telephone, la note se cale sur la largeur de l'ecran plutot que sur le
   chiffre : centree sur un chiffre en bord de ligne, elle sortait du cadre. */
@media (max-width: 560px) {
  .chiffre__lignes {
    left: 0;
    transform: translateX(var(--glissement, 0px));
    min-width: 12rem;
    max-width: min(20rem, 88vw);
  }
  .chiffre__lignes::after { left: clamp(0.8rem, calc(1.5rem - var(--glissement, 0px)), calc(100% - 0.8rem)); }
}

@media (prefers-reduced-motion: no-preference) {
  .chiffre__lignes { transition: opacity 120ms ease; }
}