/* Scène « Les justificatifs se classent » — Vos métiers · Comptabilité. À plat : traits, aplats, aucune ombre. Classes préfixées ju-. */
.ju-journal, .ju-piece, .ju-etat { position: absolute; left: 0; top: 0; }

/* Le journal : une ligne par écriture, un emplacement « pièce » au bout */
.ju-journal { border: 1px solid var(--line-fort); border-radius: var(--r-2); background: var(--surface); overflow: hidden; opacity: 0; will-change: transform, opacity; }
.ju-tete { box-shadow: inset 0 -2px 0 var(--ink); display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.ju-tete span:last-child { text-align: center; }
.ju-rang { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 14px; box-shadow: inset 0 1px 0 var(--line); line-height: 1; white-space: nowrap; opacity: 0; }
.ju-rang > * { position: relative; }
.ju-lib { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink); }
/* Le montant : c’est lui qui relie une pièce à son écriture, il se lit d’abord */
.ju-mt { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* La ligne visée par la pièce en vol (puis, en ambre, celle qui reste sans pièce) */
.ju-rang > .ju-vise { position: absolute; inset: 1px 0 0; background: var(--bg-doux); box-shadow: inset 4px 0 0 var(--accent); opacity: 0; }
.ju-rang.sans > .ju-vise { box-shadow: inset 4px 0 0 var(--ambre); }

/* L’emplacement : vide en pointillé, plein en trait continu avec la vignette de la pièce et une coche */
.ju-case { flex: none; display: grid; place-items: center; border: 1px dashed var(--line-fort); border-radius: var(--r-1); background: var(--surface); }
.ju-case.plein { border: 1px solid var(--muted); }
.ju-mot { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.ju-mini { position: absolute; inset: 0; margin: auto; color: var(--ink); opacity: 0; }
.ju-badge { position: absolute; right: -7px; top: -7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-fonce); color: #fff; font-size: 12px; font-weight: 700; font-style: normal; line-height: 1; opacity: 0; }
.ju-badge svg { width: 11px; height: 11px; }
.ju-rang.sans .ju-badge { background: var(--ambre); color: var(--surface); }
.ju-rang.alerte .ju-case { border-color: var(--ambre); }
.ju-rang.alerte .ju-mot { color: var(--ambre-texte); }

.ju-etat { transform: translateX(-50%); padding: 6px 14px; border-radius: var(--r-pilule); background: var(--surface); border: 1px solid var(--line-fort); font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--accent-texte); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--d-2); }
/* Temps fort : tout est classé sauf une écriture ; l’état le dit en aplat d’encre */
.ju-etat.alerte { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Les pièces : quatre silhouettes différentes */
.ju-piece { border: 1.5px solid var(--ink); border-radius: 7px; background: var(--surface); color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.ju-piece i { position: absolute; }
.ju-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ju-txt b { font-weight: 700; }
.ju-type { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ju-m { margin-top: auto; align-self: flex-end; font-size: 17px; font-weight: 700; }
.ju-trait { height: 2px; border-radius: 1px; background: var(--line-fort); }

/* Facture : une page, un logo, des lignes, un total */
.ju-facture .ju-txt { padding: 13px 13px 12px; }
.ju-facture b { margin-top: 4px; font-size: 16px; }
.ju-logo { right: 13px; top: 13px; width: 14px; height: 14px; border-radius: 4px; background: var(--accent); }
.ju-facture .ju-trait { left: 13px; right: 13px; }
.ju-facture .t1 { top: 70px; }
.ju-facture .t2 { top: 82px; }
.ju-facture .t3 { top: 94px; right: 52px; }
.ju-facture .ju-filet { left: 13px; right: 13px; top: 112px; height: 1px; background: var(--line-fort); }

/* Ligne de relevé bancaire : une bande, la date dans sa colonne */
.ju-releve { border-radius: 5px; }
.ju-releve .ju-txt { flex-direction: row; align-items: center; padding-right: 13px; }
.ju-date { flex: none; width: 60px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ju-releve b { flex: 1; padding-left: 13px; font-size: 13.5px; }
.ju-releve .ju-m { margin: 0; align-self: center; font-size: 16px; }
.ju-releve .ju-filet { left: 60px; top: 0; bottom: 0; width: 1px; background: var(--line-fort); }

/* Note de frais : un ticket au bas dentelé (contour en SVG) */
.ju-frais { border: 0; border-radius: 0; background: none; }
.ju-fond { position: absolute; inset: 0; overflow: visible; }
.ju-fond path { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.ju-frais .ju-txt { padding: 13px 13px 20px; }
.ju-frais b { font-size: 13.5px; line-height: 1.2; }
.ju-frais .t1 { left: 13px; right: 13px; top: 60px; }
.ju-frais .t2 { left: 13px; right: 42px; top: 71px; }
.ju-frais .ju-filet { left: 13px; right: 13px; top: 89px; height: 0; border-top: 1px dashed var(--line-fort); }

/* Bon : une souche détachable à gauche */
.ju-bon .ju-txt { padding: 13px 13px 12px 43px; }
.ju-bon b { margin-top: 4px; font-size: 15px; }
.ju-bon .ju-filet { left: 30px; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line-fort); }
.ju-trou { left: 10px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; border: 1px solid var(--line-fort); background: var(--bg); }

/* Relief : le journal est posé à plat ; l’état est posé au-dessus ; les pièces en désordre sont plus haut, la facture
   posée sur le tas plus haut encore. Une pièce qui approche de son emplacement redescend au niveau du journal
   (classe .approche) : elle s’y range exactement, sans décalage dû à l’inclinaison. */
.ju-etat { translate: 0 0 calc(16px * var(--relief)); }
.ju-piece { translate: 0 0 calc(30px * var(--relief)); transition: translate var(--d-2) ease-out; }
.ju-facture { translate: 0 0 calc(40px * var(--relief)); }
.ju-piece.approche { translate: none; }

/* Petit écran : mêmes pièces, tailles propres à la composition compacte */
.ju-compact .ju-tete { font-size: 10px; }
.ju-compact .ju-rang { gap: 10px; }
.ju-compact .ju-lib { font-size: 12px; }
.ju-compact .ju-mt { font-size: 13px; }
.ju-compact .ju-case { border-radius: 6px; }
.ju-compact .ju-mot { font-size: 10px; letter-spacing: 0; }
/* Petit écran : pas d’état en clair. Temps fort : l’emplacement resté vide passe lui-même en aplat d’encre. */
.ju-compact .ju-rang.alerte .ju-case { background: var(--ink); border: 1px solid var(--ink); }
.ju-compact .ju-rang.alerte .ju-mot { color: var(--bg); }
.ju-compact .ju-badge { right: -5px; top: -5px; width: 14px; height: 14px; font-size: 10px; }
.ju-compact .ju-badge svg { width: 9px; height: 9px; }
.ju-compact .ju-piece { border-radius: 5px; }
.ju-compact .ju-type { font-size: 10px; letter-spacing: 0; text-transform: none; }
.ju-compact .ju-m { font-size: 12.5px; }
.ju-compact .ju-facture .ju-txt { padding: 7px 8px 6px; }
.ju-compact .ju-facture b { margin-top: 2px; font-size: 12px; }
.ju-compact .ju-logo { right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 2px; }
.ju-compact .ju-facture .ju-trait { left: 8px; right: 8px; }
.ju-compact .ju-facture .t1 { top: 43px; }
.ju-compact .ju-facture .t2 { top: 50px; right: 28px; }
.ju-compact .ju-facture .t3 { display: none; }
.ju-compact .ju-facture .ju-filet { left: 8px; right: 8px; top: 61px; }
.ju-compact .ju-releve .ju-txt { padding-right: 9px; }
.ju-compact .ju-date { width: 40px; font-size: 10px; }
.ju-compact .ju-releve b { font-size: 11px; }
.ju-compact .ju-releve .ju-m { font-size: 12.5px; }
.ju-compact .ju-releve b { padding-left: 9px; }
.ju-compact .ju-releve .ju-filet { left: 40px; }
.ju-compact .ju-frais .ju-txt { padding: 7px 7px 13px; }
.ju-compact .ju-frais b { font-size: 10px; }
.ju-compact .ju-frais .t1 { left: 7px; right: 7px; top: 38px; }
.ju-compact .ju-frais .t2 { left: 7px; right: 24px; top: 45px; }
.ju-compact .ju-frais .ju-filet { left: 7px; right: 7px; top: 54px; }