:root {
  --fond: #f4f5f2; --carte: #fff; --texte: #1c2822; --doux: #5b6a61; --trait: #d9ded7;
  --accent: #2f6b4f; --accent-t: #fff; --ok: #1f8a4c; --ko: #b3261e; --alerte: #a15c00;
  --prod: #b3261e; --prod-fond: #fde8e6; --test: #8a6d00; --test-fond: #fdf3d0; --local: #2f6b4f; --local-fond: #e3f1e9;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #111713; --carte: #19221d; --texte: #e7eee9; --doux: #9fb0a5; --trait: #2a372f;
    --accent: #7fc29b; --accent-t: #0e1812; --ok: #58c98a; --ko: #ff8a80; --alerte: #f0b35a;
    --prod: #ff8a80; --prod-fond: #3a1d1b; --test: #f0cf6a; --test-fond: #3a3217; --local: #7fc29b; --local-fond: #1d3025;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 15px/1.5 system-ui, -apple-system, sans-serif; }
h1, h2, h3 { margin: 0; }
a { color: var(--accent); }
code, .mono { font-family: var(--mono); font-size: .88em; }
.doux { color: var(--doux); }
.espace { flex: 1; }
.erreur { color: var(--ko); margin: 0; }
.alerte { color: var(--alerte); }
.ok { color: var(--ok); }

button, .btn { background: var(--accent); color: var(--accent-t); border: 1px solid transparent; border-radius: 999px; padding: 7px 16px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; display: inline-block; }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.discret, .btn.discret { background: transparent; color: var(--accent); border-color: var(--trait); }
button.danger { background: transparent; color: var(--ko); border-color: var(--ko); }
button[disabled] { opacity: .5; cursor: default; }
input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--fond); color: var(--texte); font: inherit; }
textarea { resize: vertical; }
label { display: grid; gap: 4px; font-size: .85rem; color: var(--doux); font-weight: 600; }
label.case { display: flex; gap: 8px; align-items: center; font-weight: 400; color: var(--texte); font-size: .92rem; }
label.case input { width: auto; }

/* connexion */
.ecran-connexion { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.carte-connexion { width: min(380px, 100%); background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 28px; display: grid; gap: 14px; }

/* en-tête */
.haut { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 12px 24px; background: var(--carte); border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 3; }
.haut h1 { font-size: 1.15rem; }
.haut h1 a { color: inherit; text-decoration: none; }
nav { display: flex; gap: 4px; }
nav a { text-decoration: none; padding: 6px 12px; border-radius: 999px; color: var(--doux); font-weight: 600; }
nav a[aria-current="page"] { background: var(--local-fond); color: var(--accent); }
main { max-width: 1280px; margin: 0 auto; padding: 24px; display: grid; gap: 22px; }
.entete-vue { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.entete-vue h2 { font-size: 1.25rem; margin-right: auto; }
section > h3 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); margin: 0 0 10px; }

/* cartes de bases */
.grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.carte .entete { display: flex; gap: 8px; align-items: center; }
.carte .entete strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.carte p { margin: 0; }
.carte .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.etat { width: 10px; height: 10px; border-radius: 50%; background: var(--trait); flex: none; }
.etat.ok { background: var(--ok); } .etat.ko { background: var(--ko); } .etat.attente { background: var(--alerte); }
.badge { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; border: 1px solid transparent; }
.badge.local { background: var(--local-fond); color: var(--local); }
.badge.test { background: var(--test-fond); color: var(--test); }
.badge.production { background: var(--prod-fond); color: var(--prod); }
.petit { font-size: .85rem; }

/* explorateur */
.explorateur { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.liste-tables { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 10px; display: grid; gap: 8px; max-height: calc(100vh - 220px); overflow: auto; position: sticky; top: 72px; }
.liste-tables ul { list-style: none; margin: 0; padding: 0; }
.liste-tables h4 { margin: 8px 6px 4px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.liste-tables button.table { width: 100%; text-align: left; background: transparent; color: var(--texte); border-radius: 8px; padding: 5px 8px; font-weight: 400; display: flex; gap: 8px; justify-content: space-between; overflow: hidden; }
.liste-tables button.table span:first-child { overflow: hidden; text-overflow: ellipsis; }
.liste-tables button.table[aria-current="true"] { background: var(--local-fond); color: var(--accent); font-weight: 600; }
.liste-tables button.table:hover { background: var(--fond); }
.onglets { display: flex; gap: 4px; flex-wrap: wrap; }
.onglets button { background: transparent; color: var(--doux); border: 1px solid var(--trait); }
.onglets button[aria-selected="true"] { background: var(--accent); color: var(--accent-t); border-color: var(--accent); }
.panneau { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; display: grid; gap: 12px; min-width: 0; }
.barre { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

/* tableaux de données */
.defilant { overflow: auto; max-height: 62vh; border: 1px solid var(--trait); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: .86rem; }
th, td { padding: 5px 10px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
thead th { position: sticky; top: 0; background: var(--carte); z-index: 1; font-weight: 700; }
thead th button { background: none; border: 0; color: inherit; padding: 0; font: inherit; font-weight: 700; cursor: pointer; border-radius: 4px; }
td.nul { color: var(--doux); font-style: italic; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--fond); }
.cle { color: var(--alerte); }
textarea.sql { font-family: var(--mono); font-size: .9rem; min-height: 150px; tab-size: 2; }
.ecriture { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--ko); border-radius: 10px; }
.vide { padding: 28px; text-align: center; color: var(--doux); }

/* dialogue */
dialog { border: 1px solid var(--trait); border-radius: 16px; background: var(--carte); color: var(--texte); padding: 22px; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h2 { margin-bottom: 12px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.champs .large, .tunnel.large { grid-column: 1 / -1; }
.tunnel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; border: 1px solid var(--trait); border-radius: 10px; }
.actions-dlg { display: flex; gap: 8px; margin-top: 16px; align-items: center; }

@media (max-width: 800px) {
  main { padding: 16px; } .haut { padding: 10px 16px; }
  .explorateur { grid-template-columns: 1fr; }
  .liste-tables { position: static; max-height: 240px; }
  .champs, .tunnel { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  button, .btn { transition: opacity .15s; }
}