/* Lab — surcouche de Tabler (vendor/tabler.min.css). Structure recopiée de brain-api, couleurs du Cyclope (lecyclope-conseil.fr). */

/* ── Thème Cyclope ──────────────────────────────────────
   Clair : papier beige, encre noire, accent terracotta (palette du site lecyclope-conseil.fr).
   Sombre : même famille, encre chaude et papier inversés.
   light-dark() suit le color-scheme posé par data-bs-theme (Tabler 1.6). */
html:root {
  --tblr-font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tblr-body-font-size: 0.9375rem;
  --tblr-body-font-weight: 400;
  --tblr-border-radius: 0.5rem;
  --tblr-card-border-radius: 1rem;

  --cy-ink: #101010;
  --cy-paper: #f3ede2;
  --cy-accent: light-dark(#a65b3b, #d08a68);

  --tblr-body-bg: light-dark(#f3ede2, #141311);
  --tblr-bg-surface: light-dark(#f8f4ec, #1c1a17);
  --tblr-bg-surface-secondary: light-dark(#ece2d1, #24211d);
  --tblr-bg-surface-tertiary: light-dark(#f7f2ea, #201e1a);
  --tblr-bg-forms: light-dark(#fbf8f2, #141311);
  --tblr-border-color: light-dark(#ddd3c3, #35302a);
  --tblr-border-color-translucent: light-dark(rgba(16, 16, 16, 0.14), rgba(243, 237, 226, 0.14));
  --tblr-body-color: light-dark(#101010, #f3ede2);
  --tblr-emphasis-color: light-dark(#000000, #ffffff);
  --tblr-secondary: light-dark(#5f584f, #b5aa9b);
  --tblr-secondary-color: light-dark(#5f584f, #b5aa9b);
  --tblr-muted: light-dark(#8a7d6f, #9a8f80);
  /* Boutons principaux : pilule noire (clair) ou papier (sombre), comme le bouton « Contact » du site. */
  --tblr-primary: light-dark(#101010, #f3ede2);
  --tblr-primary-rgb: 16, 16, 16;
  --tblr-primary-fg: light-dark(#f8f4ec, #101010);
  --tblr-link-color: var(--cy-accent);
  --tblr-link-hover-color: light-dark(#7e4129, #e6a888);

  /* Statuts (toujours icône + libellé) */
  --st-good: light-dark(#2b6f4d, #6fbf94);
  --st-warning: light-dark(#8a6a12, #e0c068);
  --st-serious: light-dark(#a65b3b, #d08a68);
  --st-critical: light-dark(#c0392b, #e8705f);
  --st-idle: light-dark(#8a7d6f, #9a8f80);

  /* Série unique des mini-graphiques et jauges : terracotta */
  --series-1: var(--cy-accent);
  --series-1-soft: light-dark(rgba(166, 91, 59, 0.12), rgba(208, 138, 104, 0.16));
  --meter-track: light-dark(rgba(16, 16, 16, 0.08), rgba(243, 237, 226, 0.12));
  --accent-pink: var(--cy-accent);
  --accent-cyan: light-dark(#2b6f4d, #6fbf94);
}
html:root[data-bs-theme="dark"] { --tblr-body-bg-rgb: 20, 19, 17; --tblr-primary-rgb: 243, 237, 226; }

/* Barre latérale : encre dans les deux modes */
.navbar-vertical { --tblr-navbar-bg: #101010; --tblr-navbar-border-color: #26231f; background: #101010; }
.navbar-vertical .nav-link { color: #d9cfbf; }

/* Formes du site : boutons en pilule, titres serrés et gras */
.btn { border-radius: 9999px; }
.btn-primary { --tblr-btn-bg: var(--tblr-primary); --tblr-btn-border-color: var(--tblr-primary); --tblr-btn-color: var(--tblr-primary-fg);
  --tblr-btn-hover-bg: var(--cy-accent); --tblr-btn-hover-border-color: var(--cy-accent); --tblr-btn-hover-color: #f8f4ec;
  --tblr-btn-active-bg: var(--cy-accent); --tblr-btn-active-border-color: var(--cy-accent); --tblr-btn-active-color: #f8f4ec; }
.card { border-radius: 1rem; box-shadow: none; }
.page-title, .brand-lg, h1, .h1, h2, .h2 { font-weight: 800; letter-spacing: -0.03em; }

body {
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}
.num, .stat-value, .kv dd, td.num { font-variant-numeric: tabular-nums; }
code, .font-monospace { font-size: 0.8125rem; }

/* ── Barre latérale ─────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.125rem; font-weight: 600; letter-spacing: 0.01em; }
.brand strong { font-weight: 800; }
.navbar-vertical .navbar-brand.brand { margin-inline: 0; justify-content: flex-start; padding-inline: 1.5rem; }
@media (max-width: 991.98px) { .navbar-vertical .navbar-brand.brand { padding-inline: 0.5rem; } }
.brand-lg { font-size: 1.5rem; color: var(--tblr-body-color); }
.navbar-vertical .nav-link { font-weight: 600; border-radius: 8px; margin: 1px 0.75rem; padding-inline: 0.75rem; }
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link:hover { background: rgba(255, 255, 255, 0.07); }
.navbar-vertical .nav-item.active > .nav-link { color: #f8f4ec; background: rgba(166, 91, 59, 0.22); box-shadow: inset 3px 0 0 #d08a68; }
.navbar-vertical .nav-item.active .nav-link-icon { color: #d08a68; }
.nav-section { padding: 0.25rem 1.5rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.nav-ext { width: 14px; height: 14px; opacity: 0.45; }
.sidebar-footer {
  margin-top: auto; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-user { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1; }
.sidebar-email { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-actions { display: flex; gap: 0.25rem; }
a.sidebar-user { text-decoration: none; border-radius: 8px; padding: 0.3rem 0.4rem; margin-left: -0.4rem; }
a.sidebar-user:hover, a.sidebar-user.active { background: rgba(255, 255, 255, 0.07); }
a.sidebar-user.active .sidebar-email { color: #f8f4ec; }
/* Menu « Outils » : liens externes repliés */
.nav-chevron { width: 16px; height: 16px; opacity: 0.6; transition: transform 0.15s; }
.nav-tools > .nav-link:not(.collapsed) .nav-chevron { transform: rotate(90deg); }
.nav-submenu { margin: 0; padding: 0; }
.navbar-vertical.navbar-expand-lg .navbar-nav .nav-submenu .nav-link { padding-left: 0.75rem; margin-left: 0.5rem; font-weight: 500; font-size: 0.875rem; }
.nav-submenu { border-left: 1px solid rgba(255, 255, 255, 0.1); margin-left: 1.85rem !important; }
.sidebar-actions .btn { color: rgba(255, 255, 255, 0.7); }
@media (min-width: 992px) {
  #sidebar-menu { display: flex !important; flex-direction: column; min-height: calc(100vh - 4.5rem); }
}
/* La barre latérale est toujours encre : on se base sur le thème de <html>, pas sur le plus proche parent. */
html[data-bs-theme="dark"] .theme-icon-dark, html[data-bs-theme="light"] .theme-icon-light { display: none; }

/* ── Mise en page ───────────────────────────────────── */
.page-header { margin-bottom: 0.25rem; }
.page-pretitle { font-weight: 700; letter-spacing: 0.06em; }
.page-title { font-weight: 800; font-size: 1.5rem; }
.page-body { margin-top: 1.25rem; margin-bottom: 2rem; }
.container-fluid.page-pad { padding-inline: clamp(1rem, 2.5vw, 2.25rem); }
.card { border-radius: 12px; }
.card-title { font-weight: 800; }
.card-header { min-height: 3.25rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-good); display: inline-block; box-shadow: 0 0 0 0 color-mix(in oklab, var(--st-good) 50%, transparent); animation: pulse 2s infinite; }
.live-dot.stale { background: var(--st-warning); animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ── Tuiles de stats ────────────────────────────────── */
.stat-card .card-body { padding: 1.1rem 1.25rem 0.9rem; }
.stat-head { display: flex; align-items: center; gap: 0.5rem; color: var(--tblr-secondary); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-head .icon { width: 18px; height: 18px; }
.stat-value { font-size: 2rem; font-weight: 800; line-height: 1.15; margin-top: 0.35rem; color: var(--tblr-body-color); }
.stat-value small { font-size: 1rem; font-weight: 700; color: var(--tblr-secondary); margin-left: 0.15rem; }
.stat-sub { color: var(--tblr-secondary); font-size: 0.875rem; }

/* Jauge : piste neutre, remplissage bleu ; statut seulement au-delà des seuils */
.meter { height: 6px; border-radius: 3px; background: var(--meter-track); overflow: hidden; margin: 0.6rem 0 0.25rem; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: var(--series-1); transition: width 0.4s ease; }
.meter.is-warning > span { background: var(--st-warning); }
.meter.is-critical > span { background: var(--st-critical); }

/* Mini-graphique */
.spark { position: relative; height: 56px; margin: 0.5rem -0.25rem 0; }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .area { fill: var(--series-1-soft); stroke: none; }
.spark .cross { stroke: var(--tblr-border-color-translucent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark .dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--series-1); box-shadow: 0 0 0 2px var(--tblr-bg-surface); pointer-events: none; }
.spark .tip {
  position: absolute; top: -2.1rem; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: #101010; color: #f8f4ec; font-size: 0.75rem; font-weight: 700; border: 1px solid #35302a;
  padding: 0.2rem 0.5rem; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.spark .empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.75rem; color: var(--tblr-secondary); }

/* ── Statuts ────────────────────────────────────────── */
.st { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: 0.8125rem; white-space: nowrap; }
.st .icon { width: 16px; height: 16px; stroke-width: 2.25; }
.st-good { color: var(--st-good); }
.st-warning { color: var(--st-warning); }
.st-serious { color: var(--st-serious); }
.st-critical { color: var(--st-critical); }
.st-idle { color: var(--st-idle); }
.st-partial { color: var(--tblr-primary); }
.st-building { color: var(--accent-cyan); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--st-idle); }
.status-dot.good { background: var(--st-good); }
.status-dot.warning { background: var(--st-warning); }
.status-dot.critical { background: var(--st-critical); }

.health-banner { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.25rem; border-radius: 12px; border: 1px solid; }
.health-banner .icon { width: 26px; height: 26px; flex-shrink: 0; }
.health-banner.ok { border-color: color-mix(in oklab, var(--st-good) 35%, transparent); background: color-mix(in oklab, var(--st-good) 8%, var(--tblr-bg-surface)); }
.health-banner.bad { border-color: color-mix(in oklab, var(--st-critical) 40%, transparent); background: color-mix(in oklab, var(--st-critical) 8%, var(--tblr-bg-surface)); }
.health-banner .title { font-weight: 800; font-size: 1rem; }

/* ── Listes clé/valeur ──────────────────────────────── */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem; margin: 0; }
.kv dt { color: var(--tblr-secondary); font-weight: 600; }
.kv dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }

.list-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--tblr-border-color); }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .name { font-weight: 700; }
.list-row .meta { color: var(--tblr-secondary); font-size: 0.8125rem; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.services-grid .list-row { border-bottom: 1px solid var(--tblr-border-color); }
.services-grid .list-row:last-child { border-bottom: 1px solid var(--tblr-border-color); }
@media (min-width: 768px) { .services-grid .list-row:nth-child(odd) { border-right: 1px solid var(--tblr-border-color); } }
.group-label { padding: 0.4rem 1rem; background: var(--tblr-bg-surface-secondary); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tblr-secondary); }

/* ── Tableaux ───────────────────────────────────────── */
.table > :not(caption) > * > * { padding: 0.7rem 1rem; vertical-align: middle; }
.table thead th { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; }
.table tbody tr.clickable { cursor: pointer; }
.group-row td { background: var(--tblr-bg-surface-secondary); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tblr-secondary); padding-block: 0.4rem !important; }

/* ── Plan ───────────────────────────────────────────── */
.task { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--tblr-border-color); }
.task:last-child { border-bottom: 0; }
.task-title { font-weight: 700; }
.task-desc { color: var(--tblr-secondary); margin-top: 0.2rem; }
.task details { margin-top: 0.4rem; }
.task summary { cursor: pointer; color: var(--tblr-primary); font-weight: 700; font-size: 0.8125rem; }
.tree-kv { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 0.3rem 1rem; margin: 0.5rem 0 0; font-size: 0.875rem; }
.tree-kv dt { color: var(--tblr-secondary); font-weight: 600; }
.tree-kv dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tree-kv ul { margin: 0; padding-left: 1.1rem; }
.nav-tabs-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs-scroll .nav-link { white-space: nowrap; font-weight: 700; }

/* ── Divers ─────────────────────────────────────────── */
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--tblr-secondary); }
.skeleton { display: grid; place-items: center; min-height: 50vh; color: var(--tblr-secondary); }
textarea.font-monospace { min-height: 180px; }

@media (max-width: 575.98px) {
  .stat-value { font-size: 1.65rem; }
  .page-title { font-size: 1.3rem; }
  .list-row { padding-inline: 1rem; }
  .table > :not(caption) > * > * { padding: 0.6rem 0.75rem; }
}

/* ── Login ──────────────────────────────────────────── */
.login-body { min-height: 100vh; }

/* Accents terracotta */
.page-pretitle { color: var(--accent-pink); }
.stat-head .icon, .card-title .icon { color: var(--cy-accent); }
.task summary { color: var(--cy-accent); }
code { color: var(--accent-pink); background: color-mix(in oklab, var(--accent-pink) 8%, transparent); }
.badge.bg-purple-lt { color: var(--tblr-primary) !important; }
.form-control:focus, .form-select:focus { border-color: var(--cy-accent); box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--cy-accent) 22%, transparent); }

@media (max-width: 575.98px) {
  .tree-kv { grid-template-columns: 1fr; gap: 0.1rem; }
  .tree-kv dd { margin-bottom: 0.4rem; padding-left: 0.5rem; }
}

/* ── Suivi (kanban) ─────────────────────────────────── */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.kanban-col { background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); border-radius: 12px; padding: 0.75rem; min-height: 200px; transition: border-color 0.15s, background 0.15s; }
.kanban-col.drop { border-color: var(--tblr-primary); background: color-mix(in oklab, var(--tblr-primary) 8%, var(--tblr-bg-surface-secondary)); }
.kanban-head { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.25rem 0.75rem; font-weight: 800; }
.kanban-head .icon { width: 18px; height: 18px; }
.kanban-todo .kanban-head .icon { color: var(--st-idle); }
.kanban-doing .kanban-head .icon { color: var(--tblr-primary); }
.kanban-done .kanban-head .icon { color: var(--st-good); }
.kanban-list { display: flex; flex-direction: column; gap: 0.6rem; }
.kanban-card { background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: 10px; padding: 0.8rem 0.9rem 0.5rem; cursor: grab; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.kanban-card:hover { border-color: color-mix(in oklab, var(--tblr-primary) 45%, var(--tblr-border-color)); }
.kanban-card.dragging { opacity: 0.5; }
.kanban-done .kanban-card { opacity: 0.88; }
.kanban-title { font-weight: 800; line-height: 1.35; }
.kanban-desc { color: var(--tblr-secondary); font-size: 0.875rem; margin-top: 0.25rem; }
.kanban-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.kanban-foot .btn-list { gap: 0.15rem; }
.kanban-empty { color: var(--tblr-secondary); text-align: center; padding: 1.5rem 0; font-size: 0.875rem; }
.owner { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 800; }
.owner .icon { width: 14px; height: 14px; }
.owner-claude { color: var(--tblr-primary); }
.owner-toi { color: var(--accent-pink); }
.owner-ensemble { color: var(--accent-cyan); }
@media (max-width: 991.98px) {
  .kanban { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86vw, 380px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
  .kanban-col { scroll-snap-align: start; }
}

/* ── Guide ──────────────────────────────────────────── */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem; counter-reset: none; }
.flow-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.flow-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.8125rem; background: color-mix(in oklab, var(--tblr-primary) 16%, transparent); color: var(--tblr-primary); }
.flow-title { font-weight: 800; }
.flow-title .icon { width: 16px; height: 16px; color: var(--accent-pink); }
.flow-text { color: var(--tblr-secondary); font-size: 0.875rem; margin-top: 0.15rem; }
.guide-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.guide-search { width: min(320px, 100%); }
.guide-avatar { background: color-mix(in oklab, var(--tblr-primary) 14%, transparent); color: var(--tblr-primary); }
.guide-avatar .icon { width: 22px; height: 22px; }
.guide-name { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.2rem; }
.guide-tagline { font-weight: 700; color: var(--accent-pink); margin-bottom: 0.5rem; }
.guide-what { color: var(--tblr-body-color); }
.guide-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tblr-secondary); margin: 1rem 0 0.4rem; }
.guide-list, .guide-notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.guide-list li { display: flex; gap: 0.5rem; }
.guide-check { color: var(--st-good); flex-shrink: 0; }
.guide-check .icon { width: 16px; height: 16px; margin-top: 2px; }
.guide-notes li { color: var(--tblr-secondary); font-size: 0.875rem; padding-left: 0.85rem; position: relative; }
.guide-notes li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--tblr-primary); }
.kanban-jump .btn { flex: 1; }

/* ── Brain (système neuronal) ───────────────────────── */
.brain-stat { font-size: 1.75rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.brain-diagram { width: 100%; }
.brain-svg { display: block; width: 100%; height: auto; max-height: 78vh; margin: 0 auto; }
.brain-link { stroke-width: 2; stroke: var(--st-idle); stroke-opacity: 0.45; stroke-dasharray: 3 7; }
.brain-link.s-online, .brain-link.s-partial { stroke: var(--tblr-primary); stroke-opacity: 0.75; stroke-dasharray: 10 8; animation: brain-flow 1.6s linear infinite; }
.brain-link.s-online { stroke: var(--st-good); }
.brain-link.s-building { stroke: var(--accent-cyan); stroke-opacity: 0.7; }
.brain-link.s-offline { stroke: var(--st-critical); stroke-opacity: 0.8; stroke-dasharray: none; }
.brain-link.is-selected { stroke-width: 3.5; stroke-opacity: 1; }
@keyframes brain-flow { to { stroke-dashoffset: -36; } }
.brain-node { cursor: pointer; outline: none; }
.brain-cell { fill: var(--tblr-bg-surface); stroke-width: 3; stroke: var(--st-idle); transition: transform 0.15s; }
.brain-halo { fill: none; stroke-width: 2; stroke: transparent; }
.brain-icon { color: var(--st-idle); pointer-events: none; }
.brain-node.s-online .brain-cell { stroke: var(--st-good); } .brain-node.s-online .brain-icon { color: var(--st-good); }
.brain-node.s-partial .brain-cell { stroke: var(--tblr-primary); } .brain-node.s-partial .brain-icon { color: var(--tblr-primary); }
.brain-node.s-building .brain-cell { stroke: var(--accent-cyan); } .brain-node.s-building .brain-icon { color: var(--accent-cyan); }
.brain-node.s-planned .brain-cell { stroke-dasharray: 5 5; }
.brain-node.s-offline .brain-cell { stroke: var(--st-critical); } .brain-node.s-offline .brain-icon { color: var(--st-critical); }
.brain-node:hover .brain-halo, .brain-node:focus-visible .brain-halo { stroke: var(--tblr-border-color); }
.brain-node.is-selected .brain-halo { stroke: var(--accent-pink); stroke-width: 3; }
.brain-node:focus-visible .brain-halo { stroke: var(--tblr-primary); stroke-width: 3; }
.brain-label { font-family: var(--tblr-font-sans-serif); font-size: 21px; font-weight: 800; fill: var(--tblr-body-color); pointer-events: none; }
.brain-node.s-planned .brain-label { fill: var(--tblr-secondary); }
.brain-axon { stroke: var(--tblr-border-color); stroke-width: 1.5; }
.brain-sat { fill: var(--st-idle); stroke: var(--tblr-bg-surface); stroke-width: 2; }
.brain-sat.s-online { fill: var(--st-good); } .brain-sat.s-building { fill: var(--accent-cyan); } .brain-sat.s-offline { fill: var(--st-critical); }
.brain-sat.s-planned { fill: var(--tblr-bg-surface); stroke: var(--st-idle); stroke-width: 2; }
.brain-cortex .brain-cell { stroke-width: 4; }
.brain-cortex-glow { fill: url(#brainGlow); pointer-events: none; }
.brain-glow-in { stop-color: var(--tblr-primary); stop-opacity: 0.28; }
.brain-glow-out { stop-color: var(--tblr-primary); stop-opacity: 0; }
.brain-cortex-label { font-family: var(--tblr-font-sans-serif); font-size: 19px; font-weight: 900; letter-spacing: 0.12em; fill: var(--tblr-body-color); pointer-events: none; }
.brain-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8125rem; color: var(--tblr-secondary); font-weight: 700; }
.brain-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--st-idle); }
.brain-dot.s-online { background: var(--st-good); } .brain-dot.s-partial { background: var(--tblr-primary); }
.brain-dot.s-building { background: var(--accent-cyan); } .brain-dot.s-offline { background: var(--st-critical); }
.brain-dot.s-planned { background: transparent; border: 2px solid var(--st-idle); }
/* En attente : serveur redémarré, l'agent n'a pas encore eu son prochain passage */
.st-waiting { color: var(--st-warning); }
.brain-dot.s-waiting { background: var(--st-warning); }
.brain-sat.s-waiting { fill: var(--st-warning); }
.brain-node.s-waiting .brain-cell { stroke: var(--st-warning); } .brain-node.s-waiting .brain-icon { color: var(--st-warning); }
.brain-link.s-waiting { stroke: var(--st-warning); stroke-opacity: 0.7; stroke-dasharray: 6 6; }
.brain-avatar { background: color-mix(in oklab, var(--tblr-primary) 14%, transparent); color: var(--tblr-primary); }
.brain-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }   /* schéma pleine largeur, fiche dessous */
.brain-panel-wrap { scroll-margin-top: 1rem; }
.brain-agents { display: flex; flex-direction: column; }
.brain-agent { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0; border-bottom: 1px solid var(--tblr-border-color); }
.brain-agent:last-child { border-bottom: 0; }
.brain-agent .brain-dot { margin-top: 0.4rem; }
.brain-list-item { cursor: pointer; }
.brain-list-item:hover { border-color: color-mix(in oklab, var(--tblr-primary) 45%, var(--tblr-border-color)); }
.brain-list-item.is-selected { border-color: var(--accent-pink); box-shadow: 0 0 0 1px var(--accent-pink); }
.brain-list-icon { color: var(--tblr-primary); display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .brain-link { animation: none !important; } }
@media (max-width: 767.98px) { .brain-label { display: none; } .brain-panel-wrap { position: static; } }

/* ── Plan (objectif global) ─────────────────────────── */
.plan-hero { background: linear-gradient(135deg, color-mix(in oklab, var(--tblr-primary) 10%, var(--tblr-bg-surface)), var(--tblr-bg-surface) 60%); }
.plan-motto { font-size: 1.35rem; font-weight: 800; color: var(--accent-pink); line-height: 1.3; }
.plan-now { padding: 0.75rem 1rem; border-radius: 10px; background: color-mix(in oklab, var(--tblr-primary) 10%, transparent); }
.plan-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; position: sticky; top: 0; z-index: 5; padding: 0.5rem 0; background: var(--tblr-body-bg); }
.plan-section { margin-bottom: 2rem; scroll-margin-top: 4rem; }
/* « Comment fonctionne le système » */
.plan-intro { font-size: 0.975rem; line-height: 1.6; }
.how-icon { background: color-mix(in oklab, var(--tblr-primary) 14%, transparent); color: var(--tblr-primary); }
.how-flow { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.how-flow li { counter-increment: step; position: relative; padding: 0.6rem 0.75rem 0.6rem 2.6rem; border: 1px solid var(--tblr-border-color); border-radius: 8px; font-size: 0.875rem; line-height: 1.4; }
.how-flow li::before { content: counter(step); position: absolute; left: 0.7rem; top: 0.55rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; background: var(--tblr-primary); color: #fff; }
.how-note { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; }
.how-note .icon { flex-shrink: 0; margin-top: 0.15rem; color: var(--tblr-primary); }
/* Schéma Claude : abonnement / API / SDK */
.cd-lanes { display: flex; flex-direction: column; gap: 0.75rem; }
.cd-lane { border: 1px solid var(--tblr-border-color); border-radius: 10px; padding: 0.75rem; }
.cd-lane.is-active { border-color: var(--tblr-primary); box-shadow: 0 0 0 1px var(--tblr-primary) inset; }
.cd-lane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.cd-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0.4rem; }
.cd-node { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem 0.6rem; border-radius: 8px; background: var(--tblr-bg-surface-secondary); min-width: 0; }
.cd-node-icon { flex-shrink: 0; color: var(--tblr-primary); }
.cd-node-title { font-weight: 700; font-size: 0.875rem; }
.cd-node-sub { font-size: 0.78rem; color: var(--tblr-secondary); line-height: 1.3; }
.cd-node.is-max { background: color-mix(in oklab, var(--accent-pink, #d63384) 14%, transparent); }
.cd-node.is-api { background: color-mix(in oklab, var(--tblr-primary) 16%, transparent); }
.cd-node.is-local { background: color-mix(in oklab, var(--tblr-green, #2fb344) 16%, transparent); }
.cd-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tblr-secondary); font-size: 0.7rem; text-align: center; max-width: 7rem; }
@media (max-width: 767.98px) {
  .cd-row { grid-template-columns: 1fr; }
  .cd-arrow { flex-direction: row; gap: 0.3rem; max-width: none; }
  .cd-arrow .icon { transform: rotate(90deg); }
}
.plan-section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; font-weight: 800; margin-bottom: 0.9rem; }
.plan-section-title .icon { color: var(--tblr-primary); }
.plan-timeline { position: relative; padding-left: 2.75rem; display: flex; flex-direction: column; gap: 1rem; }
.plan-timeline::before { content: ""; position: absolute; left: 1rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--tblr-border-color); }
.plan-phase { position: relative; }
.plan-phase-marker { position: absolute; left: -2.75rem; top: 0.9rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 0.875rem; background: var(--tblr-bg-surface); border: 2px solid var(--st-idle); color: var(--tblr-secondary); }
.plan-phase-marker .icon { width: 16px; height: 16px; }
.plan-phase.s-done .plan-phase-marker { border-color: var(--st-good); color: var(--st-good); }
.plan-phase.s-building .plan-phase-marker { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.plan-phase.is-current .plan-phase-marker { border-color: var(--accent-pink); color: var(--accent-pink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-pink) 18%, transparent); }
.plan-phase.is-current > .card { border-color: color-mix(in oklab, var(--accent-pink) 55%, var(--tblr-border-color)); }
.plan-items { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.plan-items li { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--tblr-border-color); }
.plan-items li:last-child { border-bottom: 0; }
.plan-items li.s-done > .plan-item-title { color: var(--tblr-secondary); }
.plan-item-title { flex: 1; min-width: 0; }
.plan-item-meta { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.plan-card-ref { font-size: 0.75rem; font-weight: 800; color: var(--tblr-primary); text-decoration: none; padding: 0.05rem 0.4rem; border-radius: 6px; background: color-mix(in oklab, var(--tblr-primary) 10%, transparent); }
.plan-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.plan-checklist li { display: flex; gap: 0.5rem; }
.plan-checklist li.is-done > span:last-child { color: var(--tblr-secondary); text-decoration: line-through; }
.plan-excluded { border-style: dashed; }
@media (max-width: 575.98px) {
  .plan-timeline { padding-left: 2.25rem; }
  .plan-phase-marker { left: -2.25rem; width: 1.75rem; height: 1.75rem; }
  .plan-timeline::before { left: 0.85rem; }
  .plan-items li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; row-gap: 0.25rem; }
  .plan-items li .brain-dot { margin-top: 0.35rem; align-self: start; }
  .plan-item-meta { grid-column: 2; }
}

/* Console du Cortex */
.cortex-console { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tblr-border-color); }
.cortex-result { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--tblr-primary) 35%, var(--tblr-border-color));
  background: color-mix(in oklab, var(--tblr-primary) 5%, var(--tblr-bg-surface)); }
.cortex-enriched { white-space: pre-wrap; padding: 0.6rem 0.75rem; border-radius: 8px; background: var(--tblr-bg-surface-secondary); }
.cortex-history-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--tblr-border-color); padding: 0.5rem 0; color: inherit; font: inherit; }
.cortex-history-item:hover { background: var(--tblr-bg-surface-secondary); }
.cortex-history-item:last-child { border-bottom: 0; }

/* Garde-fous */
.guard-req { padding: 0.75rem 0; border-bottom: 1px solid var(--tblr-border-color); }
.guard-req:first-child { padding-top: 0; }
.guard-req:last-child { border-bottom: 0; padding-bottom: 0; }
.guard-details { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 8rem; overflow: auto; }

/* Rapport quotidien */
.report-text { white-space: pre-wrap; font-family: inherit; font-size: 0.875rem; background: var(--tblr-bg-surface-secondary); padding: 0.75rem; border-radius: var(--tblr-border-radius); margin: 0; }

/* Quality Control */
.qc-preview { width: 100%; max-height: 360px; background: #000; border-radius: var(--tblr-border-radius); }

/* Journal d'événements : étiquette et « lu » restent sur la même ligne que le titre */
.ev-row > .st { flex: 0 0 6.6rem; white-space: nowrap; }
.ev-row > .ev-text { min-width: 0; }
.ev-row > span:last-child { flex: 0 0 auto; }

/* Paliers du coffre : pastilles pastel (mêmes teintes que le prompt et le dashboard) */
.tier-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.tier-normal { background: #a8f5c8; }
.tier-attention { background: #fff3b0; }
.tier-vigilance { background: #ffcfa3; }
.tier-danger { background: #ff9fae; }
.tier-gel { background: #a6e7ff; box-shadow: inset 0 0 0 2px #6c9fd1; }
.tier-inconnu { background: transparent; border: 2px solid #6c6f93; }

/* Bandeau de pause (Cortex / générale) */
.pause-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1rem; margin: 0.75rem 1rem 0;
  border-radius: 10px; background: color-mix(in oklab, var(--tblr-warning) 18%, var(--tblr-bg-surface)); border: 1px solid var(--tblr-warning); }
.pause-bar.is-general { background: color-mix(in oklab, var(--tblr-danger) 16%, var(--tblr-bg-surface)); border-color: var(--tblr-danger); }
.pause-bar > .icon { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.pause-bar .grow { flex: 1 1 16rem; min-width: 0; }

/* Alertes lisibles sur le papier beige (texte = couleur de statut, fond teinté) */
.alert-warning { color: var(--st-warning); background: color-mix(in oklab, var(--st-warning) 10%, var(--tblr-bg-surface)); border-color: color-mix(in oklab, var(--st-warning) 30%, transparent); }
.alert-danger { color: var(--st-critical); background: color-mix(in oklab, var(--st-critical) 8%, var(--tblr-bg-surface)); border-color: color-mix(in oklab, var(--st-critical) 30%, transparent); }
.alert-info { color: var(--tblr-body-color); background: var(--tblr-bg-surface-secondary); border-color: var(--tblr-border-color); }

/* ── Actions à faire (commandes à copier) ───────────── */
.action-card.is-done { opacity: 0.7; }
.action-step + .action-step { margin-top: 1rem; }
.action-step-text { display: flex; gap: 0.6rem; align-items: baseline; }
.action-num { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 9999px; display: inline-grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; background: var(--tblr-primary); color: var(--tblr-primary-fg); }
.action-code { position: relative; margin: 0.5rem 0 0 2.1rem; }
.action-code pre { margin: 0; padding: 0.85rem 6.5rem 0.85rem 1rem; border-radius: 0.75rem; background: #101010; color: #f3ede2;
  font-size: 0.8125rem; white-space: pre-wrap; word-break: break-word; }
.action-code pre code { color: inherit; background: none; padding: 0; font-size: inherit; }
.action-copy { position: absolute; top: 0.5rem; right: 0.5rem; background: #26231f; color: #f3ede2; border-color: #3a352e; }
.action-copy:hover { background: var(--cy-accent); color: #f8f4ec; border-color: var(--cy-accent); }
@media (max-width: 575.98px) { .action-code { margin-left: 0; } }