/* Scène « Le rapprochement à trois » — Achats. À plat : feuilles en aplat, bordures fines, aucune ombre. Classes préfixées tv-. */
.tv-feuille, .tv-doc, .tv-bande, .tv-repere, .tv-marque, .tv-rang, .scene-cadre > .tv-coche { position: absolute; left: 0; top: 0; }

/* Un document = une feuille (le fond) + son contenu, posés séparément : les trois feuilles passent sous tous les contenus. */
.tv-feuille { border-radius: 10px; background: var(--surface); border: 1.5px solid var(--ink); opacity: 0; will-change: transform, opacity; }
.tv-doc { color: var(--ink); line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.tv-titre, .tv-fourn, .tv-ref { position: absolute; }
.tv-titre { right: 12px; top: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tv-fourn { left: 12px; top: 41px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.tv-ref { right: 12px; top: 41px; font-size: 10.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Une ligne d’article : le libellé à gauche, la quantité au bord droit (elle devient une colonne une fois superposée) */
.tv-ligne { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 12px; will-change: transform; }
.tv-art { font-size: 13px; font-weight: 600; }
/* Les quantités : ce sont elles que l’on compare, elles se lisent d’abord */
.tv-qte { min-width: 34px; padding: 4px 6px; border-radius: 6px; font-size: 19px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* La ligne en écart : cadre ambre franc, quantités en ambre ; la quantité qui diffère est pleine */
.tv-bande { border-radius: 8px; border: 2px solid var(--ambre); opacity: 0; }
.tv-ligne.alerte { color: var(--ambre-texte); }
.tv-diff .tv-ligne.alerte .tv-qte { background: var(--ambre); color: var(--bg); }
.tv-repere { display: flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pilule); background: var(--surface); border: 1px solid var(--ambre); color: var(--ambre-texte); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }

/* Les lignes qui concordent */
.tv-coche { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-fonce); color: #fff; opacity: 0; will-change: transform, opacity; }
.tv-coche svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* La facture retenue. Temps fort : le marqueur « À contrôler », en aplat, se pose puis bat une fois (scale écrit par le JS). */
.tv-doc.retenue .tv-titre { color: var(--ambre-texte); }
.tv-marque { display: flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--r-pilule); background: var(--ambre); color: var(--bg); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }

/* Relief : les trois documents sont posés à la même hauteur (leurs contenus doivent rester au-dessus des trois feuilles) ;
   les verdicts de ligne se posent au-dessus ; le marqueur « À contrôler » est la pièce tenue en main. */
.tv-feuille, .tv-bande, .tv-doc { translate: 0 0 calc(16px * var(--relief)); }
.scene-cadre > .tv-coche, .tv-repere { translate: 0 0 calc(30px * var(--relief)); }
.tv-marque { translate: 0 0 calc(46px * var(--relief)); }

/* Petit écran : documents courts (un titre, une ligne), et deux lignes résumées sous le document unique */
.tv-compact .tv-titre { top: 12px; letter-spacing: .03em; } /* un peu plus serré : le titre ne touche pas le bord de la feuille du dessus */
.tv-compact .tv-art { font-size: 12.5px; }
.tv-compact .tv-qte { min-width: 32px; font-size: 15px; padding: 2.5px 6px; } /* 20 px de haut : la quantité pleine remplit la bande */
.tv-compact .tv-repere { height: 26px; padding: 0 11px; font-size: 11.5px; }
.tv-compact .tv-marque { height: 22px; padding: 0 10px; font-size: 10.5px; }
.tv-rang { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-fort); color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.tv-rang .tv-coche { width: 18px; height: 18px; opacity: 1; }
.tv-rang .tv-coche svg { width: 11px; height: 11px; }