                    <div id="content-help" class="hidden tab-content pt-0" style="height: calc(100vh - 280px); margin: 0 -1rem -1rem -1rem;">
                        <div class="flex h-full">
                            <!-- Sidebar Navigation -->
                            <div id="help-sidebar" class="w-72 border-r border-[var(--border-primary)] bg-[var(--bg-secondary)] flex flex-col flex-shrink-0 h-full overflow-hidden">
                                <!-- Search -->
                                <div class="p-3 border-b border-[var(--border-primary)]">
                                    <div class="relative">
                                        <input type="text" id="help-search" placeholder="Rechercher dans la doc..."
                                            class="w-full pl-9 pr-3 py-2 text-sm bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--border-accent)] focus:border-transparent">
                                        <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)] text-xs"></i>
                                    </div>
                                    <!-- Search results dropdown -->
                                    <div id="help-search-results" class="hidden mt-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg shadow-lg max-h-64 overflow-y-auto"></div>
                                </div>
                                <!-- Navigation tree -->
                                <nav id="help-nav" class="flex-1 overflow-y-auto p-3 space-y-1">
                                    <!-- Populated by JS -->
                                </nav>
                                <!-- Home link -->
                                <div class="p-3 border-t border-[var(--border-primary)]">
                                    <button onclick="loadDocPage('', 'index')" class="w-full flex items-center gap-2 px-3 py-2 text-sm text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                                        <i class="fas fa-home text-xs"></i>
                                        <span>Accueil documentation</span>
                                    </button>
                                </div>
                            </div>
                            <!-- Mobile sidebar toggle -->
                            <button id="help-sidebar-toggle" class="hidden fixed bottom-4 left-4 z-50 bg-[var(--bg-accent)] text-white p-3 rounded-full shadow-lg sm:hidden" onclick="toggleHelpSidebar()">
                                <i class="fas fa-bars"></i>
                            </button>
                            <!-- Main Content Area -->
                            <div id="help-content-area" class="flex-1 overflow-y-auto">
                                <!-- Loading state -->
                                <div id="help-loading" class="hidden flex items-center justify-center h-full">
                                    <div class="text-center">
                                        <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-accent)] mb-3"></i>
                                        <p class="text-sm text-[var(--text-muted)]">Chargement...</p>
                                    </div>
                                </div>
                                <!-- Welcome state (shown initially) -->
                                <div id="help-welcome" class="flex items-center justify-center h-full p-8">
                                    <div class="text-center max-w-lg">
                                        <i class="fas fa-book-open text-5xl text-[var(--text-accent)] mb-6"></i>
                                        <h2 class="text-2xl font-semibold text-[var(--text-primary)] mb-3">Documentation DictIA</h2>
                                        <p class="text-[var(--text-secondary)] mb-6">Bienvenue dans la documentation int&eacute;gr&eacute;e de DictIA. S&eacute;lectionnez une page dans le menu de gauche pour commencer.</p>
                                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                            <button onclick="loadDocPage('guide-utilisateur', 'index')" class="flex flex-col items-center p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-primary)] hover:border-[var(--border-accent)] hover:shadow-md transition-all">
                                                <i class="fas fa-book-open text-xl text-[var(--text-accent)] mb-2"></i>
                                                <span class="text-sm font-medium text-[var(--text-primary)]">Guide Utilisateur</span>
                                            </button>
                                            <button onclick="loadDocPage('depannage', 'index')" class="flex flex-col items-center p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-primary)] hover:border-[var(--border-accent)] hover:shadow-md transition-all">
                                                <i class="fas fa-life-ring text-xl text-[var(--text-accent)] mb-2"></i>
                                                <span class="text-sm font-medium text-[var(--text-primary)]">D&eacute;pannage</span>
                                            </button>
                                            <button id="help-admin-card" onclick="loadDocPage('guide-admin', 'index')" class="hidden flex-col items-center p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-primary)] hover:border-[var(--border-accent)] hover:shadow-md transition-all">
                                                <i class="fas fa-shield-alt text-xl text-[var(--text-accent)] mb-2"></i>
                                                <span class="text-sm font-medium text-[var(--text-primary)]">Guide Admin</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!-- Document content -->
                                <div id="help-doc-content" class="hidden">
                                    <!-- Breadcrumb -->
                                    <div id="help-breadcrumb" class="sticky top-0 z-10 bg-[var(--bg-primary)] border-b border-[var(--border-primary)] px-8 py-3">
                                        <div class="flex items-center gap-2 text-sm text-[var(--text-muted)]">
                                            <button onclick="showHelpWelcome()" class="hover:text-[var(--text-accent)]"><i class="fas fa-home"></i></button>
                                            <i class="fas fa-chevron-right text-xs"></i>
                                            <span id="help-breadcrumb-section"></span>
                                            <i class="fas fa-chevron-right text-xs"></i>
                                            <span id="help-breadcrumb-page" class="text-[var(--text-primary)]"></span>
                                        </div>
                                    </div>
                                    <!-- Rendered content -->
                                    <div id="help-rendered-content" class="prose prose-sm max-w-none px-8 py-6">
                                        <!-- Rendered markdown HTML goes here -->
                                    </div>
                                    <!-- Navigation footer -->
                                    <div id="help-nav-footer" class="border-t border-[var(--border-primary)] px-8 py-4 flex justify-between">
                                        <button id="help-prev-page" class="hidden flex items-center gap-2 text-sm text-[var(--text-accent)] hover:underline" onclick="navigateDocPrev()">
                                            <i class="fas fa-arrow-left"></i> <span id="help-prev-title"></span>
                                        </button>
                                        <div></div>
                                        <button id="help-next-page" class="hidden flex items-center gap-2 text-sm text-[var(--text-accent)] hover:underline" onclick="navigateDocNext()">
                                            <span id="help-next-title"></span> <i class="fas fa-arrow-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
