{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content_title %}
    <span style="font-size: 1.1rem; font-weight: 600;">
        <i class="fas fa-book-open me-2"></i>Guide d'utilisation
    </span>
{% endblock %}

{% block main %}
<div class="bw-guide" style="max-width: 900px;">

    <p class="text-muted mb-4" style="font-size: 0.92rem;">
        Bienvenue dans le guide BlogWeb. Cliquez sur une section pour en savoir plus.
        Ce guide est toujours accessible depuis le menu <strong>Aide &rarr; Guide</strong>.
    </p>

    <div class="accordion" id="guideAccordion">

        {# ── 1. Premiers pas ── #}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#guide-start" aria-expanded="true">
                    <i class="fas fa-rocket me-2 text-primary"></i> Premiers pas
                </button>
            </h2>
            <div id="guide-start" class="accordion-collapse collapse show" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Qu'est-ce que BlogWeb ?</h5>
                    <p>BlogWeb est un CMS (systeme de gestion de contenu) qui vous permet de gerer votre site web de maniere autonome : articles, pages, medias, navigation, et plus encore.</p>

                    <h5>Votre tableau de bord</h5>
                    <p>Le <strong>Tableau de bord</strong> est votre page d'accueil dans l'administration. Vous y trouvez :</p>
                    <ul>
                        <li>Les <strong>statistiques de visites</strong> de votre site</li>
                        <li>Vos <strong>derniers articles</strong> et <strong>commentaires</strong></li>
                        <li>Des <strong>raccourcis</strong> vers les actions les plus courantes</li>
                        <li>Des <strong>astuces</strong> pour mieux utiliser votre site</li>
                    </ul>

                    <h5>Le menu de navigation</h5>
                    <p>Le menu a gauche est organise par sections :</p>
                    <ul>
                        <li><strong>Contenu</strong> &mdash; Tout ce que vos visiteurs voient : articles, pages, medias</li>
                        <li><strong>Communaute</strong> &mdash; Commentaires et utilisateurs</li>
                        <li><strong>Reglages</strong> &mdash; Configuration du site (identite, navigation, apparence)</li>
                        <li><strong>Aide</strong> &mdash; Ce guide, toujours accessible</li>
                    </ul>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Commencez par configurer l'identite de votre site (nom, logo, coordonnees) dans <em>Reglages &rarr; Identite du site</em>.
                    </div>
                </div>
            </div>
        </div>

        {# ── 2. Articles ── #}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-articles">
                    <i class="fas fa-newspaper me-2 text-primary"></i> Gerer vos articles
                </button>
            </h2>
            <div id="guide-articles" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Creer un article</h5>
                    <p>Depuis <strong>Contenu &rarr; Blog &rarr; Articles</strong>, cliquez sur <em>Creer un article</em>.</p>

                    <h5>L'editeur de contenu</h5>
                    <p>BlogWeb integre un editeur visuel complet pour rediger vos contenus. Consultez la section <strong>Editeur de contenu</strong> ci-dessous pour decouvrir toutes ses fonctionnalites.</p>

                    <h5>Publier un article</h5>
                    <p>Par defaut, un article est en <strong>brouillon</strong> (non visible). Pour le publier :</p>
                    <ul>
                        <li>Cochez la case <em>Publie</em> dans le formulaire</li>
                        <li>La date de publication sera automatiquement remplie</li>
                    </ul>

                    <h5>Article vedette</h5>
                    <p>Vous pouvez mettre un article en avant avec le champ <em>Article vedette</em>. Il sera affiche en evidence sur la page Blog.</p>

                    <h5>Visibilite</h5>
                    <ul>
                        <li><strong>Public</strong> &mdash; Visible par tous les visiteurs</li>
                        <li><strong>Membres</strong> &mdash; Uniquement les utilisateurs connectes</li>
                        <li><strong>Admin</strong> &mdash; Uniquement les administrateurs</li>
                    </ul>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Ajoutez toujours une image mise en avant et un texte d'accroche. Vos articles seront plus attractifs dans les listes et sur les reseaux sociaux.
                    </div>
                </div>
            </div>
        </div>

        {# ── 2b. Editeur de contenu ── #}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-editor">
                    <i class="fas fa-pen-fancy me-2 text-primary"></i> Editeur de contenu
                </button>
            </h2>
            <div id="guide-editor" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Presentation</h5>
                    <p>L'editeur visuel vous permet de rediger vos articles, pages et fiches sans toucher au code HTML. Il est utilise partout ou vous voyez une barre d'outils de mise en forme.</p>

                    <h5>Mise en forme du texte</h5>
                    <p>La barre d'outils propose les options suivantes :</p>
                    <ul>
                        <li><strong>Gras</strong>, <strong>Italique</strong>, <strong>Souligne</strong>, <strong>Barre</strong> &mdash; Formatage de base</li>
                        <li><strong>Surlignage</strong> &mdash; Met en evidence un mot ou une phrase avec un fond colore</li>
                        <li><strong>Titres H2, H3, H4</strong> &mdash; Structurez votre contenu avec des sous-titres. Utilisez H2 pour les sections principales, H3 pour les sous-sections</li>
                        <li><strong>Alignement</strong> &mdash; Gauche, centre ou droite</li>
                        <li><strong>Listes</strong> &mdash; A puces ou numerotees</li>
                    </ul>

                    <h5>Blocs speciaux</h5>
                    <ul>
                        <li><strong>Citation</strong> &mdash; Met en valeur une phrase importante dans un encadre</li>
                        <li><strong>Code</strong> &mdash; Bloc de code avec coloration syntaxique</li>
                        <li><strong>Separateur</strong> &mdash; Ligne horizontale entre deux sections</li>
                        <li><strong>Encart (Callout)</strong> &mdash; Encadre colore pour attirer l'attention. 4 types : <em>Info</em> (bleu), <em>Succes</em> (vert), <em>Attention</em> (orange), <em>Danger</em> (rouge). Cliquez sur l'icone pour changer le type</li>
                        <li><strong>Colonnes</strong> &mdash; Disposez votre contenu sur 2 colonnes cote a cote (sur mobile, les colonnes s'empilent automatiquement)</li>
                        <li><strong>Tableaux</strong> &mdash; Inserez un tableau via la barre d'outils ou la commande rapide <code>/tableau</code></li>
                    </ul>

                    <h5>Medias</h5>
                    <ul>
                        <li><strong>Images</strong> &mdash; Inserez une image depuis votre bibliotheque de medias. Le bouton ouvre un panneau de selection</li>
                        <li><strong>Documents</strong> &mdash; Inserez un fichier telechargeable (PDF, DOCX, XLSX, ZIP...). Le bouton <i class="fas fa-file-arrow-down"></i> ouvre la bibliotheque de documents avec une zone d'upload integree. Le fichier apparait sous forme de carte cliquable dans votre contenu</li>
                        <li><strong>Videos YouTube</strong> &mdash; Collez l'URL d'une video pour l'integrer directement</li>
                        <li><strong>Liens</strong> &mdash; Selectionnez du texte puis cliquez sur l'icone lien pour ajouter une URL</li>
                    </ul>

                    <h5>Commande rapide /</h5>
                    <p>Tapez <strong>/</strong> dans l'editeur pour ouvrir un menu contextuel. Vous pouvez inserer rapidement un titre, une image, un document, une video, une citation, un encart ou des colonnes sans utiliser la barre d'outils.</p>

                    <h5>Sauvegarde automatique</h5>
                    <p>L'editeur <strong>sauvegarde automatiquement</strong> votre brouillon toutes les 30 secondes dans votre navigateur. Si vous quittez la page sans sauvegarder, votre travail sera propose a la restauration a votre prochaine visite.</p>
                    <p>Vous pouvez egalement sauvegarder manuellement a tout moment avec <strong>Ctrl+S</strong> (Windows/Linux) ou <strong>Cmd+S</strong> (Mac).</p>

                    <h5>Compteur de caracteres</h5>
                    <p>En bas de l'editeur, un compteur affiche le nombre de <strong>caracteres</strong> et de <strong>mots</strong>. Utile pour vos descriptions SEO et pour calibrer la longueur de vos textes.</p>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Utilisez la commande <strong>/</strong> pour gagner du temps ! Tapez / puis les premieres lettres de ce que vous cherchez (ex : /image, /citation, /colonnes).
                    </div>
                </div>
            </div>
        </div>

        {# ── 3. Pages ── #}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-pages">
                    <i class="fas fa-file-lines me-2 text-primary"></i> Gerer vos pages
                </button>
            </h2>
            <div id="guide-pages" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Pages systeme vs pages personnalisees</h5>
                    <p>Il existe deux types de pages :</p>
                    <ul>
                        <li><strong>Pages systeme</strong> (mentions legales, politique de confidentialite) &mdash; Elles ne peuvent pas etre supprimees, mais leur contenu est modifiable.</li>
                        <li><strong>Pages personnalisees</strong> &mdash; Creez autant de pages que vous le souhaitez (A propos, Nos services, etc.).</li>
                    </ul>

                    <h5>Mise en page</h5>
                    <p>Chaque page peut utiliser un modele de mise en page different :</p>
                    <ul>
                        <li><strong>Standard</strong> &mdash; Contenu pleine largeur, ideal pour du texte</li>
                        <li><strong>Avec barre laterale</strong> &mdash; Contenu + sidebar widgets</li>
                        <li><strong>Landing</strong> &mdash; Page d'atterrissage sans elements de navigation superflus</li>
                    </ul>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> N'oubliez pas d'ajouter vos pages personnalisees dans la navigation via <em>Reglages &rarr; Navigation</em>.
                    </div>
                </div>
            </div>
        </div>

        {# ── 4. Tags & Familles ── #}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-tags">
                    <i class="fas fa-tags me-2 text-primary"></i> Tags &amp; familles
                </button>
            </h2>
            <div id="guide-tags" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Qu'est-ce qu'un tag ?</h5>
                    <p>Un <strong>tag</strong> est un mot-cle attache a un contenu. Il sert a la classification fine et genere une page automatique <code>/tag/{slug}</code> listant tous les contenus associes.</p>
                    <p>Les tags sont <strong>partages entre les modules</strong> : un meme tag peut etre utilise par des articles, des fiches de l'annuaire, des produits du catalogue ou des realisations du portfolio.</p>

                    <h5>Familles de tags : pour quoi faire ?</h5>
                    <p>Une <strong>famille de tags</strong> regroupe des tags partageant un meme theme (Villes, Metiers, Niveaux, Marques...). Chaque famille genere automatiquement un <strong>filtre dedie</strong> sur les pages qui exposent les tags.</p>
                    <p>Exemple concret pour un annuaire :</p>
                    <ul>
                        <li>Creez une famille <em>Villes</em> avec les tags <em>Paris</em>, <em>Lyon</em>, <em>Marseille</em></li>
                        <li>Creez une famille <em>Metiers</em> avec les tags <em>Plombier</em>, <em>Electricien</em>, <em>Macon</em></li>
                        <li>Tagguez vos fiches d'annuaire</li>
                        <li>Sur la page <code>/annuaire</code>, deux bandeaux de filtres apparaissent automatiquement : « Villes » et « Metiers »</li>
                        <li>Les filtres se cumulent : un visiteur peut chercher « Plombier a Paris »</li>
                    </ul>

                    <h5>Comment creer une famille</h5>
                    <ol>
                        <li>Menu <em>Contenu &rarr; Classification &rarr; Familles de tags</em></li>
                        <li>Cliquez sur <strong>Creer</strong>, donnez un nom (ex: « Villes ») et une couleur</li>
                        <li>L'ordre d'affichage decide de la position des filtres front (plus petit = plus haut)</li>
                    </ol>

                    <h5>Comment rattacher les tags</h5>
                    <ol>
                        <li>Menu <em>Contenu &rarr; Classification &rarr; Tags</em></li>
                        <li>Editez un tag existant ou creez-en un nouveau</li>
                        <li>Selectionnez la famille dans le champ <em>Famille</em> (optionnel)</li>
                    </ol>
                    <p>Le rattachement reste <strong>optionnel</strong> : un tag sans famille fonctionne comme avant (sujets blog, page tag classique).</p>

                    <h5>Cote front</h5>
                    <ul>
                        <li><strong>Annuaire</strong> : filtres par famille generes automatiquement, cumulables avec la recherche et la categorie.</li>
                        <li><strong>Sidebar blog</strong> : le nuage de tags se regroupe par famille des qu'au moins un tag a une famille.</li>
                        <li><strong>Page <code>/tag/{slug}</code></strong> : affiche par sections les contenus associes (articles + membres + produits...) selon les modules actifs.</li>
                    </ul>

                    <div class="bw-guide-tip">
                        <strong>Astuce :</strong> Pour un nouveau cas d'usage (filtrer le catalogue par marque, le blog par niveau...), creez une famille et tagguez. Aucun developpement specifique n'est necessaire — les filtres apparaissent automatiquement.
                    </div>
                    <div class="bw-guide-tip">
                        <strong>Bonne pratique :</strong> Limitez-vous a 2-3 familles par module pour rester lisible. Trop de filtres tuent le filtre.
                    </div>
                </div>
            </div>
        </div>

        {# ── 5. Medias ── #}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-medias">
                    <i class="fas fa-photo-video me-2 text-primary"></i> Medias et images
                </button>
            </h2>
            <div id="guide-medias" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Formats acceptes</h5>
                    <p>Vous pouvez telecharger des images aux formats <strong>JPG</strong>, <strong>PNG</strong>, <strong>GIF</strong> et <strong>WebP</strong>. Taille maximale : 25 Mo.</p>

                    <h5>Conversion WebP automatique</h5>
                    <p>Chaque image uploadee est automatiquement convertie en <strong>WebP</strong>, un format moderne plus leger. Vos pages se chargent plus vite, et votre SEO s'ameliore.</p>

                    <h5>Images responsives</h5>
                    <p>BlogWeb genere automatiquement <strong>3 tailles</strong> de chaque image (480px, 800px, 1200px) pour s'adapter a tous les ecrans (mobile, tablette, ordinateur).</p>

                    <h5>Texte alternatif (alt)</h5>
                    <p>Le champ <em>Nom</em> d'un media sert aussi de <strong>texte alternatif</strong>. C'est important pour :</p>
                    <ul>
                        <li>L'<strong>accessibilite</strong> (lecteurs d'ecran pour malvoyants)</li>
                        <li>Le <strong>SEO</strong> (Google comprend le contenu de vos images)</li>
                    </ul>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Donnez des noms descriptifs a vos images. Preferez "equipe-reunion-bureau" a "IMG_20240315.jpg".
                    </div>
                </div>
            </div>
        </div>

        {# ── 5b. Documents ── #}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-documents">
                    <i class="fas fa-file-arrow-down me-2 text-primary"></i> Documents et fichiers telechargeables
                </button>
            </h2>
            <div id="guide-documents" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>A quoi servent les documents ?</h5>
                    <p>Le module <strong>Documents</strong> vous permet d'integrer des fichiers telechargeables (PDF, Word, Excel, archives...) directement dans vos articles et pages. Ils apparaissent sous forme de <strong>carte cliquable</strong> avec icone, nom et taille &mdash; bien plus visible qu'un simple lien texte.</p>

                    <h5>Formats acceptes</h5>
                    <p>Taille maximale : <strong>25 Mo</strong>. Formats supportes :</p>
                    <ul>
                        <li><strong>PDF</strong> &mdash; Documents portables (plaquettes, CV, factures...)</li>
                        <li><strong>Word</strong> (.doc, .docx) et <strong>OpenDocument Texte</strong> (.odt)</li>
                        <li><strong>Excel</strong> (.xls, .xlsx) et <strong>OpenDocument Calc</strong> (.ods, .csv)</li>
                        <li><strong>PowerPoint</strong> (.ppt, .pptx) et <strong>OpenDocument Impress</strong> (.odp)</li>
                        <li><strong>Archives</strong> (.zip, .rar, .7z)</li>
                        <li><strong>Texte brut</strong> (.txt)</li>
                    </ul>

                    <h5>Deux facons d'ajouter un document</h5>
                    <p><strong>Methode 1 &mdash; Bibliotheque centrale</strong></p>
                    <ol>
                        <li>Menu <em>Contenu &rarr; Documents</em></li>
                        <li>Cliquez sur <strong>Ajouter un document</strong>, donnez-lui un nom descriptif et uploadez le fichier</li>
                        <li>Vous pouvez ensuite l'inserer dans plusieurs articles ou pages depuis l'editeur</li>
                    </ol>

                    <p><strong>Methode 2 &mdash; Directement depuis l'editeur</strong></p>
                    <ol>
                        <li>Dans un article ou une page, placez le curseur la ou vous voulez inserer le document</li>
                        <li>Cliquez sur l'icone <i class="fas fa-file-arrow-down"></i> de la barre d'outils (ou tapez <code>/document</code>)</li>
                        <li>Dans la modale, choisissez un document existant <strong>ou</strong> uploadez un nouveau fichier directement &mdash; il sera automatiquement insere et ajoute a votre bibliotheque</li>
                    </ol>

                    <h5>Le nom affiche dans la carte</h5>
                    <p>Le champ <em>Nom</em> que vous saisissez est utilise comme :</p>
                    <ul>
                        <li>Le <strong>titre visible</strong> dans la carte cote front</li>
                        <li>Le <strong>nom du fichier telecharge</strong> par vos visiteurs (attribut <code>download</code>)</li>
                    </ul>
                    <p>Preferez "Plaquette commerciale 2026" plutot que "doc-final-v3.pdf" : c'est ce que verront vos clients.</p>

                    <h5>Cote front</h5>
                    <p>La carte affiche automatiquement :</p>
                    <ul>
                        <li>Une <strong>icone selon le type</strong> de fichier (PDF, Word, Excel, ZIP...)</li>
                        <li>Le <strong>nom</strong> que vous avez saisi</li>
                        <li>L'<strong>extension</strong> et la <strong>taille</strong> (ex: PDF · 1,2 Mo)</li>
                        <li>Une <strong>icone de telechargement</strong> a droite</li>
                    </ul>
                    <p>Le clic ouvre le fichier dans un nouvel onglet (ou propose le telechargement selon le type).</p>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Pour les fichiers volumineux (videos, gros datasets), preferez un hebergeur dedie (YouTube, WeTransfer, Google Drive) avec un lien externe. Le module Documents est optimise pour les fichiers jusqu'a 25 Mo.
                    </div>
                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Bonne pratique :</strong> Si vous mettez a jour un document (ex: nouveau tarif), modifiez-le directement dans la bibliotheque (l'URL reste la meme) plutot que de creer un nouveau document &mdash; tous les articles qui l'incluent seront automatiquement a jour.
                    </div>
                </div>
            </div>
        </div>

        {# ── 5. Navigation ── #}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-navigation">
                    <i class="fas fa-bars me-2 text-primary"></i> Navigation et menus
                </button>
            </h2>
            <div id="guide-navigation" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Le gestionnaire de menus</h5>
                    <p>Accessible via <strong>Reglages &rarr; Navigation</strong>, il vous permet d'organiser vos menus par <strong>glisser-deposer</strong>.</p>

                    <h5>Les emplacements</h5>
                    <p>Votre site a 3 zones de navigation :</p>
                    <ul>
                        <li><strong>Header</strong> &mdash; Le menu principal en haut de page</li>
                        <li><strong>Footer navigation</strong> &mdash; Liens utiles en bas de page</li>
                        <li><strong>Footer legal</strong> &mdash; Mentions legales, CGV, politique de confidentialite</li>
                    </ul>

                    <h5>Types de liens</h5>
                    <p>Vous pouvez ajouter des liens vers :</p>
                    <ul>
                        <li>Des <strong>pages</strong> de votre site</li>
                        <li>Des <strong>categories</strong> d'articles</li>
                        <li>Des <strong>modules</strong> (blog, services, catalogue...)</li>
                        <li>Des <strong>URLs externes</strong></li>
                    </ul>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Gardez votre menu header court (5-7 liens maximum). Trop de liens perturbent la navigation.
                    </div>
                </div>
            </div>
        </div>

        {# ── 6. SEO ── #}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-seo">
                    <i class="fas fa-search me-2 text-primary"></i> SEO et referencement
                </button>
            </h2>
            <div id="guide-seo" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Qu'est-ce que le SEO ?</h5>
                    <p>Le SEO (Search Engine Optimization) designe l'ensemble des techniques pour que votre site apparaisse dans les <strong>premiers resultats de Google</strong>.</p>

                    <h5>Les champs SEO</h5>
                    <p>Chaque article, page et categorie dispose d'un panneau <em>SEO</em> avec :</p>
                    <ul>
                        <li><strong>Titre SEO</strong> (max 70 caracteres) &mdash; Le titre affiche dans Google. S'il est vide, le titre de votre contenu est utilise.</li>
                        <li><strong>Description SEO</strong> (max 160 caracteres) &mdash; Le texte sous le titre dans Google. C'est ce qui donne envie de cliquer !</li>
                        <li><strong>Mots-cles</strong> &mdash; Les termes principaux de votre contenu, separes par des virgules.</li>
                        <li><strong>No Index</strong> &mdash; Cochez si vous ne voulez pas que cette page apparaisse dans Google (brouillons, pages privees).</li>
                        <li><strong>URL canonique</strong> &mdash; A remplir uniquement si le contenu existe aussi sur un autre site.</li>
                    </ul>

                    <h5>Ce que BlogWeb fait automatiquement</h5>
                    <ul>
                        <li>Generation du <strong>sitemap XML</strong> (plan du site pour Google)</li>
                        <li>Balises <strong>Open Graph</strong> pour les reseaux sociaux</li>
                        <li>Schema.org <strong>JSON-LD</strong> pour les extraits enrichis</li>
                        <li><strong>robots.txt</strong> optimise</li>
                        <li>Images <strong>WebP</strong> et <strong>lazy-loading</strong> pour la vitesse</li>
                        <li><strong>Twitter Cards</strong> &mdash; generees automatiquement avec les memes donnees que l'Open Graph</li>
                    </ul>

                    <h5>Image Open Graph</h5>
                    <p>Configurez une image dediee dans <strong>Reglages &rarr; Identite</strong> (format recommande : 1200x630 px). Fallback automatique : image OG &rarr; image hero &rarr; logo.</p>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Remplissez les champs SEO de vos 10 pages les plus importantes. C'est le meilleur rapport effort/resultat pour votre referencement.
                    </div>
                </div>
            </div>
        </div>

        {# ── 7. FAQ ── #}
        {% if site is defined and site and 'faq' in site.enabledModules %}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-faq">
                    <i class="fas fa-circle-question me-2 text-primary"></i> FAQ (Foire aux questions)
                </button>
            </h2>
            <div id="guide-faq" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>A quoi sert le module FAQ ?</h5>
                    <p>Le module FAQ vous permet de creer une page de <strong>questions/reponses</strong> en accordeon sur votre site. C'est ideal pour rassurer vos visiteurs et ameliorer votre referencement (Google affiche parfois les FAQ directement dans les resultats).</p>

                    <h5>Categories (optionnelles)</h5>
                    <p>Vous pouvez organiser vos questions par categories. Dans <strong>Modules &rarr; FAQ &rarr; Categories</strong> :</p>
                    <ul>
                        <li>Creez des categories thematiques (ex : "Livraison", "Paiement", "Technique")</li>
                        <li>Ordonnez-les avec le champ <em>Ordre</em> (0 = en premier)</li>
                        <li>Activez ou desactivez-les a tout moment</li>
                    </ul>
                    <p>Si vous n'avez que quelques questions, <strong>pas besoin de categories</strong> : les questions s'afficheront dans un seul groupe.</p>

                    <h5>Creer une question</h5>
                    <p>Dans <strong>Modules &rarr; FAQ &rarr; Questions</strong>, cliquez sur <em>Creer</em> :</p>
                    <ul>
                        <li><strong>Question</strong> &mdash; Le texte affiche dans le titre de l'accordeon</li>
                        <li><strong>Reponse</strong> &mdash; Utilisez l'editeur visuel pour mettre en forme votre reponse (texte riche, liens, listes...)</li>
                        <li><strong>Categorie</strong> &mdash; Rattachez la question a une categorie (optionnel)</li>
                        <li><strong>Icone</strong> &mdash; Ajoutez une icone Bootstrap Icons (optionnel)</li>
                        <li><strong>Ordre</strong> &mdash; Position dans sa categorie (0 = en premier)</li>
                        <li><strong>Active</strong> &mdash; Desactivez une question sans la supprimer</li>
                    </ul>

                    <h5>Affichage sur le site</h5>
                    <p>La page <strong>/faq</strong> affiche toutes les questions actives en accordeon, groupees par categorie. Le schema <strong>FAQ structuree</strong> (schema.org) est genere automatiquement pour le SEO.</p>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Redigez vos questions du point de vue du client ("Comment puis-je..." plutot que "Nous proposons..."). Google valorise les FAQ qui repondent aux vraies questions des internautes.
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {# ── 8. Portfolio ── #}
        {% if site is defined and site and 'portfolio' in site.enabledModules %}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-portfolio">
                    <i class="fas fa-images me-2 text-primary"></i> Portfolio (Realisations)
                </button>
            </h2>
            <div id="guide-portfolio" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>A quoi sert le module Portfolio ?</h5>
                    <p>Le module Portfolio vous permet de presenter vos <strong>realisations</strong>, projets clients ou travaux dans une grille visuelle avec pages de detail. Ideal pour montrer votre savoir-faire a vos prospects.</p>

                    <h5>Categories</h5>
                    <p>Dans <strong>Modules &rarr; Portfolio &rarr; Categories</strong>, organisez vos realisations par type de projet :</p>
                    <ul>
                        <li>Creez des categories (ex : "Sites web", "Applications", "Design graphique")</li>
                        <li>Ajoutez une icone Bootstrap Icons pour un rendu visuel dans les filtres</li>
                        <li>Ordonnez-les avec le champ <em>Ordre</em></li>
                    </ul>
                    <p>Vos visiteurs pourront <strong>filtrer par categorie</strong> sur la page /realisations.</p>

                    <h5>Creer une realisation</h5>
                    <p>Dans <strong>Modules &rarr; Portfolio &rarr; Realisations</strong>, cliquez sur <em>Creer</em> :</p>

                    <p><strong>Contenu :</strong></p>
                    <ul>
                        <li><strong>Titre</strong> &mdash; Nom du projet, affiche dans la grille et en titre de page</li>
                        <li><strong>Description courte</strong> &mdash; Resume de 2-3 lignes affiche dans la grille</li>
                        <li><strong>Contenu detaille</strong> &mdash; Description complete du projet (editeur visuel)</li>
                        <li><strong>Image principale</strong> &mdash; Image de couverture, format 4:3 recommande</li>
                    </ul>

                    <p><strong>Projet :</strong></p>
                    <ul>
                        <li><strong>Client</strong> &mdash; Nom du client ou de l'entreprise</li>
                        <li><strong>Date de realisation</strong> &mdash; Date de livraison du projet</li>
                        <li><strong>Lien du projet</strong> &mdash; URL complete vers le projet en ligne (ex : https://www.client.fr). Un bouton "Voir le projet" sera affiche sur la page de detail</li>
                        <li><strong>Tags</strong> &mdash; Technologies ou competences utilisees. Les tags sont partages avec le blog, l'annuaire et le catalogue (voir section <em>Tags &amp; familles</em>)</li>
                    </ul>

                    <p><strong>Parametres :</strong></p>
                    <ul>
                        <li><strong>Categorie</strong> &mdash; Permet aux visiteurs de filtrer par type</li>
                        <li><strong>Mis en avant</strong> &mdash; Les realisations mises en avant peuvent etre affichees sur la page d'accueil</li>
                        <li><strong>Active</strong> &mdash; Masquer sans supprimer</li>
                    </ul>

                    <h5>Affichage sur le site</h5>
                    <ul>
                        <li><strong>/realisations</strong> &mdash; Grille de toutes les realisations avec filtres par categorie</li>
                        <li><strong>/realisation/mon-projet</strong> &mdash; Page de detail avec image, description, infos projet, tags et bouton lien</li>
                    </ul>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Privilegiez des images de qualite et un format homogene (4:3). Remplissez les champs SEO pour chaque realisation importante — cela aide votre site a apparaitre quand un prospect cherche vos competences.
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {# ── 8b. Services ── #}
        {% if site.hasModule('services') %}
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guideServices">
              <i class="fas fa-concierge-bell me-2"></i> Services et prestations
            </button>
          </h2>
          <div id="guideServices" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
            <div class="accordion-body">
              <h5>Fiches de services</h5>
              <p>Le module Services permet de presenter vos prestations sous forme de grille sur la page d'accueil et en page dediee.</p>
              <ul>
                <li><strong>Description courte</strong> — affichee dans la grille des services</li>
                <li><strong>Contenu detaille</strong> — page de detail optionnelle (editeur visuel avec commande <code>/</code>)</li>
                <li><strong>Icone</strong> — classe Bootstrap Icons (ex: <code>bi-rocket</code>)</li>
                <li><strong>Lien</strong> — vers une page du site, un lien externe, ou la page de detail auto-generee</li>
                <li><strong>Ordre</strong> — position dans la grille (0 = premier)</li>
              </ul>
            </div>
          </div>
        </div>
        {% endif %}

        {# ── 8c. Catalogue ── #}
        {% if site.hasModule('catalogue') %}
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guideCatalogue">
              <i class="fas fa-store me-2"></i> Catalogue et produits
            </button>
          </h2>
          <div id="guideCatalogue" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
            <div class="accordion-body">
              <h5>Fiches produits</h5>
              <p>Creez des fiches pour vos produits ou prestations avec tarification, variantes et galerie photos.</p>
              <ul>
                <li><strong>Prix HT/TTC</strong> — le mode d'affichage se configure dans Reglages > Identite > Catalogue</li>
                <li><strong>Variantes</strong> — taille, duree, formule... chaque variante peut avoir son propre prix</li>
                <li><strong>Galerie</strong> — ajoutez plusieurs photos par produit</li>
                <li><strong>Disponibilite</strong> — disponible, indisponible ou sur devis</li>
                <li><strong>Reservation</strong> — lien vers Calendly, Cal.com ou tout service de prise de rendez-vous</li>
                <li><strong>Produits lies</strong> — suggestions "Vous aimerez aussi" (auto si vide)</li>
              </ul>
              <h5>Categories produits</h5>
              <p>Organisez vos produits par categorie pour faciliter la navigation dans le catalogue.</p>
            </div>
          </div>
        </div>
        {% endif %}

        {# ── 8d. Evenements ── #}
        {% if site.hasModule('events') %}
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guideEvents">
              <i class="fas fa-calendar-alt me-2"></i> Evenements
            </button>
          </h2>
          <div id="guideEvents" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
            <div class="accordion-body">
              <h5>Gerer vos evenements</h5>
              <p>Publiez vos evenements a venir avec date, lieu et description detaillee.</p>
              <ul>
                <li><strong>Date et heure</strong> — date de debut obligatoire, date de fin optionnelle</li>
                <li><strong>Lieu</strong> — adresse ou nom du lieu</li>
                <li><strong>Evenement vedette</strong> — mis en avant sur la page d'accueil</li>
                <li><strong>Produit lie</strong> — associez un produit du catalogue pour permettre l'inscription/achat direct</li>
                <li><strong>Description</strong> — editeur visuel complet (commande <code>/</code> pour les blocs)</li>
              </ul>
              <p>Les evenements passes sont automatiquement archives et affiches separement.</p>
            </div>
          </div>
        </div>
        {% endif %}

        {# ── 8e. E-commerce ── #}
        {% if site.hasModule('ecommerce') %}
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guideEcommerce">
              <i class="fas fa-shopping-cart me-2"></i> E-commerce et commandes
            </button>
          </h2>
          <div id="guideEcommerce" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
            <div class="accordion-body">
              <h5>Panier et commandes</h5>
              <p>Le module e-commerce ajoute le panier, le tunnel de commande et le paiement Stripe.</p>
              <ul>
                <li><strong>Panier</strong> — les visiteurs ajoutent des produits et variantes au panier</li>
                <li><strong>Commandes</strong> — consultables dans Modules > Commandes (lecture seule)</li>
                <li><strong>Paiement Stripe</strong> — configurez vos cles dans Reglages > Identite > Paiement Stripe</li>
                <li><strong>Statuts</strong> — en attente, payee, annulee, remboursee</li>
              </ul>
              <h5>Configuration Stripe</h5>
              <p>Trois cles a renseigner dans Reglages > Identite :</p>
              <ul>
                <li><strong>Cle publique</strong> — commence par <code>pk_test_</code> ou <code>pk_live_</code></li>
                <li><strong>Cle secrete</strong> — commence par <code>sk_test_</code> ou <code>sk_live_</code></li>
                <li><strong>Secret webhook</strong> — commence par <code>whsec_</code></li>
              </ul>
            </div>
          </div>
        </div>
        {% endif %}

        {# ── 9. Personnalisation ── #}
        {% if is_granted('ROLE_FREELANCE') %}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-theme">
                    <i class="fas fa-palette me-2 text-primary"></i> Personnalisation et themes
                </button>
            </h2>
            <div id="guide-theme" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Changer de theme</h5>
                    <p>Dans <strong>Reglages &rarr; Apparence &rarr; Catalogue de themes</strong>, parcourez les themes disponibles et previsualisez-les avant de les activer.</p>

                    <h5>Personnaliser les couleurs et polices</h5>
                    <p>Dans <strong>Reglages &rarr; Apparence &rarr; Reglages du theme</strong>, modifiez :</p>
                    <ul>
                        <li><strong>Couleur principale</strong> &mdash; Boutons, liens, accents</li>
                        <li><strong>Couleur secondaire</strong> &mdash; Elements d'accompagnement</li>
                        <li><strong>Couleur d'accent</strong> &mdash; Details, badges, decorations</li>
                        <li><strong>Polices</strong> &mdash; 20 Google Fonts disponibles</li>
                    </ul>
                    <p>Si vous laissez un champ vide, la valeur par defaut du theme s'applique.</p>

                    <h5>Images du theme</h5>
                    <p>Gerez vos images hero, equipe, et galerie dans <strong>Reglages &rarr; Apparence &rarr; Images du theme</strong>.</p>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Changez les couleurs plutot que le theme entier. Vous gardez la structure tout en personnalisant l'identite visuelle.
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {# ── 8. Utilisateurs ── #}
        {% if is_granted('ROLE_ADMIN') %}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-users">
                    <i class="fas fa-users me-2 text-primary"></i> Utilisateurs et roles
                </button>
            </h2>
            <div id="guide-users" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Les roles</h5>
                    <p>Chaque utilisateur a un role qui determine ce qu'il peut faire :</p>
                    <table class="table table-sm" style="font-size: 0.85rem;">
                        <thead>
                            <tr>
                                <th>Role</th>
                                <th>Qui</th>
                                <th>Peut faire</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>Utilisateur</strong></td>
                                <td>Visiteur inscrit</td>
                                <td>Lire, commenter, gerer son profil</td>
                            </tr>
                            <tr>
                                <td><strong>Auteur</strong></td>
                                <td>Redacteur</td>
                                <td>Creer et editer des articles et pages</td>
                            </tr>
                            <tr>
                                <td><strong>Admin</strong></td>
                                <td>Administrateur</td>
                                <td>Gestion complete du site</td>
                            </tr>
                            <tr>
                                <td><strong>Freelance</strong></td>
                                <td>ROLE_FREELANCE</td>
                                <td>Themes, couleurs, polices + tout ce que fait Admin</td>
                            </tr>
                            <tr>
                                <td><strong>Super Admin</strong></td>
                                <td>ROLE_SUPER_ADMIN</td>
                                <td>Acces total : modules, infra, configuration avancee</td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="bw-guide-tip">
                        <i class="fas fa-lightbulb me-1 text-warning"></i>
                        <strong>Astuce :</strong> Creez un compte <em>Auteur</em> pour vos redacteurs. Ils pourront ecrire sans acceder aux reglages sensibles.
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {# ── 10b. Abonnes ── #}
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guideSubscribers">
                    <i class="fas fa-envelope me-2"></i> Abonnes et notifications
                </button>
            </h2>
            <div id="guideSubscribers" class="accordion-collapse collapse" data-bs-parent="#guideAccordion">
                <div class="accordion-body">
                    <h5>Systeme d'abonnement</h5>
                    <p>Les visiteurs peuvent s'abonner aux notifications par email <strong>sans creer de compte</strong>. Un simple formulaire avec leur email suffit.</p>
                    <ul>
                        <li><strong>Double opt-in</strong> — l'abonne recoit un email de confirmation avant d'etre actif</li>
                        <li><strong>Preferences</strong> — choix entre articles, evenements ou les deux</li>
                        <li><strong>Desinscription</strong> — lien en un clic dans chaque email de notification</li>
                        <li><strong>Gestion</strong> — l'abonne peut modifier ses preferences via un lien tokenise (sans connexion)</li>
                    </ul>
                    <h5>Dans l'admin</h5>
                    <p>Consultez et gerez vos abonnes dans <strong>Communaute &rarr; Abonnes</strong>. Vous pouvez desactiver un abonne sans le supprimer.</p>
                </div>
            </div>
        </div>

    </div>

</div>

<style>
    .bw-guide .accordion-item {
        border: 1px solid #e2e8f0;
        border-radius: 10px !important;
        margin-bottom: 0.5rem;
        overflow: hidden;
    }
    .bw-guide .accordion-button {
        font-weight: 600;
        font-size: 0.92rem;
        padding: 0.875rem 1.125rem;
        background: #fff;
    }
    .bw-guide .accordion-button:not(.collapsed) {
        background: #f8fafc;
        color: #1e293b;
        box-shadow: none;
    }
    .bw-guide .accordion-button:focus {
        box-shadow: none;
        border-color: #e2e8f0;
    }
    .bw-guide .accordion-body {
        font-size: 0.875rem;
        line-height: 1.65;
        color: #475569;
        padding: 1.25rem;
    }
    .bw-guide .accordion-body h5 {
        font-size: 0.92rem;
        font-weight: 600;
        color: #1e293b;
        margin: 1.25rem 0 0.5rem;
    }
    .bw-guide .accordion-body h5:first-child {
        margin-top: 0;
    }
    .bw-guide-tip {
        padding: 0.75rem 1rem;
        background: #fffbeb;
        border-left: 3px solid #f59e0b;
        border-radius: 0 8px 8px 0;
        margin: 1rem 0 0;
        font-size: 0.84rem;
    }
</style>
{% endblock %}