/* ════════════════════════════════════════════════════════════════════
   Prompteur — interface. Direction artistique « Lumière » (openum).
   Light theme · Darker Grotesque · IBM Plex Mono · vanilla CSS.
   Tokens et composants repris de openum, appliqués à l'app.
   ════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Chau Philomene One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/chau-philomene-400.woff2') format('woff2'); }
@font-face { font-family:'Darker Grotesque'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/darker-400.woff2') format('woff2'); }
@font-face { font-family:'Darker Grotesque'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/darker-500.woff2') format('woff2'); }
@font-face { font-family:'Darker Grotesque'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/darker-600.woff2') format('woff2'); }

/* ── 01 · Design tokens (openum) ─────────────────────────────────── */
:root {
  --bg:#FAFAF7; --bg-raised:#FFFFFF; --bg-soft:#F3F1EA; --bg-dark:#0E1420; --bg-dark-soft:#171D2B;
  --ink:#0E1420; --ink-dim:#4B5563; --ink-mute:#6B7280; --ink-faint:#C7CAD1;
  --ink-on-dark:#F6F5F0; --ink-on-dark-dim:#A8ADB5;
  --line:#D4D0C1; --line-soft:#E7E4DA; --line-strong:#BFB9A4; --line-dark:rgba(246,245,240,.12);
  --accent:#2B5CE6; --accent-deep:#1E42B0; --accent-soft:#EBF0FE;
  --emerald:#0C8F6B; --emerald-soft:#EAF7F2; --ruby:#D94848; --ruby-soft:#FBEDED; --amber:#E08338; --amber-soft:#FFF5EC;

  --f-display:'Darker Grotesque','Helvetica Neue',system-ui,sans-serif;
  --f-body:'Darker Grotesque','Helvetica Neue',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --f-brace:'Chau Philomene One','Darker Grotesque',sans-serif;

  --t-2xs:.75rem; --t-xs:.8125rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem; --t-lg:1.25rem;
  --t-xl:clamp(1.375rem,1.2vw + 1.05rem,1.5625rem); --t-2xl:clamp(1.625rem,1.8vw + 1.2rem,1.953rem);
  --t-3xl:clamp(1.953rem,2.5vw + 1.4rem,2.441rem); --t-4xl:clamp(2.441rem,3.5vw + 1.6rem,3.052rem);

  --space-2xs:.375rem; --space-xs:.625rem; --space-sm:.875rem; --space-md:1.25rem;
  --space-lg:2rem; --space-xl:3.25rem; --space-2xl:5rem;

  --max:76rem; --gutter:clamp(1.25rem,3.5vw,2.25rem);
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(14,20,32,.04); --shadow-sm:0 2px 8px rgba(14,20,32,.05);
  --shadow-md:0 6px 24px rgba(14,20,32,.07); --shadow-lg:0 12px 40px rgba(14,20,32,.10);
  --shadow-focus:0 0 0 3px rgba(43,92,230,.25);
  --ease:cubic-bezier(.2,.7,.25,1); --t-fast:160ms; --t-med:260ms;
  --nav-h:68px;
}

