/* vp.css — CHARTE UNIQUE du portail ViaPrevent V2.
 *
 * Pourquoi ce fichier : le portail et ses pages outils avaient chacun leur habillage (le portail en
 * Segoe UI vert facon site vitrine, les pages en monospace gris), si bien qu'on avait l'impression de
 * changer d'application a chaque clic. Tout part desormais d'ici — une seule source de verite.
 *
 * Parti pris (hybride retenu avec Domi) : les COULEURS de la marque (celles de viaprevent.com) avec la
 * SOBRIETE de l'ancien portail a1 — cadre net, typo compacte, boutons en majuscules. C'est un outil
 * d'exploitation, pas une vitrine : on privilegie la lisibilite dense au joli.
 *
 * Servi par le statique generique du portail (l'extension .css est dans STATIC_EXT et les assets sont
 * au niveau 0). Modifiable a chaud : aucune recompilation pour changer l'apparence.
 */

:root{
  /* marque (identiques a site_viaprevent) */
  --vert:#1a5f4a; --vert2:#2d8a6e; --menthe:#7dd3c0;
  /* ambiance */
  --fond:#f8f9fa; --txt:#2d2d2d; --gris:#888; --ligne:#e0e0e0;
  --rad:5px; --trait:2px solid var(--vert);
  --rouge:#c33; --orange:#ff8800;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  font-size:13px; line-height:1.5; color:var(--txt); background:var(--fond);
  padding:20px; max-width:560px; margin:10px auto;
}
@media (max-width:640px){ body{ margin:8px; padding:8px; } }

h1{ color:var(--vert); font-size:17px; margin-bottom:12px; }
h2,h3{ color:var(--vert); font-size:14px; }
a{ color:var(--vert2); }
.muted{ color:var(--gris); font-size:11px; }

/* ---- SECTIONS (2026-08-13) : PLUS DE CADRE. Un filet fin gris separe deux sections consecutives
 * (`.panel + .panel`), padding lateral 0 -> le contenu prend toute la largeur = gain de place sur
 * mobile. Demande Domi, applique a TOUT le portail. ---- */
.panel{
  background:transparent; border:0; border-radius:0;
  padding:12px 0; margin:0;
}
.panel + .panel{ border-top:1px solid var(--ligne); }
.panel > label{
  display:block; color:var(--vert); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;
}
.row{ display:flex; flex-direction:column; gap:0; }
.col{ width:100%; }

/* ---- BOUTONS : blancs bordes vert, gras majuscules ; plein pour l'action principale ---- */
button{
  background:#fff; color:var(--vert); border:1px solid var(--vert); border-radius:3px;
  padding:7px 12px; margin:4px 2px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.3px;
}
button:hover{ background:var(--menthe); color:#0d3b2e; }
button.primary,
button.active{ background:var(--vert); color:#fff; border-color:var(--vert); }
button.primary:hover,
button.active:hover{ background:var(--vert2); color:#fff; }
button.danger{ background:var(--rouge); color:#fff; border-color:var(--rouge); }
button.danger:hover{ background:#a00; }
/* Alias historiques des pages outils (go/teal = action principale, on = etat actif, grey = neutre).
 * Conserves pour ne pas avoir a retoucher le HTML et le JS de chaque page. */
button.go,button.teal{ background:var(--vert); color:#fff; border-color:var(--vert); }
button.go:hover,button.teal:hover{ background:var(--vert2); color:#fff; }
button.on{ background:var(--vert2); color:#fff; border-color:var(--vert2); }
button.grey{ background:#fff; color:var(--gris); border-color:#b9c4c0; }
button:disabled,button.disabled{ opacity:.45; cursor:not-allowed; }

/* ---- SAISIE ---- */
input,select,textarea{
  background:#fff; color:var(--txt); border:1px solid #b9c4c0; border-radius:3px;
  padding:6px 9px; font-family:inherit; font-size:13px; width:100%;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--vert); }
label{ display:block; font-size:11px; color:var(--gris); margin-bottom:4px; }

/* ---- ONGLETS (page /box) : le trait vert sert de reglure ---- */
#tabbar{
  display:flex; gap:3px; flex-wrap:wrap; margin:0 0 8px;
  border-bottom:var(--trait); padding:6px 0 0;
  /* menu compact FIXE en haut : reste visible au défilement (2026-08-12) */
  position:sticky; top:0; z-index:30; background:var(--fond);
}
#tabbar .tab{
  margin:0; border:1px solid var(--vert); border-bottom:none; border-radius:5px 5px 0 0;
  background:#fff; color:var(--vert); padding:4px 10px; font-size:11px;
}
#tabbar .tab.active{ background:var(--vert); color:#fff; }
#tabbar .tab.disabled{ opacity:.45; cursor:not-allowed; background:#eef1f0; color:#9aa5a1; border-color:#c9d2ce; }

/* ---- TABLEAUX : en-tete souligne menthe (repris du portail) ---- */
table{ width:100%; border-collapse:collapse; font-size:12px; }
th{ text-align:left; color:var(--gris); font-weight:600; padding:4px 6px; border-bottom:2px solid var(--menthe); }
td{ padding:4px 6px; border-bottom:1px solid #eee; }

/* ---- ETAT DE CONNEXION ---- */
#status{ font-size:13px; font-weight:700; }
.dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.dot.off{ background:var(--rouge); } .dot.on{ background:var(--vert2); }

/* ---- JOURNAL / CONSOLE : le monospace reste legitime ICI (alignement des traces) ---- */
#log,pre,code,.mono{
  font-family:Consolas,'Courier New',monospace; font-size:12px;
  background:#fbfcfb; border:1px solid var(--ligne); border-radius:3px;
}
#log{ padding:10px; height:200px; overflow-y:auto; white-space:pre-wrap; color:#444; }

/* ---- MEDIA ---- */
canvas{ max-width:100%; height:auto; }
video{ background:#000; border:1px solid var(--vert); border-radius:3px; width:100%; }

/* IDENTITE D'UN BOITIER (2026-08-20) : nom, identifiant, flotte. Trois facons de nommer le MEME
   objet — meme libelle, meme police, partout. Elles se lisent d'un coup au lieu d'obliger l'oeil a
   changer de registre entre la liste des boitiers et la page du boitier.
   Vivait dans le CSS du portail seul ; la page boitier ne l'avait pas, d'ou ce passage ici. */
.idpref{color:#888;font-weight:400;font-size:.8rem}