/* Portail BD — feuille de style minimale.
   Les jetons de couleur et de typographie sont ceux de la page `orchestrateur.html`,
   pour que les deux surfaces se reconnaissent. Le vrai travail de design vient
   APRÈS les briques (décision de Michael, 2026-07-29). */

:root {
  color-scheme: dark;
  --ground:#0E1620; --deep:#0A111A; --panel:#16202C; --raised:#1C2734;
  --edge:#2A3746; --edge-2:#202B38;
  --ivory:#EDE7DC; --muted:#93A2B2; --faint:#64748A;
  --brass:#C9A227; --verd:#5FA8A0;
  --serif:"Constantia","Iowan Old Style",Georgia,serif;
  --display:"Bahnschrift","Arial Narrow",system-ui,sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:"Cascadia Mono","Consolas",ui-monospace,menlo,monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ground:#DDE2E6; --deep:#D2D8DD; --panel:#EBEEF1; --raised:#FFF;
    --edge:#BFC7CE; --edge-2:#D6DCE1;
    --ivory:#101823; --muted:#56646F; --faint:#7E8B97;
    --brass:#8A6B10; --verd:#1B6A62;
  }
}

* { box-sizing: border-box; }
body {
  margin:0; background:var(--ground); color:var(--ivory);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; }

/* --- en-tête --- */
.top {
  display:flex; align-items:center; gap:1rem;
  padding:.7rem clamp(.85rem,3vw,2.5rem);
  background:var(--deep); border-bottom:1px solid var(--edge);
}
.brand { display:flex; align-items:baseline; gap:.45rem; text-decoration:none; }
.brand-mark {
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  color:var(--brass); border:1px solid var(--brass); padding:.1rem .34rem;
}
.brand-name {
  font-family:var(--display); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.who { margin-left:auto; display:flex; align-items:center; gap:.9rem; font-size:.82rem; }
.who .user { font-family:var(--mono); color:var(--faint); }
.who form { margin:0; }
.linkish {
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); font:inherit; text-decoration:underline;
}
.linkish:hover { color:var(--ivory); }

/* --- navigation des panneaux --- */
.panels {
  display:flex; flex-wrap:wrap; gap:.3rem;
  padding:.55rem clamp(.85rem,3vw,2.5rem);
  background:var(--panel); border-bottom:1px solid var(--edge);
}
.panel-link {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.24rem .55rem; text-decoration:none;
  font-family:var(--display); font-size:.84rem; font-weight:600;
  color:var(--muted); border:1px solid transparent;
}
.panel-link:hover { color:var(--ivory); border-color:var(--edge); }
.panel-link.on { color:var(--ivory); border-color:var(--brass); background:var(--raised); }
.code { font-family:var(--mono); font-size:.66rem; color:var(--brass); letter-spacing:.08em; }
.code.big { font-size:1rem; }

/* --- contenu --- */
.wrap { max-width:1180px; margin:0 auto; padding:clamp(1.4rem,4vw,3rem) clamp(.85rem,3vw,2.5rem) 4rem; }
h1 {
  font-family:var(--serif); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(1.6rem,4vw,2.6rem); line-height:1.12; margin:0 0 .8rem;
}
h1 em { color:var(--brass); }
.lede { color:var(--muted); max-width:62ch; margin:0 0 2rem; }
.lede strong { color:var(--ivory); font-weight:600; }
.crumb { font-size:.82rem; margin:0 0 1.2rem; }
.crumb a { color:var(--muted); text-decoration:none; }
.crumb a:hover { color:var(--ivory); }

.grid { display:grid; gap:1px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); background:var(--edge); border:1px solid var(--edge); }
.card {
  display:block; padding:.95rem 1rem 1.1rem; background:var(--raised);
  text-decoration:none; transition:background .16s;
}
.card:hover { background:var(--panel); }
.card h2 {
  font-family:var(--display); font-size:1.05rem; font-weight:700;
  letter-spacing:.02em; margin:.3rem 0 .3rem;
}
.card p { color:var(--muted); font-size:.86rem; margin:0; }
.badge {
  display:inline-block; margin-top:.6rem; padding:.1rem .36rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.06em;
  color:var(--verd); border:1px solid var(--verd);
}

.empty {
  border:1px dashed var(--edge); background:var(--panel);
  padding:1.2rem 1.3rem; max-width:64ch;
}
.empty p { margin:0 0 .6rem; color:var(--muted); }
.empty p:last-child { margin:0; }
.empty strong { color:var(--ivory); }

/* --- connexion --- */
.signin { max-width:22rem; }
.signin form { display:grid; gap:.35rem; margin-top:1rem; }
.signin label { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:.5rem; }
.signin input {
  background:var(--deep); color:var(--ivory);
  border:1px solid var(--edge); padding:.5rem .6rem; font:inherit;
}
.signin input:focus-visible { outline:2px solid var(--brass); outline-offset:1px; }
.signin button {
  margin-top:1rem; padding:.45rem .9rem; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:.9rem;
  color:var(--ground); background:var(--brass); border:1px solid var(--brass);
}
.error { color:#E08A4C; font-size:.86rem; }

.foot {
  border-top:1px solid var(--edge-2); padding:1rem clamp(.85rem,3vw,2.5rem);
  font-family:var(--mono); font-size:.68rem; color:var(--faint);
}