/* ── 02 · Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:var(--t-base);
  line-height:1.55; font-weight:400; font-feature-settings:"kern","liga","calt"; min-height:100dvh; overflow-x:hidden; }
img,svg,video { display:block; max-width:100%; height:auto; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
a { color:inherit; text-decoration:none; }
input,textarea,select { font:inherit; color:inherit; }
ul,ol { list-style:none; }
::selection { background:var(--accent); color:#fff; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── 03 · Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--f-display); font-weight:600; letter-spacing:-.015em; line-height:1.08; color:var(--ink); }
h1 { font-size:var(--t-4xl); letter-spacing:-.025em; }
h2 { font-size:var(--t-2xl); letter-spacing:-.02em; }
h3 { font-size:var(--t-xl); }
p { color:var(--ink-dim); }
strong { color:var(--ink); font-weight:600; }
em { font-style:normal; color:var(--accent); }

.eyebrow { display:inline-flex; align-items:center; gap:.6em; font-family:var(--f-mono);
  font-size:var(--t-xs); font-weight:500; letter-spacing:.08em; text-transform:lowercase; color:var(--ink-mute); }
.eyebrow::before { content:""; display:inline-block; width:1.75rem; height:1px; background:var(--accent); }
.meta { font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.02em; color:var(--ink-mute); }
.mono { font-family:var(--f-mono); }

/* ── 04 · Layout ─────────────────────────────────────────────────── */
.shell { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.page { padding-top:calc(var(--nav-h) + 2.25rem); padding-bottom:5rem; }
.page__head { max-width:48rem; margin-bottom:var(--space-xl); }
.page__title { margin-top:.9rem; }
.page__lead { margin-top:1rem; font-size:var(--t-md); color:var(--ink-dim); max-width:44rem; }

.grid { display:grid; grid-template-columns:360px 1fr; gap:1.5rem; align-items:start; }
@media (max-width:900px){ .grid { grid-template-columns:1fr; } }
.stack > * + * { margin-top:1.25rem; }
.cluster { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.cluster.end { justify-content:flex-end; }
hr.sep { border:0; border-top:1px solid var(--line-soft); margin:1.25rem 0; }

/* ── 05 · Navigation / topbar ────────────────────────────────────── */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  background:rgba(250,250,247,.82); backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--line-soft); }
.nav__inner { max-width:var(--max); height:100%; margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:1.25rem; }
.nav__brand { display:inline-flex; align-items:center; gap:.55rem; line-height:1;
  font-family:var(--f-display); font-weight:600; font-size:1.3rem; letter-spacing:-.025em; color:var(--ink); flex:none; }
.nav__brand-logo { width:32px; height:32px; border-radius:8px; display:block; }
.nav__brand-text { display:block; transform:translateY(-.15em); }
.nav__brand-text .space { font-family:var(--f-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.06em; color:var(--ink-mute); margin-left:.5rem; transform:none; }
.nav__who { margin-left:auto; text-align:right; line-height:1.25; }
.nav__who b { font-weight:600; color:var(--ink); font-size:var(--t-sm); }
.nav__who .meta { display:block; }
.nav__rolechip { display:inline-block; font-family:var(--f-mono); font-size:var(--t-2xs);
  letter-spacing:.06em; padding:.15rem .5rem; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent-deep); margin-left:.4rem; }

/* ── 06 · Buttons ────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  padding:.85rem 1.5rem; font-family:var(--f-body); font-size:var(--t-base); font-weight:600; line-height:1;
  border-radius:var(--r-md); cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn--primary { background:var(--ink); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover:not(:disabled) { background:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn--accent { background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn--accent:hover:not(:disabled) { background:var(--accent-deep); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn--ghost { background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
.btn--ghost:hover:not(:disabled) { border-color:var(--ink); background:var(--bg-raised); }
.btn--danger { background:transparent; color:var(--ruby); border:1px solid var(--line-strong); }
.btn--danger:hover:not(:disabled) { border-color:var(--ruby); background:var(--ruby-soft); }
.btn--sm { padding:.5rem .9rem; font-size:var(--t-sm); border-radius:var(--r-sm); }
.btn--block { width:100%; }

/* ── 07 · Card (panel) ───────────────────────────────────────────── */
.card { background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs); overflow:hidden; }
.card__head { display:flex; align-items:center; gap:.75rem; padding:1.1rem 1.4rem; border-bottom:1px solid var(--line-soft); }
.card__head h2 { font-size:var(--t-lg); font-weight:600; }
.card__head .meta { margin-left:auto; }
.card__body { padding:1.4rem; }
.card__body + .card__body { border-top:1px solid var(--line-soft); }
.card__title { font-size:var(--t-xl); font-weight:600; line-height:1.15; color:var(--ink); }
.sub { font-family:var(--f-mono); font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-mute); margin-bottom:.7rem; }

/* ── 08 · Form fields ────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.1rem; }
.field:last-child { margin-bottom:0; }
.field__label { font-size:var(--t-sm); font-weight:500; color:var(--ink); }
.field__input,.field__textarea,select.field__input {
  padding:.85rem 1rem; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--r-md);
  font-size:var(--t-base); color:var(--ink); width:100%;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); }
.field__textarea { resize:vertical; min-height:8rem; line-height:1.6; }
.field__textarea.article { font-size:var(--t-md); min-height:14rem; }
.field__input:focus,.field__textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--shadow-focus); }
.count { font-family:var(--f-mono); font-size:var(--t-2xs); color:var(--ink-mute); text-align:right; }

/* ── 09 · Status badge (semantic, openum emerald/ruby/amber) ─────── */
.badge { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-mono);
  font-size:var(--t-2xs); letter-spacing:.03em; padding:.28rem .65rem; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--ink-mute); background:var(--bg-soft); white-space:nowrap; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-faint); }
