/* Styles propres au SITE DE DEMONSTRATION (voir app/web/demo.py). S'ajoute a v5.css ;
   ne contient QUE ce qui est specifique a la demo (pastille, bouton « simuler »). */

/* Pastille verte « simulation » en haut a droite (seul marqueur de la demo, decision Al). */
.demo-pill { margin-right: 4px; }

/* Bouton « Reinitialiser » dans la barre haute (a cote de « Quitter »). */
.demo-reset {
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 7px;
  padding: 5px 11px;
  margin-right: 12px;
}
.demo-reset:hover { background: rgba(255, 255, 255, .22); }

/* Bouton « Simuler détection » (affordance propre a la demo : sert a provoquer un
   evenement physique impossible a declencher dans l'app reelle). */
.dev-btns .btn.is-demo {
  grid-column: 1 / -1;
  background: transparent;
  color: var(--amber);
  border: 1px dashed var(--amber);
  font-weight: 600;
}
.dev-btns .btn.is-demo:hover { background: var(--amber-bg); }

/* Cellule de libelle en alarme dans le journal simule. */
#demo-journal td.s-red { color: var(--red); font-weight: 600; }

/* ===================== Synoptique de demo (page Supervision) ===================== */
/* Reutilise superviseur.css (viewer, stage, icones, bottom-sheet). Ici : seulement le
   specifique demo (indice, bouton Sons a bascule, bouton « Simuler » dans la feuille,
   petite legende de couleurs). */
.sv-demo-hint { flex: 1 1 auto; font-size: .82rem; color: var(--muted); }

/* Feuille d'action : espacer le nom de l'element de sa pastille UGL (calque de .dev-name).
   demo.css n'est charge que sur /demo -> la vraie vue supervision n'est pas affectee. */
.sv-sheet-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sv-sound-toggle[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Bouton « Simuler détection » dans la feuille d'action (span pleine largeur). */
.sv-sheet-actions .btn.is-demo {
  grid-column: 1 / -1;
  background: transparent;
  color: var(--amber);
  border: 1px dashed var(--amber);
  font-weight: 600;
}
.sv-sheet-actions .btn.is-demo:hover { background: var(--amber-bg); }

/* Legende des couleurs d'etat (memes teintes que les pastilles du plan). */
.sv-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 12px 2px 0; font-size: .82rem; color: var(--muted);
}
.sv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sv-leg { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid #cbd5e1; background: rgba(148,163,184,.25); }
.sv-leg-normal { border-color: #16a34a; background: rgba(22,163,74,.22); }
.sv-leg-libre  { border-color: #2563eb; background: rgba(37,99,235,.25); }
.sv-leg-armed  { border-color: #b45309; background: rgba(180,83,9,.28); }
.sv-leg-bypass { border-color: #ca8a04; background: rgba(202,138,4,.30); }
.sv-leg-alarm  { border-color: #dc2626; background: rgba(220,38,38,.32); }