/* ── CSS Variables ─────────────────────────────────────── */
    #archia-guide {
      --archia-blue:       #1565C0;
      --archia-blue-mid:   #1E88E5;
      --archia-blue-light: #E3F2FD;
      --archia-blue-pale:  #F0F7FF;
      --archia-orange:     #E65100;
      --archia-orange-bg:  #FFF3E0;
      --dark:              #1A2332;
      --text:              #2D3748;
      --muted:             #64748B;
      --border:            #E2E8F0;
      --sidebar-w:         280px;
      --header-h:          56px;
    }

    /* ── Reset & Base ──────────────────────────────────────── */
/* ── Embeddable wrapper - drop this <div id="archia-guide"> into any tab ── */
    #archia-guide {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 600px;
      background: #F8FAFC;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--border);
    }

    /* ── Top search bar ────────────────────────────────────── */
    .guide-header {
      height: var(--header-h);
      background: var(--dark);
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 16px;
      flex-shrink: 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .guide-brand {
      font-weight: 700;
      font-size: .95rem;
      color: #fff;
      letter-spacing: .04em;
      white-space: nowrap;
    }
    .guide-brand span { color: var(--archia-blue-mid); }

    .search-wrap {
      flex: 1;
      max-width: 480px;
      display: flex;
      align-items: stretch;
    }
    .search-wrap input {
      flex: 1;
      min-width: 0;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 8px 0 0 8px;
      border-right: none;
      padding: 7px 12px;
      font-size: .85rem;
      color: #fff;
      font-family: inherit;
      outline: none;
      transition: background .2s, border-color .2s;
    }
    .search-wrap input::placeholder { color: rgba(255,255,255,.35); }
    .search-wrap input:focus {
      background: rgba(255,255,255,.12);
      border-color: var(--archia-blue-mid);
    }
    .search-wrap input:focus + .guide-search-btn {
      border-color: var(--archia-blue-mid);
      background: rgba(255,255,255,.12);
    }
    .guide-search-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 0 8px 8px 0;
      background: rgba(255,255,255,.07);
      color: rgba(255,255,255,.85);
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s;
    }
    .guide-search-btn:hover,
    .guide-search-btn:focus-visible {
      background: rgba(255,255,255,.14);
      border-color: var(--archia-blue-mid);
      color: #fff;
      outline: none;
    }

    #archia-guide #search-count {
      font-size: .78rem;
      color: rgba(255,255,255,.45);
      white-space: nowrap;
    }

    /* ── Body layout ───────────────────────────────────────── */
    .guide-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* ── Sidebar ───────────────────────────────────────────── */
    .guide-sidebar {
      width: var(--sidebar-w);
      background: #fff;
      border-right: 1px solid var(--border);
      overflow-y: auto;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }

    .sidebar-section-label {
      font-size: .67rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 18px 16px 6px;
    }

    .nav-item-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      font-family: inherit;
      font-size: .82rem;
      font-weight: 500;
      color: var(--text);
      cursor: pointer;
      border-radius: 0;
      transition: background .15s, color .15s;
      position: relative;
      text-decoration: none;
    }
    .nav-item-btn:hover { background: var(--archia-blue-pale); color: var(--archia-blue); }
    .nav-item-btn.active {
      background: var(--archia-blue-light);
      color: var(--archia-blue);
      font-weight: 600;
    }
    .nav-item-btn.active::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--archia-blue);
      border-radius: 0 2px 2px 0;
    }
    .nav-item-btn .nav-icon {
      width: 28px;
      height: 28px;
      background: var(--archia-blue-light);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .82rem;
      color: var(--archia-blue);
      flex-shrink: 0;
    }
    .nav-item-btn.active .nav-icon { background: var(--archia-blue); color: #fff; }
    .nav-item-btn .nav-num {
      margin-left: auto;
      font-size: .68rem;
      background: var(--border);
      color: var(--muted);
      border-radius: 10px;
      padding: 1px 6px;
      font-weight: 600;
    }
    .nav-item-btn.active .nav-num { background: var(--archia-blue); color: #fff; }

    /* Recherche : masquer les entrées sans correspondance (pas de surlignage de fond) */
    .nav-item-btn.search-hidden { display: none; }

    /* ── Main content ──────────────────────────────────────── */
    .guide-main {
      flex: 1;
      overflow-y: auto;
      padding: 32px 40px;
    }

    /* ── Sections ──────────────────────────────────────────── */
    .guide-section { display: none; }
    .guide-section.active { display: block; }

    .section-header {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 28px;
      padding-bottom: 20px;
      border-bottom: 2px solid var(--border);
    }
    .section-icon-lg {
      width: 48px;
      height: 48px;
      background: var(--archia-blue);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.3rem;
      flex-shrink: 0;
    }
    .section-title { font-size: 1.5rem; font-weight: 700; color: var(--dark); margin: 0; }
    .section-subtitle { font-size: .88rem; color: var(--muted); margin: 4px 0 0; }

    /* h2 subsection */
    .sub-heading {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--dark);
      margin: 32px 0 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sub-heading::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 18px;
      background: var(--archia-blue-mid);
      border-radius: 2px;
      flex-shrink: 0;
    }

    /* ── Step tables ───────────────────────────────────────── */
    .step-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin: 16px 0; }
    .step-table thead th {
      background: var(--dark);
      color: #fff;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 10px 14px;
    }
    .step-table thead th:first-child { border-radius: 8px 0 0 8px; }
    .step-table thead th:last-child  { border-radius: 0 8px 8px 0; }
    .step-table tbody tr { transition: transform .15s; }
    .step-table tbody tr:hover { transform: translateX(2px); }
    .step-table tbody td {
      background: #fff;
      padding: 11px 14px;
      font-size: .84rem;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .step-table tbody td:first-child {
      border-left: 1px solid var(--border);
      border-radius: 8px 0 0 8px;
    }
    .step-table tbody td:last-child {
      border-right: 1px solid var(--border);
      border-radius: 0 8px 8px 0;
    }
    .step-num {
      width: 28px;
      height: 28px;
      background: var(--archia-blue);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .78rem;
      font-weight: 700;
      flex-shrink: 0;
    }
    .step-action { font-weight: 600; color: var(--archia-blue); }
    .step-detail { color: var(--text); }

    /* ── Info / comparison tables ──────────────────────────── */
    .info-table { width: 100%; border-collapse: collapse; margin: 16px 0; border-radius: 10px; overflow: hidden; }
    .info-table thead th {
      background: var(--archia-blue);
      color: #fff;
      padding: 11px 16px;
      font-size: .8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .03em;
    }
    .info-table tbody tr:nth-child(odd)  td { background: var(--archia-blue-pale); }
    .info-table tbody tr:nth-child(even) td { background: #fff; }
    .info-table tbody td {
      padding: 11px 16px;
      font-size: .84rem;
      border-bottom: 1px solid var(--border);
      vertical-align: top;
    }
    .info-table tbody td strong { color: var(--archia-blue); }

    /* ── Note / tip box ────────────────────────────────────── */
    .tip-box {
      background: var(--archia-orange-bg);
      border-left: 4px solid var(--archia-orange);
      border-radius: 0 8px 8px 0;
      padding: 12px 16px;
      margin: 20px 0;
      font-size: .85rem;
      color: var(--text);
    }
    .tip-box strong { color: var(--archia-orange); }

    /* ── Info box (blue) ───────────────────────────────────── */
    .info-box {
      background: var(--archia-blue-light);
      border-left: 4px solid var(--archia-blue);
      border-radius: 0 8px 8px 0;
      padding: 12px 16px;
      margin: 16px 0;
      font-size: .85rem;
      color: var(--text);
    }

    /* ── Bullet list ───────────────────────────────────────── */
    .guide-list { list-style: none; padding: 0; margin: 12px 0; }
    .guide-list li {
      display: flex;
      gap: 10px;
      padding: 6px 0;
      font-size: .88rem;
      align-items: flex-start;
    }
    .guide-list li::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--archia-blue-mid);
      border-radius: 50%;
      margin-top: 7px;
      flex-shrink: 0;
    }

    /* ── Card grid (dashboard indicators) ─────────────────── */
    .indicator-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 16px 0; }
    .indicator-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px;
      transition: box-shadow .2s;
    }
    .indicator-card:hover { box-shadow: 0 4px 16px rgba(21,101,192,.1); }
    .indicator-card .ic-num {
      width: 32px;
      height: 32px;
      background: var(--archia-blue);
      color: #fff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .8rem;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .indicator-card .ic-title { font-weight: 700; font-size: .88rem; color: var(--dark); margin-bottom: 4px; }
    .indicator-card .ic-desc  { font-size: .78rem; color: var(--muted); line-height: 1.5; }

    /* ── Mode comparison cards ─────────────────────────────── */
    .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
    .mode-card {
      border: 2px solid var(--border);
      border-radius: 10px;
      padding: 20px;
      background: #fff;
      transition: border-color .2s;
    }
    .mode-card:hover { border-color: var(--archia-blue-mid); }
    .mode-card.mode-blue { border-color: var(--archia-blue); background: var(--archia-blue-pale); }
    .mode-card .mode-badge {
      display: inline-block;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 4px;
      margin-bottom: 10px;
    }
    .mode-badge-blue   { background: var(--archia-blue); color: #fff; }
    .mode-badge-orange { background: var(--archia-orange); color: #fff; }
    .mode-badge-green  { background: #198754; color: #fff; }
    .mode-card .mode-title { font-weight: 700; font-size: 1rem; color: var(--dark); margin-bottom: 8px; }
    .mode-card .mode-body  { font-size: .84rem; color: var(--text); line-height: 1.6; }

    /* ── Best practices grid ───────────────────────────────── */
    .bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 16px 0; }
    .bp-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px;
      display: flex;
      gap: 12px;
      transition: box-shadow .2s, transform .15s;
    }
    .bp-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
    .bp-icon {
      width: 40px;
      height: 40px;
      background: var(--archia-blue-light);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }
    .bp-title { font-weight: 700; font-size: .88rem; color: var(--dark); margin-bottom: 4px; }
    .bp-text  { font-size: .8rem; color: var(--muted); line-height: 1.5; }

    /* ── Search highlight in content ───────────────────────── */
    mark.search-hl {
      background: #FFF176;
      color: inherit;
      padding: 0 2px;
      border-radius: 2px;
    }

    /* ── No-results message ────────────────────────────────── */
    #archia-guide #no-results {
      display: none;
      text-align: center;
      padding: 60px 20px;
      color: var(--muted);
    }
    #archia-guide #no-results i { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: .4; }

    /* ── Scrollbar ─────────────────────────────────────────── */
    .guide-sidebar::-webkit-scrollbar,
    .guide-main::-webkit-scrollbar { width: 5px; }
    .guide-sidebar::-webkit-scrollbar-track,
    .guide-main::-webkit-scrollbar-track { background: transparent; }
    .guide-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    .guide-main::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

    /* ── Responsive ────────────────────────────────────────── */
    @media (max-width: 768px) {
      .guide-sidebar { width: 220px; }
      .guide-main { padding: 20px; }
      .mode-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 576px) {
      .guide-sidebar { display: none; }
    }
  
#view-help.archia-help-view {
  padding: 0 !important;
  max-width: none;
}

