/* Instruments : étiquettes en mono, 12 px, capitales, chiffres tabulaires. Rien n'est animé :
   les chiffres changent, c'est tout. Couleurs de lecture : --ink-soft (≥ 5,2:1) sur le papier,
   --on-night-soft sur le pied de page. */
.instr-portail, .instr-pied, .instr-fil {
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-weight: 500; font-size: .75rem; line-height: 1.5;
  letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.instr-v { color: var(--ink); }

/* --- Coins du portail ------------------------------------------------------ */
:where(section.portail) { position: relative; } /* sans spécificité : la feuille du portail décide */
.instr-portail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px;
  padding: 0 var(--gutter, 24px) clamp(18px, 3vw, 32px);
  color: var(--ink-soft); pointer-events: none;
}
.instr-portail.en-flux { position: relative; padding-top: 24px; }
.instr-coin { display: grid; gap: 2px; }
.instr-d { text-align: right; }
.instr-l { margin: 0; white-space: nowrap; }
@media (max-width: 700px) {
  /* Une seule pile, en bas à gauche : sur un téléphone, les deux coins se gêneraient */
  .instr-portail { flex-direction: column; align-items: flex-start; gap: 2px; }
  .instr-d { text-align: left; }
  .instr-g .instr-l:first-child { display: none; }
}

/* --- Pied de page ------------------------------------------------------------ */
.foot-info .instr-pied { color: var(--on-night-soft); }
.foot-info .instr-pied span { display: inline; min-height: 0; }
.foot-info .instr-pied .instr-v { color: var(--on-night); }

/* --- Fil de progression -------------------------------------------------------- */
.instr-fil { display: none; }
@media (min-width: 901px) {
  .instr-fil.on {
    position: fixed; right: 12px; top: 50%; translate: 0 -50%; z-index: 25;
    display: grid; justify-items: center; gap: 10px;
    color: var(--ink-soft); pointer-events: none;
    transition: color var(--d-court, 200ms) var(--courbe-sortie, ease-out);
  }
  .instr-fil i { position: relative; display: block; width: 1px; height: 120px;
    background: color-mix(in oklab, currentColor 28%, transparent); }
  .instr-fil i::after { content: ""; position: absolute; inset: 0 0 auto; height: 100%;
    background: currentColor; transform-origin: top; transform: scaleY(var(--p, 0)); }
  .instr-fil.sur-nuit { color: var(--on-night-soft); }
}
@media print { .instr-fil, .instr-portail { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .instr-fil.on { transition: none; } }