/* ═══════════════════════════════════════════════════════════
   Nex2A — thème de la console (identité de marque : navy / bronze / parchemin)
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #F6F3EC;
  --bg-panel: #FFFFFF;
  --bg-panel-2: #FBF9F5;
  --border: #E5DFD1;
  --border-strong: #D4CBB5;
  --navy: #101C33;
  --blue: #1E3A5F;
  --accent: #C69C4E;
  --accent-dim: rgba(198, 156, 78, 0.10);
  --text: #101C33;
  --text-dim: #6B7280;
  --ok: #2E7D32;
  --ok-dim: rgba(46, 125, 50, 0.08);
  --warn: #B8860B;
  --warn-dim: rgba(184, 134, 11, 0.08);
  --fail: #C62828;
  --fail-dim: rgba(198, 40, 40, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent); }

/* ── Boutons ── */
.btn, button {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 10px 18px;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:active, button:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #101C33; }
.btn-primary:hover { background: #B78A3D; }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--bg-panel-2); }
.btn-danger { background: #fff; color: var(--fail); border-color: var(--fail); }
.btn-danger:hover { background: var(--fail-dim); }
.btn-ghost { background: none; border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 11px; padding: 4px 10px; }
.btn-ghost:hover { border-color: var(--fail); color: var(--fail); }
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Panels / cards ── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(16,28,51,0.05);
}
.panel h3 {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--navy);
  font-weight: 700;
}

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--text-dim); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.5px; font-weight: 700; }
tr:hover td { background: var(--bg-panel-2); }

/* ── Badges statut ── */
.badge { display:inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.badge-ok { color: var(--ok); background: var(--ok-dim); }
.badge-warn { color: var(--warn); background: var(--warn-dim); }
.badge-fail { color: var(--fail); background: var(--fail-dim); }
.badge-none { color: var(--text-dim); background: var(--bg-panel-2); }

/* ── Statut agent (installé / actif / hors ligne) ── */
.agent-status { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px; }
.agent-status .dot { width:8px; height:8px; border-radius:50%; }
.agent-status.online { background:var(--ok-dim); color:var(--ok); }
.agent-status.online .dot { background:var(--ok); animation: pulse-dot 1.8s ease-out infinite; }
.agent-status.offline { background:var(--warn-dim); color:var(--warn); }
.agent-status.offline .dot { background:var(--warn); }
.agent-status.none { background:var(--fail-dim); color:var(--fail); }
.agent-status.none .dot { background:var(--fail); }

/* ── Inputs ── */
input[type=text], input[type=password] {
  font-family: 'Poppins', system-ui, sans-serif;
  background: #fff;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
}
input[type=text]:focus, input[type=password]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

/* ── Divers utilitaires ── */
.mono-num { font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); }
.recommendation { background: var(--accent-dim); border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 0 6px 6px 0; font-size: 12px; margin-top: 8px; color: #5A4522; }
.recommendation strong { color: #8A6A2E; }

/* ── HUD : hexagone du logo à remplissage liquide (dashboard + fiche client) ── */
.hud-wrap { display:flex; flex-direction:column; align-items:center; width:auto; }
.hud-num { font-size:32px; font-weight:800; line-height:1; }
.hud-wrap.compact .hud-num { font-size:22px; }
.hud-num-row { display:flex; align-items:baseline; gap:6px; margin-top:10px; }
.hud-num-sep { font-size:14px; color:var(--text-dim); font-weight:600; }
.hud-emoji { font-size:20px; margin-left:2px; }
.hud-sub { font-size:10px; color:var(--text-dim); letter-spacing:0.6px; margin-top:4px; text-transform:uppercase; }
.hud-status { margin-top:18px; font-size:12px; font-weight:600; text-align:center; }
@keyframes wave-flow { from { transform: translateX(0); } to { transform: translateX(100px); } }
@keyframes neon-pulse {
  0%, 100% { filter: drop-shadow(0 0 1px currentColor) drop-shadow(0 0 3px currentColor); opacity:0.9; }
  50% { filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px currentColor); opacity:1; }
}
.hud-n-neon { animation: neon-pulse 2.4s ease-in-out infinite; }

/* ── Animations ── */
@keyframes segment-in { from { opacity:0; transform:scaleY(0.2); } to { opacity:1; transform:scaleY(1); } }
@keyframes fade-up { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse-soft { 0%, 100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }