<?php
/**
 * Fichier  : views/help.php
 * Auteur   : KREMER Régis
 * Version  : 2.6.101
 * Date     : 2026-03-02
 * Description : Page d'aide — guides utilisateur, procédures et FAQ
 * Changelog : v2.6.101 (2026-07-20) — Guide complet de conception, édition, localisation et impression des plans.
 */
?>
<div class="help-page" id="pgHelp">

    <!-- ═══════════════════════════════════════════════════════════
         HERO — Accueil de la page
         ═══════════════════════════════════════════════════════════ -->
    <div class="help-hero">
        <div class="help-hero-content">
            <div class="help-hero-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/>
                    <line x1="12" y1="17" x2="12.01" y2="17"/>
                </svg>
            </div>
            <div>
                <h1 class="help-hero-title">Guide d'utilisation MageStock</h1>
                <p class="help-hero-sub">Retrouvez ici toutes les procédures pour utiliser MageStock au quotidien. Chaque section explique pas à pas comment utiliser les fonctionnalités de l'application. En cas de doute, consultez la FAQ en bas de page.</p>
            </div>
        </div>

        <!-- Navigation rapide — ancres vers les sections -->
        <div class="help-nav-chips">
            <a href="#sec-dashboard" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                Tableau de bord
            </a>
            <a href="#sec-movements" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/></svg>
                Mouvements
            </a>
            <a href="#sec-inventory" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
                Inventaire
            </a>
            <a href="#sec-scanner" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
                Scanner
            </a>
            <a href="#sec-orders" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg>
                Commandes
            </a>
            <a href="#sec-products" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
                Produits
            </a>
            <a href="#sec-warehouses" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
                Magasins
            </a>
            <a href="#sec-plans" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z"/><path d="M9 3v15M15 6v15"/></svg>
                Plans
            </a>
            <a href="#sec-reservations" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>
                Réservations
            </a>
            <a href="#sec-kits" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
                Kits
            </a>
            <a href="#sec-alerts" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
                Alertes
            </a>
            <a href="#sec-barcodes" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="3" y1="5" x2="3" y2="19"/><line x1="7" y1="5" x2="7" y2="19"/><line x1="11" y1="5" x2="11" y2="19"/><line x1="15" y1="5" x2="15" y2="19"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
                Codes-barres
            </a>
            <a href="#sec-reports" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                Rapports
            </a>
            <a href="#sec-settings" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33"/></svg>
                Paramètres
            </a>
            <a href="#sec-faq" class="help-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                FAQ
            </a>
        </div>
    </div>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : MOUVEMENTS DE STOCK
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-movements">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--green-pale);color:var(--green)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Mouvements de stock</h2>
                <p class="help-section-desc">Tout ce qui concerne les entrées, sorties et transferts entre magasins.</p>
            </div>
        </div>

        <div class="help-grid help-grid-2">

            <!-- Sortie de stock -->
            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">
                        <span class="badge badge-danger" style="margin-right:8px">Sortie</span>
                        Faire sortir du matériel
                    </h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Vous partez en intervention ou vous distribuez du matériel ? Voici comment enregistrer une sortie.</p>
                    <ol class="help-steps">
                        <li>Rendez-vous sur la page <strong>Mouvements</strong> depuis le menu.</li>
                        <li>Cliquez sur le bouton rouge <strong>Sortie</strong> en haut à droite.</li>
                        <li>Sélectionnez le <strong>magasin</strong> concerné, puis le <strong>produit</strong>.</li>
                        <li>Renseignez la <strong>quantité</strong> sortie et l'<strong>unité</strong>.</li>
                        <li>Si la sortie est liée à un chantier, précisez le <strong>nom du site</strong> — cela vous permettra de regrouper les bons de livraison par chantier.</li>
                        <li>Ajoutez une <strong>note</strong> si besoin, puis validez.</li>
                    </ol>
                    <div class="help-note">
                        <strong>Bon à savoir :</strong> si des produits sont réservés, MageStock bloque automatiquement les sorties qui empiètent sur les quantités réservées. Un message détaillé vous indique le stock physique, le stock réservé et le stock réellement disponible. Si le stock passe sous le seuil minimum, une alerte est déclenchée.
                    </div>
                </div>
            </div>

            <!-- Ajout de stock -->
            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">
                        <span class="badge badge-success" style="margin-right:8px">Ajout</span>
                        Ajouter du stock manuellement
                    </h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Pour compléter le stock sans passer par une commande fournisseur.</p>
                    <ol class="help-steps">
                        <li>Cliquez sur le bouton vert <strong>Ajout</strong> dans la page Mouvements.</li>
                        <li>Choisissez le <strong>magasin</strong> de destination.</li>
                        <li>Sélectionnez le <strong>produit</strong> à réapprovisionner.</li>
                        <li>Indiquez la <strong>quantité</strong>, l'<strong>unité</strong> et le <strong>coût unitaire</strong> si vous le connaissez.</li>
                        <li>Ajoutez la raison dans le champ <strong>Motif</strong> (ex: "Stock initial", "Achat direct").</li>
                        <li>Validez — le stock est immédiatement mis à jour.</li>
                    </ol>
                    <div class="help-note">
                        <strong>Différence avec une commande :</strong> un ajout manuel ne génère pas de bon de commande. Pour une traçabilité fournisseur complète, passez plutôt par <a href="orders" style="color:var(--blue)">Commandes</a>.
                    </div>
                </div>
            </div>

            <!-- Transfert entre magasins -->
            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">
                        <span class="badge" style="background:var(--blue-pale);color:var(--blue);margin-right:8px">Transfert</span>
                        Transférer entre magasins
                    </h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Vous avez besoin de déplacer du matériel d'un dépôt à un autre&nbsp;?</p>
                    <ol class="help-steps">
                        <li>Dans la page Mouvements, cliquez sur <strong>Transfert</strong>.</li>
                        <li>Choisissez le <strong>magasin source</strong> (celui qui cède le stock).</li>
                        <li>Sélectionnez le <strong>magasin de destination</strong>.</li>
                        <li>Choisissez le <strong>produit</strong> et la <strong>quantité</strong>.</li>
                        <li>Validez : le stock est débité du magasin source et crédité sur la destination en une seule opération.</li>
                    </ol>
                    <div class="help-note">
                        Les transferts apparaissent dans l'historique des deux magasins avec le label <em>TRANSFERT</em>.
                    </div>
                </div>
            </div>

            <!-- Bon de livraison -->
            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:6px;vertical-align:-1px"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                        Imprimer un bon de livraison
                    </h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Chaque mouvement peut générer un PDF à remettre au destinataire ou à archiver.</p>
                    <ol class="help-steps">
                        <li>Dans la page <strong>Mouvements</strong>, repérez la ligne concernée.</li>
                        <li>Colonne <strong>Pièce</strong> : cliquez sur <strong>BL</strong> pour le bon de livraison individuel.</li>
                        <li>Si plusieurs sorties ont été faites pour le <strong>même chantier le même jour</strong>, cliquez sur <strong>Site</strong> pour un BL groupé.</li>
                        <li>Le PDF s'ouvre dans un nouvel onglet — vous pouvez l'imprimer ou le télécharger directement.</li>
                    </ol>
                </div>
            </div>

        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : INVENTAIRE
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-inventory">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--blue-pale);color:var(--blue)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Inventaire physique</h2>
                <p class="help-section-desc">Compter, valider et corriger vos stocks réels en quelques étapes.</p>
            </div>
        </div>

        <div class="help-grid help-grid-2">

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Démarrer un inventaire</h3>
                </div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Allez dans <strong>Inventaires</strong> et cliquez sur <strong>Nouvel inventaire</strong>.</li>
                        <li>Donnez un <strong>titre explicite</strong> à votre inventaire (ex : "Inventaire mensuel — Voirie Mars 2026"). C'est obligatoire pour le retrouver facilement plus tard.</li>
                        <li>Sélectionnez le <strong>magasin</strong> à inventorier.</li>
                        <li>Optionnel : filtrez par <strong>catégorie</strong> pour n'inventorier qu'une famille de produits.</li>
                        <li>Cliquez sur <strong>Démarrer</strong> — la liste de tous les produits du magasin s'affiche avec leur stock théorique.</li>
                    </ol>
                    <div class="help-note">
                        Seuls les produits réellement présents dans le magasin sélectionné apparaissent dans la liste.
                    </div>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Compter et valider</h3>
                </div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Pour chaque produit, saisissez la <strong>quantité physiquement comptée</strong> dans la colonne <em>Compté</em>.</li>
                        <li>L'écart par rapport au stock théorique s'affiche automatiquement en rouge ou vert.</li>
                        <li>Vous pouvez <strong>scanner le code-barres</strong> d'un produit pour le retrouver directement dans la liste.</li>
                        <li>Une fois tout compté, cliquez sur <strong>Valider l'inventaire</strong>.</li>
                        <li>Le stock réel est mis à jour et un mouvement de correction est enregistré pour chaque écart.</li>
                    </ol>
                    <div class="help-note">
                        Vous pouvez aussi valider ligne par ligne avec la coche ✓, ou tout valider d'un coup avec <strong>Tout valider</strong> si le stock correspond.
                    </div>
                </div>
            </div>

        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : SCANNER
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-scanner">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--orange-pale);color:var(--orange)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Scanner terrain</h2>
                <p class="help-section-desc">Saisies rapides depuis votre téléphone, directement sur le terrain.</p>
            </div>
        </div>

        <div class="help-grid help-grid-3">

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Utiliser le scanner</h3>
                </div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Allez sur la page <strong>Scanner</strong> (accessible depuis le menu).</li>
                        <li>Autorisez l'accès à la caméra si le navigateur vous le demande.</li>
                        <li>Pointez la caméra sur le <strong>code-barres</strong> ou le <strong>QR code</strong> du produit.</li>
                        <li>Le produit est reconnu automatiquement.</li>
                        <li>Choisissez l'action : <strong>Ajout</strong> ou <strong>Sortie</strong>.</li>
                        <li>Saisissez la quantité et validez.</li>
                    </ol>
                    <div class="help-note">
                        Fonctionne sur smartphone, tablette et PC. Préférez Chrome ou Safari pour une meilleure compatibilité caméra.
                    </div>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Saisie manuelle (sans caméra)</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Pas de caméra disponible ou code abîmé ? Pas de problème.</p>
                    <ol class="help-steps">
                        <li>Dans le scanner, tapez directement le <strong>SKU ou le code-barres</strong> dans le champ de saisie.</li>
                        <li>Appuyez sur <strong>Entrée</strong> ou le bouton de recherche.</li>
                        <li>Le produit s'affiche, vous pouvez continuer normalement.</li>
                    </ol>
                    <div class="help-note">
                        Vous pouvez aussi utiliser une <strong>douchette USB</strong> branchée sur votre ordinateur — elle fonctionne exactement comme un clavier.
                    </div>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Le scanner ne reconnaît pas le produit</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Quelques raisons possibles et comment y remédier.</p>
                    <ul class="help-list">
                        <li>Le code-barres n'est pas encore renseigné sur le produit → allez dans <strong>Produits</strong>, éditez le produit et ajoutez le code-barres.</li>
                        <li>Le produit n'a pas de stock dans ce magasin → vérifiez le magasin sélectionné dans le scanner.</li>
                        <li>La caméra n'arrive pas à lire le code → nettoyez l'objectif, améliorez l'éclairage ou saisissez manuellement.</li>
                    </ul>
                </div>
            </div>

        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : COMMANDES
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-orders">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--blue-pale);color:var(--blue)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/><line x1="9" y1="12" x2="15" y2="12"/><line x1="9" y1="16" x2="13" y2="16"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Bons de commande</h2>
                <p class="help-section-desc">Créer, suivre et réceptionner une commande fournisseur.</p>
            </div>
        </div>

        <div class="help-grid help-grid-2">

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Créer une commande</h3>
                </div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Allez dans <strong>Commandes</strong> et cliquez sur <strong>Nouvelle commande</strong>.</li>
                        <li>Sélectionnez le <strong>fournisseur</strong> concerné.</li>
                        <li>Ajoutez les <strong>produits à commander</strong> avec les quantités et les prix unitaires.</li>
                        <li>Vérifiez le récapitulatif et cliquez sur <strong>Créer la commande</strong>.</li>
                        <li>Un numéro de bon de commande (BC-XXXXXXXX-XXXX) est généré automatiquement.</li>
                    </ol>
                    <div class="help-note">
                        Vous pouvez imprimer ou télécharger le bon de commande au format PDF depuis la vue détail de la commande.
                    </div>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Réceptionner une commande</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Quand la livraison arrive, voici comment la valider et mettre le stock à jour.</p>
                    <ol class="help-steps">
                        <li>Le BC doit être <strong>validé par un admin</strong> avant toute réception.</li>
                        <li>Dans la liste des commandes, cliquez sur le bouton <strong>Réceptionner</strong>.</li>
                        <li>Vérifiez les quantités reçues — vous pouvez ajuster si la livraison est <strong>partielle</strong>.</li>
                        <li>Renseignez le <strong>numéro de lot</strong> et la <strong>date limite</strong> si le produit est tracé par lot.</li>
                        <li>Cliquez sur <strong>Confirmer la réception</strong>.</li>
                        <li>Le stock est automatiquement mis à jour et un mouvement de type <em>Entrée (BC)</em> est enregistré.</li>
                    </ol>
                    <div class="help-note">
                        <strong>Circuit de validation :</strong> Brouillon → Envoyé (soumis à validation) → Validé par un admin → Réceptionnable. Un BC refusé peut être re-soumis via le bouton 🔄 après corrections. Le journal de suivi dans l'aperçu montre qui a fait quoi et quand.
                    </div>
                </div>
            </div>

        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : PRODUITS
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-products">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--green-pale);color:var(--green)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Gestion des produits</h2>
                <p class="help-section-desc">Créer, modifier et organiser votre catalogue.</p>
            </div>
        </div>

        <div class="help-grid help-grid-3">

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Ajouter un produit</h3>
                </div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Dans <strong>Produits</strong>, cliquez sur <strong>+ Ajouter</strong>.</li>
                        <li>Remplissez le <strong>nom</strong> et le <strong>SKU</strong> (référence unique).</li>
                        <li>Ajoutez le <strong>code-barres</strong> si vous en avez un — il sera utilisé par le scanner.</li>
                        <li>Définissez la <strong>catégorie</strong>, la <strong>marque</strong> et l'<strong>unité de mesure</strong>.</li>
                        <li>Renseignez le <strong>seuil minimum</strong> pour activer les alertes de stock bas.</li>
                        <li>Enregistrez.</li>
                    </ol>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Définir les seuils de stock</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Les seuils permettent de recevoir des alertes avant d'être à sec.</p>
                    <ul class="help-list">
                        <li><strong>Stock minimum :</strong> en dessous de cette valeur, une alerte rouge s'affiche.</li>
                        <li><strong>Stock de sécurité :</strong> marge tampon avant d'atteindre le minimum.</li>
                        <li><strong>Stock maximum :</strong> pour éviter le sur-stockage.</li>
                    </ul>
                    <div class="help-note">
                        Configurez ces seuils sur la fiche produit, dans l'onglet <em>Stock</em>.
                    </div>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Modifier en masse</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Besoin de modifier la catégorie ou le fournisseur de plusieurs produits d'un coup&nbsp;?</p>
                    <ol class="help-steps">
                        <li>Passez en <strong>vue liste</strong> (icône liste en haut à droite).</li>
                        <li>Activez le mode <strong>sélection multiple</strong>.</li>
                        <li>Cochez les produits à modifier.</li>
                        <li>Cliquez sur <strong>Modifier la sélection</strong> et choisissez le champ à mettre à jour.</li>
                    </ol>
                </div>
            </div>

        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : ALERTES
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-alerts">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--red-pale);color:var(--red)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Alertes &amp; Notifications</h2>
                <p class="help-section-desc">Ne plus jamais être pris au dépourvu avec un stock vide.</p>
            </div>
        </div>

        <div class="help-grid help-grid-2">

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Comprendre les alertes</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Les alertes se déclenchent automatiquement dès qu'un seuil est franchi.</p>
                    <ul class="help-list">
                        <li><span class="badge badge-danger">CRITIQUE</span> — Stock à 0 ou négatif. Réapprovisionnement urgent.</li>
                        <li><span class="badge badge-warning" style="margin-top:4px">ÉLEVÉE</span> — Stock sous le minimum, à moins de la moitié du seuil de sécurité.</li>
                        <li><span class="badge" style="background:var(--orange-pale);color:var(--orange);margin-top:4px">MOYENNE</span> — Stock bas mais encore au-dessus du seuil critique.</li>
                    </ul>
                    <div class="help-note" style="margin-top:12px">
                        La cloche 🔔 en haut à droite affiche le nombre d'alertes actives en temps réel.
                    </div>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Activer les notifications push</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Recevez une notification sur votre téléphone ou PC même quand l'application est fermée.</p>
                    <ol class="help-steps">
                        <li>Allez dans <strong>Paramètres</strong>.</li>
                        <li>Activez les <strong>Notifications push</strong> et acceptez la demande du navigateur.</li>
                        <li>Vous recevrez désormais une notification dès qu'un stock passe sous son seuil, ou quand un inventaire est terminé.</li>
                    </ol>
                    <div class="help-note">
                        Si vous n'avez pas accepté la notification au premier affichage, vous pouvez la réactiver dans les paramètres de votre navigateur (icône cadenas à gauche de l'URL).
                    </div>
                </div>
            </div>

        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : CODES-BARRES
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-barcodes">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--bg-elevated);color:var(--text-secondary)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="5" x2="3" y2="19"/><line x1="7" y1="5" x2="7" y2="19"/><line x1="11" y1="5" x2="11" y2="19"/><line x1="15" y1="5" x2="15" y2="19"/><line x1="19" y1="5" x2="19" y2="19"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Codes-barres &amp; Étiquettes</h2>
                <p class="help-section-desc">Générer et imprimer des étiquettes pour vos produits.</p>
            </div>
        </div>

        <div class="help-grid help-grid-2">

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Imprimer des étiquettes</h3>
                </div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Allez dans <strong>Codes-barres</strong> depuis le menu.</li>
                        <li>Recherchez les produits à étiqueter ou filtrez par catégorie / magasin.</li>
                        <li>Cochez les produits souhaités.</li>
                        <li>Choisissez le <strong>format d'étiquette</strong> (standard, petit format…).</li>
                        <li>Cliquez sur <strong>Imprimer</strong> — un PDF haute résolution (300 DPI) s'ouvre, prêt à être envoyé à l'imprimante.</li>
                    </ol>
                    <div class="help-note">
                        Les étiquettes contiennent le nom du produit, le SKU et le code-barres. Elles fonctionnent avec la douchette et le scanner de l'application.
                    </div>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Générer un code-barres sur un produit</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Si un produit n'a pas encore de code-barres dans votre catalogue&nbsp;:</p>
                    <ol class="help-steps">
                        <li>Ouvrez la fiche produit dans <strong>Produits</strong>.</li>
                        <li>Dans le champ <strong>Code-barres</strong>, vous pouvez saisir le code existant ou cliquer sur <strong>Générer</strong> pour en créer un automatiquement.</li>
                        <li>Enregistrez la fiche.</li>
                        <li>Le produit est maintenant scannable.</li>
                    </ol>
                </div>
            </div>

        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : RAPPORTS
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-reports">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--blue-pale);color:var(--blue)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Rapports &amp; Exports</h2>
                <p class="help-section-desc">Analyser votre stock, exporter vos données et imprimer vos rapports.</p>
            </div>
        </div>

        <div class="help-grid help-grid-3">

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Rapport de stock</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Voir l'état de tous vos stocks en un coup d'œil.</p>
                    <ul class="help-list">
                        <li>Filtrez par <strong>magasin</strong>, <strong>catégorie</strong>, <strong>marque</strong> ou <strong>seuil</strong>.</li>
                        <li>Les KPI en haut (produits, unités, valeur, stock bas) se mettent à jour en temps réel selon vos filtres.</li>
                        <li>Cliquez sur <strong>Exporter CSV</strong> pour récupérer les données dans Excel.</li>
                        <li>Cliquez sur <strong>Imprimer</strong> pour un rapport propre au format A4.</li>
                    </ul>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Rapport des mouvements</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Retrouver tous les mouvements sur une période.</p>
                    <ul class="help-list">
                        <li>Définissez une <strong>plage de dates</strong>.</li>
                        <li>Filtrez par <strong>magasin</strong> et <strong>type</strong> (ajout, sortie, transfert…).</li>
                        <li>Les colonnes correspondent exactement à la page Mouvements : raison, chantier, opérateur, document.</li>
                        <li>Exportez en CSV pour une analyse fine dans un tableur.</li>
                    </ul>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header">
                    <h3 class="card-title">Écarts d'inventaire</h3>
                </div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Comparer le stock théorique et le stock compté lors de vos inventaires.</p>
                    <ul class="help-list">
                        <li>Ce rapport compare automatiquement le dernier inventaire validé avec le stock actuel.</li>
                        <li>Les écarts sont affichés en rouge (perte) ou orange (surplus).</li>
                        <li>La valeur totale des écarts vous aide à estimer l'impact financier.</li>
                    </ul>
                </div>
            </div>

        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : TABLEAU DE BORD
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-dashboard">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--blue-pale);color:var(--blue)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Tableau de bord</h2>
                <p class="help-section-desc">Votre vue d'ensemble pour piloter le stock au quotidien.</p>
            </div>
        </div>
        <div class="help-grid help-grid-2">
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Les KPI en un coup d'œil</h3></div>
                <div class="card-body">
                    <ul class="help-list">
                        <li><strong>Total produits :</strong> nombre de références dans votre catalogue.</li>
                        <li><strong>Unités en stock :</strong> somme de toutes les quantités sur tous les magasins.</li>
                        <li><strong>Valeur du stock :</strong> estimation basée sur le CUMP (coût unitaire moyen pondéré).</li>
                        <li><strong>Stock bas :</strong> produits en dessous du seuil minimum configuré.</li>
                    </ul>
                    <div class="help-note">Les KPI tiennent compte de vos droits d'accès aux magasins.</div>
                </div>
            </div>
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Mouvements récents et alertes</h3></div>
                <div class="card-body">
                    <ul class="help-list">
                        <li>Les <strong>derniers mouvements</strong> affichent les entrées, sorties et transferts les plus récents.</li>
                        <li>Les <strong>alertes actives</strong> signalent les produits en stock critique. Cliquez pour accéder au produit.</li>
                        <li>Les boutons d'action rapide permettent une sortie ou un ajout directement depuis le tableau de bord.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : MAGASINS & EMPLACEMENTS
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-warehouses">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--blue-pale);color:var(--blue)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Magasins, emplacements et fournisseurs</h2>
                <p class="help-section-desc">Organiser vos lieux de stockage et vos partenaires.</p>
            </div>
        </div>
        <div class="help-grid help-grid-3">
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Magasins</h3></div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Un magasin représente un lieu physique de stockage (dépôt, atelier, véhicule, armoire...).</p>
                    <ul class="help-list">
                        <li>Créez autant de magasins que nécessaire depuis la page <strong>Magasins</strong>.</li>
                        <li>Chaque magasin peut avoir ses propres <strong>catégories de produits</strong>.</li>
                        <li>Les droits d'accès par magasin se configurent dans la fiche utilisateur.</li>
                    </ul>
                </div>
            </div>
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Emplacements internes</h3></div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Découpez vos magasins en zones pour localiser chaque produit.</p>
                    <ul class="help-list">
                        <li>Gérez-les depuis la page <strong>Emplacements</strong>.</li>
                        <li>Chaque emplacement a un <strong>code</strong> (ex : A1, Rack-02), un <strong>libellé</strong> et une <strong>zone</strong>.</li>
                        <li>Lors des mouvements, indiquez l'emplacement source et destination.</li>
                    </ul>
                </div>
            </div>
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Fournisseurs et marques</h3></div>
                <div class="card-body">
                    <ul class="help-list">
                        <li><strong>Fournisseurs :</strong> nom, contact, email, téléphone. Liés à des marques spécifiques.</li>
                        <li><strong>Marques :</strong> globales, utilisées pour filtrer produits et rapports.</li>
                        <li>Vous pouvez créer des fournisseurs à la volée lors de la création d'une commande.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : RÉSERVATIONS
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-reservations">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--orange-pale);color:var(--orange)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Réservations de stock</h2>
                <p class="help-section-desc">Réserver du matériel pour un chantier futur sans le sortir du stock.</p>
            </div>
        </div>
        <div class="help-grid help-grid-2">
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Créer une réservation</h3></div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Allez dans <strong>Réservations</strong> et cliquez sur <strong>Nouvelle réservation</strong>.</li>
                        <li>Sélectionnez le <strong>produit</strong>, le <strong>magasin</strong> et la <strong>quantité</strong>.</li>
                        <li>Indiquez un <strong>libellé</strong> (ex : "Chantier Rue de la Paix") et un <strong>chantier</strong>.</li>
                        <li>Validez — les unités sont immédiatement bloquées.</li>
                    </ol>
                    <div class="help-note">
                        <strong>Blocage dur :</strong> tant qu'une réservation est active, MageStock empêche toute sortie empiétant sur la quantité réservée. Un message détaillé s'affiche avec le stock physique, réservé et disponible.
                    </div>
                </div>
            </div>
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Gérer les réservations</h3></div>
                <div class="card-body">
                    <ul class="help-list">
                        <li><strong>Active :</strong> stock bloqué, sortie impossible au-delà du disponible.</li>
                        <li><strong>Libérée :</strong> matériel utilisé/sorti, stock redevient disponible.</li>
                        <li><strong>Annulée :</strong> stock immédiatement libéré.</li>
                    </ul>
                    <div class="help-note">Pensez à libérer vos réservations une fois le matériel effectivement sorti.</div>
                </div>
            </div>
        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : KITS
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-kits">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--green-pale);color:var(--green)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Kits de produits</h2>
                <p class="help-section-desc">Regrouper plusieurs produits en ensembles prédéfinis.</p>
            </div>
        </div>
        <div class="help-grid help-grid-2">
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Qu'est-ce qu'un kit ?</h3></div>
                <div class="card-body">
                    <ul class="help-list">
                        <li>Un kit regroupe des produits souvent utilisés ensemble (ex : kit signalisation = 3 panneaux + 2 cônes + 1 balisage).</li>
                        <li>Les kits ne consomment pas de stock — ils servent de modèle pour faciliter les sorties groupées.</li>
                        <li>Vous pouvez vérifier d'un coup d'œil si tous les composants sont en stock suffisant.</li>
                    </ul>
                </div>
            </div>
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Créer et utiliser un kit</h3></div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Allez dans <strong>Kits</strong> et cliquez sur <strong>Nouveau kit</strong>.</li>
                        <li>Nommez le kit et ajoutez les <strong>produits composants</strong> avec leurs quantités.</li>
                        <li>Enregistrez — le kit est prêt à l'emploi comme référence pour vos sorties.</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : PARAMÈTRES
         ═══════════════════════════════════════════════════════════ -->

    <!-- ═══════════════════════════════════════════════════════════
         SECTION : PLANS D'EMPLACEMENTS
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-plans">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--blue-pale);color:var(--blue)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z"/><path d="M9 3v15M15 6v15"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Concevoir et utiliser un plan</h2>
                <p class="help-section-desc">Dessiner un dépôt, organiser les zones de stockage et retrouver un produit directement sur le plan.</p>
            </div>
        </div>

        <div class="help-grid help-grid-2">
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Créer le plan d'un magasin</h3></div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Ouvrez <strong>Plans</strong> dans la rubrique Organisation. La création et la modification sont réservées aux administrateurs.</li>
                        <li>Cliquez sur <strong>Nouveau plan</strong>, choisissez le magasin associé, puis renseignez le nom, les dimensions et l'échelle.</li>
                        <li>Définissez le cadre du bâtiment et les niveaux nécessaires. Enregistrez régulièrement pendant la conception.</li>
                        <li>Sur téléphone ou tablette portrait, MageStock privilégie la consultation et les modifications légères. Pour dessiner murs et ouvertures, utilisez une tablette en paysage ou un ordinateur.</li>
                    </ol>
                    <div class="help-note"><strong>Conseil :</strong> commencez par la structure du bâtiment avant d'ajouter les équipements et emplacements. Le plan restera plus simple à corriger.</div>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Dessiner murs, cloisons et pièces</h3></div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Sélectionnez <strong>Mur</strong> ou <strong>Cloison</strong>, puis placez les points successifs sur le canevas.</li>
                        <li>Utilisez l'accrochage et les guides d'angle pour obtenir des segments continus et correctement alignés.</li>
                        <li>Fermez un contour pour former une pièce, puis renseignez son nom et ses propriétés dans l'inspecteur.</li>
                        <li>Les poignées de sélection permettent de déplacer, redimensionner ou faire pivoter les objets compatibles.</li>
                    </ol>
                    <div class="help-note">Le zoom et le déplacement du canevas ne modifient pas les dimensions réelles du plan. Vérifiez toujours l'échelle avant impression.</div>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Ajouter portes, fenêtres et passages</h3></div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Choisissez une ouverture dans la bibliothèque : porte, fenêtre ou passage.</li>
                        <li>Approchez-la d'un mur : l'ouverture s'insère dans son axe et suit automatiquement son orientation.</li>
                        <li>Ajustez la largeur, le sens d'ouverture et la position depuis l'inspecteur.</li>
                        <li>Évitez de superposer deux ouvertures au même endroit ; supprimez l'élément en trop depuis la sélection.</li>
                    </ol>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Placer les équipements et emplacements</h3></div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Ajoutez armoires, racks, étagères, zones, bureaux ou autres objets depuis la bibliothèque.</li>
                        <li>Associez chaque objet de stockage à un <strong>emplacement MageStock</strong> existant.</li>
                        <li>Depuis la fiche d'un produit, utilisez <strong>Voir sur le plan</strong> pour ouvrir le bon plan et mettre son emplacement en évidence.</li>
                        <li>Gardez des libellés courts et uniques afin que la recherche et la légende restent lisibles.</li>
                    </ol>
                    <div class="help-note"><strong>Important :</strong> un produit doit être rattaché à un magasin et à un emplacement pour pouvoir être localisé précisément.</div>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Sélection, édition et sécurité</h3></div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Cliquez ou touchez un objet pour ouvrir ses propriétés. Utilisez <strong>Échap</strong> ou une zone vide pour désélectionner.</li>
                        <li>Dupliquez uniquement les objets nécessaires, puis déplacez immédiatement la copie afin d'éviter les superpositions.</li>
                        <li>Avant une modification importante, enregistrez le plan. En cas d'erreur, utilisez l'annulation disponible dans l'éditeur.</li>
                        <li>La suppression d'un plan ou d'un objet est définitive après confirmation.</li>
                    </ol>
                </div>
            </div>

            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Consulter, imprimer et exporter</h3></div>
                <div class="card-body">
                    <ol class="help-steps">
                        <li>Ouvrez le mode consultation pour naviguer dans le plan sans déplacer les objets.</li>
                        <li>Utilisez la recherche d'emplacement ou le bouton présent sur une fiche produit pour centrer la vue.</li>
                        <li>Dans l'impression, choisissez le niveau, la légende et la mise en évidence d'un emplacement si nécessaire.</li>
                        <li>Contrôlez l'aperçu avant d'imprimer ou d'enregistrer en PDF, notamment l'échelle, l'orientation et les marges.</li>
                    </ol>
                    <div class="help-note">Une impression avec surbrillance est adaptée aux agents terrain qui doivent retrouver rapidement une zone ou un matériel.</div>
                </div>
            </div>
        </div>
    </section>

    <section class="help-section" id="sec-settings">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--bg-elevated);color:var(--text-muted)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Paramètres et utilisateurs</h2>
                <p class="help-section-desc">Configurer MageStock, gérer les comptes et les droits d'accès.</p>
            </div>
        </div>
        <div class="help-grid help-grid-2">
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Paramètres généraux</h3></div>
                <div class="card-body">
                    <ul class="help-list">
                        <li><strong>Nom de l'entreprise :</strong> affiché dans la sidebar et sur les documents imprimés.</li>
                        <li><strong>Préfixe SKU :</strong> format des références auto-générées (ex : PRD-0001).</li>
                        <li><strong>Logo :</strong> personnalisez la page de connexion et les documents.</li>
                        <li><strong>Thème :</strong> clair ou sombre (icône en haut à droite).</li>
                        <li><strong>Langue :</strong> 17 langues disponibles (drapeau en haut à droite).</li>
                        <li><strong>Sauvegarde :</strong> exportez/importez vos données en JSON depuis Paramètres.</li>
                    </ul>
                </div>
            </div>
            <div class="card help-card">
                <div class="card-header"><h3 class="card-title">Gestion des utilisateurs</h3></div>
                <div class="card-body">
                    <p style="margin-bottom:10px;color:var(--text-muted);font-size:13px">Seul un administrateur peut gérer les comptes.</p>
                    <ul class="help-list">
                        <li><strong>Admin :</strong> accès complet (paramètres, utilisateurs, magasins, commandes, alertes…).</li>
                        <li><strong>Utilisateur :</strong> accès limité (sorties/ajouts, scanner, produits en lecture, réservations).</li>
                        <li><strong>Magasinier :</strong> accès métier complet sans Utilisateurs, Paramètres, LDAP, sauvegardes, archives ni mises à jour.</li>
                        <li><strong>Magasins autorisés :</strong> restreignez l'accès à certains magasins.</li>
                        <li><strong>Permissions fines :</strong> activez/désactivez des droits spécifiques par utilisateur.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>


    <!-- ═══════════════════════════════════════════════════════════
         SECTION : FAQ
         ═══════════════════════════════════════════════════════════ -->
    <section class="help-section" id="sec-faq">
        <div class="help-section-header">
            <div class="help-section-icon" style="background:var(--bg-elevated);color:var(--text-muted)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            </div>
            <div>
                <h2 class="help-section-title">Questions fréquentes (FAQ)</h2>
                <p class="help-section-desc">Les questions les plus courantes et comment résoudre les problèmes du quotidien.</p>
            </div>
        </div>

        <div class="help-faq">

            <details class="help-faq-item">
                <summary>Je ne peux pas sortir du stock alors qu'il y en a — pourquoi ?</summary>
                <div class="help-faq-body">
                    <p>C'est probablement parce qu'une partie du stock est <strong>réservée</strong>. MageStock bloque les sorties qui empiéteraient sur les réservations actives. Un message détaillé vous indique le stock physique, réservé et disponible.</p>
                    <p>Pour résoudre : allez dans <strong>Réservations</strong> et libérez ou annulez les réservations qui ne sont plus nécessaires.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>Mon stock est négatif, comment c'est possible ?</summary>
                <div class="help-faq-body">
                    <p>Cela peut arriver si une sortie a été enregistrée avant la mise en place du système de blocage. Pour corriger, faites un <strong>inventaire physique</strong> ou enregistrez un ajout correctif.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>Je ne vois pas certains magasins dans mes filtres</summary>
                <div class="help-faq-body">
                    <p>Votre compte peut être <strong>limité à certains magasins</strong>. Contactez votre administrateur pour ajuster vos permissions dans <strong>Utilisateurs</strong>.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>J'ai fait une erreur de saisie sur un mouvement, comment corriger ?</summary>
                <div class="help-faq-body">
                    <p>Les mouvements ne peuvent pas être supprimés pour garantir l'intégrité de l'historique. Créez un <strong>mouvement correctif</strong> inverse (ex : sorti 10 par erreur → ajout de 10 avec motif "Correction erreur").</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>Comment valider ou refuser un bon de commande ?</summary>
                <div class="help-faq-body">
                    <p>Seul un <strong>administrateur</strong> peut valider ou refuser. Dans la liste des commandes, les BC en attente affichent les boutons ✅ Valider et ⛔ Refuser. Un BC refusé peut être <strong>re-soumis</strong> après corrections via le bouton 🔄.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>La réception de commande ne fonctionne pas</summary>
                <div class="help-faq-body">
                    <p>Pour réceptionner, le BC doit être au statut <strong>Envoyé</strong> ou <strong>Partiel</strong>, et avoir été <strong>validé</strong> par un administrateur. Si ces conditions ne sont pas remplies, le bouton n'apparaît pas.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>Les notifications push ne fonctionnent pas</summary>
                <div class="help-faq-body">
                    <p>Vérifiez : notifications autorisées dans le navigateur (icône cadenas), notifications activées dans les réglages système, accès en HTTPS, et connexion Internet active. Si le problème persiste, désactivez puis réactivez dans <strong>Paramètres</strong>.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>Comment exporter mon stock dans Excel ?</summary>
                <div class="help-faq-body">
                    <p>Dans <strong>Rapports → Stock</strong>, laissez tous les filtres sur "Tous" et cliquez sur <strong>Exporter CSV</strong>. Si les accents s'affichent mal dans Excel, importez le fichier avec l'encodage <em>UTF-8</em>.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>Peut-on utiliser MageStock sur téléphone ?</summary>
                <div class="help-faq-body">
                    <p>Oui, MageStock est entièrement responsive. Sur mobile, la navigation est en barre du bas. Vous pouvez <strong>ajouter MageStock à l'écran d'accueil</strong> (partage iOS / "Ajouter à l'écran d'accueil" Android) pour un accès comme une application native.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>Quelle différence entre ajout de stock et entrée par commande ?</summary>
                <div class="help-faq-body">
                    <p><strong>Ajout de stock</strong> (bouton vert) : ajout rapide sans traçabilité fournisseur — pour les stocks initiaux ou achats directs. <strong>Entrée par commande</strong> : circuit complet avec validation admin, réception, mise à jour du CUMP et des lots. C'est la méthode recommandée.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>Comment changer la langue ?</summary>
                <div class="help-faq-body">
                    <p>Cliquez sur le <strong>drapeau</strong> en haut à droite. 17 langues disponibles. La page se recharge automatiquement et votre choix est sauvegardé.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>Comment ajouter un nouveau magasin ?</summary>
                <div class="help-faq-body">
                    <p>Seul un admin peut créer un magasin. Allez dans <strong>Magasins → + Ajouter</strong>. Renseignez le nom, la description et l'adresse. Vous pourrez ensuite y affecter du stock et créer des emplacements internes.</p>
                </div>
            </details>

            <details class="help-faq-item">
                <summary>Les données sont-elles sécurisées ?</summary>
                <div class="help-faq-body">
                    <p>Oui. MageStock utilise : HTTPS obligatoire, authentification par session sécurisée, protection CSRF, rate limiting (5 tentatives/5min), mots de passe hashés bcrypt, et verrouillage fichiers pour éviter la corruption.</p>
                </div>
            </details>

        </div>
    </section>

</div>

<script>window.SM_PAGE = 'help';</script>
