/* Jarvis — HUD. Une colonne sur mobile, deux sur grand écran.
   Thèmes : <html data-theme="…">. --cyan est la couleur d'accent du thème ; les *-rgb servent aux halos. */
:root {
  --bg: #04090d;
  --panel: #07141b;
  --panel-2: #0a1b24;
  --fg: #d4f1fb;
  --dim: #6a909f;
  --line: #143846;
  --cyan: #3fd8ff;
  --accent-rgb: 63, 216, 255;
  --amber: #ffb347;
  --amber-rgb: 255, 179, 71;
  --red: #ff5c6c;
  --red-rgb: 255, 92, 108;
  --ok: #6dffb0;
  --ok-rgb: 109, 255, 176;
  --font: "Rajdhani", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Share Tech Mono", ui-monospace, "Cascadia Mono", monospace;
  color-scheme: dark;
}
/* Thèmes autres qu'Arc : couleurs adoucies (moins saturées), aussi reposantes que le bleu d'Arc. */
/* Or : noir chaud et doré mat */
[data-theme="or"] {
  --bg: #0a0806; --panel: #13100c; --panel-2: #191510; --fg: #ebe0cd; --dim: #978670; --line: #342a1d;
  --cyan: #d9b26a; --accent-rgb: 217, 178, 106;
  --amber: #d4926a; --amber-rgb: 212, 146, 106;
  --ok: #9cc490; --ok-rgb: 156, 196, 144;
}
/* Rouge : vieux rose sur anthracite */
[data-theme="rouge"] {
  --bg: #0a0708; --panel: #140d0f; --panel-2: #1a1214; --fg: #ecdcde; --dim: #9c8084; --line: #36222a;
  --cyan: #d9808a; --accent-rgb: 217, 128, 138;
  --red: #d9a07a; --red-rgb: 217, 160, 122;
  --amber: #dcc08a; --amber-rgb: 220, 192, 138;
  --ok: #92c9b5; --ok-rgb: 146, 201, 181;
}
/* Émeraude : vert sauge profond */
[data-theme="emeraude"] {
  --bg: #050a08; --panel: #0a1410; --panel-2: #0e1a15; --fg: #d4e8de; --dim: #73968a; --line: #1a3329;
  --cyan: #6cc2a0; --accent-rgb: 108, 194, 160;
  --amber: #d6b27a; --amber-rgb: 214, 178, 122;
  --ok: #b3cf8a; --ok-rgb: 179, 207, 138;
}
/* Violet : lavande */
[data-theme="violet"] {
  --bg: #08070d; --panel: #110f19; --panel-2: #161322; --fg: #e2ddf0; --dim: #8a83a6; --line: #2a2540;
  --cyan: #a294d6; --accent-rgb: 162, 148, 214;
  --amber: #d6b07c; --amber-rgb: 214, 176, 124;
  --ok: #86c9bf; --ok-rgb: 134, 201, 191;
}
/* Clair : jour, pour les écrans en plein soleil, sans blanc éclatant */
[data-theme="clair"] {
  --bg: #e9eef1; --panel: #f6f8f9; --panel-2: #eef2f4; --fg: #1d3039; --dim: #61757f; --line: #cdd8de;
  --cyan: #2f7ca8; --accent-rgb: 47, 124, 168;
  --amber: #b07224; --amber-rgb: 176, 114, 36;
  --red: #c04b5c; --red-rgb: 192, 75, 92;
  --ok: #2f8f63; --ok-rgb: 47, 143, 99;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  background-image: radial-gradient(circle at 50% 18%, rgba(var(--accent-rgb), .08), transparent 60%);
  color: var(--fg);
  font: 500 17px/1.45 var(--font);
  -webkit-tap-highlight-color: transparent;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); }
