/* Machines : cartes d'état et courbes de mesures. */
.machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.machine { display: block; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; border-inline-start: 5px solid var(--good); }
.machine:hover { border-color: var(--brand); }
.machine.alerte { border-inline-start-color: var(--bad); } .machine.arret { border-inline-start-color: var(--warn); } .machine.muette, .machine.inactive { border-inline-start-color: var(--muted); }
.machine h3 { margin: 0 0 .2rem; font-size: 1rem; }
.state { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; }
.state i { width: 10px; height: 10px; border-radius: 50%; background: var(--good); }
.state.alerte i { background: var(--bad); } .state.arret i { background: var(--warn); } .state.muette i, .state.inactive i { background: var(--muted); }
.sensors { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.sensor { display: block; padding: .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; }
.sensor:hover { border-color: var(--brand); }
.sensor .value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sensor.bad .value { color: var(--bad); } .sensor.off .value { color: var(--muted); }
.gauge { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: .4rem; }
.gauge i { display: block; height: 100%; background: var(--good); width: var(--v); }
.gauge.mid i { background: var(--warn); } .gauge.low i { background: var(--bad); }
.chart-wrap .band { fill: var(--brand); opacity: .14; }
.chart-wrap .line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.chart-wrap .limit { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart-wrap .limit-label { fill: var(--bad); font-size: 11px; }
.chart-wrap .dot { fill: var(--brand); }
.code-block { background: #10201c; color: #e9f3ef; border-radius: 10px; padding: .8rem 1rem; overflow-x: auto; font: .82rem/1.5 ui-monospace, Consolas, monospace; white-space: pre; direction: ltr; text-align: left; }
.key-once { font: 1rem ui-monospace, Consolas, monospace; word-break: break-all; direction: ltr; }