:root {
    --bg:        #F7F8FA;
    --surface:   #FFFFFF;
    --surface-2: #EEF0F3;
    --border:    #E2E5EA;
    --text:      #16191D;
    --text-dim:  #5B6472;
    --text-mute: #9AA3AF;

    --header-bg:       #14171B;
    --header-text:     #F5F6F7;
    --header-text-dim: #9AA3AF;
    --header-border:   #2A2E34;

    --flame:     #209CE0;   /* accent — boutons, liens, éléments actifs */
    --flame-hover: #1483BE;
    --flame-dim: #209CE01A;
    --critical:    #DC2626;
    --critical-dim: #DC26261A;
    --major:       #EA580C;
    --major-dim:   #EA580C1A;
    --minor:       #F59E0B;
    --minor-dim:   #F59E0B1A;
    --warning:     #3B82F6;
    --warning-dim: #3B82F61A;
    --ras:         #17915F;
    --ras-dim:     #17915F1A;

    --radius: 6px;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
  }

  a { color: inherit; }

  /* ---------- Barre supérieure ---------- */

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-bottom: 1px solid var(--header-border);
    background: var(--header-bg);
    color: var(--header-text);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .logo-mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }

  .topbar-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
  }

  .topbar-title span {
    color: var(--header-text-dim);
    font-weight: 500;
  }

  .topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--header-text-dim);
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
  }

  .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ras);
    box-shadow: 0 0 0 0 var(--ras-dim);
    animation: pulse 2.4s ease-out infinite;
  }

  .status-dot.down { background: var(--down); animation: none; }

  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 var(--ras-dim); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  .refresh-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-mute);
  }

  .topbar .refresh-time { color: var(--header-text-dim); }

  /* ---------- Boutons ---------- */

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .btn-primary {
    background: var(--flame);
    color: #FFFFFF;
  }
  .btn-primary:hover { background: var(--flame-hover); }

  .btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
  }
  .btn-secondary:hover { background: var(--surface-2); }

  .btn-ghost {
    background: rgba(255,255,255,0.06);
    color: var(--header-text);
    border-color: rgba(255,255,255,0.16);
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.12); }

  /* ---------- Trait de pouls (signature) ---------- */

  .pulse-strip {
    height: 28px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    overflow: hidden;
  }

  .pulse-strip svg { display: block; width: 100%; height: 100%; }


  /* ---------- Responsive ---------- */

  @media (max-width: 560px) {
    .topbar { flex-wrap: wrap; gap: 10px; }
    .topbar-right { flex-wrap: wrap; gap: 10px; }
  }

  /* focus clavier visible */
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--flame);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .status-dot { animation: none; }
  }

/* -------------- Logout ----------------- */

.logout-form {
  margin: 0;
}

.topbar-user {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--header-text-dim);
}