/* apps-core 0.1.50 — navigation standard des consoles. Jetons --cn-* (sombre par défaut, clair avec html[data-theme="light"]). */
.cn-top{--cn-bg:#0f131b;--cn-bar:#121722;--cn-fg:#edf0f7;--cn-muted:#a7b0c0;--cn-line:rgba(255,255,255,.1);--cn-hover:rgba(255,255,255,.06);--cn-accent:#4c8dff;--cn-accent-fg:#0b1020;--cn-container:1680px;--cn-gutter:clamp(.75rem,2.5vw,4rem);position:sticky;top:0;z-index:70;background:var(--cn-bg);color:var(--cn-fg);border-bottom:1px solid var(--cn-line)}
html[data-theme="light"] .cn-top{--cn-bg:#ffffff;--cn-bar:#f7f9fc;--cn-fg:#162033;--cn-muted:#5b6475;--cn-line:#e3e8ef;--cn-hover:#eef3fb;--cn-accent:#2563eb;--cn-accent-fg:#ffffff}
.cn-bar,.cn-nav{max-width:calc(var(--cn-container) + 2 * var(--cn-gutter));margin-inline:auto;padding-inline:var(--cn-gutter)}
.cn-bar{display:flex;align-items:center;gap:12px;min-height:56px}
.cn-brand{display:inline-flex;align-items:center;gap:10px;color:var(--cn-fg);text-decoration:none;font-weight:800}.cn-brand img{border-radius:8px}
.cn-brand-sub{font-size:12px;font-weight:600;color:var(--cn-muted)}
.cn-env{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em}
.cn-env-prod{background:#0f7b4f;color:#ffffff}.cn-env-ctlq{background:#b45309;color:#ffffff}.cn-env-other{background:#4b5563;color:#ffffff}
.cn-spacer{flex:1}
.cn-toggle{display:none;align-items:center;gap:6px;min-height:38px;padding:6px 12px;border:1px solid var(--cn-line);border-radius:10px;background:transparent;color:var(--cn-fg);font:inherit;font-weight:700;cursor:pointer}
.cn-sections,.cn-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.cn-sections{padding-bottom:8px}
.cn-section,.cn-tab{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 12px;border-radius:10px;color:var(--cn-fg);text-decoration:none;font-size:13px;font-weight:650}
.cn-section:hover,.cn-tab:hover{background:var(--cn-hover)}
/* apps-core 0.1.79 — « la couleur des pastilles de la super console n'est pas comme celles de l'app » : rubrique active comme le menu
   des apps (fond bleu discret, texte lisible), plus le bleu vif avec texte sombre. */
.cn-section.is-active{background:rgba(126,162,255,.18);color:#ffffff}
html[data-theme="light"] .cn-section.is-active{background:rgba(37,99,235,.12);color:#1e3a8a}
.cn-tabs{border-top:1px solid var(--cn-line);padding:6px 0 8px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
.cn-tab{white-space:nowrap;color:var(--cn-muted)}
.cn-tab.is-active{color:var(--cn-fg);box-shadow:inset 0 -2px 0 var(--cn-accent);border-radius:10px 10px 0 0}
.cn-section:focus-visible,.cn-tab:focus-visible,.cn-toggle:focus-visible,.cn-brand:focus-visible{outline:2px solid var(--cn-accent);outline-offset:2px}
.cn-badge[hidden]{display:none}.cn-badge{min-width:20px;padding:1px 6px;border-radius:999px;background:#dc2626;color:#ffffff;font-size:11px;font-weight:800;text-align:center}
.cn-ico{width:18px;text-align:center}
@media (max-width:820px){
  .cn-toggle{display:inline-flex}.cn-brand-sub{display:none}
  .cn-top .cn-sections{display:none;flex-direction:column;align-items:stretch}
  .cn-top.cn-open .cn-sections{display:flex}
  .cn-section{width:100%}
}