:root {
  --fond: #262626;
  --fond-2: #333;
  --panneau: #c9c9c9;
  --panneau-bord: #ececec;
  --onglet: #d6d6d6;
  --case: #a8a8a8;
  --case-bord: #8a8a8a;
  --texte: #111;
  --texte-clair: #e8e8e8;
  --texte-doux: #9a9a9a;
  --rouge: #e00000;
  --vert: #17c617;
  --tuile: #c4c4c4;
  --tuile-haut: #f2f2f2;
  --tuile-bas: #6d6d6d;
  --tuyau-1: #f4f4f4;
  --tuyau-2: #a9b0b3;
  --rayon: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 30% 0%, #3a3a3a 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, #303030 0%, transparent 55%),
    var(--fond);
  color: var(--texte-clair);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 15px;
}

/* ---------------- Barre du haut ---------------- */
.barre {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(24, 24, 24, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #3c3c3c;
}
.barre h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .2px; }
.sous-titre { font-weight: 400; color: var(--texte-doux); margin-left: 6px; font-size: 14px; }

.statut {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  background: #3a3a3a; font-size: 13px; white-space: nowrap;
}
.statut .point { width: 9px; height: 9px; border-radius: 50%; background: var(--texte-doux); }
.statut[data-etat="ok"] { background: #173d17; color: #c9f5c9; }
.statut[data-etat="ok"] .point { background: var(--vert); box-shadow: 0 0 6px var(--vert); }
.statut[data-etat="hors"] { background: #4a1414; color: #ffd0d0; }
.statut[data-etat="hors"] .point { background: #ff3b3b; }

/* ---------------- Grille principale ---------------- */
/* Disposition fixe identique à l'écran HMI (1068 px de large).
   Sur un écran plus étroit, app.js réduit l'ensemble avec « zoom » pour tenir en largeur. */
.ecran {
  display: grid;
  grid-template-columns: 480px 180px 110px 230px;
  grid-template-areas:
    "silos  silos  pompes extr"
    "select ticket ticket extr"
    "tuyaux tuyaux grille grille";
  gap: 12px;
  width: 1068px;
  margin: 0 auto;
  padding: 16px;
}
.silos       { grid-area: silos; }
.pompes      { grid-area: pompes; }
.extrudeuses { grid-area: extr; }
.selecteurs  { grid-area: select; }
.ticket      { grid-area: ticket; }
.tuyaux      { grid-area: tuyaux; }
.ext-grille  { grid-area: grille; }

/* ---------------- Panneaux ---------------- */
.panneau {
  position: relative;
  background: var(--panneau);
  border: 2px solid var(--panneau-bord);
  border-radius: var(--rayon);
  color: var(--texte);
  padding: 20px 10px 10px;
  margin-top: 12px;
}
.onglet {
  position: absolute; top: -13px; left: 18px;
  margin: 0; padding: 2px 22px;
  background: var(--onglet);
  border: 1px solid #9c9c9c;
  font-size: 15px; font-weight: 400;
  white-space: nowrap;
}
.badge-hl {
  display: none;
  margin-left: 8px; padding: 0 6px;
  background: var(--rouge); color: #fff;
  font-size: 11px; border-radius: 3px; vertical-align: 2px;
}
.perime .badge-hl { display: inline-block; }

.lbl   { font-size: 16px; white-space: nowrap; }
.lbl-c { font-size: 15px; text-align: center; display: block; line-height: 1.1; }
.lbl-c.petit { font-size: 13px; }
.lbl-p { font-size: 13px; white-space: nowrap; }

.val {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 2px 10px;
  background: var(--case);
  border: 1px solid var(--case-bord);
  box-shadow: inset 1px 1px 0 #8f8f8f, inset -1px -1px 0 #c3c3c3;
  font-size: 17px; font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--texte);
  transition: background-color .4s;
}
.val.grande { font-size: 18px; min-height: 32px; }
.val.petite { font-size: 13px; min-height: 22px; padding: 1px 6px; }
.val.mini   { font-size: 11px; min-height: 17px; padding: 0 6px; }
.val.pointille {
  background: transparent; box-shadow: none;
  border: 1px dashed #333; font-size: 15px;
}
.val.flash { background: #cfd8a8; }

/* Tuiles style bouton HMI (non cliquables : lecture seule) */
.tuile, .etat {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 40px; padding: 4px 8px;
  background: var(--tuile);
  border: 2px solid; border-color: var(--tuile-haut) var(--tuile-bas) var(--tuile-bas) var(--tuile-haut);
  font-size: 16px; font-weight: 700; color: var(--texte);
  user-select: none; cursor: default;
}
.etat { transition: background-color .3s, color .3s; }
.etat.actif.rotary { background: var(--vert); }
.etat.actif.verrou,
.etat.actif.motan  { background: var(--rouge); color: #1a0000; }
.etat.inactif.verrou { background: var(--vert); }

/* ---------------- Silos ---------------- */
.silos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-content: start;
}
.silo-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 6px 10px;
  align-items: stretch;
}
.lig-poids, .lig-vitesse {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.lig-poids { grid-column: 1 / -1; }
.lig-poids .val, .lig-vitesse .val { flex: 1; min-width: 0; }
.lig-poids .val { flex: 0 1 65%; }
.bloc-droit { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.bloc-droit .val { width: 100%; }
.bloc-droit .val.petite { width: auto; align-self: center; min-width: 75%; }
.lig-vide { display: flex; align-items: center; justify-content: center; gap: 4px; }

/* Non relié (données à venir) */
.nc .val, .nc .etat { color: #6a6a6a; }
.nc .etat.verrou { background: #b9b9b9; font-weight: 400; }
.perime .val, .perime .etat { opacity: .55; }

/* ---------------- Pompes ---------------- */
.pompes {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-top: 14px;
}
.pompe { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--texte-clair); }
.cache { visibility: hidden; }

.lampe {
  display: inline-block; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #d9d9d9 30%, #8c8c8c 75%, #5a5a5a 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.lampe.on {
  background: radial-gradient(circle at 35% 30%, #eaffea 0%, #4cff4c 35%, #11a011 80%, #0a600a 100%);
  box-shadow: 0 0 8px rgba(40, 255, 40, .7);
}

/* ---------------- Extrudeuses ---------------- */
.extrudeuses { display: flex; flex-direction: column; gap: 8px; }
.extr-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3px 8px; align-items: center;
}
.extr-grille .val.pointille { justify-self: stretch; }
.extr .etat.motan { min-height: 36px; font-size: 13px; font-weight: 400; grid-row: span 2; }
.courant { display: flex; flex-direction: column; align-items: stretch; gap: 1px; grid-row: span 2; }
.courant .lbl-p { font-size: 10px; text-align: center; }

/* ---------------- Sélecteurs Silo 15/16 ---------------- */
.selecteurs { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.sel-ligne {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto minmax(110px, auto);
  align-items: center; gap: 8px;
  font-size: 13px;
}
.sel-ligne .tuyau-h { height: 14px; }
.sel-ligne .etat { min-height: 38px; font-size: 14px; font-weight: 400; background: var(--vert); }

/* ---------------- Ticket ---------------- */
.ticket { display: flex; align-items: center; justify-content: center; }
.ticket-cadre { width: 100%; max-width: 230px; padding: 22px; margin: 0; }
.ticket-cadre .tuile { min-height: 64px; }

/* ---------------- Tuyauterie ---------------- */
.tuyaux { min-width: 0; }
.tuyau-ligne { margin-bottom: 8px; }
.tuyau-stations {
  display: grid; grid-template-columns: repeat(8, 1fr);
  font-size: 12px; color: var(--texte-clair);
  margin-bottom: 3px;
}
.station { display: flex; align-items: center; gap: 5px; justify-content: center; white-space: nowrap; }
.station .lampe { width: 20px; height: 20px; }
.tuyau-h {
  height: 16px; border-radius: 8px;
  background: linear-gradient(180deg, var(--tuyau-2) 0%, var(--tuyau-1) 45%, var(--tuyau-2) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.tuyau-nom { font-size: 12px; color: var(--texte-clair); margin-top: 2px; }

/* ---------------- Grille Ext ---------------- */
.ext-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; align-content: start;
}
.ext-grille .tuile { min-height: 40px; font-size: 12px; font-weight: 400; line-height: 1.25; }

/* ---------------- Pied ---------------- */
.pied {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto;
  padding: 4px 16px max(16px, env(safe-area-inset-bottom));
  font-size: 12px; color: var(--texte-doux);
}

/* ---------------- Téléphone : seule la barre du haut s'adapte ---------------- */
@media (max-width: 640px) {
  .sous-titre { display: none; }
}