/* Songe — peau légère. Console d'opérateur : le poste de radio qu'on allume.
   Zéro build, polices système, une seule feuille. Ambre de cadran sur ardoise. */

:root {
  --ink:        #14171c;   /* fond ardoise profond */
  --ink-2:      #1c2027;   /* panneaux */
  --ink-3:      #262b34;   /* bordures, surfaces hautes */
  --paper:      #e7e3d8;   /* texte principal, blanc chaud */
  --paper-dim:  #9aa0ab;   /* texte secondaire */
  --signal:     #e8a13a;   /* ambre de cadran — l'accent, avec parcimonie */
  --live:       #52a596;   /* actif / opérationnel (vert teal doux) */
  --alert:      #d1615b;   /* erreur / arrêté */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Barre supérieure : le cadran ────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
}
.wordmark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--paper);
}
.wordmark .dot { color: var(--signal); }

/* l'indicateur de signal : petit motif radio animé */
.signal {
  display: inline-flex; align-items: flex-end; gap: 2px; height: 16px;
  margin-left: 2px;
}
.signal i {
  width: 3px; background: var(--signal); border-radius: 1px;
  animation: pulse 1.4s ease-in-out infinite;
}
.signal i:nth-child(1){ height: 5px;  animation-delay: 0s;   }
.signal i:nth-child(2){ height: 10px; animation-delay: .2s;  }
.signal i:nth-child(3){ height: 16px; animation-delay: .4s;  }
.signal i:nth-child(4){ height: 9px;  animation-delay: .6s;  }
@keyframes pulse { 0%,100%{ opacity:.35; transform: scaleY(.7);} 50%{ opacity:1; transform: scaleY(1);} }
@media (prefers-reduced-motion: reduce){ .signal i { animation: none; opacity: .8; } }

.spacer { flex: 1; }
.whoami { font-family: var(--mono); font-size: 13px; color: var(--paper-dim); }
.whoami b { color: var(--paper); }

/* ── Mise en page ─────────────────────────────────────────────────────────── */
.wrap { max-width: 960px; margin: 0 auto; padding: 28px 22px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); }

.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--paper-dim); margin: 0 0 4px;
}
h1 { font-size: 26px; margin: 0 0 18px; font-weight: 650; }
h2 { font-size: 16px; margin: 26px 0 12px; font-weight: 600; }

/* ── Cartes / panneaux ────────────────────────────────────────────────────── */
.card {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 18px;
}
.card .name { font-family: var(--mono); font-weight: 600; font-size: 15px; }
.card .meta { color: var(--paper-dim); font-size: 13px; margin-top: 4px; }

/* état : la pastille de diagnostic honnête (3 états) */
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.state::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--paper-dim); }
.state.live::before   { background: var(--live);  box-shadow: 0 0 8px var(--live); }
.state.down::before   { background: var(--alert); }
.state.warn::before   { background: var(--signal); }

/* ── Boutons & champs ─────────────────────────────────────────────────────── */
.btn {
  font-family: var(--mono); font-size: 14px;
  background: var(--signal); color: #201400; border: none;
  padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--paper); border: 1px solid var(--ink-3); }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

input, textarea {
  font-family: var(--mono); font-size: 14px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink-3); border-radius: 8px; padding: 10px 12px; width: 100%;
}
label { display: block; font-size: 13px; color: var(--paper-dim); margin: 14px 0 6px; }

/* ── Terminal ─────────────────────────────────────────────────────────────── */
.term {
  background: #0e1013; border: 1px solid var(--ink-3); border-radius: var(--radius);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.55;
  padding: 14px; min-height: 220px; white-space: pre-wrap; color: #cdd3dc;
  overflow-y: auto; max-height: 420px;
}
.term .cmd { color: var(--signal); }
.term .err { color: var(--alert); }
.term-row { display: flex; gap: 8px; margin-top: 12px; }
.term-row .prompt { font-family: var(--mono); color: var(--signal); align-self: center; }

/* ── Divers ───────────────────────────────────────────────────────────────── */
.note { color: var(--paper-dim); font-size: 13px; }
.tabs { display: flex; gap: 6px; margin: 18px 0 10px; }
.tab {
  font-family: var(--mono); font-size: 13px; padding: 7px 13px; cursor: pointer;
  background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 7px; color: var(--paper-dim);
}
.tab.active { color: var(--paper); border-color: var(--signal); }
.center { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: min(400px, 92vw); }
.badge { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 5px;
         background: var(--ink-3); color: var(--paper-dim); }