/* Scène « L’inventaire » — Stocks. À plat : traits, aplats, bordures fines, aucune ombre. Classes préfixées i-. */
.i-etagere, .i-ecran, .i-colis, .i-vide, .i-trait, .i-signe, .i-fiche { position: absolute; left: 0; top: 0; }
.i-etagere, .i-ecran, .i-colis, .i-vide, .i-trait, .i-signe, .i-fiche, .i-compte { opacity: 0; }

/* L’étagère, vue de face */
.i-etagere { width: 100%; height: 100%; }
.i-montant, .i-planche, .i-tete, .i-titre { position: absolute; }
.i-montant { border-radius: 2px; background: var(--ink); }
.i-planche { border-radius: 2px; background: var(--ink); }
.i-titre, .i-tete, .i-ecran-tete { display: flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; white-space: nowrap; }
.i-tete { justify-content: space-between; align-items: baseline; } /* le nom et le compte, plus grand, sur la même ligne de base */
.i-compte { letter-spacing: .04em; color: var(--accent-texte); }
.i-compte b { display: inline-block; min-width: 2ch; text-align: right; font-size: 17px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.i-compte.alerte { color: var(--ambre-texte); }

/* Un colis : une boîte et sa bande. Sa case vide : le même contour, en pointillé ambre. */
.i-colis, .i-vide { box-sizing: border-box; border-radius: 3px; }
.i-colis { background: var(--line); border: 1px solid var(--line-fort); }
.i-colis::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: var(--surface); }
.i-vide { border: 1px dashed var(--ambre); }

/* L’écran : les quantités par article, chaque ligne en face de son niveau */
.i-ecran { box-sizing: border-box; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line-fort); }
.i-ecran-tete { position: absolute; left: 0; right: 0; top: 0; height: 33px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.i-ligne { position: absolute; left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; }
.i-alerte { position: absolute; inset: 0; border: 1px solid var(--ambre); border-radius: var(--r-1); opacity: 0; }
.i-nom { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.2; white-space: nowrap; }
.i-nom small { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.i-qte { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.i-ligne.alerte .i-nom, .i-ligne.alerte .i-qte { color: var(--ambre-texte); }

/* Le signe entre l’étagère et l’écran : égal, différent, puis coché */
.i-signe { width: 24px; height: 24px; margin: -12px; }
.i-signe i { position: absolute; inset: 0; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-fort); color: var(--muted); }
.i-signe svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-signe .i-ne { border-color: var(--ambre); color: var(--ambre-texte); opacity: 0; }
.i-signe .i-ok { border-color: var(--accent-fonce); background: var(--accent-fonce); color: #fff; opacity: 0; }

/* Le trait d’inventaire : une ligne, rien d’autre (un brin par niveau, tous sur la même verticale) */
.i-trait { width: 0; height: 0; will-change: transform, opacity; }
.i-brin { position: absolute; left: -1.5px; width: 3px; border-radius: 1.5px; background: var(--accent); }

/* La fiche : la cause de l’écart */
.i-fiche { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--ambre); line-height: 1; white-space: nowrap; will-change: transform, opacity; }
.i-fiche span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ambre-texte); }
.i-fiche b { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Temps fort : l’écran a rejoint l’étagère, le mouvement est enregistré ; la fiche passe en aplat */
.i-fiche.regle { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.i-fiche.regle span, .i-fiche.regle b { color: #fff; }

/* Relief : l’étagère est le support ; les colis et l’écran sont posés ; le trait d’inventaire et les signes passent
   au-dessus ; la fiche est la pièce que l’on tient. */
.i-colis, .i-ecran { translate: 0 0 calc(10px * var(--relief)); }
.i-trait, .i-signe { translate: 0 0 calc(18px * var(--relief)); }
.i-fiche { translate: 0 0 calc(32px * var(--relief)); }

/* Petit écran : étagère à deux niveaux, compteur d’une seule ligne, fiche réduite */
.i-compact .i-tete { font-size: 10px; }
.i-compact .i-compte b { font-size: 13.5px; }
.i-compact .i-colis, .i-compact .i-vide { border-radius: 2px; }
.i-compact .i-colis::after { width: 4px; margin-left: -2px; }
.i-compact .i-ligne { inset: 0; padding: 0 14px; }
.i-compact .i-alerte { inset: -1px; border-radius: var(--r-2); }
.i-compact .i-qte { font-size: 24px; }
.i-compact .i-signe { width: 22px; height: 22px; margin: -11px; }
.i-compact .i-fiche { align-items: center; border-radius: 8px; }
.i-compact .i-fiche b { font-size: 13.5px; }
.i-compact .i-fiche { translate: 0 0 calc(22px * var(--relief)); }