{% 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>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, 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. 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>

        {# ── 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 et le catalogue</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 %}