/* Scène « Les modules s’emboîtent » — Sage 100. À plat : aplats et traits francs ; ombre neutre seulement sur l’objet tenu en main
   (la facture en vol). Classes préfixées m-. */
.m-profond { perspective: 1200px; }
.m-socle, .m-piece, .m-traits, .m-point, .m-facture { position: absolute; left: 0; top: 0; }
.m-socle, .m-piece { opacity: 0; will-change: transform, opacity; }

/* Le contour : rectangle, plot dessus, encoche dessous. Deux pièces accolées partagent la même ligne.
   C’est lui qui dit l’emboîtement : il est tracé à l’encre. */
.m-forme { position: absolute; left: 0; display: block; overflow: visible; }
.m-forme path { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.m-socle .m-forme path { fill: var(--bg-doux); }
.m-ombre { position: absolute; inset: 0; border-radius: 8px; box-shadow: var(--flottant); pointer-events: none; }

/* Les conduits : un trait par pièce, qui se prolonge de plot en encoche jusqu’au socle */
.m-fil { position: absolute; width: 2px; background: var(--line-fort); }
.m-noeud { position: absolute; display: grid; place-items: center; box-sizing: border-box; border-radius: 7px; background: var(--surface); border: 1px solid var(--line-fort); color: var(--ink); }
.m-noeud svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.m-vif .m-noeud { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-texte); }

.m-nom { position: absolute; display: flex; align-items: center; font-size: 13px; font-weight: 700; line-height: 15px; color: var(--ink); }
/* Le libellé du socle : ce que toutes les pièces partagent. Temps fort : il passe en aplat (il bat une fois, piloté par le JS). */
.m-donnees { position: absolute; left: 50%; translate: -50% 0; margin: 0; max-width: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: var(--r-pilule); font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1; color: var(--ink); white-space: nowrap; will-change: transform; }
.m-donnees i { font-style: normal; color: var(--muted); }
.m-donnees.m-acquis { background: var(--accent-fonce); color: #fff; }
.m-donnees.m-acquis i { color: inherit; }

/* Le contenu d’une pièce : des lignes déjà là (deux traits gris) ; la ligne neuve entre par le haut de la fente */
.m-fente { position: absolute; overflow: hidden; }
.m-liste { will-change: transform; }
.m-ligne { display: flex; align-items: center; justify-content: space-between; gap: 6px; box-sizing: border-box; height: 20px; margin-bottom: 6px; }
.m-ligne > i { height: 6px; border-radius: 3px; background: var(--line); }
.m-neuve, .m-facture { padding: 0 6px; border-radius: 6px; border: 1.5px solid var(--accent); background: var(--surface); font-size: 11px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-neuve span, .m-facture span { font-weight: 600; color: var(--text); }
/* Le chiffre clé : la même somme, lue dans chaque module */
.m-neuve b, .m-facture b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.m-neuve { opacity: 0; }
.m-facture { z-index: 6; margin: 0; opacity: 0; will-change: transform, opacity; }
.m-facture .m-ombre { inset: -1.5px; border-radius: 6px; }

/* Business Intelligence : un histogramme ; la dernière barre monte et prend la couleur d’accent */
.m-barres { display: flex; align-items: flex-end; gap: 6px; box-sizing: border-box; height: 100%; padding: 0 2px; border-bottom: 1px solid var(--line-fort); }
.m-barres i { position: relative; flex: 1; border-radius: 3px 3px 0 0; background: var(--line); transform-origin: 50% 100%; }
.m-barres b { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; }

/* L’impulsion : un point, et le trajet qu’il laisse tracé. Ni halo ni lueur. */
.m-traits { z-index: 4; pointer-events: none; }
.m-traits svg { display: block; max-width: none; overflow: visible; }
.m-traits path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.m-point { z-index: 5; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); opacity: 0; will-change: transform, opacity; }

/* Relief : le socle et les pièces emboîtées forment un seul plan (hauteur 0 : leurs contours se partagent au pixel).
   Seul ce qui n’est pas encore posé a de la hauteur ; --vol (1 → 0, réglé par le JS selon la progression) la fait retomber à la pose. */
.m-piece { translate: 0 0 calc(36px * var(--relief) * var(--vol, 0)); }
.m-facture { translate: 0 0 calc(70px * var(--relief) * var(--vol, 0)); }

/* Petit écran : deux colonnes de trois, à plat, une seule ligne par pièce */
.m-compact .m-piece { translate: 0 0 calc(20px * var(--relief) * var(--vol, 0)); }
.m-compact .m-facture { translate: 0 0 calc(40px * var(--relief) * var(--vol, 0)); }
.m-compact .m-ombre { border-radius: 6px; }
.m-compact .m-noeud { border-radius: 6px; }
.m-compact .m-noeud svg { width: 14px; height: 14px; }
.m-compact .m-nom { font-size: 11.5px; line-height: 13px; }
.m-compact .m-donnees { font-size: 11.5px; gap: 7px; padding: 0 12px; }
.m-compact .m-neuve b, .m-compact .m-facture b { font-size: 13px; }
.m-compact .m-traits path { stroke-width: 2.5; }
.m-compact .m-point { width: 8px; height: 8px; margin: -4px 0 0 -4px; }

/* Firefox : sans hauteur propre, ce calque est peint hors de la scène dès que ses voisins sont en relief. */
.m-traits { translate: 0 0 .01px; }