/* Tototercom — styles communs (pupitre + régie). Polices embarquées : fonctionne hors Internet. */
@font-face { font-family: 'Plex'; src: url('vendor/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('vendor/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Cond'; src: url('vendor/fonts/ibm-plex-sans-condensed-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Cond'; src: url('vendor/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --corps: #20262c;     /* le châssis du pupitre */
  --corps-2: #262d34;
  --touche: #2c343c;    /* une touche au repos */
  --touche-haut: #36404a;
  --trait: #3a444e;
  --texte: #e8ecef;
  --discret: #8a96a3;
  --coupe: #e5484d;     /* coupé, erreur */
  --ok: #46a758;        /* connecté */
  --attente: #f5a524;   /* en cours */
  --r: 6px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--corps); color: var(--texte); font: 15px/1.45 'Plex', system-ui, sans-serif; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid #9ec5ff; outline-offset: 2px; }
a { color: #9ec5ff; }
.cond { font-family: 'Plex Cond', 'Plex', sans-serif; }
.discret { color: var(--discret); }
.cache { display: none !important; }

/* Barre du haut */
.barre { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--corps-2); border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.barre h1 { font: 600 18px 'Plex Cond', sans-serif; margin: 0; letter-spacing: .01em; }
.barre .espace { flex: 1; }
.voyant { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--discret); }
.voyant::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--trait); }
.voyant.on::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.voyant.wait::before { background: var(--attente); }
.voyant.off::before { background: var(--coupe); }

/* Boutons */
.btn { background: var(--touche); border: 1px solid var(--trait); border-radius: var(--r); padding: 7px 12px; }
.btn:hover { background: var(--touche-haut); }
.btn.danger { border-color: var(--coupe); color: #ffb3b5; }
.btn.danger.plein { background: var(--coupe); color: #fff; font-weight: 600; }
.btn.petit { padding: 3px 8px; font-size: 13px; }

/* Formulaires */
.champ { display: grid; gap: 4px; margin-bottom: 12px; }
.champ label { font-size: 13px; color: var(--discret); }
.champ input, .champ select { background: #171c21; border: 1px solid var(--trait); border-radius: var(--r); padding: 8px 10px; }
.boite { max-width: 380px; margin: 12vh auto; padding: 24px; background: var(--corps-2); border: 1px solid var(--trait); border-radius: 10px; }
.boite h1 { font: 600 26px 'Plex Cond', sans-serif; margin: 0 0 4px; }
.boite p { margin: 0 0 18px; }
.erreur { color: #ffb3b5; min-height: 1.4em; font-size: 14px; }
.case { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--discret); margin-bottom: 14px; }

/* Message flottant */
#toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #11161a; border: 1px solid var(--trait); padding: 9px 14px; border-radius: var(--r); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; }
#toast.vu { opacity: 1; }
#toast.mal { border-color: var(--coupe); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }