/* Scène « Un seul document » — Gestion commerciale. À plat : traits, aplats, bordures fines. Classes préfixées d-. */
.d-frise, .d-feuille, .d-stock, .d-journal, .d-ecr { position: absolute; left: 0; top: 0; }

/* La frise : quatre pastilles reliées. Trois couches par pastille : à venir (fond), faite, en cours. */
.d-frise { display: flex; align-items: center; height: 32px; }
.d-pas { position: relative; flex: none; display: grid; place-items: center; width: 122px; height: 32px; border-radius: var(--r-pilule); border: 1px solid var(--line-fort); color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; }
.d-pas span { position: absolute; inset: -1px; display: grid; place-items: center; border-radius: inherit; opacity: 0; will-change: opacity; }
.d-pas-fait { background: var(--surface); border: 1px solid var(--accent); color: var(--accent-texte); }
.d-pas-on { background: var(--accent-fonce); color: var(--sur-accent); }
.d-lien { flex: 1; height: 3px; margin: 0 5px; border-radius: 2px; background: var(--line-fort); }
.d-lien i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* La feuille : elle arrive une fois, puis ne bouge plus. Son contour est à l’encre : c’est elle, la structure de la scène. */
.d-feuille { width: 300px; padding: 0 23px 19px; border-radius: var(--r-2); background: var(--surface); border: 2px solid var(--ink); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; opacity: 0; will-change: transform, opacity; }
.d-tete { display: flex; align-items: center; justify-content: space-between; height: 58px; border-bottom: 2px solid var(--ink); }
.d-titres { position: relative; flex: 1; height: 16px; }
.d-titre { position: absolute; left: 0; top: 0; font-size: 15px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 16px; white-space: nowrap; opacity: 0; will-change: opacity, filter; }
.d-refs { position: relative; flex: none; width: 60px; height: 14px; }
.d-ref { position: absolute; right: 0; top: 0; font-size: 12px; font-weight: 600; line-height: 14px; color: var(--muted); white-space: nowrap; opacity: 0; }
.d-client { display: flex; flex-direction: column; justify-content: center; gap: 7px; height: 62px; opacity: 0; }
.d-client small, .d-cols, .d-st-tete, .d-jr-tete { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.d-client b { font-size: 15px; font-weight: 700; }

/* Les lignes d’articles : identiques du devis à la facture */
.d-cols, .d-rang-in { display: grid; grid-template-columns: 1fr 62px 82px; align-items: center; }
.d-cols { height: 28px; border-bottom: 1px solid var(--line-fort); opacity: 0; }
.d-cols span + span, .d-mt { text-align: right; }
.d-rang { height: 46px; border-bottom: 1px solid var(--line); }
.d-rang-in { height: 100%; font-size: 14px; font-weight: 600; opacity: 0; will-change: transform, opacity; }
.d-art { font-weight: 700; }
.d-qte { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.d-qte b { font-weight: 600; }
.d-mt { color: var(--text); }
.d-coche { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-fonce); opacity: 0; will-change: transform, opacity; }
.d-coche svg { width: 11px; height: 11px; fill: none; stroke: var(--sur-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Le pied : la signature à gauche, les totaux à droite */
.d-pied { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 12px; }
.d-signe { width: 86px; padding-top: 10px; opacity: 0; }
.d-signe small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1; white-space: nowrap; }
.d-paraphe { height: 50px; margin-top: 4px; border-bottom: 1px dashed var(--line-fort); }
.d-paraphe svg { width: 84px; height: 32px; margin-top: 12px; overflow: visible; opacity: 0; }
.d-paraphe path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.d-totaux { width: 158px; }
.d-tot { display: flex; align-items: baseline; height: 30px; font-size: 12px; font-weight: 600; line-height: 30px; color: var(--text); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.d-tot span { flex: 1; padding-right: 12px; text-align: right; }
.d-tot b { flex: none; min-width: 60px; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--ink); }
/* Le total TTC : le chiffre clé de la feuille, celui qui part au journal */
.d-tot.ttc { height: 40px; line-height: 38px; border-top: 2px solid var(--ink); color: var(--ink); font-weight: 700; }
.d-tot.ttc span { padding-right: 8px; }
.d-tot.ttc b { font-size: 18px; }
.d-tot small { margin-left: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }

/* Le stock, en face des lignes : un niveau et un compteur par article */
.d-stock, .d-journal { border-radius: 10px; background: var(--surface); border: 1px solid var(--line-fort); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; opacity: 0; will-change: transform, opacity; }
.d-stock { width: 116px; padding: 0 12px; }
.d-st-tete { display: flex; align-items: center; height: 28px; border-bottom: 1px solid var(--line-fort); }
.d-st-rang { display: flex; align-items: center; gap: 8px; height: 46px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); }
.d-st-rang:last-child { border-bottom: 0; }
.d-st-rang b { flex: none; width: 24px; text-align: right; font-size: 16px; color: var(--ink); }
.d-niv { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.d-niv i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: 0 50%; will-change: transform; }

/* Le journal et l’écriture (débit, crédit) qui vient s’y ranger */
.d-journal { width: 116px; padding: 0 9px 9px; }
.d-jr-tete { display: flex; align-items: center; height: 30px; padding-left: 2px; }
.d-cases, .d-ecr { display: flex; flex-direction: column; gap: 4px; }
.d-case, .d-lig { flex: none; width: 96px; height: 26px; border-radius: 6px; }
.d-case { border: 1px dashed var(--line-fort); }
.d-ecr { opacity: 0; will-change: transform, opacity; }
.d-lig { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 5px; background: var(--surface); border: 1px solid var(--line-fort); font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.d-lig b { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent-fonce); }
.d-lig.c b { background: var(--ink); }
/* Seul ajout pour le thème sombre (même cas que balance.css) : la lettre du crédit sur son carré clair */
:root[data-theme="dark"] .d-lig.c b { color: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .d-lig.c b { color: var(--bg); } }

/* Temps fort : l’écriture est rangée. L’en-tête du journal passe en aplat, dit le résultat et bat une fois (scale écrit par le JS). */
.d-jr-tete.passe { justify-content: center; height: 22px; margin: 4px 0; padding: 0; border-radius: 6px; background: var(--accent-fonce); color: #fff; letter-spacing: 0; text-transform: none; }

/* Relief : la frise est tracée sur le fond ; stock et journal y sont posés ; l’écriture glisse au-dessus du journal
   et sort de sous la feuille, qui est la pièce que l’on se passe de main en main. */
.d-stock, .d-journal { translate: 0 0 calc(16px * var(--relief)); }
.d-ecr { translate: 0 0 calc(23px * var(--relief)); }
.d-feuille { translate: 0 0 calc(30px * var(--relief)); }

/* Petit écran : la feuille prend presque tout le cadre (client dans l’en-tête) ; stock et journal en un bandeau fin dessous */
.d-compact .d-frise { height: 24px; }
.d-compact .d-pas { width: 78px; height: 24px; font-size: 11px; }
.d-compact .d-lien { margin: 0 2px; }
.d-compact .d-feuille { width: 340px; padding: 0 13px 9px; border-radius: 10px; }
.d-compact .d-tete { height: 40px; }
.d-compact .d-titres { height: 14px; }
.d-compact .d-titre { font-size: 13px; line-height: 14px; }
.d-compact .d-client { display: block; flex: none; height: auto; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.d-compact .d-rang-in { grid-template-columns: 1fr 58px 78px; font-size: 13px; }
.d-compact .d-rang { height: 34px; }
.d-compact .d-coche { width: 15px; height: 15px; }
.d-compact .d-coche svg { width: 9px; height: 9px; }
.d-compact .d-pied { padding-top: 0; }
.d-compact .d-signe { width: 104px; padding-top: 7px; }
.d-compact .d-paraphe { height: 54px; margin-top: 2px; }
.d-compact .d-paraphe svg { width: 84px; height: 30px; margin-top: 14px; }
.d-compact .d-totaux { width: 180px; }
.d-compact .d-tot { height: 23px; font-size: 11.5px; line-height: 23px; }
.d-compact .d-tot b { min-width: 56px; font-size: 12.5px; }
.d-compact .d-tot.ttc { height: 30px; line-height: 28px; }
.d-compact .d-tot.ttc b { font-size: 15px; }
.d-compact .d-stock, .d-compact .d-journal { display: flex; align-items: center; justify-content: space-between; height: 32px; border-radius: 8px; }
.d-compact .d-stock { width: 104px; padding: 0 12px; }
.d-compact .d-stock span, .d-compact .d-jr-tete { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.d-compact .d-stock b { font-size: 15px; font-weight: 700; }
.d-compact .d-journal { width: 228px; padding: 0 3px 0 11px; }
.d-compact .d-jr-tete { height: auto; padding: 0; }
.d-compact .d-jr-tete.passe { width: 68px; height: 24px; margin: 0 0 0 -8px; padding: 0; color: #fff; letter-spacing: 0; text-transform: none; }
.d-compact .d-cases, .d-compact .d-ecr { flex-direction: row; gap: 4px; }
.d-compact .d-case, .d-compact .d-lig { width: 72px; height: 24px; }
.d-compact .d-lig { padding: 0 6px 0 4px; font-size: 11px; }
.d-compact .d-lig b { width: 15px; height: 15px; }
/* Relief, petit écran : la frise touche presque la feuille, elles sont donc à la même hauteur (sinon la feuille la recouvre) ;
   le bandeau stock / journal reste sur le fond, l’écriture glisse entre les deux. */
.d-compact .d-frise, .d-compact .d-feuille { translate: 0 0 calc(18px * var(--relief)); }
.d-compact .d-ecr { translate: 0 0 calc(9px * var(--relief)); }
.d-compact .d-stock, .d-compact .d-journal { translate: none; }