/* Scène « La pièce manquante » — Développement complémentaire. À plat : traits francs, aplats, aucune ombre. Classes préfixées pi-. */
.pi-couche, .pi-lib { position: absolute; left: 0; top: 0; }
.pi-svg { display: block; max-width: none; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Le module : des blocs accolés, au trait d’encre (la structure) ; l’encoche vide, en pointillé (ambre quand le flux bute dessus) */
.pi-bloc { opacity: 0; will-change: transform, opacity; }
.pi-bloc path { fill: var(--surface); stroke: var(--ink); stroke-width: 2px; }
.pi-bloc .pi-titre, .pi-titre { fill: none; stroke: var(--line-fort); stroke-width: 3px; }
.pi-chair .pi-titre { stroke: var(--accent); }
.pi-decor { opacity: 0; }
.pi-manque { fill: var(--bg-doux); stroke: var(--ink); stroke-width: 2px; stroke-dasharray: 3 5; stroke-linecap: butt; opacity: 0; }
.pi-manque.alerte { stroke: var(--ambre); }

/* Le flux : une voie (secondaire), sa partie parcourue (le lien, franc), des nœuds qui s’allument au passage, le point qui avance */
.pi-voie { stroke: var(--line-fort); stroke-width: 2px; stroke-linecap: butt; }
.pi-flux { stroke: var(--accent); stroke-width: 4px; stroke-linecap: butt; opacity: 0; }
.pi-noeud { fill: var(--surface); stroke: var(--line-fort); stroke-width: 2px; }
.pi-noeud.on { fill: var(--accent); stroke: var(--accent); }
.pi-point { fill: var(--accent); stroke: var(--surface); stroke-width: 2px; opacity: 0; will-change: transform; }
.pi-point.bloque { fill: var(--ambre); }

/* L’établi : un plateau et deux pieds, au trait d’encre */
.pi-plateau { fill: var(--surface); stroke: var(--ink); stroke-width: 2px; }
.pi-pied { stroke: var(--ink); stroke-width: 2px; }

/* Les cotes : ligne, flèches, traits de rappel, et la valeur, qui se lit d’abord */
.pi-cote { opacity: 0; will-change: transform, opacity; }
.pi-ligne, .pi-rappel { stroke: var(--accent); stroke-width: 2px; stroke-linecap: butt; }
.pi-fleche { fill: var(--accent); }
.pi-nb { fill: var(--accent-texte); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* La pièce sur mesure : tracée, puis remplie */
.pi-piece { will-change: transform; }
.pi-chair { opacity: 0; }
.pi-fond { fill: var(--surface); }
.pi-teinte { fill: var(--accent); fill-opacity: .2; }
.pi-contour { stroke: var(--accent); stroke-width: 3px; stroke-linecap: square; opacity: 0; }

/* Temps fort : la coche, à la sortie, en aplat d’accent */
.pi-coche { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pi-coche circle { fill: var(--accent-fonce); stroke: var(--accent-fonce); stroke-width: 2px; }
.pi-coche path { stroke: #fff; stroke-width: 2.5px; }

.pi-lib { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--muted); white-space: nowrap; opacity: 0; }
.pi-lib.pi-centre { transform: translateX(-50%); }

/* Relief : le module, l’établi et les cotes sont le socle ; le circuit (voies, flux, nœuds) est posé sur le module ;
   le point avance juste au-dessus ; la coche est le témoin. La pièce est l’objet tenu en main : posée sur l’établi quand on la trace,
   soulevée le temps du trajet, puis logée dans le module, à la hauteur du circuit qui la traverse. */
.pi-circuit { translate: 0 0 calc(10px * var(--relief)); }
.pi-mobile { translate: 0 0 calc(20px * var(--relief)); }
.pi-temoin { translate: 0 0 calc(24px * var(--relief)); }
.pi-objet { transition: translate var(--d-3) var(--c-trajet); }
.pi-objet.tenue { translate: 0 0 calc(70px * var(--relief)); }
.pi-objet.logee { translate: 0 0 calc(10px * var(--relief)); }

/* Petit écran : traits un peu plus fins, hauteurs réduites */
.pi-compact .pi-flux { stroke-width: 3px; }
.pi-compact .pi-contour { stroke-width: 2.5px; }
.pi-compact .pi-bloc path, .pi-compact .pi-manque { stroke-width: 1.75px; }
.pi-compact .pi-nb { font-size: 14px; }
.pi-compact .pi-coche path { stroke-width: 2px; }
.pi-compact .pi-circuit, .pi-compact .pi-objet.logee { translate: 0 0 calc(8px * var(--relief)); }
.pi-compact .pi-mobile { translate: 0 0 calc(14px * var(--relief)); }
.pi-compact .pi-temoin { translate: 0 0 calc(16px * var(--relief)); }
.pi-compact .pi-objet.tenue { translate: 0 0 calc(48px * var(--relief)); }

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