/* Scène « Le devis se range » — Expertises. À plat : traits, aplats, bordures fines. Classes préfixées dv-. */
/* La zone peut être plus étroite que le cadre (écran de 320 px, colonne étroite) : elle ne pousse pas la page
   et le cadre, réduit par kit.cadrer, y reste centré. */
.devis-scene { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.devis-scene > .scene-cadre { justify-self: center; }

.dv-feuille, .dv-nom, .dv-ref, .dv-regle, .dv-titre, .dv-filet, .dv-ligne { position: absolute; left: 0; top: 0; }

/* La feuille : elle s’efface quand la proposition s’ouvre. Son en-tête reste et coiffe les trois familles. */
.dv-feuille { box-sizing: border-box; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line-fort); will-change: opacity; }
.dv-nom, .dv-ref { line-height: 18px; white-space: nowrap; will-change: transform; }
.dv-nom { font-size: 14px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.dv-ref { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; transform-origin: 100% 50%; will-change: transform, opacity; }
/* Temps fort : tout est rangé. La référence laisse place au résultat, en aplat, calé à droite sur le filet d’en-tête. */
.dv-ref.ok { left: auto; right: var(--dv-fin-x); top: var(--dv-fin-y); margin-top: -3px; padding: 3px 11px; border-radius: var(--r-pilule); background: var(--accent-fonce); color: #fff; font-weight: 700; will-change: auto; }
.dv-regle { height: 3px; background: var(--ink); transform-origin: 0 0; will-change: transform; }

/* Une famille : sa forme, son titre, son filet qui se trace */
.dv-titre { display: flex; align-items: center; gap: 7px; height: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--ink); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.dv-filet { height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 0; will-change: transform; }
.dv-forme { flex: none; display: block; width: 10px; height: 10px; overflow: visible; }
.dv-forme.l { fill: var(--accent); }
.dv-forme.p { fill: var(--ink); }
.dv-forme.a { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }

/* Une ligne de la proposition : sa forme, son libellé ; à la place du montant, une barre neutre */
.dv-ligne { box-sizing: border-box; display: grid; grid-template-columns: 10px 1fr; column-gap: 6px; align-items: center; align-content: space-between; padding: 7px 8px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-fort); color: var(--ink); font-size: 12px; line-height: 13px; white-space: nowrap; transform-origin: 50% 50%; will-change: transform; }
.dv-ligne b { font-weight: 700; }
.dv-ligne i { grid-column: 2; justify-self: end; height: 4px; border-radius: 2px; background: var(--line-fort); }

/* Petit écran : lignes pleine largeur, sur un seul rang (forme, libellé, barre à droite) */
.dv-compact .dv-nom { font-size: 13px; }
.dv-compact .dv-ref { font-size: 11px; }
.dv-compact .dv-ref.ok { margin-top: 0; padding: 1px 9px; line-height: 16px; }
.dv-compact .dv-titre { height: 16px; }
.dv-compact .dv-ligne { grid-template-columns: 10px 1fr auto; align-content: center; padding: 0 10px; border-radius: 7px; }
.dv-compact .dv-ligne i { grid-column: 3; }