{% extends 'base.html.twig' %}

{% block body %}
    <style>
        .manual-container {
            display: flex;
            gap: 20px;
            min-height: calc(100vh - 200px);
            position: relative;
            z-index: 1;
        }
        
        .manual-sidebar {
            width: 280px;
            background: #f8f9fa;
            border-right: 1px solid #e0e0e0;
            overflow-y: auto;
            padding: 20px;
            position: sticky;
            top: 70px;
            max-height: calc(100vh - 100px);
            align-self: flex-start;
        }
        
        .manual-sidebar h3 {
            margin: 0 0 15px 0;
            font-size: 16px;
            color: #333;
            font-weight: 600;
        }
        
        .manual-sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .manual-sidebar li {
            margin: 0;
        }
        
        .manual-sidebar a {
            display: block;
            padding: 8px 12px;
            color: #555;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.2s;
            font-size: 14px;
        }
        
        .manual-sidebar a:hover {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .manual-sidebar a.active {
            background: #1976d2;
            color: white;
        }
        
        .manual-nav-link {
            /* Specific class for manual navigation to avoid conflicts */
        }
        
        .manual-content {
            flex: 1;
            padding: 0 30px 30px 10px;
            background: white;
        }
        
        .manual-content h1 {
            color: #26a69a;
            margin-bottom: 10px;
            font-size: 32px;
        }
        
        .manual-content h2 {
            color: #1976d2;
            margin-top: 40px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e0e0e0;
            font-size: 24px;
            scroll-margin-top: 20px;
        }
        
        .manual-content h3 {
            color: #424242;
            margin-top: 25px;
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        .manual-content p {
            line-height: 1.6;
            margin-bottom: 15px;
            color: #555;
        }
        
        .manual-content ul, .manual-content ol {
            margin-left: 20px;
            margin-bottom: 15px;
        }
        
        .manual-content li {
            margin-bottom: 8px;
            line-height: 1.6;
        }
        
        .manual-content img {
            max-width: 100%;
            height: auto;
            margin: 20px 0;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .manual-content .info-box {
            background: #e3f2fd;
            border-left: 4px solid #1976d2;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
        
        .manual-content .warning-box {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
        
        .update-date {
            color: #757575;
            font-style: italic;
            margin-bottom: 30px;
        }
        
        .section-divider {
            border: 0;
            height: 2px;
            background: #e0e0e0;
            margin: 30px 0;
        }

        .scroll-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #1976d2;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            transition: all 0.3s;
            z-index: 1000;
        }

        .scroll-to-top:hover {
            background: #1565c0;
            transform: translateY(-2px);
        }

        .scroll-to-top.show {
            display: flex;
        }
    </style>

    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('ticket_index') }}">Support</a>
                <i class="fa fa-circle"></i>
            </li>
            <li><span>Manuel d'utilisation</span></li>
        </ul>
    </div>

    <br/>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-book font-green"></i>
                <span class="caption-subject bold uppercase">Manuel d'utilisation</span>
                <span class="caption-helper">Guide utilisateur complet</span>
            </div>
        </div>
        <div class="portlet-body" style="padding: 0;">
            <div class="manual-container">
                <!-- Sidebar Navigation -->
                <div class="manual-sidebar">
                    <h3><i class="fa fa-list"></i> Sommaire</h3>
                    <ul>
                        <li><a href="#introduction" class="manual-nav-link">Introduction</a></li>
                        <li><a href="#navigation" class="manual-nav-link">1. Principes de navigation</a></li>
                        <li><a href="#clients" class="manual-nav-link">2. Clients</a></li>
                        <li><a href="#fournisseurs" class="manual-nav-link">3. Fournisseurs</a></li>
                        <li><a href="#produits" class="manual-nav-link">4. Produits</a></li>
                        <li><a href="#devis" class="manual-nav-link">5. Devis</a></li>
                        <li><a href="#ventes" class="manual-nav-link">6. Ventes (Caisse)</a></li>
                        <li><a href="#commandes" class="manual-nav-link">7. Bons de commande</a></li>
                        <li><a href="#achats" class="manual-nav-link">8. Achats</a></li>
                        <li><a href="#reparations" class="manual-nav-link">9. Réparations (SAV)</a></li>
                        <li><a href="#stock" class="manual-nav-link">10. Stock</a></li>
                        <li><a href="#depenses" class="manual-nav-link">11. Dépenses</a></li>
                        <li><a href="#statistiques" class="manual-nav-link">12. Statistiques</a></li>
                        <li><a href="#impression" class="manual-nav-link">13. Impression et documents</a></li>
                        <li><a href="#astuces" class="manual-nav-link">14. Astuces & dépannage</a></li>
                    </ul>
                </div>

                <!-- Main Content -->
                <div class="manual-content">
                    <h1 id="introduction">Manuel Utilisateur Karizma.app</h1>
                    <p class="update-date"><strong>Dernière mise à jour : 13/02/2026</strong></p>

                    <p>Bienvenue sur <strong>Karizma.app</strong>, votre solution tout-en-un conçue pour <strong>simplifier la gestion quotidienne de votre activité</strong>, améliorer votre productivité et vous offrir une <strong>vision claire et fiable</strong> de vos opérations.</p>

                    <p>Karizma.app a été pensé pour les équipes terrain comme pour les gestionnaires : il centralise l'ensemble de vos données (clients, ventes, stock, réparations, fournisseurs…) dans une interface intuitive, rapide et sécurisée.</p>

                    <p>Ce manuel utilisateur a pour objectif de vous accompagner <strong>pas à pas</strong>, avec des explications détaillées et orientées métier, afin de vous permettre d'exploiter <strong>pleinement la valeur de Karizma.app</strong> dès les premiers jours.</p>

                    <div class="info-box">
                        <strong>📌 Objectifs de ce guide :</strong>
                        <ul>
                            <li>Faciliter la prise en main du logiciel</li>
                            <li>Expliquer clairement chaque fonctionnalité et son utilité métier</li>
                            <li>Vous aider à gagner du temps au quotidien</li>
                            <li>Réduire les erreurs et améliorer le suivi opérationnel</li>
                        </ul>
                    </div>

                    <div class="warning-box">
                        <strong>📸 Important :</strong> Les captures d'écran présentes dans ce document sont conservées afin de faciliter la compréhension visuelle des écrans.
                    </div>

                    <hr class="section-divider">

                    <h2 id="navigation">1. Principes de navigation</h2>

                    <h3>Une interface pensée pour la rapidité</h3>
                    <p>Karizma.app repose sur une navigation simple et logique, permettant à chaque utilisateur de <strong>trouver rapidement l'information ou l'action recherchée</strong>, même en situation de forte activité (caisse, atelier, réception client).</p>

                    <h3>Connexion</h3>
                    <ul>
                        <li>Accédez à Karizma.app via la page de connexion</li>
                        <li>Saisissez vos identifiants personnels fournis par votre administrateur</li>
                    </ul>
                    <img src="{{ asset('assets/manuel-utilisateur_files/image002.png') }}" alt="Page de connexion">

                    <h3>Accès aux modules</h3>
                    <ul>
                        <li>Le menu principal, situé à gauche de l'écran, donne accès à tous les modules du logiciel</li>
                        <li>Chaque module ouvre une page de <strong>liste centralisée</strong>, conçue pour offrir une vue globale et exploitable immédiatement</li>
                    </ul>
                    <img src="{{ asset('assets/manuel-utilisateur_files/image004.jpg') }}" alt="Menu principal" style="max-width: 300px;">

                    <h3>Listes, filtres et recherche</h3>
                    <p>Toutes les listes (clients, produits, ventes, etc.) disposent :</p>
                    <ul>
                        <li>d'une <strong>recherche intelligente</strong> par mot-clé</li>
                        <li>de <strong>filtres avancés</strong> (date, statut, magasin…)</li>
                        <li>d'une mise à jour rapide des résultats</li>
                    </ul>
                    <div class="info-box">
                        💡 Les filtres restent actifs pendant toute votre session afin de conserver votre contexte de travail.
                    </div>

                    <h3>Actions rapides</h3>
                    <p>Chaque ligne de liste propose un menu <strong>Actions</strong> permettant de :</p>
                    <ul>
                        <li>Afficher le détail</li>
                        <li>Modifier les informations</li>
                        <li>Imprimer un document</li>
                        <li>Supprimer (selon vos droits)</li>
                    </ul>

                    <h3>Impression professionnelle</h3>
                    <p>Karizma.app permet de générer des documents <strong>clairs, professionnels et prêts à être remis</strong> à vos clients ou partenaires : devis, factures, bons de commande, ordres de réparation, etc.</p>

                    <hr class="section-divider">

                    <h2 id="clients">2. Clients</h2>

                    <h3>Objectif du module</h3>
                    <p>Le module <strong>Clients</strong> permet de centraliser toutes les informations relatives à vos clients afin d'améliorer la qualité du service, accélérer les opérations quotidiennes (devis, ventes, réparations) et assurer un suivi financier clair.</p>
                    <p>Grâce à ce module, chaque utilisateur peut <strong>retrouver rapidement un client</strong>, consulter son historique complet et produire des documents professionnels (factures, états de solde, etc.).</p>

                    <h3>Accéder au module Clients</h3>
                    <ol>
                        <li>Depuis le menu principal, cliquez sur <strong>Clients</strong></li>
                        <li>Sélectionnez <strong>Liste</strong> pour afficher l'ensemble des clients enregistrés</li>
                    </ol>
                    <p>Vous arrivez sur un écran de liste comportant : une barre de recherche, des filtres avancés, et un tableau listant les clients.</p>

                    <h3>Rechercher et retrouver un client</h3>
                    <p>Pour retrouver rapidement un client :</p>
                    <ol>
                        <li>Utilisez la <strong>barre de recherche</strong> en haut de la liste
                            <ul>
                                <li>le nom ou la raison sociale</li>
                                <li>le numéro de téléphone</li>
                                <li>un mot-clé distinctif</li>
                            </ul>
                        </li>
                        <li>Validez la recherche</li>
                        <li>Les résultats s'actualisent automatiquement</li>
                    </ol>
                    <img src="{{ asset('assets/manuel-utilisateur_files/image006.jpg') }}" alt="Recherche client">
                    <div class="info-box">
                        💡 <strong>Astuce :</strong> la recherche par téléphone est la plus rapide pour les clients réguliers.
                    </div>

                    <h3>Créer un nouveau client</h3>
                    <ol>
                        <li>Cliquez sur <strong>Nouveau client</strong></li>
                        <li>Remplissez les informations obligatoires (nom, coordonnées)</li>
                        <li>Ajoutez des informations complémentaires si nécessaire</li>
                        <li>Enregistrez</li>
                    </ol>

                    <hr class="section-divider">

                    <h2 id="fournisseurs">3. Fournisseurs</h2>
                    <h3>Objectif du module</h3>
                    <p>Le module <strong>Fournisseurs</strong> centralise toutes les informations de vos partenaires d'approvisionnement.</p>
                    
                    <h3>Fonctionnalités principales</h3>
                    <ul>
                        <li>Gestion des contacts fournisseurs</li>
                        <li>Catalogues de produits par fournisseur</li>
                        <li>Historique des commandes et achats</li>
                        <li>Suivi des délais de livraison</li>
                    </ul>
                    <p>Le fonctionnement est similaire au module Clients, adapté aux besoins de la gestion des fournisseurs.</p>

                    <hr class="section-divider">

                    <h2 id="produits">4. Produits</h2>
                    <h3>Objectif du module</h3>
                    <p>Le module <strong>Produits</strong> est le cœur de votre inventaire. Il permet de gérer l'ensemble de votre catalogue.</p>
                    
                    <h3>Informations gérées</h3>
                    <ul>
                        <li><strong>Références :</strong> Code interne, code-barres, SKU</li>
                        <li><strong>Prix :</strong> Prix d'achat, prix de vente, marges</li>
                        <li><strong>Stock :</strong> Quantité disponible par magasin, seuils d'alerte</li>
                        <li><strong>Description :</strong> Photos, descriptions détaillées</li>
                        <li><strong>Classification :</strong> Catégories, marques, modèles</li>
                        <li><strong>Attributs :</strong> Couleur, taille, caractéristiques techniques</li>
                    </ul>

                    <h3>Créer un nouveau produit</h3>
                    <ol>
                        <li>Accédez à <strong>Produits > Nouveau</strong></li>
                        <li>Remplissez les informations de base (nom, référence)</li>
                        <li>Définissez les prix</li>
                        <li>Ajoutez une photo (recommandé)</li>
                        <li>Configurez les stocks initiaux</li>
                        <li>Enregistrez</li>
                    </ol>

                    <hr class="section-divider">

                    <h2 id="devis">5. Devis</h2>
                    <h3>Objectif du module</h3>
                    <p>Le module <strong>Devis</strong> permet de créer rapidement des propositions commerciales professionnelles.</p>

                    <h3>Créer un devis</h3>
                    <ol>
                        <li>Accédez à <strong>Devis > Nouveau</strong></li>
                        <li>Sélectionnez le client</li>
                        <li>Ajoutez les produits souhaités</li>
                        <li>Appliquez des remises si nécessaire</li>
                        <li>Ajoutez des commentaires ou conditions</li>
                        <li>Imprimez ou envoyez par email</li>
                    </ol>

                    <h3>Fonctionnalités clés</h3>
                    <ul>
                        <li>Calculs automatiques (TVA, remises, totaux)</li>
                        <li>Conversion en vente en un clic</li>
                        <li>Suivi des devis (en attente, accepté, refusé)</li>
                        <li>Historique par client</li>
                        <li>Impression PDF professionnelle</li>
                    </ul>

                    <hr class="section-divider">

                    <h2 id="ventes">6. Ventes (incluant la caisse)</h2>
                    <h3>Objectif du module</h3>
                    <p>Le module <strong>Ventes</strong> est l'interface principale pour enregistrer vos transactions quotidiennes.</p>

                    <h3>Créer une vente</h3>
                    <ol>
                        <li>Accédez au <strong>Point de vente</strong></li>
                        <li>Sélectionnez le client (ou client occasionnel)</li>
                        <li>Scannez ou recherchez les produits</li>
                        <li>Vérifiez les quantités et prix</li>
                        <li>Appliquez des remises si autorisé</li>
                        <li>Enregistrez les paiements</li>
                        <li>Imprimez le ticket ou la facture</li>
                    </ol>

                    <h3>Fonctionnalités clés</h3>
                    <ul>
                        <li>Interface caisse rapide et intuitive</li>
                        <li>Scan de codes-barres pour ajout rapide</li>
                        <li>Gestion des paiements multiples (espèces, carte, chèque)</li>
                        <li>Calcul automatique de la monnaie à rendre</li>
                        <li>Impression tickets et factures</li>
                        <li>Gestion des retours et avoirs</li>
                        <li>Historique complet des ventes</li>
                    </ul>

                    <div class="info-box">
                        💡 <strong>Astuce caisse :</strong> Utilisez les raccourcis clavier pour accélérer les opérations aux heures de pointe.
                    </div>

                    <hr class="section-divider">

                    <h2 id="commandes">7. Bons de commande fournisseurs</h2>
                    <h3>Objectif du module</h3>
                    <p>Ce module permet de passer des commandes auprès de vos fournisseurs et d'assurer le suivi jusqu'à la réception.</p>

                    <h3>Créer un bon de commande</h3>
                    <ol>
                        <li>Accédez à <strong>Commandes > Nouveau</strong></li>
                        <li>Sélectionnez le fournisseur</li>
                        <li>Ajoutez les produits à commander</li>
                        <li>Vérifiez les prix et quantités</li>
                        <li>Validez la commande</li>
                        <li>Imprimez et envoyez au fournisseur</li>
                    </ol>

                    <h3>Suivi des commandes</h3>
                    <ul>
                        <li>Statuts : En attente, Envoyée, Partiellement reçue, Complète</li>
                        <li>Alertes pour les retards de livraison</li>
                        <li>Historique par fournisseur</li>
                    </ul>

                    <hr class="section-divider">

                    <h2 id="achats">8. Achats</h2>
                    <h3>Objectif du module</h3>
                    <p>Le module <strong>Achats</strong> enregistre les réceptions de marchandises et met à jour automatiquement votre stock.</p>

                    <h3>Enregistrer un achat</h3>
                    <ol>
                        <li>Accédez à <strong>Achats > Nouveau</strong></li>
                        <li>Sélectionnez le fournisseur</li>
                        <li>Liez à une commande existante (si applicable)</li>
                        <li>Vérifiez les produits reçus</li>
                        <li>Contrôlez les quantités et l'état</li>
                        <li>Validez pour mise à jour automatique du stock</li>
                    </ol>

                    <h3>Fonctionnalités clés</h3>
                    <ul>
                        <li>Réception de commandes</li>
                        <li>Mise à jour automatique des stocks</li>
                        <li>Enregistrement des coûts réels</li>
                        <li>Historique complet par fournisseur</li>
                        <li>Gestion des écarts (manquants, surplus)</li>
                    </ul>

                    <hr class="section-divider">

                    <h2 id="reparations">9. Réparations (SAV)</h2>
                    <h3>Objectif du module</h3>
                    <p>Le module <strong>Réparations</strong> permet de gérer l'atelier SAV de bout en bout.</p>

                    <h3>Créer un ordre de réparation</h3>
                    <ol>
                        <li>Accédez à <strong>Réparations > Nouveau</strong></li>
                        <li>Sélectionnez le client</li>
                        <li>Décrivez l'appareil et la panne</li>
                        <li>Établissez un diagnostic</li>
                        <li>Estimez le coût et le délai</li>
                        <li>Obtenez l'accord du client</li>
                        <li>Suivez l'état d'avancement</li>
                    </ol>

                    <h3>États de réparation</h3>
                    <ul>
                        <li><strong>Reçu :</strong> Appareil déposé, diagnostic à faire</li>
                        <li><strong>En diagnostic :</strong> Analyse en cours</li>
                        <li><strong>Devis envoyé :</strong> En attente accord client</li>
                        <li><strong>En réparation :</strong> Intervention en cours</li>
                        <li><strong>Terminé :</strong> Prêt à être restitué</li>
                        <li><strong>Livré :</strong> Restitué au client</li>
                    </ul>

                    <h3>Gestion des pièces</h3>
                    <ul>
                        <li>Association des pièces utilisées</li>
                        <li>Déduction automatique du stock</li>
                        <li>Calcul de la marge</li>
                    </ul>

                    <hr class="section-divider">

                    <h2 id="stock">10. Stock (état & alertes)</h2>
                    <h3>Objectif du module</h3>
                    <p>Le module <strong>Stock</strong> offre une vision complète de votre inventaire en temps réel.</p>

                    <h3>Consulter l'état du stock</h3>
                    <ul>
                        <li>Accédez à <strong>Stock > État</strong></li>
                        <li>Visualisez les quantités par produit et par magasin</li>
                        <li>Consultez les alertes de réapprovisionnement</li>
                        <li>Filtrez par catégorie, marque ou fournisseur</li>
                    </ul>

                    <h3>Fonctionnalités clés</h3>
                    <ul>
                        <li><strong>Alertes automatiques :</strong> Notification quand stock < seuil minimum</li>
                        <li><strong>Mouvements détaillés :</strong> Historique complet des entrées/sorties</li>
                        <li><strong>Inventaires physiques :</strong> Comparaison stock théorique vs réel</li>
                        <li><strong>Transferts inter-magasins :</strong> Déplacer du stock entre points de vente</li>
                        <li><strong>Valorisation :</strong> Valeur totale du stock</li>
                    </ul>

                    <div class="warning-box">
                        ⚠️ <strong>Important :</strong> Effectuez des inventaires réguliers pour garantir la fiabilité des données.
                    </div>

                    <hr class="section-divider">

                    <h2 id="depenses">11. Dépenses</h2>
                    <h3>Objectif du module</h3>
                    <p>Le module <strong>Dépenses</strong> permet d'enregistrer toutes les sorties d'argent liées à l'exploitation.</p>

                    <h3>Ajouter une dépense</h3>
                    <ol>
                        <li>Accédez à <strong>Dépenses > Nouvelle</strong></li>
                        <li>Sélectionnez la catégorie (loyer, salaires, fournitures, etc.)</li>
                        <li>Indiquez le montant</li>
                        <li>Ajoutez une description</li>
                        <li>Joignez une pièce justificative (optionnel)</li>
                        <li>Enregistrez</li>
                    </ol>

                    <h3>Catégories de dépenses</h3>
                    <ul>
                        <li>Loyer et charges</li>
                        <li>Salaires et charges sociales</li>
                        <li>Fournitures et consommables</li>
                        <li>Marketing et publicité</li>
                        <li>Entretien et réparations</li>
                        <li>Frais généraux</li>
                    </ul>

                    <h3>Suivi budgétaire</h3>
                    <p>Consultez les rapports de dépenses par période et par catégorie pour maîtriser vos coûts.</p>

                    <hr class="section-divider">

                    <h2 id="statistiques">12. Statistiques</h2>
                    <h3>Objectif du module</h3>
                    <p>Le module <strong>Statistiques</strong> permet d'analyser l'activité et soutenir la prise de décision.</p>

                    <h3>Consulter les statistiques</h3>
                    <ol>
                        <li>Accédez à <strong>Statistiques > Tableau de bord</strong></li>
                        <li>Sélectionnez la période d'analyse</li>
                        <li>Appliquez les filtres (magasin, catégorie, etc.)</li>
                        <li>Consultez les indicateurs clés</li>
                    </ol>

                    <h3>Indicateurs disponibles</h3>
                    <ul>
                        <li><strong>Chiffre d'affaires :</strong> Par jour, semaine, mois</li>
                        <li><strong>Marge :</strong> Globale et par produit</li>
                        <li><strong>Nombre de ventes :</strong> Volume de transactions</li>
                        <li><strong>Panier moyen :</strong> Valeur moyenne par transaction</li>
                        <li><strong>Top produits :</strong> Meilleures ventes</li>
                        <li><strong>Top clients :</strong> Clients les plus actifs</li>
                        <li><strong>Performance magasins :</strong> Comparaison entre points de vente</li>
                    </ul>

                    <img src="{{ asset('assets/manuel-utilisateur_files/image045.jpg') }}" alt="Tableau de bord statistiques">

                    <div class="info-box">
                        💡 <strong>Astuce :</strong> Consultez régulièrement vos statistiques pour identifier les tendances et ajuster votre stratégie.
                    </div>

                    <hr class="section-divider">

                    <h2 id="impression">13. Impression et documents</h2>
                    <h3>Documents disponibles</h3>
                    <p>Karizma.app génère automatiquement tous les documents nécessaires à votre activité :</p>
                    <ul>
                        <li><strong>Devis :</strong> Propositions commerciales</li>
                        <li><strong>Factures :</strong> Documents de vente</li>
                        <li><strong>Tickets de caisse :</strong> Reçus de vente</li>
                        <li><strong>Bons de commande :</strong> Commandes fournisseurs</li>
                        <li><strong>Ordres de réparation :</strong> Fiches SAV</li>
                        <li><strong>États de stock :</strong> Rapports d'inventaire</li>
                        <li><strong>Relevés clients :</strong> Situations de compte</li>
                    </ul>

                    <h3>Format et personnalisation</h3>
                    <p>Tous les documents sont générés en <strong>PDF</strong> avec une mise en page professionnelle intégrant :</p>
                    <ul>
                        <li>Votre logo et informations commerciales</li>
                        <li>Numérotation automatique</li>
                        <li>Mentions légales</li>
                        <li>Conditions générales</li>
                    </ul>

                    <img src="{{ asset('assets/manuel-utilisateur_files/image047.jpg') }}" alt="Exemple de document">

                    <h3>Imprimer un document</h3>
                    <ol>
                        <li>Depuis la fiche concernée (vente, devis, etc.)</li>
                        <li>Cliquez sur <strong>Imprimer</strong></li>
                        <li>Le PDF s'ouvre dans un nouvel onglet</li>
                        <li>Imprimez ou enregistrez selon vos besoins</li>
                    </ol>

                    <hr class="section-divider">

                    <h2 id="astuces">14. Astuces & dépannage rapide</h2>

                    <h3>Astuces pour gagner du temps</h3>
                    <ul>
                        <li><strong>Codes-barres :</strong> Utilisez un lecteur de codes-barres pour accélérer les ventes et recherches</li>
                        <li><strong>Raccourcis clavier :</strong> Apprenez les raccourcis pour naviguer plus rapidement</li>
                        <li><strong>Filtres persistants :</strong> Les filtres restent actifs entre les sessions</li>
                        <li><strong>Recherche rapide :</strong> La recherche par téléphone client est la plus rapide</li>
                        <li><strong>Favoris :</strong> Marquez vos produits les plus vendus en favoris</li>
                    </ul>

                    <h3>Points de vigilance</h3>
                    <ul>
                        <li><strong>Magasin actif :</strong> Vérifiez toujours le magasin sélectionné avant toute opération</li>
                        <li><strong>Retours :</strong> Utilisez toujours le module officiel pour les retours (pas de suppression manuelle)</li>
                        <li><strong>Sauvegarde :</strong> Pensez à cliquer sur "Enregistrer" avant de quitter une fiche</li>
                        <li><strong>Droits utilisateur :</strong> Certaines actions nécessitent des droits spécifiques</li>
                    </ul>

                    <h3>Problèmes courants et solutions</h3>
                    <div class="info-box">
                        <strong>❓ Produit introuvable ?</strong>
                        <ul>
                            <li>Vérifiez le magasin actif</li>
                            <li>Essayez de chercher par code-barres ou référence</li>
                            <li>Contrôlez que le produit n'est pas archivé</li>
                        </ul>
                    </div>

                    <div class="info-box">
                        <strong>❓ Stock incorrect ?</strong>
                        <ul>
                            <li>Consultez l'historique des mouvements</li>
                            <li>Vérifiez qu'aucune vente ou achat n'a été oublié</li>
                            <li>Lancez un inventaire physique</li>
                        </ul>
                    </div>

                    <div class="info-box">
                        <strong>❓ Document ne s'imprime pas ?</strong>
                        <ul>
                            <li>Vérifiez que le PDF s'ouvre correctement</li>
                            <li>Contrôlez les paramètres de votre imprimante</li>
                            <li>Testez avec un autre navigateur si nécessaire</li>
                        </ul>
                    </div>

                    <h3>Besoin d'aide supplémentaire ?</h3>
                    <div class="warning-box">
                        <strong>📞 Support technique</strong><br><br>
                        Pour toute question ou problème technique :
                        <ul>
                            <li>Utilisez le module <strong>Support</strong> pour créer un ticket</li>
                            <li>Décrivez précisément le problème rencontré</li>
                            <li>Joignez une capture d'écran si possible</li>
                            <li>Notre équipe vous répondra dans les meilleurs délais</li>
                        </ul>
                    </div>

                    <hr class="section-divider">

                    <div style="text-align: center; padding: 40px 0; color: #757575;">
                        <p><strong>Merci d'utiliser Karizma.app !</strong></p>
                        <p>Nous espérons que ce manuel vous aidera à tirer le meilleur parti de l'application.</p>
                        <p style="font-size: 0.9em;">© 2026 Karizma.app - Tous droits réservés</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="scroll-to-top" id="scrollToTop">
        <i class="fa fa-arrow-up"></i>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Smooth scroll to sections - only for manual navigation links
            const navLinks = document.querySelectorAll('.manual-nav-link');
            const scrollToTop = document.getElementById('scrollToTop');
            const pageContent = document.querySelector('.page-content') || window;
            
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href').substring(1);
                    const targetElement = document.getElementById(targetId);
                    
                    if (targetElement) {
                        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        
                        // Update active state
                        navLinks.forEach(l => l.classList.remove('active'));
                        this.classList.add('active');
                    }
                });
            });

            // Show/hide scroll to top button
            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    scrollToTop.classList.add('show');
                } else {
                    scrollToTop.classList.remove('show');
                }
            });

            // Scroll to top functionality
            scrollToTop.addEventListener('click', function() {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            });

            // Highlight active section on scroll
            const observerOptions = {
                rootMargin: '-20% 0px -80% 0px',
                threshold: 0
            };

            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const id = entry.target.getAttribute('id');
                        navLinks.forEach(link => {
                            link.classList.remove('active');
                            if (link.getAttribute('href') === '#' + id) {
                                link.classList.add('active');
                            }
                        });
                    }
                });
            }, observerOptions);

            // Observe all sections
            document.querySelectorAll('.manual-content h2, .manual-content h1').forEach(section => {
                observer.observe(section);
            });

            // Set first link as active initially
            if (navLinks.length > 0) {
                navLinks[0].classList.add('active');
            }
        });
    </script>
{% endblock %}