/* SANAGA — salle de contrôle (IHM ISA-101) : chargée uniquement par salle-de-controle.html et en/control-room.html */
@layer pages {
  /* ---------- Salle de contrôle (IHM ISA-101) ---------- */
  .cr-intro { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--space-5); }
  .cr-intro h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); }
  .cr-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-block-start: var(--space-3); }
  .hmi { --hmi-fond: #DDE1E4; --hmi-panneau: #EEF0F2; --hmi-ink: #1B2026; --hmi-libelle: #4A545D; --hmi-valeur: #0B3D73; --hmi-conduite: #6B7580; --hmi-equipement: #3B444C; --hmi-trait: #B5BCC3;
    --alarme-1: #C8102E; --alarme-2: #E8590C; --alarme-3: #F5B800; --alarme-4: #0E8C99;
    --pen-1: #1F5FAD; --pen-2: #0F7C80; --pen-3: #6A4C9C; --pen-4: #8A5A1C; --pen-5: #3B444C;
    --hmi-focus: #0B3D73;
    background: var(--hmi-fond); color: var(--hmi-ink); border: 1px solid #8A949E; padding: 8px; font-size: .92rem; line-height: 1.45; position: relative; }
  :root[data-theme="dark"] .hmi { --hmi-fond: #15191E; --hmi-panneau: #1F252C; --hmi-ink: #E6EAED; --hmi-libelle: #A9B2BA; --hmi-valeur: #8EC2FF; --hmi-conduite: #6A7681; --hmi-equipement: #C9D1D8; --hmi-trait: #323B44; --alarme-1: #EF4058; --alarme-2: #F07A33; --alarme-4: #3CC4D2; --pen-1: #7FB0EA; --pen-2: #4FC9C2; --pen-3: #B9A3F0; --pen-4: #E0B070; --pen-5: #C9D1D8; --hmi-focus: #8EC2FF; border-color: #323B44; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hmi { --hmi-fond: #15191E; --hmi-panneau: #1F252C; --hmi-ink: #E6EAED; --hmi-libelle: #A9B2BA; --hmi-valeur: #8EC2FF; --hmi-conduite: #6A7681; --hmi-equipement: #C9D1D8; --hmi-trait: #323B44; --alarme-1: #EF4058; --alarme-2: #F07A33; --alarme-4: #3CC4D2; --pen-1: #7FB0EA; --pen-2: #4FC9C2; --pen-3: #B9A3F0; --pen-4: #E0B070; --pen-5: #C9D1D8; --hmi-focus: #8EC2FF; border-color: #323B44; } }
  .hmi :focus-visible { outline: 3px solid var(--hmi-focus); outline-offset: 2px; }
  .hmi a { color: var(--hmi-valeur); }
  .hmi p, .hmi li { max-inline-size: none; }
  .hmi__wrap { inline-size: min(100% - 2 * var(--gutter), 120rem); margin-inline: auto; }
  .hmi h2, .hmi h3 { font-family: var(--font-mono); font-stretch: 100%; font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hmi-libelle); line-height: 1.3; }
  .hmi button { font-size: .88rem; }
  .hbtn { min-block-size: 44px; padding: .4rem .8rem; background: var(--hmi-panneau); border: 1.5px solid var(--hmi-libelle); border-radius: 2px; color: var(--hmi-ink); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; justify-content: center; }
  .hbtn:hover { border-color: var(--hmi-ink); background: var(--hmi-fond); }
  .hbtn[aria-pressed="true"] { background: var(--hmi-equipement); color: var(--hmi-panneau); border-color: var(--hmi-equipement); }
  .hbtn[aria-disabled="true"], .hbtn:disabled { opacity: .5; cursor: not-allowed; }
  .hbtn--primary { border-color: var(--hmi-valeur); color: var(--hmi-valeur); }
  .hbtn svg { inline-size: 1rem; block-size: 1rem; }
  .hmi__bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px; background: var(--hmi-panneau); border: 1px solid var(--hmi-trait); }
  .hmi__bar .grp { display: inline-flex; gap: 4px; align-items: center; }
  .hmi__bar .grp > legend, .hmi__bar .lbl { font-family: var(--font-mono); font-size: .7rem; color: var(--hmi-libelle); text-transform: uppercase; margin-inline-end: 4px; float: none; padding: 0; }
  .hmi__bar fieldset.grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .hmi__clock { font-family: var(--font-mono); font-size: .85rem; }
  .hmi__clock output { font-weight: 500; }
  .hbadge { font-family: var(--font-mono); font-size: .72rem; padding: .25rem .5rem; border: 1.5px solid var(--hmi-ink); font-weight: 500; text-transform: uppercase; }
  .seg { display: inline-flex; flex-wrap: wrap; max-inline-size: 100%; }
  @media (max-width: 24em) { .seg label { padding-inline: .5rem; } }
  .seg label { min-block-size: 44px; padding: .4rem .75rem; border: 1.5px solid var(--hmi-libelle); margin-inline-start: -1.5px; display: inline-flex; align-items: center; cursor: pointer; font-weight: 600; background: var(--hmi-panneau); position: relative; }
  .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .seg label:has(input:checked) { background: var(--hmi-equipement); color: var(--hmi-panneau); border-color: var(--hmi-equipement); z-index: 1; }
  .seg label:has(input:focus-visible) { outline: 3px solid var(--hmi-focus); outline-offset: 2px; z-index: 2; }
  .hmi__more { display: contents; }
  details.hmi__settings { display: none; }
  html:not(.js) .hmi__bar, html:not(.js) .hmi-js { display: none !important; }
  .hmi-nojs { display: none; padding: var(--space-4); border: 2px solid var(--hmi-ink); background: var(--hmi-panneau); font-weight: 600; margin-block-end: 8px; }
  html:not(.js) .hmi-nojs { display: block; }
  .hmi__scen { display: none; padding: 8px 12px; background: var(--hmi-panneau); border: 1px solid var(--hmi-ink); border-inline-start: 6px solid var(--hmi-ink); margin-block-start: 8px; gap: .25rem 1rem; align-items: center; flex-wrap: wrap; }
  .hmi__scen.is-on { display: flex; }
  .hmi__scen p { flex: 1 1 18rem; }
  .hmi__why { background: var(--hmi-panneau); border: 1px solid var(--hmi-trait); padding: 8px 12px; margin-block-start: 8px; }
  .hmi__sub { display: none; }
  .hmi__summary { display: grid; gap: 8px; padding: 8px 12px; background: var(--hmi-panneau); border: 1px solid var(--hmi-trait); margin-block-start: 8px; align-items: center; }
  @media (min-width: 64em) { .hmi__summary { grid-template-columns: auto 1fr auto; } }
  .sum-counts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .sum-count { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-weight: 500; min-inline-size: 3.8rem; padding: 2px 6px; border: 1px solid var(--hmi-trait); }
  .sum-top { min-block-size: 1.5em; font-weight: 600; }
  .sum-top .mono { color: var(--hmi-libelle); font-weight: 400; }
  .pict { inline-size: 1.35rem; block-size: 1.35rem; flex: none; overflow: visible; }
  .pict path, .pict rect, .pict circle { stroke: #191D22; stroke-width: 1.5; stroke-linejoin: round; paint-order: stroke; }
  .pict text { font-family: var(--font-mono); font-size: 9px; font-weight: 500; fill: #191D22; text-anchor: middle; }
  .pict--1 path { fill: var(--alarme-1); } .pict--1 text { fill: #fff; }
  .pict--2 path { fill: var(--alarme-2); } .pict--3 rect { fill: var(--alarme-3); } .pict--4 circle { fill: var(--alarme-4); }
  .pict--ret path, .pict--ret rect, .pict--ret circle { fill: none !important; stroke: var(--hmi-ink); stroke-width: 2; paint-order: normal; }
  .pict--ret text { fill: var(--hmi-ink); }
  .hmi__kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-block-start: 8px; }
  @media (min-width: 64em) { .hmi__kpis { grid-template-columns: 1.6fr repeat(4, 1fr); } }
  .kpi { background: var(--hmi-panneau); border: 1px solid var(--hmi-trait); padding: 8px 12px; display: grid; gap: 2px; align-content: start; min-inline-size: 0; }
  .kpi--main { grid-column: 1 / -1; }
  @media (min-width: 64em) { .kpi--main { grid-column: auto; } }
  .kpi__l { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; color: var(--hmi-libelle); letter-spacing: .04em; }
  .kpi__v { font-family: var(--font-mono); font-weight: 500; font-size: 1.7rem; line-height: 1.1; color: var(--hmi-valeur); font-variant-numeric: tabular-nums; }
  .kpi--main .kpi__v { font-size: 2.6rem; }
  .kpi__v small { font-size: .7rem; color: var(--hmi-libelle); font-weight: 400; }
  .kpi__f { font-family: var(--font-mono); font-size: .75rem; color: var(--hmi-libelle); }
  .kpi__bar { block-size: 8px; background: var(--hmi-trait); margin-block-start: 4px; }
  .kpi__bar i { display: block; block-size: 100%; background: var(--hmi-equipement); inline-size: 0; }
  .kpi svg.spark { inline-size: 100%; block-size: 28px; color: var(--hmi-valeur); }
  [data-detail] { display: none; }
  .hmi[data-role="direction"] [data-detail] { display: grid; }
  .hmi__panels { display: grid; gap: 8px; margin-block-start: 8px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 80em) {
    .hmi__panels { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .hmi__panels > .panel { grid-column: 1 / -1; }
    .hmi__panels > .panel:nth-child(1 of :not([hidden])) { grid-column: span 8; }
    .hmi__panels > .panel:nth-child(2 of :not([hidden])) { grid-column: span 4; }
  }
  .panel { container: panel / inline-size; background: var(--hmi-panneau); border: 1px solid var(--hmi-trait); padding: 10px 12px 12px; min-inline-size: 0; scroll-margin-block-start: calc(var(--header-h) + 60px); }
  .panel[hidden] { display: none; }
  .panel > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-end: 8px; }
  .syn { display: grid; gap: 8px; }
  @media (min-width: 48em) { .syn { grid-template-columns: 1fr 1fr; } }
  .syn figure { margin: 0; min-inline-size: 0; }
  .syn figcaption { font-family: var(--font-mono); font-size: .72rem; color: var(--hmi-libelle); text-transform: uppercase; }
  .syn--compact figure:not(.is-main) { display: none; }
  .syn--compact { grid-template-columns: 1fr; max-inline-size: 32rem; }
  .syn--c { margin-block-start: 8px; }
  svg.pid { inline-size: 100%; block-size: auto; background: var(--hmi-fond); border: 1px solid var(--hmi-trait); color: var(--hmi-ink); font-family: var(--font-mono); }
  .pid text { fill: var(--hmi-ink); font-family: var(--font-mono); }
  .pid .lbl { font-size: 22px; fill: var(--hmi-libelle); }
  .pid .val { font-size: 25px; font-weight: 500; fill: var(--hmi-valeur); }
  .pid .unit { font-size: 20px; fill: var(--hmi-libelle); }
  .pid .tagt { font-size: 21px; fill: var(--hmi-libelle); }
  .pid .st { font-size: 21px; fill: var(--hmi-ink); }
  .pid .big { font-size: 38px; font-weight: 500; fill: var(--hmi-valeur); }
  .pid .pipe { fill: none; stroke: var(--hmi-conduite); stroke-width: 6; stroke-linejoin: round; }
  .pid .flow { fill: none; stroke: var(--hmi-fond); stroke-width: 2.4; stroke-dasharray: 8 12; opacity: 0; }
  .pid .vbox { fill: var(--hmi-panneau); stroke: var(--hmi-conduite); stroke-width: 1.5; }
  .pid .vbox[data-alarm] { stroke-width: 4; }
  .pid .vbox[data-alarm="1"] { stroke: var(--alarme-1); } .pid .vbox[data-alarm="2"] { stroke: var(--alarme-2); } .pid .vbox[data-alarm="3"] { stroke: var(--alarme-3); } .pid .vbox[data-alarm="4"] { stroke: var(--alarme-4); }
  .pid .shape { fill: var(--hmi-panneau); stroke: var(--hmi-equipement); stroke-width: 3; }
  .pid .sym { fill: none; stroke: var(--hmi-equipement); stroke-width: 3; stroke-linejoin: round; stroke-linecap: square; }
  .pid .level { fill: var(--hmi-equipement); opacity: .45; transition: y .4s linear, height .4s linear; }
  .pid .hatch { fill: url(#hatch); stroke: var(--hmi-equipement); stroke-width: 3; }
  .pid .eq[data-state="run"] .shape.fill { fill: var(--hmi-equipement); }
  .pid .eq[data-state="run"] .sym.inv { stroke: var(--hmi-panneau); }
  .pid .eq[data-state="trip"] .shape, .pid .eq[data-state="fault"] .shape { stroke-width: 5; stroke-dasharray: 8 5; }
  .pid .eq[data-state="starved"] .shape, .pid .eq[data-state="blocked"] .shape { stroke-dasharray: 3 4; }
  .pid .eq { cursor: pointer; }
  .pid .eq .focus-ring { fill: none; stroke: var(--hmi-focus); stroke-width: 4; display: none; }
  .pid .eq:focus { outline: none; }
  .pid .eq:focus-visible .focus-ring { display: block; }
  .pid .eq:hover .shape { stroke: var(--hmi-valeur); }
  .pid .mode { font-size: 17px; font-weight: 500; fill: var(--hmi-libelle); }
  .pid .bottles { fill: none; stroke: var(--hmi-equipement); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.1 17; opacity: 0; }
  .pid .belt { fill: none; stroke: var(--hmi-conduite); stroke-width: 12; stroke-linecap: butt; opacity: .55; }
  .pid .al-slot { pointer-events: none; }
  .mimic-tip { font-size: .8rem; color: var(--hmi-libelle); margin-block-start: 6px; }
  .tabs { display: flex; gap: 4px; flex-wrap: wrap; border-block-end: 2px solid var(--hmi-equipement); margin-block-end: 8px; }
  .tab { min-block-size: 44px; padding: .4rem .9rem; background: var(--hmi-fond); border: 1px solid var(--hmi-trait); border-block-end: 0; font-weight: 600; color: var(--hmi-ink); }
  .tab[aria-selected="true"] { background: var(--hmi-equipement); color: var(--hmi-panneau); border-color: var(--hmi-equipement); }
  .afilter { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-block-end: 8px; font-size: .85rem; }
  .afilter label { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 32px; cursor: pointer; }
  .afilter input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--hmi-equipement); }
  .hmi .tbl-wrap { background: var(--hmi-fond); border-color: var(--hmi-trait); }
  .hmi .tbl { font-size: .85rem; }
  .hmi .tbl thead th { background: var(--hmi-fond); color: var(--hmi-libelle); font-family: var(--font-mono); font-stretch: 100%; font-weight: 500; }
  .hmi .tbl th, .hmi .tbl td { border-color: var(--hmi-trait); padding: .45rem .6rem; }
  .hmi .tbl tbody tr:nth-child(even) { background: transparent; }
  .hmi .tbl caption { color: var(--hmi-libelle); font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; font-stretch: 100%; font-weight: 500; padding: .4rem .6rem; }
  .arow--unack td { font-weight: 700; }
  .arow--unack .st-txt { text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 1px; }
  .al-actions { display: flex; flex-wrap: wrap; gap: 4px; }
  .al-actions .hbtn { min-block-size: 44px; padding-inline: .6rem; font-size: .8rem; }
  .al-badge { font-family: var(--font-mono); font-size: .68rem; border: 1px solid var(--hmi-ink); padding: 0 .3rem; margin-inline-start: .3rem; text-transform: uppercase; }
  .al-empty { padding: var(--space-5); text-align: center; color: var(--hmi-libelle); }
  .al-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-block-start: 8px; }
  @container panel (max-inline-size: 46rem) {
    .atbl thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .atbl, .atbl tbody, .atbl tr, .atbl td { display: block; }
    .atbl tr { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; padding: 8px; border-block-start: 1px solid var(--hmi-trait); }
    .atbl td { border: 0 !important; padding: 0 !important; }
    .atbl td[data-c="p"] { grid-row: 1; grid-column: 1; } .atbl td[data-c="tag"] { grid-row: 1; grid-column: 2; font-family: var(--font-mono); }
    .atbl td[data-c="t"] { grid-row: 1; grid-column: 3; font-family: var(--font-mono); }
    .atbl td[data-c="msg"] { grid-column: 1 / -1; font-weight: 600; } .atbl td[data-c="val"] { grid-column: 1 / -1; font-family: var(--font-mono); font-size: .8rem; }
    .atbl td[data-c="st"] { grid-column: 1 / -1; } .atbl td[data-c="act"] { grid-column: 1 / -1; padding-block-start: 4px !important; }
  }
  .pens { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-block-end: 8px; }
  .pen { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: .2rem .6rem; border: 1px solid var(--hmi-trait); background: var(--hmi-fond); font-size: .8rem; }
  .pen input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--hmi-equipement); }
  .pen button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; min-block-size: 40px; font-family: var(--font-mono); font-size: .78rem; color: var(--hmi-ink); }
  .pen button[aria-pressed="true"] { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
  .pen svg { inline-size: 28px; block-size: 8px; color: var(--c); }
  .trend-opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: 8px; }
  .trend { position: relative; border: 1px solid var(--hmi-trait); background: var(--hmi-fond); touch-action: pan-y; }
  .trend:focus-visible { outline: 3px solid var(--hmi-focus); outline-offset: 2px; }
  .trend canvas { inline-size: 100%; block-size: 220px; }
  @media (min-width: 64em) { .trend canvas { block-size: 280px; } }
  .trend-read { font-family: var(--font-mono); font-size: .8rem; padding: 4px 0; min-block-size: 2.4em; display: block; color: var(--hmi-ink); }
  .meas-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-block-end: 8px; }
  .meas-opts label { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 40px; cursor: pointer; }
  .journal { font-family: var(--font-mono); font-size: .78rem; max-block-size: 22rem; overflow: auto; }
  .logbox { border: 1px solid var(--hmi-trait); background: var(--hmi-fond); }
  .health { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .health__i { border: 1px solid var(--hmi-trait); background: var(--hmi-fond); padding: 8px 12px; display: grid; gap: 2px; font-size: .82rem; }
  .health__i b { font-family: var(--font-mono); font-weight: 500; }
  .loss-bars { display: grid; gap: 6px; font-size: .85rem; }
  .loss-bars div { display: grid; grid-template-columns: 11rem 1fr 4rem; gap: 8px; align-items: center; }
  .loss-bars svg { inline-size: 100%; block-size: 14px; color: var(--hmi-equipement); }
  .loss-bars b { font-family: var(--font-mono); font-weight: 500; text-align: end; }
  @media (max-width: 40em) { .loss-bars div { grid-template-columns: 1fr 4rem; } .loss-bars svg { grid-column: 1 / -1; } }
  .perf { font-size: .85rem; margin-block-start: 8px; display: flex; gap: 4px 16px; flex-wrap: wrap; font-family: var(--font-mono); }
  .hmi dialog.dlg { --surface: var(--hmi-panneau); color: var(--hmi-ink); --line: var(--hmi-trait); background: var(--hmi-panneau); border-color: var(--hmi-equipement); }
  .hmi-dlg-vals { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .hmi-dlg-vals div { border: 1px solid var(--hmi-trait); padding: 6px 10px; background: var(--hmi-fond); }
  .hmi-dlg-vals dt { font-family: var(--font-mono); font-size: .7rem; color: var(--hmi-libelle); }
  .hmi-dlg-vals dd { font-family: var(--font-mono); font-weight: 500; font-size: 1.15rem; color: var(--hmi-valeur); }
  .rat { display: grid; gap: 4px 12px; grid-template-columns: auto 1fr; font-size: .9rem; }
  .rat dt { font-family: var(--font-mono); font-size: .75rem; color: var(--hmi-libelle); text-transform: uppercase; padding-block-start: .15rem; }
  .rat dd { max-inline-size: none; }
  .hmi .field > label, .hmi .choices > legend { font-size: .88rem; }
  .hmi dialog :is(input:not([type=checkbox], [type=radio]), select, textarea) { background: var(--hmi-fond); color: var(--hmi-ink); border-color: var(--hmi-libelle); }
  .hmi .choice { background: var(--hmi-fond); border-color: var(--hmi-libelle); color: var(--hmi-ink); }
  .hmi .choice:has(input:checked) { background: var(--hmi-panneau); border-color: var(--hmi-equipement); box-shadow: inset 4px 0 0 var(--hmi-equipement); }
  .hmi .field__hint { color: var(--hmi-libelle); }
  .hmi .field__err { color: var(--hmi-ink); }
  .hmi-subnav { display: none; }
  @media (max-width: 79.99em) {
    .hmi-subnav { display: flex; gap: 4px; position: sticky; inset-block-start: var(--header-h); z-index: 30; background: var(--hmi-panneau); border: 1px solid var(--hmi-trait); padding: 4px; margin-block-start: 8px; overflow-x: auto; }
    html:not(.js) .hmi-subnav { display: none; }
    .hmi-subnav a { flex: none; min-block-size: 44px; display: inline-flex; align-items: center; padding: 0 .8rem; text-decoration: none; font-weight: 600; border: 1px solid var(--hmi-trait); background: var(--hmi-fond); color: var(--hmi-ink); }
  }
  .read-grid { display: grid; gap: var(--space-5); }
  @media (min-width: 64em) { .read-grid { grid-template-columns: repeat(3, 1fr); } }
  .legend-prio { display: grid; gap: .5rem; list-style: none; padding: 0; }
  .legend-prio li { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
  .static-hmi { display: none; }
  html:not(.js) .static-hmi { display: block; }
  .hmi:focus-within .mimic-tip { color: var(--hmi-ink); }
  /* Mouvement */
  @media (prefers-reduced-motion: no-preference) {
    .pid .flow.is-flowing { opacity: 1; animation: flow var(--flow-dur, 1.2s) linear infinite; }
    .pid .bottles.is-moving { opacity: 1; animation: flow var(--flow-dur, 1.4s) linear infinite; }
    .pict.is-blink { animation: blink 1s steps(1) infinite; }
    @keyframes flow { to { stroke-dashoffset: -20; } }
    @keyframes blink { 50% { opacity: .15; } }
  }
  @media (prefers-reduced-motion: reduce) {
    .pid .flow.is-flowing { opacity: 1; stroke-dasharray: 2 18; }
    .pid .bottles.is-moving { opacity: 1; }
    .pid .level { transition: none; }
    .pict.is-blink + .ast, .is-blink-ast { display: inline; }
  }
  .ast { display: none; font-weight: 700; }
  @media (prefers-reduced-motion: reduce) { .ast { display: inline; } }
  .legend-prio { --alarme-1: #C8102E; --alarme-2: #E8590C; --alarme-3: #F5B800; --alarme-4: #0E8C99; --hmi-ink: var(--ink); }
  :root[data-theme="dark"] .legend-prio { --alarme-1: #EF4058; --alarme-2: #F07A33; --alarme-4: #3CC4D2; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .legend-prio { --alarme-1: #EF4058; --alarme-2: #F07A33; --alarme-4: #3CC4D2; } }
  /* Ajustements */
  .pid .pict { inline-size: 26px; block-size: 26px; }
  .syn figure.syn--c { grid-column: 1 / -1; }
  @media (min-width: 48em) { .syn figure.syn--c svg { max-block-size: 14rem; } }
  .hmi .hmi-subnav a:focus-visible { outline-offset: -3px; }
  html:not(.js) .hmi .hmi-js, html:not(.js) .hmi [data-act] { display: none; }
  .kpi--span2 { grid-column: span 2; }
  .kpi--rows2 { grid-row: span 2; }
  .seg--plain { border: 0; padding: 0; margin: 0; }
  .pen--plain { border: 0; background: none; }
  .hmi__why--wide { flex: 1 1 100%; }
  .pid .tagt { font-size: 23px; } .pid .st { font-size: 22px; } .pid .unit { font-size: 21px; } .pid .val { font-size: 26px; } .pid .lbl { font-size: 23px; }
  @media (max-width: 40em) { .hmi { padding: 4px; } .hmi__wrap { inline-size: min(100% - 16px, 120rem); } .panel { padding: 8px 6px 10px; } .hmi__panels, .hmi__kpis, .hmi__summary { gap: 6px; } }
  .pid .inv-t { fill: var(--hmi-panneau); }
  .hmi .tbl .num { white-space: nowrap; }
  @media print { .hmi__panels > .panel { break-inside: avoid; } }
  .pid .tagt--st { font-size: 24px; font-weight: 500; fill: var(--hmi-ink); }
  .pid .st--box { font-size: 20px; }
  .pid .cnt { font-size: 18px; fill: var(--hmi-libelle); font-variant-numeric: tabular-nums; }
  .pid .tagt--s { font-size: 18px; }
  .pid .lbl-bg { fill: var(--hmi-panneau); stroke: none; }
}