a { color: var(--cyan); }
button, input, textarea, select { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap {
  max-width: 1100px; margin: 0 auto;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 16px;
}

/* ---------- Barre du haut ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { font-family: var(--mono); letter-spacing: .32em; font-size: 14px; color: var(--cyan); text-transform: uppercase; }
.brand small { display: block; letter-spacing: .1em; color: var(--dim); font-size: 11px; }
.status { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; color: var(--dim); white-space: nowrap;
}
.pill.ok { color: var(--ok); border-color: rgba(var(--ok-rgb), .35); }
.pill.warn { color: var(--amber); border-color: rgba(var(--amber-rgb), .4); }
.pill.err { color: var(--red); border-color: rgba(var(--red-rgb), .4); }

/* ---------- Onglets ---------- */
nav.tabs { display: flex; gap: 6px; }
nav.tabs button {
  flex: 1 1 0; min-width: 0; background: transparent; border: 1px solid var(--line); color: var(--dim);
  border-radius: 4px; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 4px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Six onglets : sur téléphone, ils défilent dans la barre plutôt que d'être tronqués */
@media (max-width: 720px) {
  nav.tabs { overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding-inline: 2px; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs button { flex: 0 0 auto; padding-inline: 12px; font-size: 12px; letter-spacing: .08em; }
}
nav.tabs button[aria-selected="true"] { color: var(--bg); background: var(--cyan); border-color: var(--cyan); }

/* ---------- Panneaux ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px; min-width: 0; }
.panel h2, .panel h3 {
  margin: 0 0 10px; font: 400 11px var(--mono); letter-spacing: .22em; color: var(--dim); text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
/* Titre de bloc bien visible : texte d'accent, trait lumineux à gauche, bandeau dégradé en tête du panneau */
.panel h2 {
  position: relative; font: 600 11.5px var(--mono); letter-spacing: .14em; color: var(--fg);
  padding: 0 0 8px 11px; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
.panel h2::before {
  content: ""; position: absolute; left: 0; top: 1px; bottom: 9px; width: 2px; border-radius: 2px;
  background: rgba(var(--accent-rgb), .7);
}
.panel > h2:first-child {
  margin: -14px -14px 12px; padding: 10px 14px 9px 25px; border-radius: 6px 6px 0 0;
  background: rgba(var(--accent-rgb), .04);
}
.panel > h2:first-child::before { left: 14px; top: 10px; bottom: 9px; }
.panel h2 .src, .panel h2 .chip { letter-spacing: .08em; }
.grid { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .grid.hud { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.help { color: var(--dim); font-size: 15px; margin: 0; }
.muted { color: var(--dim); }
.empty { color: var(--dim); font-size: 15px; }

/* ---------- Réacteur / micro ---------- */
.reactor-zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 6px; isolation: isolate; }
/* Fond « plan technique » derrière le réacteur, fondu sur les bords */
.reactor-zone::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(var(--accent-rgb), .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(var(--accent-rgb), .07) 1px, transparent 1px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(circle at 50% 42%, #000 0, transparent 70%);
  mask: radial-gradient(circle at 50% 42%, #000 0, transparent 70%);
}
.reactor {
  position: relative; width: 300px; height: 300px; max-width: 80vw; max-height: 80vw;
  border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 50%; touch-action: manipulation;
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), .35));
}
.rx { width: 100%; height: 100%; overflow: visible; }
.rx * { transition: stroke .3s, fill .3s, opacity .3s; }
.rx-spin { transform-origin: 100px 100px; animation: spin linear infinite; }
.rx-s1 { animation-duration: 90s; }
.rx-s2 { animation-duration: 60s; animation-direction: reverse; }
.rx-s3 { animation-duration: 120s; }
.rx-s4 { animation-duration: 45s; animation-direction: reverse; }
.rx-s5 { animation-duration: 30s; }
.rx-thin { fill: none; stroke: rgba(var(--accent-rgb), .35); stroke-width: .5; }
.rx-ticks { fill: none; stroke: rgba(var(--accent-rgb), .6); stroke-width: 5; stroke-dasharray: .7 4.12; }
.rx-arcs { fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 120 14 40 14 8 10 140 30 70 163.5; }
/* 3/4 de cercle (r = 78 : 490 de circonférence), découpé en segments par .rx-cuts */
.rx-band { fill: none; stroke: rgba(var(--accent-rgb), .42); stroke-width: 14; stroke-dasharray: 368 122; }
.rx-cuts { fill: none; stroke: var(--bg); stroke-width: 15; stroke-dasharray: 1.1 11.15; }
.rx-edge { fill: none; stroke: rgba(var(--accent-rgb), .8); stroke-width: .8; stroke-dasharray: 403 134; }
.rx-edge + .rx-edge { stroke-dasharray: 333 110; }
.rx-dots circle { fill: var(--amber); filter: drop-shadow(0 0 2px var(--amber)); }
.rx-amber { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; }
.rx-amber-thin { fill: none; stroke: rgba(var(--amber-rgb), .7); stroke-width: 1; stroke-linecap: round; }
.rx-fine { fill: none; stroke: rgba(var(--accent-rgb), .7); stroke-width: 2.4; stroke-dasharray: .5 2.5; }
.rx-inner { fill: none; stroke: var(--cyan); stroke-width: 1.2; }
.rx-core { fill: url(#rxGlow); }
.rx-glow-a { stop-color: rgb(var(--accent-rgb)); stop-opacity: .28; }
.rx-glow-b { stop-color: rgb(var(--accent-rgb)); stop-opacity: .08; }
.rx-glow-c { stop-color: rgb(var(--accent-rgb)); stop-opacity: .02; }
.rx-name { font: 700 11.5px var(--mono); letter-spacing: .6px; fill: var(--fg); text-anchor: middle; paint-order: stroke; stroke: rgba(var(--accent-rgb), .55); stroke-width: .5; }
.rx-state { font: 5px var(--mono); letter-spacing: 1.4px; fill: var(--cyan); text-anchor: middle; opacity: .85; }
.rx-mic { fill: var(--dim); }
/* États : écoute (vert), réflexion (tout accélère), parole (la bande respire) */
.reactor[data-state="listening"] { filter: drop-shadow(0 0 18px rgba(var(--ok-rgb), .45)); }
.reactor[data-state="listening"] .rx-band { stroke: rgba(var(--ok-rgb), .6); }
.reactor[data-state="listening"] .rx-inner, .reactor[data-state="listening"] .rx-arcs { stroke: var(--ok); }
.reactor[data-state="listening"] .rx-state, .reactor[data-state="listening"] .rx-mic { fill: var(--ok); }
.reactor[data-state="listening"] .rx-glow-a { stop-color: rgb(var(--ok-rgb)); stop-opacity: .45; }
.reactor[data-state="thinking"] .rx-s1 { animation-duration: 6s; }
.reactor[data-state="thinking"] .rx-s2 { animation-duration: 3s; }
.reactor[data-state="thinking"] .rx-s3 { animation-duration: 4s; }
.reactor[data-state="thinking"] .rx-s4 { animation-duration: 2s; }
.reactor[data-state="thinking"] .rx-s5 { animation-duration: 1.5s; }
.reactor[data-state="speaking"] .rx-band, .reactor[data-state="speaking"] .rx-core { animation: breathe 1.1s ease-in-out infinite; }
.reactor[data-state="speaking"] .rx-glow-a { stop-opacity: .5; }
.reactor:hover .rx-inner { stroke-width: 2; }
.level { position: absolute; inset: 24%; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; pointer-events: none; transform: scale(1); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 75px rgba(var(--accent-rgb), .85), inset 0 0 45px rgba(var(--accent-rgb), .6); } }
@keyframes breathe { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ring, .core, .rx-spin, .rx-band, .rx-core { animation: none !important; } }
/* Réacteur miniature de la page de connexion */
.ring { position: absolute; border-radius: 50%; pointer-events: none; }
.r1 { inset: 0; border: 1px solid var(--line); }
.r2 { inset: 7%; border: 2px dashed rgba(var(--accent-rgb), .45); animation: spin 40s linear infinite; }
.r3 { inset: 17%; border: 1px solid rgba(var(--accent-rgb), .75); border-left-color: transparent; border-right-color: transparent; animation: spin 14s linear infinite reverse; }
.core {
  inset: 26%; display: grid; place-items: center; border: 1px solid var(--cyan);
  background: radial-gradient(circle, rgba(var(--accent-rgb), .55) 0%, rgba(var(--accent-rgb), .12) 55%, transparent 72%);
  box-shadow: 0 0 40px rgba(var(--accent-rgb), .35), inset 0 0 30px rgba(var(--accent-rgb), .3);
}
.reactor-label { font: 12px var(--mono); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; text-align: center; min-height: 1.4em; }
.clock { font: 11px var(--mono); letter-spacing: .12em; color: var(--dim); text-transform: uppercase; text-align: center; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  background: transparent; border: 1px solid var(--line); color: var(--fg); border-radius: 999px;
  font-weight: 600; font-size: 14px; padding: 6px 13px; cursor: pointer;
}
.chip:hover { border-color: var(--cyan); }
.chip[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); }

.connectors { display: flex; flex-wrap: wrap; gap: 6px; }
.conn { font: 12px var(--mono); border-radius: 4px; padding: 4px 8px; border: 1px solid var(--line); color: var(--dim); text-transform: lowercase; }
.conn.on { color: var(--ok); border-color: rgba(var(--ok-rgb), .35); }
.conn.on::before { content: "● "; }
.conn.off { color: var(--amber); border-color: rgba(var(--amber-rgb), .4); }
.conn.off::before { content: "○ "; }

.composer { display: flex; gap: 8px; width: 100%; }
.composer input { flex: 1; min-width: 0; }

#you { color: var(--dim); font-size: 15px; margin: 0 0 6px; overflow-wrap: anywhere; }
#answer { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 18px; }

/* ---------- Listes ---------- */
ul.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ul.list li { display: flex; gap: 10px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
ul.list li:last-child { border-bottom: 0; padding-bottom: 0; }
ul.list .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
ul.list .meta { display: block; font: 11px var(--mono); color: var(--dim); }
ul.list .late { color: var(--amber); }
ul.list li.done .txt { color: var(--dim); text-decoration: line-through; }
.box {
  width: 24px; height: 24px; flex: none; border: 1px solid var(--cyan); border-radius: 3px; background: transparent;
  color: var(--ok); cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
}
.del { background: transparent; border: 0; color: var(--dim); cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px; }
.del:hover { color: var(--red); }

/* ---------- Formulaires ---------- */
label.f { display: flex; flex-direction: column; gap: 5px; font: 11px var(--mono); color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea, select {
  width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px; font: 500 16px var(--font); letter-spacing: normal; text-transform: none;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--cyan); outline: none; }
.row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.btn {
  background: var(--cyan); color: var(--bg); border: 1px solid var(--cyan); border-radius: 4px; font-weight: 600; font-size: 15px;
  letter-spacing: .06em; padding: 9px 15px; cursor: pointer; white-space: nowrap;
}
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--cyan); }
.btn.warn { background: transparent; color: var(--amber); border-color: var(--amber); }
.btn.danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn.rec { background: transparent; color: var(--ok); border-color: var(--ok); }
.btn:disabled { opacity: .5; cursor: default; }
.form { display: flex; flex-direction: column; gap: 12px; }
.add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.add input[type="text"] { flex: 1 1 200px; min-width: 0; }
.add input[type="date"] { flex: 0 1 160px; }
.proc { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: var(--panel); }
.readme { background: var(--panel-2); border-left: 2px solid var(--cyan); padding: 10px 12px; border-radius: 4px; font-size: 16px; }
.range { display: flex; gap: 10px; align-items: center; }
.range input { flex: 1; accent-color: var(--cyan); }
.voice-choice { border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: var(--panel-2); }
.voice-choice h3 { margin: 0 0 8px; color: var(--cyan); font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.voice-choice .help { margin-top: 8px; }
.voice-status { margin: 0; padding: 9px 10px; border: 1px dashed var(--line); border-radius: 4px; color: var(--dim); }
.quota { display: grid; gap: 6px; }
.quota-bar { height: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); overflow: hidden; }
.quota-bar > span { display: block; height: 100%; width: 0; background: var(--ok); transition: width .4s; }
.quota-bar.warn > span { background: var(--amber); }
.quota-bar.err > span { background: var(--red); }
.voice-status.imported { border-style: solid; border-color: rgba(var(--ok-rgb), .55); color: var(--ok); background: rgba(var(--ok-rgb), .06); font-weight: 600; }

#toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  background: var(--panel-2); border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 10px 14px;
  font-size: 15px; max-width: calc(100% - 32px); z-index: 50; box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
#toast.err { border-color: var(--red); color: var(--red); }
#toast.ok { border-color: rgba(var(--ok-rgb), .5); }

/* ---------- Connexion ---------- */
.login { min-height: 100vh; display: grid; place-items: center; }
.login .card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.login .mini-reactor { width: 110px; height: 110px; margin: 0 auto; position: relative; }
.login .err { color: var(--red); min-height: 1.3em; font-size: 15px; }

/* ---------- Admin ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 11px var(--mono); letter-spacing: .12em; color: var(--dim); text-transform: uppercase; font-weight: 400; white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr[aria-selected="true"] { background: var(--panel-2); }
td.num { font-variant-numeric: tabular-nums; }
.badge { font: 10px var(--mono); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--amber); color: var(--amber); text-transform: uppercase; letter-spacing: .1em; }
.secret { font-family: var(--mono); background: var(--bg); border: 1px dashed var(--ok); color: var(--ok); padding: 8px 10px; border-radius: 4px; user-select: all; overflow-wrap: anywhere; }
.msgs { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.msg { padding: 8px 10px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { border-color: rgba(var(--accent-rgb), .35); }
.msg .meta { display: block; font: 11px var(--mono); color: var(--dim); margin-bottom: 3px; }

/* ---------- Alertes ---------- */
.tab-badge {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px;
  background: var(--amber); color: var(--bg); font: 600 11px/18px var(--mono); letter-spacing: 0;
}
nav.tabs button[aria-selected="true"] .tab-badge { background: var(--bg); color: var(--cyan); }
.alert-chip { color: var(--amber); border-color: var(--amber); }
.alerts { display: flex; flex-direction: column; gap: 10px; }
.alert-item { border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 6px; padding: 10px 12px; background: var(--panel-2); }
.alert-item.alerte { border-left-color: var(--amber); }
.alert-item.unread { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35); }
.alert-item .meta { font: 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.alert-item b { display: block; margin: 2px 0 4px; font-size: 17px; }
.alert-item p { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
details.older { margin-top: 14px; }
details.older summary { cursor: pointer; color: var(--dim); font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
details.older .alerts { margin-top: 10px; }

/* ---------- Demandes d'autorisation (HUD) ---------- */
.approvals { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.approvals:empty { display: none; }
.approval { border: 1px solid var(--amber); border-radius: 6px; padding: 10px 12px; background: var(--panel-2); display: flex; flex-direction: column; gap: 6px; }
.approval b { color: var(--amber); font-size: 17px; }
.approval .meta { font: 11px var(--mono); color: var(--dim); }
.approval code { font: 12px var(--mono); color: var(--fg); background: var(--bg); padding: 6px 8px; border-radius: 4px; overflow-wrap: anywhere; max-height: 120px; overflow: auto; }

/* ---------- Lien de connexion Claude ---------- */
.claude-login-link { display: inline-block; overflow-wrap: anywhere; }

/* ---------- Provenance : ce qui vit dans Claude / ce qui est propre à Jarvis ---------- */
.src {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px; border: 1px solid;
  font: 10px var(--mono); letter-spacing: .08em; text-transform: none; vertical-align: middle; white-space: nowrap;
}
.src.claude { color: var(--ok); border-color: rgba(var(--ok-rgb), .4); }
.src.jarvis { color: var(--cyan); border-color: rgba(var(--accent-rgb), .4); }

/* ---------- Tâches planifiées ---------- */
.cards { display: flex; flex-direction: column; gap: 10px; }
.task { border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 6px; padding: 10px 12px; background: var(--panel-2); display: flex; flex-direction: column; gap: 4px; }
.task.off { border-left-color: var(--line); opacity: .75; }
.task b { font-size: 17px; overflow-wrap: anywhere; }
.task .meta { font: 12px var(--mono); color: var(--dim); }
.task details summary { cursor: pointer; color: var(--dim); font: 12px var(--mono); }
.task details p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.alert-item.tache { border-left-color: var(--ok); }

/* ---------- Savoir-faire, checklist ---------- */
ul.list .steps { display: block; color: var(--dim); font-size: 14px; white-space: pre-wrap; margin-top: 4px; }
ul.list .col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.checklist .box { display: inline-grid; place-items: center; cursor: default; }
.checklist li { align-items: center; }

/* ---------- Barre d'onglets : vert = dans ton Claude, bleu = propre à Jarvis ---------- */
nav.tabs button.t-claude { border-bottom: 2px solid rgba(var(--ok-rgb), .55); }
nav.tabs button.t-jarvis { border-bottom: 2px solid rgba(var(--accent-rgb), .7); }
nav.tabs button.t-claude[aria-selected="true"] { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.legend { margin: -6px 0 0; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font: 11px var(--mono); color: var(--dim); letter-spacing: .06em; }
.legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legend .dot.claude { background: var(--ok); }
.legend .dot.jarvis { background: var(--cyan); margin-left: 4px; }
.readme.jarvis { border-left-color: var(--cyan); }
[data-panel="taches"] .readme, [data-panel="memoire"] .readme, [data-panel="savoirfaire"] .readme, [data-panel="applis"] .readme { border-left-color: var(--ok); }

/* ---------- Mon Jarvis : liste + détail ---------- */
.md { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.md-back { align-self: flex-start; margin-bottom: 10px; }
.md-list .panel h2 .chip { white-space: nowrap; flex: none; }
@media (min-width: 900px) {
  .md { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; }
  .md-back { display: none; }
  .md-detail { position: sticky; top: 12px; }
}
@media (max-width: 899px) {
  .md:not(.open) .md-detail { display: none; }
  .md.open .md-list { display: none; }
}
.md-detail { display: flex; flex-direction: column; min-height: 200px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: transparent; color: var(--fg); font: inherit; padding: 8px 10px;
  border: 1px solid transparent; border-left: 3px solid var(--line); border-radius: 4px;
}
.nav-item.claude { border-left-color: var(--ok); }
.nav-item:hover { background: var(--panel-2); }
.nav-item[aria-current="true"] { background: var(--panel-2); border-color: rgba(var(--accent-rgb), .5); border-left-color: var(--cyan); }
.nav-item .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-item b { font-weight: 600; overflow-wrap: anywhere; }
.nav-item .meta { font: 12px var(--mono); color: var(--dim); }
.nav-item .count { font: 12px var(--mono); color: var(--dim); }
.nav-item .new { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.detail-head h1 { margin: 0; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.detail-meta { margin: 6px 0 0; font: 12px var(--mono); color: var(--dim); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.detail-section { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.detail-section h3 { margin: 0; font: 400 11px var(--mono); letter-spacing: .22em; color: var(--dim); text-transform: uppercase; }
.consigne { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
/* Réglages : le réglage ouvert est déjà un panneau */
.md-plain { min-height: 0; }
.md-plain > .panel { flex: 1; }
.panel h3.sub { margin-top: 16px; color: var(--fg); font-weight: 600; }