#view-help #archia-guide {
  --archia-blue: var(--archia-primary, #2f6fe4);
  --archia-blue-mid: var(--archia-primary, #2f6fe4);
  --archia-blue-light: color-mix(in srgb, var(--archia-primary, #2f6fe4) 14%, transparent);
  --archia-blue-pale: var(--archia-surface-2, #f8f9fb);
  --dark: var(--archia-text, #1a2233);
  --text: var(--archia-text, #1a2233);
  --muted: var(--archia-muted, #6b7383);
  --border: var(--archia-border, #dce3ef);
  min-height: calc(100vh - 5.5rem);
  height: calc(100vh - 5.5rem);
  border-radius: 0;
  border: none;
  background: var(--archia-bg, #f5f7fb);
  font-family: inherit;
}

#view-help #archia-guide .guide-header {
  background: var(--archia-surface, #fff);
  border-bottom: 1px solid var(--archia-border, #dce3ef);
  color: var(--archia-text, #1a2233);
}

#view-help #archia-guide .guide-brand {
  color: var(--archia-text, #1a2233);
}

#view-help #archia-guide .guide-brand span {
  color: var(--archia-primary, #2f6fe4);
}

#view-help #archia-guide .search-wrap input {
  background: var(--archia-surface-2, #f8f9fb);
  border-color: var(--archia-border, #dce3ef);
  color: var(--archia-text, #1a2233);
}

#view-help #archia-guide .search-wrap input:focus + .guide-search-btn {
  border-color: var(--archia-primary, #2f6fe4);
  background: var(--archia-surface-2, #f8f9fb);
}

#view-help #archia-guide .guide-search-btn {
  background: var(--archia-surface-2, #f8f9fb);
  border-color: var(--archia-border, #dce3ef);
  color: var(--archia-primary, #2f6fe4);
}

#view-help #archia-guide .guide-search-btn:hover,
#view-help #archia-guide .guide-search-btn:focus-visible {
  background: rgba(47, 111, 228, 0.08);
  border-color: var(--archia-primary, #2f6fe4);
}

#view-help #archia-guide .search-wrap input::placeholder {
  color: var(--archia-muted, #6b7383);
}

#view-help #archia-guide #search-count {
  color: var(--archia-muted, #6b7383);
}

#view-help #archia-guide .guide-sidebar {
  background: var(--archia-surface, #fff);
}

#view-help #archia-guide .guide-main {
  background: var(--archia-bg, #f5f7fb);
}

#view-help #archia-guide .step-table tbody td,
#view-help #archia-guide .indicator-card,
#view-help #archia-guide .mode-card,
#view-help #archia-guide .bp-card {
  background: var(--archia-surface, #fff);
}

[data-theme="dark"] #view-help #archia-guide .search-wrap input {
  background: var(--archia-surface-2);
  color: var(--archia-text);
}