/* Page Journal — les mouvements d'argent, jour par jour (Théo, 12/10/2026). Préfixe .jn-. Les couleurs viennent de tokens.css. */
.jn { display: flex; flex-direction: column; gap: var(--s-4); }
.jn .page-head { margin-bottom: var(--s-2); }
.jn .cp-month { align-self: flex-start; }
.jn-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.jn-tuile { display: flex; flex-direction: column; gap: 4px; padding: var(--s-4); }
.jn-tuile__label { font: 500 var(--fs-xs)/1.2 var(--font-body); letter-spacing: 0.02em; color: var(--muted); }
.jn-tuile__chiffre { font: 600 1.7rem/1.1 var(--font-display); letter-spacing: -0.04em; }
.jn-tuile--entree .jn-tuile__chiffre { color: var(--ok); }
.jn-tuile__sous { font-size: var(--fs-xs); color: var(--text-2); }
.jn-filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.jn-filtre { border-radius: var(--r-pill); gap: 6px; }
.jn-filtre[aria-pressed='true'] { background: linear-gradient(180deg, var(--gold-fill-from), var(--gold-fill-to)); color: var(--on-gold); border-color: transparent; box-shadow: none; }
.jn-filtre__n { opacity: 0.7; font-weight: 500; }
.jn-liste { display: flex; flex-direction: column; gap: var(--s-3); }
.jn-jour { padding: var(--s-4) var(--s-4) var(--s-2); }
.jn-jour__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.jn-jour__date { font: 600 var(--fs-md)/1.2 var(--font-display); letter-spacing: -0.02em; }
.jn-jour__date::first-letter { text-transform: uppercase; }
.jn-jour__net { font-weight: 600; font-size: var(--fs-sm); }
.jn-lignes { list-style: none; margin: 0; padding: 0; }
.jn-ligne { display: flex; align-items: center; gap: var(--s-3); padding: 12px 0; }
.jn-ligne + .jn-ligne { border-top: 1px solid var(--line); }
.jn-ligne__sens { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--glass-control); color: var(--muted); }
.jn-ligne__sens.is-entree { background: var(--ok-soft); color: var(--ok); }
.jn-ligne__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jn-ligne__qui { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; }
.jn-ligne__biz { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
.jn-ligne__biz::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.jn-ligne__detail { font-size: var(--fs-xs); color: var(--muted); }
.jn-ligne__reprise { margin-left: 8px; padding: 1px 7px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); font-size: 0.66rem; color: var(--muted); white-space: nowrap; }
.jn-ligne__montant { flex: none; font: 600 var(--fs-md)/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.is-entree.jn-ligne__montant, .jn-jour__net.is-entree { color: var(--ok); }
.jn-ligne__montant.is-sortie, .jn-jour__net.is-sortie { color: var(--text); }
.jn-note { font-size: var(--fs-xs); color: var(--muted); max-width: 70ch; }
@media (max-width: 860px) {
  .jn-tuiles { gap: var(--s-2); }
  .jn-tuile { padding: var(--s-3); }
  .jn-tuile__chiffre { font-size: 1.2rem; }
  .jn-tuile__sous { display: none; }
}