/* Page « État du Raspberry Pi » (public/js/pages/machine.js) — dans son propre fichier, comme liaison-twitch.css :
   style.css est déjà très au-dessus de 400 lignes. Mêmes couleurs que les badges du panneau (vert / orange / rouge). */
.mch-page { --mch-ok: #2ecc71; --mch-warn: #ffb020; --mch-alert: #ff3860; --mch-neutral: #00e5ff; }

.mch-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.mch-toolbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.mch-stamp { font-size: 13px; }

.mch-banner { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 1px solid var(--tone, var(--border)); background: color-mix(in srgb, var(--tone, #8c93a6) 13%, transparent); color: var(--text); }
.mch-banner:empty { display: none; }
.mch-banner-ok { --tone: var(--mch-ok); }
.mch-banner-warn { --tone: var(--mch-warn); }
.mch-banner-alert { --tone: var(--mch-alert); }
.mch-banner-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 10px var(--tone); }
.mch-banner-alert .mch-banner-dot { animation: mch-pulse 1.4s ease-in-out infinite; }
@keyframes mch-pulse { 50% { opacity: 0.35; } }

.mch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 16px; }

.mch-tile {
  --tone: var(--mch-neutral);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--tone) 9%, transparent), transparent 55%),
    var(--bg-elevated);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
/* Liseré gauche à la couleur de l'état : lisible d'un coup d'œil, même sans lire les chiffres. */
.mch-tile::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone); opacity: 0.85; }
.mch-tile-ok { --tone: var(--mch-ok); }
.mch-tile-warn { --tone: var(--mch-warn); }
.mch-tile-alert { --tone: var(--mch-alert); border-color: color-mix(in srgb, var(--mch-alert) 55%, var(--border)); }
.mch-tile-neutral { --tone: var(--mch-neutral); }

.mch-tile-head { display: flex; align-items: center; gap: 8px; }
.mch-tile-icon { font-size: 18px; }
.mch-tile-title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.mch-pill { margin-left: auto; white-space: nowrap; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--tone-text, var(--text)); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.mch-pill.mch-ok { --tone: var(--mch-ok); --tone-text: #7fe7ab; }
.mch-pill.mch-warn { --tone: var(--mch-warn); --tone-text: #ffc95c; }
.mch-pill.mch-alert { --tone: var(--mch-alert); --tone-text: #ff8fa3; }

.mch-value { margin: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mch-value small { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 400; color: var(--text-muted); }
.mch-detail { margin: 0; font-size: 13px; line-height: 1.45; }

.mch-gauge { position: relative; height: 8px; border-radius: 999px; background: var(--bg-elevated-2); border: 1px solid var(--border); }
.mch-gauge-fill { height: 100%; border-radius: inherit; background: var(--fill, var(--mch-neutral)); box-shadow: 0 0 12px color-mix(in srgb, var(--fill, var(--mch-neutral)) 55%, transparent); transition: width 0.6s ease; }
.mch-gauge-fill.mch-ok { --fill: var(--mch-ok); }
.mch-gauge-fill.mch-warn { --fill: var(--mch-warn); }
.mch-gauge-fill.mch-alert { --fill: var(--mch-alert); }
.mch-gauge-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; opacity: 0.8; }
.mch-mark-warn { background: var(--mch-warn); }
.mch-mark-alert { background: var(--mch-alert); }

@media (max-width: 820px) {
  .mch-toolbar-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .mch-value { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mch-banner-alert .mch-banner-dot { animation: none; }
  .mch-gauge-fill { transition: none; }
}