/*
 * ShadowPass help center — thème sombre de la page d'accueil appliqué
 * à l'en-tête et au bandeau (.topbar) des pages catégorie et article.
 * Chargé en dernier dans <head> pour primer sur category.css / article.css
 * et sur les <style> inline.
 */
:root {
  --hero-bg: #141a3d;
  --hero-text: #f3f4fc;
  --hero-muted: #b3bae0;
  --accent: #8b9bff;
  --accent-line: rgba(139, 155, 255, 0.42);
  --hero-field: #1f2657;
}

/* ── Header ─────────────────────────────────────────── */
header.site {
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(139, 155, 255, 0.16);
}
header.site .brand,
header.site .header-link { color: var(--hero-text); }
header.site .header-cta {
  background: linear-gradient(135deg, #6d7ff5, #a175f0);
  color: #ffffff;
}
header.site .lang-switch a { color: var(--hero-muted); }
header.site .lang-switch a:hover { color: #ffffff; }
header.site .lang-switch a.active {
  background: rgba(139, 155, 255, 0.22);
  color: #ffffff;
}

/* ── Bandeau ────────────────────────────────────────── */
.topbar {
  background:
    radial-gradient(120% 85% at 50% 38%, rgba(139, 155, 255, 0.20) 0%, rgba(20, 26, 61, 0) 62%),
    url('/assets/hero-network.svg') center / cover no-repeat,
    linear-gradient(155deg, #171d47 0%, #141a3d 45%, #1a1546 100%);
  border-bottom: 1px solid var(--accent-line);
  color: var(--hero-text);
}
.topbar h1 { color: var(--hero-text); }
.topbar p,
.topbar .meta { color: var(--hero-muted); }
.topbar .breadcrumb,
.topbar .breadcrumb a { color: var(--hero-muted); }
.topbar .breadcrumb a:hover { color: var(--accent); }
.topbar .breadcrumb .current { color: var(--hero-text); }

/* Recherche */
.topbar .topbar-search input {
  background: var(--hero-field);
  color: var(--hero-text);
  border: 1px solid var(--accent-line);
  box-shadow: 0 4px 24px rgba(8, 11, 32, 0.45);
}
.topbar .topbar-search input::placeholder { color: #9aa3cf; }
.topbar .topbar-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 155, 255, 0.22), 0 4px 24px rgba(8, 11, 32, 0.5);
}
.topbar .topbar-search svg { color: var(--accent); z-index: 1; }

/* Suggestions sur fond sombre */
.topbar .sp-search-suggest {
  background: var(--hero-field);
  border-color: var(--accent-line);
  box-shadow: 0 12px 34px rgba(8, 11, 32, 0.55);
}
.topbar .sp-suggest-item {
  color: var(--hero-text);
  border-bottom-color: rgba(139, 155, 255, 0.16);
}
.topbar .sp-suggest-item:hover,
.topbar .sp-suggest-item.is-active { background: rgba(139, 155, 255, 0.14); }
.topbar .sp-suggest-section { color: var(--accent); }
.topbar .sp-suggest-all {
  background: rgba(255, 255, 255, 0.05);
  border-top-color: rgba(139, 155, 255, 0.16);
  color: var(--hero-muted);
}
.topbar .sp-suggest-all:hover { color: var(--accent); background: rgba(139, 155, 255, 0.14); }