/* =============================================================================
   L'ÉCRAN DU REGISTRE KUPAT HESSED — `B000-D499` à `B000-D501`, 13/09/2026.
   Les quatre chiffres en tête, lisibles d'un coup d'œil ; le reste en tableaux
   de `hub.css`. Rien de plus que ce que la page demande.
   ============================================================================= */
.kh-periode { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.kh-periode input { min-height: 44px; }

.kh-chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin: 12px 0 8px;
}
.kh-chiffre {
  background: var(--bleu-clair); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.kh-chiffre span { font-size: 0.85rem; color: var(--gris); font-weight: 700; }
.kh-chiffre strong {
  font-size: 1.35rem; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: embed;
}
/* ⛔ `display: flex` bat `[hidden]` — la quatrième occurrence de `B000-D480`,
   mesurée sur le déployé le 14/09 : le bloc « Lignes inverses » restait à
   l'écran avec 0,00 alors que `hidden` était posé. Sans cette ligne, un bloc
   caché garde sa place et son chiffre. */
.kh-chiffre[hidden] { display: none; }
.kh-chiffre.entree strong  { color: #6ee7b7; }
.kh-chiffre.sortie strong  { color: #fcd6b0; }
.kh-chiffre.cloture        { border: 1px solid var(--or); }

#table-mouvements tr.don td:nth-child(3)             { color: #6ee7b7; }
#table-mouvements tr.prise_en_charge td:nth-child(3) { color: #fcd6b0; }
#table-mouvements .inverser { min-height: 44px; padding: 4px 10px; }
/* Un montant signé (« −35.00 », « +100.00 ») ne se retourne jamais, même sous
   `dir="rtl"` (`TRI-1`, règle 5) — même règle que les quatre chiffres. */
#table-mouvements td.nombre, #table-inverses td.nombre {
  direction: ltr; unicode-bidi: embed;
}
/* La cellule est devenue LTR : son « end » est à droite. Sous un tableau RTL,
   l'en-tête `th.nombre` (hub.css) aligne à gauche — on suit l'en-tête. */
[dir="rtl"] #table-mouvements td.nombre, [dir="rtl"] #table-inverses td.nombre {
  text-align: start;
}