.badge.ready::before,.badge.approved::before,.badge.ok::before { background:var(--emerald); }
.badge.ready,.badge.approved,.badge.ok { color:var(--emerald); background:var(--emerald-soft); border-color:transparent; }
.badge.training::before,.badge.running::before { background:var(--amber); animation:pulse 1.2s infinite; }
.badge.training,.badge.running { color:var(--amber); background:var(--amber-soft); border-color:transparent; }
.badge.suspended::before,.badge.failed::before { background:var(--ruby); }
.badge.suspended,.badge.failed { color:var(--ruby); background:var(--ruby-soft); border-color:transparent; }
@keyframes pulse { 50% { opacity:.4; } }

/* ── 10 · Lists (avatars, users, history) ────────────────────────── */
.list { display:flex; flex-direction:column; gap:.55rem; }
.item { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; background:var(--bg-raised);
  border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease); }
.item:hover { border-color:var(--line-strong); box-shadow:var(--shadow-xs); }
.item.active { border-color:var(--accent); background:var(--accent-soft); }
.item.static { cursor:default; }
.item .meta-block { flex:1; min-width:0; }
.item .meta-block b { display:block; font-size:var(--t-base); font-weight:600; color:var(--ink); }
.item .meta-block small { font-family:var(--f-mono); font-size:var(--t-2xs); color:var(--ink-mute); }
.empty { color:var(--ink-mute); font-size:var(--t-sm); padding:1.1rem .25rem; text-align:center; }

/* ── 11 · Notes (openum-style caveat blocks) ─────────────────────── */
.note { border-left:3px solid var(--accent); background:var(--accent-soft); color:var(--accent-deep);
  padding:.75rem 1rem; border-radius:0 var(--r-md) var(--r-md) 0; font-size:var(--t-sm); }
.note.bad { border-color:var(--ruby); background:var(--ruby-soft); color:#9c2f2f; }
.note.info { border-color:var(--line-strong); background:var(--bg-soft); color:var(--ink-dim); }
.note.ok { border-color:var(--emerald); background:var(--emerald-soft); color:#0a6b50; }
.note b { color:inherit; }

/* ── 12 · Steps (studio flow) ────────────────────────────────────── */
.steps { display:flex; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--bg-raised); }
.steps .step { flex:1; padding:.7rem .75rem; text-align:center; border-right:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-faint); }
.steps .step:last-child { border-right:0; }
.steps .step b { display:block; font-size:var(--t-2xs); letter-spacing:.08em; color:inherit; }
.steps .step.done { color:var(--emerald); }
.steps .step.current { color:var(--ink); background:var(--bg-soft); }

/* ── 13 · Token reveal ───────────────────────────────────────────── */
.token { font-family:var(--f-mono); font-size:var(--t-sm); background:var(--bg-soft);
  border:1px dashed var(--line-strong); padding:.7rem .85rem; border-radius:var(--r-md);
  word-break:break-all; color:var(--accent-deep); }

/* ── 14 · Media players ──────────────────────────────────────────── */
audio { width:100%; margin-top:.5rem; }
video { width:100%; border-radius:var(--r-md); margin-top:.5rem; background:#000; aspect-ratio:16/9; }

/* ── 15 · Login ──────────────────────────────────────────────────── */
.login { max-width:26rem; margin:16vh auto 0; padding-inline:var(--gutter); }
.login__brand { display:flex; align-items:center; gap:.55rem; justify-content:center;
  font-family:var(--f-display); font-weight:600; font-size:1.75rem; letter-spacing:-.025em; margin-bottom:.4rem; }
.login__brand .nav__brand-logo { width:36px; height:36px; }
.login p.page__lead { text-align:center; margin:0 auto 1.75rem; }

/* ── 16 · Toast ──────────────────────────────────────────────────── */
.toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--ink-on-dark); padding:.8rem 1.2rem; border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); z-index:200; font-size:var(--t-sm); max-width:90vw; }
.toast.bad { background:var(--ruby); color:#fff; }

.hidden { display:none !important; }
.muted { color:var(--ink-mute); }
.tiny { font-size:var(--t-sm); color:var(--ink-mute); }