/* Console de test — sobre et dense.
   Aucune police distante : l'outil doit s'ouvrir sur un réseau filtré. */

:root {
  --fond: #12141a;
  --panneau: #1a1d26;
  --panneau-clair: #222634;
  --bord: #2e3342;
  --texte: #dfe3ec;
  --doux: #8d94a8;
  --accent: #5b9dff;
  --vert: #3fb27f;
  --rouge: #e5615e;
  --orange: #d69a3c;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Barre du haut ─────────────────────────────────────────────── */

.barre {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 16px;
  background: var(--panneau);
  border-bottom: 1px solid var(--bord);
}

.marque { font-weight: 700; font-size: 18px; letter-spacing: .5px; }
.marque span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--doux);
  letter-spacing: 0;
}

.identite { flex: 1; font-size: 13px; }
.identite b { color: var(--accent); }
.identite .jeton {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--doux);
  cursor: pointer;
}

.actions-barre { display: flex; align-items: center; gap: 10px; }
.champ-api { font-size: 11px; color: var(--doux); display: flex; gap: 6px; align-items: center; }
.champ-api input { width: 270px; font-family: var(--mono); font-size: 11px; }

/* ── Disposition ───────────────────────────────────────────────── */

.corps {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) minmax(320px, 30%);
  height: calc(100vh - 57px);
}

.menu { background: var(--panneau); border-right: 1px solid var(--bord); overflow-y: auto; padding: 8px 0; }
.menu a {
  display: block;
  padding: 7px 16px;
  color: var(--doux);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.menu a:hover { background: var(--panneau-clair); color: var(--texte); }
.menu a.actif { color: var(--texte); border-left-color: var(--accent); background: var(--panneau-clair); }
.menu .titre-groupe {
  padding: 12px 16px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5c637a;
}

.vue { overflow-y: auto; padding: 20px 24px 60px; }
.vue h1 { font-size: 19px; margin: 0 0 4px; }
.vue .sous-titre { color: var(--doux); margin: 0 0 20px; font-size: 13px; }

/* ── Blocs ─────────────────────────────────────────────────────── */

.carte {
  background: var(--panneau);
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}
.carte h2 { font-size: 14px; margin: 0 0 12px; }
.carte .aide { color: var(--doux); font-size: 12px; margin: -6px 0 12px; }

.grille { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

label.champ { display: block; font-size: 12px; color: var(--doux); }
label.champ span { display: block; margin-bottom: 3px; }

input, select, textarea {
  width: 100%;
  padding: 7px 9px;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 4px;
  color: var(--texte);
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
textarea { font-family: var(--mono); font-size: 12px; min-height: 90px; }

button {
  padding: 7px 14px;
  background: var(--accent);
  border: 0;
  border-radius: 4px;
  color: #08101f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: .5; cursor: default; }
button.secondaire { background: var(--panneau-clair); color: var(--texte); border: 1px solid var(--bord); }
button.danger { background: var(--rouge); color: #fff; }
button.lien { background: none; color: var(--doux); padding: 2px 4px; font-weight: 400; }
button.lien:hover { color: var(--texte); }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ── Tableaux et données ───────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bord); }
th { color: var(--doux); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
td.mono, .mono { font-family: var(--mono); font-size: 12px; }

.etiquette {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  background: var(--panneau-clair);
  color: var(--doux);
}
.etiquette.ok { background: rgba(63,178,127,.15); color: var(--vert); }
.etiquette.ko { background: rgba(229,97,94,.15); color: var(--rouge); }
.etiquette.attente { background: rgba(214,154,60,.15); color: var(--orange); }

.vide { color: var(--doux); font-style: italic; }
.attente { color: var(--doux); }

pre.json {
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 4px;
  padding: 10px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12px;
  margin: 0;
  max-height: 340px;
}

/* ── Journal ───────────────────────────────────────────────────── */

.journal { background: var(--panneau); border-left: 1px solid var(--bord); display: flex; flex-direction: column; }
.journal-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bord);
  font-size: 13px;
}
.journal-liste { overflow-y: auto; padding: 8px; flex: 1; }

.appel { border: 1px solid var(--bord); border-radius: 4px; margin-bottom: 6px; background: var(--fond); }
.appel-tete {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
}
.appel-tete .methode { color: var(--accent); font-weight: 700; min-width: 42px; }
.appel-tete .chemin { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--doux); }
.appel-tete .code { font-weight: 700; }
.appel-tete .code.ok { color: var(--vert); }
.appel-tete .code.ko { color: var(--rouge); }
.appel-tete .duree { color: #5c637a; }
.appel-detail { border-top: 1px solid var(--bord); padding: 8px; }
.appel-detail h4 { margin: 8px 0 4px; font-size: 11px; color: var(--doux); text-transform: uppercase; letter-spacing: .5px; }
.appel-detail h4:first-child { margin-top: 0; }

/* ── Toasts ────────────────────────────────────────────────────── */

.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast {
  padding: 10px 14px;
  border-radius: 5px;
  background: var(--panneau-clair);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--accent);
  max-width: 380px;
  font-size: 13px;
  animation: entree .15s ease-out;
}
.toast.ok { border-left-color: var(--vert); }
.toast.ko { border-left-color: var(--rouge); }
@keyframes entree { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 1100px) {
  .corps { grid-template-columns: 160px minmax(0, 1fr); }
  .journal { display: none; }
}