:root{color-scheme:dark;font-family:Inter,Segoe UI,Arial,sans-serif;color:#e2e9ed;background:#0d171e;font-size:15px;line-height:1.55}*{box-sizing:border-box}body{margin:0;min-width:1100px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4vw;border-bottom:1px solid #30434e;background:#14232d;font-size:.8rem;letter-spacing:.07em}header time{display:block;color:#8ce2d9;font:1.2rem monospace;text-align:right}.brand{font-weight:700}.brand span{display:block;color:#91a5b0;font-size:.75rem}main{max-width:1540px;margin:auto;padding:0 4vw}.intro{max-width:850px;padding:45px 0 28px}.eyebrow{color:#92aaaF;letter-spacing:.16em;font-size:.75rem}h1{font-size:clamp(2.3rem,4.8vw,4.5rem);font-weight:600;line-height:1.1;letter-spacing:-.04em;margin:20px 0}h2{font-size:1.15rem;margin:0 0 16px}h3{font-size:1rem;margin:22px 0 10px}p{margin:10px 0 18px}.muted,small,.legend{color:#9eb2be;font-size:.85rem}.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:5px 0 24px}.controls,nav,.filters{display:flex;gap:10px;flex-wrap:wrap}button,input,select{font:inherit;color:inherit;background:#192c38;border:1px solid #48606e;border-radius:4px;padding:10px 13px}button{cursor:pointer}button:hover{background:#28414f}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #8ce2d9;outline-offset:3px}#incident,button[type=submit]{background:#94ded5;color:#10242a;border-color:#94ded5;font-weight:600}nav{margin:26px 0 12px}nav button[aria-pressed=true]{background:#dbe5ea;color:#13242e}.panel{background:#13222c;border:1px solid #30434e;border-radius:8px;padding:24px;margin:0 0 20px;min-width:0}.panel-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#9eb2be}.panel-head h2{color:#e2e9ed}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:20px 0;border-top:1px solid #30434e;border-bottom:1px solid #30434e}.metrics small,.metrics strong{display:block}.metrics strong{font-size:clamp(1.1rem,2.4vw,1.9rem);font-weight:500;margin-top:8px}.alarm{color:#ffb56b}.scroll{overflow:auto;max-height:520px;border:1px solid #30434e;min-width:0}table{border-collapse:collapse;width:100%;font-size:.83rem}th,td{text-align:left;vertical-align:top;border-bottom:1px solid #30434e;padding:10px 12px}th{background:#1b303e;position:sticky;top:0;z-index:1}td{overflow-wrap:anywhere}td button{font:inherit;text-align:left;white-space:nowrap;padding:4px 8px}.filters{align-items:end;margin:20px 0}.filters label{flex:1;min-width:150px}label{display:flex;flex-direction:column;gap:7px;font-size:.85rem}input,select{width:100%;min-width:0}select{white-space:normal}.evidence-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,1fr);gap:20px}aside{background:#0d1b24;border:1px solid #30434e;padding:18px;overflow-wrap:anywhere;max-height:650px;overflow:auto}aside h3{margin-top:0}aside button{display:block;width:100%;margin:6px 0;text-align:left;overflow-wrap:anywhere}dl{margin:8px 0}dt{font-family:monospace;color:#8fd6cf;font-size:.8rem;margin-top:10px;overflow-wrap:anywhere}dd{margin:2px 0 12px;overflow-wrap:anywhere}.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}.docs-grid article{min-width:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}#feedback{min-height:32px;color:#a4e5db}a{color:#a4e5db}footer{padding:25px 0 50px;color:#91a5b0;font-size:.8rem}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:#14232d;padding:10px;z-index:3}[hidden]{display:none!important}.selected td{background:#213d4b}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

#events td:nth-child(2),#events td:nth-child(3){white-space:nowrap;overflow-wrap:normal}.evidence-layout table{min-width:850px}

/* Synoptique de conduite : dessin vectoriel, mesures observées et états. */
.intro{max-width:none;padding:24px 0 16px}
.intro h1{font-size:2.35rem;letter-spacing:-.035em;margin:12px 0}
.intro>p:not(.eyebrow){max-width:1050px;margin:8px 0;font-size:.9rem}
header{padding-top:16px;padding-bottom:16px}
.process{margin:22px 0 16px;border:1px solid #3a4b57;border-radius:5px;overflow:hidden;background:#101e28}
.synoptic-heading{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #30434e;background:#192b37;color:#adc0cb;font:11px Consolas,monospace;letter-spacing:.07em}
.synoptic-heading>span:first-child{display:flex;align-items:center;gap:9px}
.state-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8fa5b1}
.process.operating .state-dot{background:#88d2bf}
.process.stopped .state-dot{background:#e9aa65}
.line-synoptic{display:block;width:100%;height:auto;font-family:Segoe UI,Arial,sans-serif}
.line-synoptic text{fill:#d1dce2;font-size:13px}
.line-synoptic .station-label text{fill:#a8bbc7;font:600 11px Segoe UI,Arial,sans-serif;letter-spacing:1.3px}
.line-synoptic .station-label text:nth-child(odd){fill:#6c858f}
.line-synoptic .zone-rule{stroke:#354953;stroke-width:1}
.line-synoptic .readout rect,.line-synoptic .reject-counter rect{fill:#192b36;stroke:#495f6d;stroke-width:1}
.line-synoptic .readout-label{fill:#9fb3bf;font:10px Consolas,monospace;letter-spacing:.35px}
.line-synoptic .readout-value{font:500 28px Segoe UI,Arial,sans-serif;fill:#edf3f6}
.line-synoptic .readout-unit{font-size:12px;fill:#a7bbc7}
.line-synoptic .drawing-note{fill:#8ea5b2;font-size:11px}
.line-synoptic .equipment-tag{fill:#d3dfe4;font:12px Consolas,monospace}
.instrument-line{stroke:#8298a5;stroke-width:1.2;stroke-dasharray:3 4;fill:none}
.direction-line{stroke:#91a6b2;stroke-width:1.3;fill:none}
.conveyor-frame{fill:#334956;stroke:#8196a2;stroke-width:1.5}
.conveyor-frame .foot{stroke:#adbdc6;stroke-width:3}
.roller{fill:#3b515e;stroke:#c1cdd3;stroke-width:1.5}
.roller-detail{stroke:#aebec8;stroke-width:1.5}
.drive-link{stroke:#9aabb5;stroke-width:6;fill:none}
.machine-solid{fill:#314855;stroke:#9fb2bf;stroke-width:1.5}
.run-indicator{fill:#8195a1;stroke:#adc0c8;stroke-width:.8}
.process.operating .run-indicator{fill:#7ecbb5;stroke:#b8eadb}
.process.stopped .run-indicator{fill:#da9e60;stroke:#f2c38c}
.filler-frame{fill:none;stroke:url(#machine-metal);stroke-width:9;stroke-linejoin:round}
.filler-frame .frame-inner{stroke:#9fb1bd;stroke-width:1}
.guard-glass{fill:#26434e;fill-opacity:.3;stroke:#587582;stroke-width:1}
.product-pipe{fill:none;stroke:#a8bac4;stroke-width:12}
.product-core{fill:none;stroke:#526c78;stroke-width:7}
.valve-symbol{fill:#597780;stroke:#c3d2d8;stroke-width:1.5}
.fill-stream{stroke:#a5d0cf;stroke-width:3;stroke-dasharray:3 3;opacity:0}
.sensor rect{fill:#2f4857;stroke:#a3b8c5;stroke-width:1.5}
.sensor circle{fill:#8ca8b5}.sensor-beam{stroke:#7b9caa;stroke-width:1;stroke-dasharray:3 4;opacity:.5}
.quality-frame{fill:none;stroke:#96aab7;stroke-width:9;stroke-linejoin:round}
.quality-beam{stroke:#7fabb6;stroke-width:1.5;stroke-dasharray:3 5;opacity:.5}
.reject-route-bed{fill:none;stroke:#6e8593;stroke-width:27;stroke-linejoin:round}
.reject-route{fill:none;stroke:#283e4b;stroke-width:19;stroke-dasharray:3 5;stroke-linejoin:round}
.reject-paddle{stroke:#b3c3cc;stroke-width:6;fill:none}
.process.quality-warning .quality-readout rect{stroke:#d4a060}
.process.quality-warning .quality-readout .readout-value{fill:#edb777}
.process.stopped #diagram-state{fill:#edb777}
.control-topology{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:#172833;border-top:1px solid #344853}
.topology-label{font:10px Consolas,monospace;letter-spacing:.06em;color:#829ba9;padding-right:16px;border-right:1px solid #3a505e}
.topology-node{display:flex;align-items:center;gap:11px;white-space:nowrap}
.topology-node svg{width:30px;height:28px;fill:none;stroke:#9bb0bf;stroke-width:1.3;flex-shrink:0}
.topology-node b,.topology-supervision b{display:block;font:12px Consolas,monospace;font-weight:500;color:#d2dee6}
.topology-node small,.topology-supervision small{display:block;font-size:10px;color:#849eae;margin-top:3px}
.topology-link{color:#627f91;font-size:18px}
.topology-supervision{display:flex;gap:12px;align-items:center;border-left:1px solid #3a505e;padding-left:14px}
/* Commandes et mesures de la scène serveur. */
.process.dosing .fill-stream{opacity:1;stroke-width:4}
.process.dosing .valve-symbol{fill:#7bbdac;stroke:#b9e8dc}
.process.detecting .sensor circle{fill:#a2e2cc}
.process.detecting .sensor-beam{stroke:#a2e2cc;opacity:.85}
.process.ejecting .reject-paddle{transform:rotate(28deg);transform-origin:985px 281px;stroke:#ecb574}
.process.ejecting .reject-route{stroke:#755d40}
.bottle-liquid{fill:#87b8b7;opacity:.8;pointer-events:none}
.moving-bottle.rejected .bottle-liquid{fill:#d4a269}
.moving-bottle.rejected>use{stroke:#edbd81}

/* Deux grandeurs, deux échelles, un axe temporel commun. */
.trends-panel{margin-top:26px;border-top:1px solid #344853;padding-top:20px}
.trends-heading,.trend-chart-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}
.trends-heading h3{margin:0}.trend-mode{font:10px Consolas,monospace;letter-spacing:.08em;color:#aec3ce;background:#203744;border:1px solid #405865;padding:5px 9px;border-radius:3px}
.trend-explanation{font-size:.86rem;color:#a8beca;max-width:960px;margin:14px 0 20px}
.trend-chart{border:1px solid #344d5b;border-radius:5px;background:#0e1d27;margin:14px 0;padding:15px 18px 6px}
.trend-chart-heading h4{margin:0;font-size:.95rem;font-weight:500}.trend-chart-heading h4 span{color:#93acbb;font-size:.78rem;margin-left:12px}.trend-chart-heading p{margin:0;color:#b8cbd6;font:12px Consolas,monospace}
.trend-legend{display:flex;gap:28px;margin:12px 0 2px;color:#b3c8d3;font-size:.78rem}.trend-legend>span{display:flex;align-items:center;gap:9px}.line-key{display:inline-block;width:24px;height:0;border-top:2px solid}.actual-key{border-color:#6bd4c8}.setpoint-key{border-color:#c8d2d8;border-top-style:dashed}.volume-key{border-color:#a9cbe1}.threshold-key{border-color:#d5ad70;border-top-style:dashed}
.trend-chart svg{display:block;width:100%;height:auto}.chart-grid{stroke:#2b414e;stroke-width:1}.chart-grid-vertical{stroke:#223642;stroke-dasharray:2 5}.chart-axis{fill:#9ab2c1;font:11px Consolas,monospace}.chart-series{fill:none;stroke-width:2.5;stroke-linejoin:round}.series-actual{stroke:#6bd4c8}.series-setpoint{stroke:#c8d2d8;stroke-dasharray:7 5;stroke-width:2}.series-volume{stroke:#a9cbe1}.chart-point.series-actual{fill:#6bd4c8}.chart-point.series-setpoint{fill:#c8d2d8}.chart-point.series-volume{fill:#a9cbe1}.chart-threshold{stroke:#d5ad70;stroke-width:1.3;stroke-dasharray:5 5}.chart-threshold-label,.chart-stop-label{fill:#e5b77a;font:11px Consolas,monospace}.chart-stop{stroke:#d5ad70;stroke-width:1.5;stroke-dasharray:3 4}