/* ============================================================
   UNISTA — IHM Îlot de scotchage
   Design tokens — High-Performance HMI (ISA-101) / ISA-18.2
   ============================================================ */

:root {
  /* --- Chrome (bandeau, navigation, pied) : sombre, sobre --- */
  --chrome-bg:      #1a2026;
  --chrome-bg-2:    #222b33;
  --chrome-bg-3:    #2b353e;
  --chrome-line:    #36424d;
  --chrome-line-2:  #475563;
  --chrome-txt:     #e9eef2;
  --chrome-txt-dim: #97a4b0;
  --chrome-txt-mut: #6c7984;

  /* --- Zone process / canvas synoptique : gris neutre haute-perf --- */
  --canvas-bg:      #c3c9ce;
  --canvas-bg-2:    #b6bdc3;
  --canvas-grid:    #aeb5bb;
  --canvas-line:    #5b656d;

  /* --- Panneaux de données (tables, cartes) : clair, fort contraste --- */
  --panel-bg:       #f3f5f7;
  --panel-bg-2:     #e7ebee;
  --panel-bg-3:     #dde2e6;
  --panel-line:     #cbd2d8;
  --panel-line-2:   #b7c0c7;
  --panel-txt:      #161d24;
  --panel-txt-dim:  #54616c;
  --panel-txt-mut:  #7d8993;

  /* --- Équipement (état normal = neutre, principe high-perf HMI) --- */
  --equip-fill:     #e3e7ea;
  --equip-fill-2:   #d2d8dd;
  --equip-line:     #3b454e;
  --equip-line-2:   #5a6770;
  --equip-txt:      #1c2429;

  /* --- États machine --- */
  --st-run:         #1f9d57;   /* Marche */
  --st-run-soft:    #e2f3ea;
  --st-stop:        #8a97a3;   /* Arrêt */
  --st-stop-soft:   #e7ebee;
  --st-fault:       #c8102e;   /* Défaut */
  --st-fault-soft:  #fbe5e8;
  --st-warn:        #e8740c;   /* Avertissement */
  --st-warn-soft:   #fdeede;

  /* --- Alarmes ISA-18.2 (priorités) --- */
  --isa-p1:         #c8102e;   /* Critique  */
  --isa-p1-d:       #8f0a20;
  --isa-p2:         #e8740c;   /* Haute     */
  --isa-p2-d:       #a8540a;
  --isa-p3:         #f2c200;   /* Moyenne   */
  --isa-p3-d:       #b89200;
  --isa-p4:         #2e6fd6;   /* Basse     */
  --isa-p4-d:       #2153a3;
  --isa-ok:         #1f9d57;   /* Normal/RAZ */

  /* --- Accents UI --- */
  --accent:         #2e6fd6;
  --accent-d:       #2153a3;

  /* --- Rayons / ombres --- */
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 11px;
  --shadow-1: 0 1px 2px rgba(10,15,20,0.18);
  --shadow-2: 0 4px 14px rgba(10,15,20,0.22);
  --shadow-3: 0 10px 30px rgba(10,15,20,0.30);

  /* --- Échelle typo (base IHM, lisible) --- */
  --fs-xxs: 11px;
  --fs-xs:  13px;
  --fs-sm:  15px;
  --fs-md:  17px;
  --fs-lg:  20px;
  --fs-xl:  26px;
  --fs-2xl: 34px;
  --fs-3xl: 46px;

  --touch: 56px;             /* cible tactile minimale */

  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0d1115;
  font-family: var(--font-sans);
  color: var(--chrome-txt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Stage : plein écran, letterbox noir, centre le canvas 1366x768 */
#stage {
  position: fixed;
  inset: 0;
  background: #0d1115;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#hmi {
  width: 1366px;
  height: 768px;
  position: relative;
  transform-origin: center center;
  background: var(--chrome-bg);
  overflow: hidden;
  box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,0.6);
}

/* tabular figures everywhere numeric */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* utilitaires scrollbar discrète sur panneaux clairs */
.scroll-light::-webkit-scrollbar { width: 12px; height: 12px; }
.scroll-light::-webkit-scrollbar-track { background: var(--panel-bg-2); }
.scroll-light::-webkit-scrollbar-thumb { background: var(--panel-line-2); border-radius: 6px; border: 3px solid var(--panel-bg-2); }
.scroll-dark::-webkit-scrollbar { width: 12px; height: 12px; }
.scroll-dark::-webkit-scrollbar-track { background: var(--chrome-bg-2); }
.scroll-dark::-webkit-scrollbar-thumb { background: var(--chrome-line-2); border-radius: 6px; border: 3px solid var(--chrome-bg-2); }

@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(200,16,46,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(200,16,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); }
}
.blink { animation: blink 1s steps(1) infinite; }

/* ---------- Synoptique ---------- */
.syn-wrap { position: relative; }
.syn-svg { display: block; }
.syn-parts-layer { position: absolute; inset: 0; pointer-events: none; }

@keyframes syn-flow {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
.syn-part {
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 24px;
  offset-path: path("M 8 128 L 600 128 L 726 128 L 726 596");
  offset-rotate: 0deg;
  animation: syn-flow 14s linear infinite;
}
.syn-part-box {
  position: relative;
  width: 30px; height: 24px;
  background: linear-gradient(160deg, #d8a566, #b9853f);
  border: 1.5px solid #8a5e28;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), inset 0 0 0 4px rgba(255,255,255,0.10);
}
.syn-part-box::after {
  content: "";
  position: absolute;
  left: 50%; top: 0; transform: translateX(-50%);
  width: 5px; height: 100%;
  background: rgba(255,255,255,0.45);
}

@keyframes syn-arrow-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.9; }
}
.syn-arrow { animation: syn-arrow-pulse 1.4s ease-in-out infinite; }

@keyframes syn-tape-flash {
  0%, 78%   { opacity: 0; }
  82%, 92%  { opacity: 0.85; }
  100%      { opacity: 0; }
}
.syn-tape { animation: syn-tape-flash 2.4s ease-in-out infinite; }